@extends('layouts/acc_layout')
@section('title', '| Budget')
@section('content')

<style>
    #viewBudgetForm select,
    #viewBudgetForm input {
        height: 30px;
        border-radius: 5px;
        cursor: pointer;
    }

    .disabled {
        pointer-events: none;
        cursor: default;
        opacity: 0.6;
    }

    #budgetViewTable>thead>tr>th {
        padding: 5px;
    }

    .form-group {
        color: black;
        font-size: 11px;
    }

    .form-control {
        padding: 5px;
        font-size: 11px;
    }

    .deleteContent {
        color: #222;
    }

    .approveContent {
        color: #222;
    }

</style>

@php
    $userId=Auth::user()->id;
    $userBranchId=Auth::user()->branchId;
@endphp

<div class="row">
    <div class="col-md-12">
        <div class="" style="">
            <div class="">
                <div class="panel panel-default" style="background-color:#708090;">
                    <div class="panel-heading" style="padding-bottom:0px">
                        <div class="panel-options">
                            <a href="{{ url('misYearlyBudget/add/') }}" class="btn btn-info pull-right addViewBtn"><i class="glyphicon glyphicon-plus-sign addIcon"></i>Add Budget</a>
                        </div>
                        <h3 style=" text-align: center; font-family: Antiqua; letter-spacing: 2px; color: white;">Budget Lists</h3>
                    </div>
                    <div class="panel-body panelBodyView">


                        <!-- Filtering Start-->
                        <div class="row">
                            <div class="col-md-12">
                                <div class="row">
                                    {!! Form::open(array('url' => 'misYearlyBudget/view/', 'role' => 'form', 'class'=>'form-horizontal form-groups', 'id' => 'viewBudgetForm', 'method'=>'get')) !!}
                                    
                                    {{-- // Projects  --}}
                                    <div class="col-md-2" id="projectDiv">
                                        <div class="form-group" style="font-size: 13px; color:#212F3C">
                                            {!! Form::label('projectId', 'Project:', ['class' => 'col-sm-12 control-label']) !!}
                                            <div class="col-sm-12">                                                
                                                {!! Form::select('projectId', $projects, null ,['id'=>'filProject','class'=>'form-control input-sm','autocomplete'=>'off']) !!}
                                                <p id='projectIdPVe' style="max-height:3px; color:red;"></p>
                                            </div>
                                        </div>
                                    </div>

                                    {{-- // Branches  --}}
                                    <div class="col-md-2" id="branchDiv">
                                        <div class="form-group" style="font-size: 13px; color:#212F3C">
                                            <div class="col-md-12">
                                                {!! Form::label('', 'Branch:', ['class' => 'control-label pull-left']) !!}
                                            </div>

                                            <div class="col-md-12">
                                                {!! Form::select('branchId', $branches, null ,['id'=>'filBranch','class'=>'form-control input-sm','autocomplete'=>'off']) !!}
                                                <p id='filBranchE' style="max-height:3px; color:red;"></p>
                                            </div>
                                        </div>
                                    </div>

                                    {{-- // Fiscal Years  --}}
                                    <div class="col-md-2" id="FiscalyearDiv">
                                        <div class="form-group" style="font-size: 13px; color:#212F3C">
                                            <div class="col-md-12">
                                                {!! Form::label('', 'Fiscal Year:', ['class' => 'control-label pull-left']) !!}
                                            </div>

                                            <div class="col-md-12">
                                                {!! Form::select('fiscalYearId', $fiscalYears, null ,['id'=>'filFiscalyear','class'=>'form-control input-sm','autocomplete'=>'off']) !!}
                                                <p id='filFiscalyearE' style="max-height:3px; color:red;"></p>
                                            </div>
                                        </div>
                                    </div>

                                    {{-- // Types  --}}
                                    <div class="col-md-2" id="TypeDiv">
                                        <div class="form-group" style="font-size: 13px; color:#212F3C">
                                            <div class="col-md-12">
                                                {!! Form::label('', 'Type:', ['class' => 'control-label pull-left']) !!}
                                            </div>

                                            <div class="col-md-12">
                                                {!! Form::select('typeId', array('all'=>'All') + $budgetTypes, null ,['id'=>'filType','class'=>'form-control input-sm','autocomplete'=>'off']) !!}
                                                <p id='filTypeE' style="max-height:3px; color:red;"></p>
                                            </div>
                                        </div>
                                    </div>


                                    <div class="col-md-1">
                                        <div class="form-group" style="">
                                            {!! Form::label('', '', ['class' => 'control-label col-sm-12']) !!}
                                            <div class="col-sm-12" style="padding-top: 13%;">
                                                {!! Form::submit('Search', ['id' => 'budgetSearchSubmit', 'class' => 'btn btn-primary btn-xs']); !!}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-2"></div>

                                    {!! Form::close() !!}

                                    <div class="col-md-10"></div>
                                </div>
                            </div>

                        </div>
                        <!-- filtering end-->

                        <div class="table-responsive">
                            <table class="table table-striped table-bordered dt-responsive nowrap" id="budgetViewTable" style="color:black; font-size: 11px;">
                                <thead>
                                    <tr>
                                        <th style="width:2%">SL#</th>
                                        <th style="width:15%;text-align: center;">Project</th>
                                        <th style="width:15%;text-align: center;">Branch</th>
                                        <th style="width:7%;text-align: center;">Fiscal Year</th>
                                        <th style="width:7%;text-align: center;">Budget Type</th>
                                        <th style="width:7%;text-align: center;">Status</th>
                                        <th style="width:5%" class="">Action</th>
                                    </tr>
                                    {{ csrf_field() }}
                                </thead>
                                <tbody>
                                    @php
                                        $pageNumber = (!empty($_GET['page'])) ? (int)$_GET['page'] : 1;                                    
                                        $no = ($pageNumber - 1) * 20;
                                    @endphp

                                    @if (count($budgets) == 0)
                                        <tr>
                                            <td colspan="10">No Budget Available In This Search Range</td>
                                        </tr>
                                    @else 

                                        @foreach($budgets as $key => $budget)
                                            
                                            <tr class="{{ $budget['ids'] }}">
                                                <td>{{ $loop->iteration }}</td> 
                                                <td style="text-align: left; padding-left: 5px;">{{ $projects[$budget['projectIdFk']]}}</td>
                                                <td style="text-align: left; padding-left: 5px;">{{ $branches[$budget['branchIdFk']] }}</td>
                                                <td> {{ $fiscalYears[$budget['fiscalYearIdFk']] }} </td>
                                                {{-- <td> {{ ucfirst($budgetType) }} </td> --}}
                                                <td> {{ ucfirst($budget['budgetType']) }} </td>

                                                <td>
                                                    @if ($budget['softDel'] == 1)
                                                        <i style="color:#F00" class="fa fa-dot-circle-o" aria-hidden="true"></i>
                                                    @else
                                                        <i style="color:#72A230 " class="fa fa-check" aria-hidden="true"></i>
                                                    @endif
                                                </td>

                                                <td class="text-center">
                                                    
                                                    {{-- budget details --}}
                                                    {{-- <a href="{{ url('misYearlyBudget/details/'.$budget['ids']) }}">
                                                        <span class="fa fa-eye"></span>
                                                    </a> --}}
                                                    {{-- <span class="fa fa-eye details" data-budgetids="{{ $budget['ids'] }}"></span> --}}

                                                    {{-- // VIEW DETAILS  --}}
                                                    <a href="./details" onclick="event.preventDefault();
                                                        document.getElementById('detailsform.{{ $key }}').submit();" title="View budget details">
                                                        <span class="fa fa-eye"></span>
                                                    </a>
                                                    
                                                    <form id="detailsform.{{ $key }}" action="./details" method="POST" style="display: none;">
                                                        {{ csrf_field() }}
                                                        <input type="hidden" name="budgetids" value="{{ $budget['ids'] }}" />
                                                        <input type="hidden" name="budgetType" value="{{ $budget['budgetType'] }}" />
                                                    </form>

                                                    &nbsp;

                                                    {{-- // EDIT  --}}
                                                    <a href="./edit" onclick="event.preventDefault();
                                                        document.getElementById('editform.{{ $key }}').submit();" title="edit budget">
                                                        <span class="glyphicon glyphicon-edit"></span>
                                                    </a>

                                                    <form id="editform.{{ $key }}" action="./edit" method="POST" style="display: none;">
                                                        {{ csrf_field() }}
                                                        <input type="hidden" name="budgetids" value="{{ $budget['ids'] }}" />
                                                        <input type="hidden" name="budgetType" value="{{ $budget['budgetType'] }}" />
                                                    </form>


                                                    
                                                    {{-- approve budget --}}
                                                    {{-- <a href="{{ url('showBudget/'.$budget->id) }}">
                                                        <span class="fa fa-eye"></span>
                                                    </a> --}}

                                                    {{-- edit budget --}}
                                                    {{-- <a href="{{ url('editBudget/'.$budget->id) }}">
                                                        <span class="glyphicon glyphicon-edit @if($budget->status == 1) disabled @endif"></span>
                                                    </a> --}}
                                                    &nbsp;

                                                    {{-- Delete budget --}}
                                                    {{-- <a href="javascript:;" class="delete-modal @if($budget->status == 1) disabled @endif" data-id="{{ $budget->id }}">
                                                        <span class="glyphicon glyphicon-trash"></span>
                                                    </a> --}}
                                                </td>
                                                
                                            </tr>
                                        @endforeach

                                    @endif
                                </tbody>
                            </table>
                            {{-- <div style="text-align:right;">
                                {{ $budgets->links() }}
                            </div> --}}

                        </div>

                        {{-- modal div --}}
                        <div id="myModal" class="modal fade" style="margin-top:3%">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h4 class="modal-title" style="clear:both"></h4>
                                    </div>
                                    <div class="modal-body">

                                        <div class="deleteContent" style="padding-bottom:20px;">
                                            <h4>You are about to delete this item. This procedure is irreversible !</h4>
                                            <h4>Do you want to proceed ?</h4>
                                            <span class="hidden id"></span>
                                            {{-- <span class="hidden vouchertypeid"></span> --}}
                                        </div>
                                        <div class="modal-footer">
                                            <p id="MSGE" class="pull-left" style="color:red"></p>
                                            <p id="MSGS" class="pull-left" style="color:green"></p>
                                            {!! Form::button('<span id=""></span>', ['class' => 'btn actionBtn', 'id' => 'footer_action_button'] ) !!}
                                            {!! Form::button('<span id=""></span>', ['class' => 'btn actionBtn', 'data-dismiss' => 'modal', 'id' => 'footer_action_button2'] ) !!}
                                            {!! Form::button('<span id=""> Close</span>',['class' => 'btn btn-warning', 'data-dismiss' => 'modal' , 'id' => 'footer_action_button_dismis'] ) !!}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- budget approve modal --}}


                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    function pad(str, max) {
        str = str.toString();
        return str.length < max ? pad("0" + str, max) : str;
    }

</script>
<script type="text/javascript">
    $(document).ready(function() {

        // $(".details").click(function(){
        //     let budgetids = {'budgetids' : $(this).data("budgetids") };
            
        //     $.ajax({
        //         type: 'post',
        //         url: './details',
        //         data: budgetids,
        //         dataType: 'json',
        //         success: function( _response ){
        //             console.log(_response);
        //             window.location.href = '{{url('showDetails/')}}';
        //         },
        //         error: function( _response ){
        //             console.log("errors._response");
        //         }
        //     });           
        // });


        
        $(document).on('click', '.delete-modal', function() {

            $('#MSGE').empty();
            $('#MSGS').empty();
            $('#footer_action_button2').text(" Yes");
            $('#footer_action_button2').removeClass('glyphicon glyphicon-check');
            $('#footer_action_button_dismis').text(" No");
            $('#footer_action_button_dismis').removeClass('glyphicon glyphicon-remove');
            $('.actionBtn').removeClass('edit');
            $('.actionBtn').removeClass('btn-success');
            $('.actionBtn').addClass('btn-danger');
            $('.actionBtn').addClass('delete');
            $('.modal-title').text('Delete Budget');
            $('.modal-header').css({
                "background-color": "black"
                , "color": "white"
                , "padding": "10px"
            });
            $('.modal-dialog').css('width', '30%');
            $('.id').text($(this).data('id'));
            $('.deleteContent').show();
            $('.form-horizontal').hide();
            $('#footer_action_button2').show();
            $('#footer_action_button').hide();
            $('#myModal').modal('show');
        });


        $('.modal-footer').on('click', '.delete', function() {

            var _token = $('input[name=_token]').val();
            var id = $('.id').text();

            $.ajax({
                type: 'post'
                , url: './deleteBudgetItem'
                , data: {
                    '_token': _token
                    , 'id': id
                },

                success: function(data) {
                    alert(data);
                    location.reload();
                }
                , error: function(data) {
                    alert('Error');
                }
            });

        });



    });

</script>

@endsection