@extends('admin.layouts.main')
@section('title')
    {{ trans('finance.budget_request') }}
@endsection
@section('content')
<main>
    <loading :active.sync="isLoading"></loading>
    <div class="two-col">

        @include("admin.common.sidebar")

        <div class="right-sec" v-cloak>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="javascript:void(0)">{{ @trans('finance.finance_reports') }}</a></li>
                    <li class="breadcrumb-item active" aria-current="page">{{ @trans('finance.budget_request') }}</li>
                </ol>
            </nav>
            <div class="bg-white profile-header">
                <div class="top-bar d-flex align-items-center border-bottom">
                    <h2>{{ @trans('finance.budget_request') }}</h2>
                    <div class="right-table-container d-md-flex align-items-center">

						<a v-if="selected_budget.length" href="javascript:void(0)" class="btn btn-em" @click="confirmMultiple">Mark as Paid</a>

                        <a href="javascript:void(0)" class="btn btn-em btn-borsdered-primary d-inline-flex align-items-center" data-toggle="modal"
                            @click="showFilterModal">
                            <img src="{{ asset('img/admin/ic_filter_edit.svg') }}" alt="" class="ic mr-1 orge" v-if="showEditFilterIcon">
                            <img src="{{ asset('img/admin/ic_filter.svg') }}" alt="" class="ic mr-1 orge" v-else>
                            Filter
                        </a>

                        <button class="btn btn-em scrollTableLeft pl-2 pr-2 mr-1" title="Scoll Left"><i class="material-icons">chevron_left</i></button>
						<button class="btn btn-em scrollTableRight pl-2 pr-2" title="Scoll Right"><i class="material-icons">chevron_right</i></button>

                    </div>
                </div>
            </div>
            <div class="table-wrapper">

                <div class="table-top-panel d-flex align-items-center">
                    <div class="form-group search-input float-left mb-0">

                    </div>
                    <div class="d-flex align-items-center mx-auto">
                        <div class="form-group select btm-arrow mb-0 d-flex without-label align-items-center" v-if="items.length">
                            <label style="white-space: nowrap;"
                                class="mb-0 gray">{{ @trans('user.record_per_page') }}</label>
                            <select class="form-control" id="per_page" v-model="per_page" @input="perPage">
                                <option value="25">25 </option>
                                <option value="50">50</option>
                                <option value="100">100</option>
                            </select>
                        </div>
                        <span>Total @{{ total }}</span>
                    </div>
                    <div class="pagination d-flex justify-content-center ml-auto" v-if="items.length">
                        @include('admin.common.paginate_js')
                    </div>
                </div>


                <div class="table-data" v-if="items.length > 0">
                    <div class="table-responsive table-checkable">
                        <table class="table" id="mtcTable">
                            <thead>
                                <tr>
                                    <th>
                                        <div class="form-group mb-0">
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input budget-custom-all-checkbox" id="selectAll"
                                                    @click="selectAll">
                                                <label class="custom-control-label" for="selectAll"></label>
                                            </div>
                                        </div>
                                    </th>
									<th style="min-width: 75px;">{{ @trans('budget_request.br_id') }}<a href="javascript:void(0)" :class="classSort('id')" @click="sort('id')"></a></th>
									<th style="min-width: 200px;">{{ @trans('budget_request.project_name') }}</th>
									<th style="min-width: 200px;">{{ @trans('budget_request.title') }}<a href="javascript:void(0)" :class="classSort('title')" @click="sort('title')"></a></th>
									<th>{{ @trans('budget_request.type') }}<a href="javascript:void(0)" :class="classSort('budget_type')" @click="sort('budget_type')"></a></th>
									<th>{{ @trans('budget_request.amount') }}</th>
									<th>{{ @trans('budget_request.created_by') }}</th>
									<th>{{ @trans('budget_request.created_on') }}<a href="javascript:void(0)" :class="classSort('created_at')" @click="sort('created_at')"></a></th>
									<th>{{ @trans('budget_request.fullfill_by_date') }}<a href="javascript:void(0)" :class="classSort('due_date')" @click="sort('due_date')"></a></th>
									<th>{{ @trans('budget_request.responded_on') }}</th>
									<th>{{ @trans('budget_request.responded_by') }}</th>
									<th>{{ @trans('budget_request.status') }}<a href="javascript:void(0)" :class="classSort('status')" @click="sort('status')"></a></th>
									<th>{{ @trans('budget_request.process_status') }}<a href="javascript:void(0)" :class="classSort('process_status')" @click="sort('process_status')"></a></th>
									<th>{{ @trans('budget_request.action') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(item, key) in items" :key="key">
                                    <td>
                                        <div class="form-group mb-0">
                                            <div class="custom-control custom-checkbox" v-if="item.status == 'approved' && item.process_status == 'unpaid'">
                                                <input  type="checkbox" class="custom-control-input budget-custom-checkbox" :id="item.id" v-model="selected_budget" :value="item.id">
                                                <label class="custom-control-label" :for="item.id"></label>
                                            </div>
                                        </div>
                                    </td>
                                    <td style="min-width: 20px;">@{{item.serial_number}}</td>
									<td style="min-width: 200px;">@{{item.project_name}}</td>
									<td style="min-width: 200px;">
                                        <a :href="'{{url(Session::get('panel').'/projects/details/')}}/'+ item.project_id+'{{ '/budget-requests/details/' }}'+ item.id" title="View" target="_blank"
                                        class="d-inline-block text-underlined">
                                            @{{item.title}}
                                        </a>
                                    </td>
									<td>@{{item.budget_type_formatted}}</td>
									<td>@{{item.total_amount_formatted}}</td>
									<td>
                                        <div class="media align-items-center">
                                            <span class="rounded-circle orange-bg pro-icon mr-1">@{{ item.owner.full_name | strIcon }}</span>
                                            <div class="media-body"><p class="m-0 xs-font">@{{item.owner.full_name}}</p></div>
                                        </div>
                                    </td>
									<td>@{{item.created_at_formatted}}</td>
									<td>@{{item.due_date_formatted}}</td>

									<td v-if="item.status == 'rejected'">@{{item.rejection_date_formatted}}</td>
                                    <td v-else-if="item.status == 'approved'">@{{item.approved_on_formatted}}</td>
                                    <td v-else>-</td>

									<td v-if="item.responded_by_user && item.responded_by_user.full_name && item.status != 'pending'">
                                        @{{item.responded_by_user.full_name}}
                                    </td>
                                    <td v-else>-</td>

									<td>@{{item.status_formatted}}</td>

                                    <td v-if="item.status != 'pending'">@{{item.process_status_formatted}}</td>
                                    <td v-else>-</td>

									<td class="act-btn" v-if="item.status != 'pending'">
                                        @permission('budget-request-write')
                                        <a href="javascript:void(0)"  @click="confirm(item.id, 'paid')" data-toggle="modal" data-target="#modelDeleteConfirm"  title="Mark as Paid"
                                            class="btn btn-dlt btn-paid" v-if="item.process_status === 'unpaid'"><i class="material-icons">monetization_on</i>
                                        </a>
                                        <a href="javascript:void(0)"  @click="confirm(item.id, 'unpaid')" data-toggle="modal" title="Mark as Unpaid"
                                            class="btn btn-dlt btn-paid" v-if="item.process_status === 'paid'">
                                            <i class="material-icons">refresh</i>
                                        </a>
                                        @endpermission
                                    </td>
                                    <td v-else>-</td>

                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="row" v-else>
                    <div class="col-md-12">
                        <div class="alert alert-warning" role="alert">
                        {{ @trans('finance.no_records_to_show') }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
@endsection

@push('pageModals')

    <div class="modal" tabindex="-1" role="dialog" id="confirmPaidStatusModal">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Confirm</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to update status as paid?</p>
                </div>
                <div class="modal-footer d-flex justify-content-between">
                    <button type="button" class="btn btn-cncl" data-dismiss="modal">{{ @trans('finance.cancel') }}</button>
                    <button type="submit" class="btn btn-success submitApprovePayment" @click="updatePaymentStatus()">Save</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal" tabindex="-1" role="dialog" id="confirmUnpaidStatusModal">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Confirm</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to update status as unpaid?</p>
                </div>
                <div class="modal-footer d-flex justify-content-between">
                    <button type="button" class="btn btn-cncl" data-dismiss="modal">{{ @trans('finance.cancel') }}</button>
                    <button type="submit" class="btn btn-success submitApprovePayment" @click="updatePaymentStatus()">Save</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal right filter-modal" id="pdcFilterModal" tabindex="-1" role="dialog" aria-labelledby="filter">
        <div class="modal-dialog modal-md" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="filter">{{ @trans('job.filter') }}</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                </div>

                <div class="modal-body">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-md-12">
                                {{-- <div class="form-group btm-arrow select">
                                    <label class="control-label">Team Member</label>
                                    <select name="filter_team_member_id" class="form-control" v-model="filter_team_member_id">
                                        <option value="">Show All</option>
                                        @foreach($teamMembers as $user)
                                            <option value="{{ $user->id }}">{{ $user->full_name }}</option>
                                        @endforeach
                                    </select>
                                </div> --}}

                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <div class="date">
                                                <label class="control-label">Start Month</label>
                                                <div class="input-group">
                                                    <input type="text" class="form-control bg-white" id="cal_start_date" name="cal_start_date"
                                                        placeholder="Select"
                                                        value="{{ \Carbon\Carbon::parse($params['start_date'])->format('m/Y') }}" v-model="cal_start_date"
                                                        autocomplete="off" readonly required>
                                                    <div class="input-group-addon">
                                                        <span class="material-icons">date_range</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <div class="date">
                                                <label class="control-label">End Month</label>
                                                <div class="input-group">
                                                    <input type="text" class="form-control bg-white" id="cal_end_date" name="cal_end_date" v-model="cal_end_date"
                                                        placeholder="Select"
                                                        value="{{ \Carbon\Carbon::parse($params['end_date'])->format('m/Y') }}"
                                                        autocomplete="off" readonly>
                                                    <div class="input-group-addon">
                                                        <span class="material-icons">date_range</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group btm-arrow select">
                                    <label class="control-label">Project</label>
                                    <select name="filter_project_id" class="form-control" v-model="filter_project_id">
                                        <option value="">Show All</option>
                                        @foreach($projects as $project)
                                            <option value="{{ $project->id }}">{{ $project->name }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="form-group btm-arrow select">
                                    <label class="control-label">BR Status</label>
                                    <select name="filter_br_status" class="form-control" v-model="filter_br_status">
                                        <option value="">Show All</option>
                                        <option value="approved">Approved</option>
                                        <option value="pending">Pending</option>
                                    </select>
                                </div>

                                <div class="form-group btm-arrow select" id="filter_br_payment_status">
                                    <label class="control-label">Process Status</label>
                                    <select name="filter_br_payment_status" class="form-control" v-model="filter_br_payment_status">
                                        <option value="">Show All</option>
                                        <option value="paid">Paid</option>
                                        <option value="unpaid">Unpaid</option>
                                    </select>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer d-flex justify-content-between">
                    <button type="submit" class="btn btn-em submitApplyBtn" @click="updateFilter">{{ @trans('job.update_filter') }}</button>
                    <button type="submit" class="btn btn-cncl" @click="clearFilter">{{ @trans('finance.clear') }}</button>
                </div>
            </div>
        </div>
    </div>
@endpush

@push('pageJs')
<script type="text/javascript">
    function initListBudget() {

        $(document).on('click', '.budget-custom-checkbox', function() {
            if($(this).is(':checked')) {
                $('#'+ $(this).attr('id') + '.budget-custom-checkbox').prop('checked', true);
                setTimeout(() => {
                    $('#'+ $(this).attr('id'))[0].dispatchEvent(new Event('change'))
                }, 0);
            } else {
                $('#'+ $(this).attr('id') + '.budget-custom-checkbox').prop('checked', false);
                setTimeout(() => {
                    $('#'+ $(this).attr('id'))[0].dispatchEvent(new Event('change'))
                }, 0);
            }
        });

        $(document).on('click', '.budget-custom-all-checkbox', function(e) {
            if($(this).is(':checked'))
                $('#selectAll.budget-custom-all-checkbox').prop('checked', true);
            else
                $('#selectAll.budget-custom-all-checkbox').prop('checked', false);

            setTimeout(() => {
                app.selectAll(e)
            }, 0);
        });

    }
</script>

<script type="text/javascript">
    var commission_indexUrl = "{{route('admin.budget-request.indexJson',['panel' => Session::get('panel') ])}}";
    var updatePaymentStatusUrl = "{{route('admin.budget-request.updateBudgetRequestStatus',['panel' => Session::get('panel') ])}}";
    var syncProcessStatus = "{{ route('admin.budget-request.syncProcessStatus',['panel' => session('panel')]) }}";
</script>
<script type="text/javascript" src="{{ asset('js/admin/finance/budget_request.js') }}"></script>
@endpush