@extends('app-new')
@push('head-script')
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/tables/datatable/dataTables.bootstrap5.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/tables/datatable/responsive.bootstrap5.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/components.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/vendors.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/extensions/toastr.min.css">

    <!-- BEGIN: Page CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/css/core/menu/menu-types/vertical-menu.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
    <!-- END: Page CSS-->
@endpush

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">Advance</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ $orgUrl . '/home' }}">Home</a>
                    </li>
                    <li class="breadcrumb-item active">Advance
                    </li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@section('content')
    <div class="card new-cardbox p-1">
        <div class="card-body px-0" style="padding: 1px!important">
            <form role="post-data1" id="advance-form" method="POST" action="{{ $orgUrl . '/advance/request/create' }}"
                redirect="{{ $orgUrl . '/advance/requests' }}">
                <div class="row">

                    <div class="col-md-4 mb-1">
                        <label class="form-label">{{ trans('approval/master.amount') }}<span
                                class="mendatory-field text-danger">*</span></label>
                        <input type="text" class="form-control number numberonly" name="amount" />
                    </div>
                    <div class="col-md-3 mt-2">
                        <div class="d-flex justify-content-between content-footer">
                            <button type="button" data-request="ajax-submit" data-target="[role=post-data1]"
                                class="btn btn-success btn-submit user-submit"
                                id="finalSubmit">{{ trans('common/common.submit_request') }}</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <section id="column-search-datatable">
        <div class="content-header row">
            <div class="content-header-left col-md-6 col-12 mb-2">
                <div class="row breadcrumbs-top">
                    <div class="col-12">
                        <h2 class="content-header-title float-start mb-0"></h2>

                    </div>
                </div>
            </div>
            <div class="content-header-right text-md-end col-md-6 col-12 d-md-block d-none">
                <div class="mb-1 breadcrumb-right">
                    <div class="mx-1">
                        <div class="dropdown">
                            @if ($tab1 == 'my-approvals' && ($tab2 == 'pending' || $tab2 == ''))
                                <button data-status="rejected"
                                    class="btn btn-danger btn-sm waves-effect waves-float waves-light approval-multiple-btn">
                                    <i data-feather="x-circle"></i>
                                    Reject
                                </button>
                                <button data-status="approved"
                                    class="btn btn-success btn-sm waves-effect waves-float waves-light approval-multiple-btn">
                                    <i data-feather="check-circle"></i>
                                    Approve
                                </button>
                            @endif
                            <button
                                class="px-2 btn-icon btn btn-secondary btn-sm btn-round dropdown-toggle waves-effect waves-float waves-light"
                                type="button" data-bs-toggle="dropdown" aria-haspopup="true"
                                aria-expanded="false">Export</button>

                            <button class="btn-icon btn btn-primary btn-round btn-sm dropdown-toggle" type="button"
                                data-bs-toggle="offcanvas" data-bs-target="#offcanvasEnd" aria-controls="offcanvasEnd">
                                <i data-feather='filter'></i>
                            </button>

                            <div class="dropdown-menu" style="">
                                <a class="dropdown-item" target="_blank"
                                    href="{{ url()->current() . '?' . request()->getQueryString() . '&export=excel' }}">
                                    <span>{{ trans('common/common.excel') }}</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="offcanvas-end-example">
            <form action="">
                <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasEnd" aria-labelledby="offcanvasEndLabel">
                    <div class="offcanvas-header">
                        <h5 id="offcanvasEndLabel" class="offcanvas-title">Filter</h5>
                        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"
                            aria-label="Close"></button>
                    </div>
                    <div class="offcanvas-body my-auto mx-0 flex-grow-0">
                        <div class="row">
                            <input type="hidden" name="tab1" value="{{ $tab1 }}">
                            <input type="hidden" name="tab2" value="{{ $tab2 }}">
                            <input type="hidden" name="search" id="searchFilter" value="{{ request()->search }}">
                            <div class="col-sm-12">
                                <div class="form-label-group">
                                    <label class="form-label" for="date_range">Date range</label>
                                    <input type="text" id="date_range" name="date_range" value="{{ $dateRange }}"
                                        class="form-control daterangebg"> {!! $errors->first('date_range', '<label class="control-label error" for="date_range">:message</label>') !!}
                                </div>
                            </div>
                            <div class="col-sm-12 mt-1">
                                <div class="form-label-group">
                                    <label class="form-label">Department</label>
                                    <select class="form-control select2" id="department_id" name="department_id[]"
                                        class="form-control" multiple>
                                        @foreach ($departments as $department)
                                            <option value="{{ $department->id }}">
                                                {{ $department->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-sm-12 mt-1">
                                <div class="form-label-group">
                                    <label class="form-label">Designation</label>
                                    <select class="form-control select2" id="designation_id" name="designation_id[]"
                                        class="form-control" multiple>
                                        @foreach ($designations as $designation)
                                            <option value="{{ $designation->id }}">
                                                {{ $designation->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            @if (Auth::user()->is_contractor == 0)
                                <div class="col-sm-12 mt-1">
                                    <div class="form-label-group">
                                        <label class="form-label">Contractor</label>
                                        <select class="form-control select2" id="contractor_id" name="contractor_id[]"
                                            class="form-control" multiple>
                                            @foreach ($contractors as $contractor)
                                                <option value="{{ $contractor->id }}">
                                                    {{ $contractor->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            @endif
                            <div class="col-sm-12 mt-1">
                                <div class="form-label-group">
                                    <label class="form-label">Employee Type</label>
                                    <select class="form-control select2" id="employee_type" name="employee_type[]"
                                        class="form-control" multiple>
                                        @foreach ($employeeTypes as $empType)
                                            <option value="{{ $empType }}">
                                                {{ ucfirst($empType) }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-sm-12 mt-1">
                                <div class="form-label-group">
                                    <label class="form-label">Employees</label>
                                    <select class="form-control select2" id="employee_id" name="employee_id[]" multiple>
                                        @foreach ($employees as $employee)
                                            <option value="{{ $employee->id }}"
                                                {{ in_array($employee->id, $employeeIds) ? 'selected' : '' }}>
                                                {{ $employee->name }}({{ $employee->employee_code }})
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>

                        <button type="submit" id="filterSubmitBtn"
                            class="btn btn-primary mt-2 mb-1 d-grid w-100 d-flex justify-content-center">
                            <i data-feather='search' class="me-2"></i>
                            {{ trans('common/common.search') }}
                        </button>
                    </div>
                </div>
            </form>
        </div>
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <ul class="nav nav-tabs border-bottom" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link {{ !empty($tab1) ? ($tab1 == 'my-requests' ? 'active' : '') : 'active' }}"
                                href="{{ $orgUrl }}/advance/requests?tab1=my-requests&{{ http_build_query(request()->except('tab1', 'tab2', 'page')) }}">My
                                Requests
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link {{ !empty($tab1) ? ($tab1 == 'team-requests' ? 'active' : '') : 'active' }}"
                                href="{{ $orgUrl }}/advance/requests?tab1=team-requests&{{ http_build_query(request()->except('tab1', 'tab2', 'page')) }}">Team
                                Requests
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link {{ $tab1 == 'my-approvals' ? 'active' : '' }}"
                                href="{{ $orgUrl }}/advance/requests?tab1=my-approvals&{{ http_build_query(request()->except('tab1', 'tab2', 'page')) }}">My
                                Approvals
                            </a>
                        </li>
                    </ul>
                    <div class="row align-items-center">
                        <div class="col-md-8"></div>
                        <div class="col-md-4 row">
                            <div class="col-md-10" style="float: right;">
                                <input type="text" placeholder="Search by name" onchange="putInFilters()"
                                    id="search" class="form-control" value="{{ request()->search }}">
                            </div>
                            <div class="col-md-2" style="float: right;">
                                <button type="button" onclick="putInFilters()" class="btn btn-primary btn-sm d-grid">
                                    <i data-feather="search"></i>
                                </button>
                            </div>
                        </div>
                        <div class="card-datatable">
                            <ul class="nav nav-tabs border-bottom" style="float: right;" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link {{ empty($tab2) ? 'active' : '' }}"
                                        href="{{ $orgUrl }}/advance/requests?tab2=&{{ http_build_query(request()->except('tab2', 'page')) }}">All
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link {{ $tab2 == 'pending' ? 'active' : '' }}"
                                        href="{{ $orgUrl }}/advance/requests?tab2=pending&{{ http_build_query(request()->except('tab2', 'page')) }}">Pending
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link {{ $tab2 == 'approved' ? 'active' : '' }}"
                                        href="{{ $orgUrl }}/advance/requests?tab2=approved&{{ http_build_query(request()->except('tab2', 'page')) }}">Approved
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link {{ $tab2 == 'rejected' ? 'active' : '' }}"
                                        href="{{ $orgUrl }}/advance/requests?tab2=rejected&{{ http_build_query(request()->except('tab2', 'page')) }}">Rejected
                                    </a>
                                </li>
                            </ul>
                            <table class="dt-column-search table table-responsive" id="dataTable" data-url="">
                                <thead>
                                    @if ($tab1 == 'my-approvals' && ($tab2 == 'pending' || $tab2 == ''))
                                        <th class="pe-0">
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="checkbox" id="comp-off-select-all">
                                            </div>
                                        </th>
                                    @endif
                                    <th>#</th>
                                    <th>{{ trans('request/request.employee_name') }}</th>
                                    <th>{{ trans('request/request.employee_code') }}</th>
                                    <th>Amount</th>

                                    @if ($tab1 == 'my-approvals')
                                        <th>{{ trans('common/common.my_status') }}</th>
                                    @endif
                                    <th>{{ trans('common/common.status') }}</th>
                                    <th>{{ trans('request/request.submission_date') }}</th>
                                    <th>{{ trans('common/common.actions') }}</th>
                                </thead>
                                <tbody>
                                    @foreach ($advanceRequests as $key => $advanceRequest)
                                        <tr class="even">
                                            @if ($tab1 == 'my-approvals' && ($tab2 == 'pending' || $tab2 == ''))
                                                <td class="pe-0">
                                                    @if (@$advanceRequest->myApprovalLevel->status == 'pending')
                                                        <div class="form-check form-check-inline">
                                                            <input class="form-check-input comp-off-select"
                                                                type="checkbox" value="{{ $advanceRequest->id }}">
                                                        </div>
                                                    @endif
                                                </td>
                                            @endif
                                            <td class="sorting_1">{{ $advanceRequests->firstItem() + $key }}</td>
                                            <td class="">
                                                <div class="d-flex flex-row">
                                                    <div class="avatar me-75">
                                                        <img src="{{ isset($advanceRequest->employee->image) ? $advanceRequest->employee->image : '' }}"
                                                            onerror="this.src='/assets/img/default-profile-3.png'"
                                                            width="32" height="32"
                                                            alt="{{ isset($advanceRequest->employee->name) ? $advanceRequest->employee->name : '' }}">
                                                    </div>
                                                    <div class="my-auto">
                                                        <h6 class="mb-0 fw-bolder text-dark hr-dashfullemplname">
                                                            {{ isset($advanceRequest->employee->name) ? $advanceRequest->employee->name : '' }}
                                                        </h6>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>{{ $advanceRequest->employee->employee_code ?? '' }}
                                            </td>
                                            <td>{{ $advanceRequest->amount ?? '' }}
                                            </td>


                                            @if ($tab1 == 'my-approvals')
                                                <td>
                                                    @if (!empty($advanceRequest->myApprovalLevel->status))
                                                        @if (@$advanceRequest->myApprovalLevel->status == App\Helpers\ConstantHelper::APPROVED)
                                                            <span
                                                                class="badge rounded-pill badge-light-success badgeborder-radius">{{ ucfirst(@$advanceRequest->myApprovalLevel->status) }}</span>
                                                        @elseif(
                                                            @$advanceRequest->myApprovalLevel->status == App\Helpers\ConstantHelper::CANCELED ||
                                                                @$advanceRequest->myApprovalLevel->status == App\Helpers\ConstantHelper::REJECTED)
                                                            <span
                                                                class="badge rounded-pill badge-light-danger badgeborder-radius">{{ ucfirst(@$advanceRequest->myApprovalLevel->status) }}</span>
                                                        @else
                                                            <span
                                                                class="badge rounded-pill badge-light-warning badgeborder-radius">{{ ucfirst(@$advanceRequest->myApprovalLevel->status) }}</span>
                                                        @endif
                                                    @endif
                                                </td>
                                            @endif

                                            <td>
                                                @if ($advanceRequest->status == App\Helpers\ConstantHelper::APPROVED)
                                                    <span
                                                        class="badge rounded-pill badge-light-success badgeborder-radius">{{ ucfirst($advanceRequest->status) }}</span>
                                                @elseif(
                                                    $advanceRequest->status == App\Helpers\ConstantHelper::CANCELED ||
                                                        $advanceRequest->status == App\Helpers\ConstantHelper::REJECTED)
                                                    <span
                                                        class="badge rounded-pill badge-light-danger badgeborder-radius">{{ ucfirst($advanceRequest->status) }}</span>
                                                @else
                                                    <span
                                                        class="badge rounded-pill badge-light-warning badgeborder-radius">{{ ucfirst($advanceRequest->status) }}</span>
                                                @endif
                                            </td>
                                            <td>
                                                {{ App\Helpers\GeneralHelper::dateTimeFormat($advanceRequest->created_at) }}
                                            </td>

                                            <td>
                                                <div class="mb-1">
                                                    <a class="pe-1 dropdown-toggle hide-arrow text-primary"
                                                        data-bs-toggle="dropdown">
                                                        <i data-feather="more-vertical" class="font-small-4"></i>
                                                    </a>
                                                    <div class="dropdown-menu dropdown-menu-end">
                                                        <a class="dropdown-item"
                                                            onclick='showApprovalLevels(@json($advanceRequest->approvalLevels))'
                                                            href="#"><i data-feather="eye" class="font-4"
                                                                aria-hidden="true"></i><span class="align-middle">
                                                                View</span></a>

                                                        @if (
                                                            $tab1 == 'my-approvals' &&
                                                                ($tab2 == 'pending' || ($tab2 == '' && @$advanceRequest->myApprovalLevel->status == 'pending')))
                                                            <a class="dropdown-item approval-btn" href="#"
                                                                data-id="{{ $advanceRequest->id }}"
                                                                data-status="approved"><i data-feather="check"
                                                                    class="font-4" aria-hidden="true"></i><span
                                                                    class="align-middle">
                                                                    Approve</span></a>

                                                            <a class="dropdown-item approval-btn" href="#"
                                                                data-id="{{ $advanceRequest->id }}"
                                                                data-status="rejected">
                                                                <i data-feather="x" class="font-4"
                                                                    aria-hidden="true"></i><span class="align-middle">
                                                                    Reject</span></a>
                                                        @endif
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>

                            @if (count($advanceRequests) == 0)
                                <div>
                                    <center>No record(s) found!</center>
                                </div>
                            @endif

                            <div class="d-flex justify-content-between mx-0 row">
                                <div class="col-sm-12 col-md-6">
                                    {{ $advanceRequests->appends(request()->except('page'))->links('partials.pagination') }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    </section>
    <!--/ Column Search -->

    <div class="modal fade" id="approval-popup" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-md modal-dialog-centered ">
            <div class="modal-content">
                <div class="modal-header bg-transparent">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pb-5 pt-50">
                    <div class="mb-2">
                        <h3 class="mb-2" id="modelHeading">Advance Approval</h3>
                    </div>
                    <form id="approval-form" role="post-data" method="POST"
                        action="{{ $orgUrl . '/compensation/approval' }}">
                        <input type="hidden" name="status" id="status" value="">
                        <input type="hidden" name="ids" id="ids" value="">
                        <div class="row">
                            <div class="col-12">
                                <label>Remarks</label>
                                <textarea class="form-control" name="remarks" id="remarks" rows="5"></textarea>
                            </div>
                        </div>
                        <div class="col-12 d-flex justify-content-end mt-2 pt-50">
                            <button type="button" data-request="ajax-submit" data-target="[role=post-data]"
                                class="btn btn-primary"
                                id="submit-btn">{{ trans('common/common.submit_request') }}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="approval-level-popup" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered ">
            <div class="modal-content">
                <div class="modal-header bg-transparent">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pb-3">
                    <div class="mb-2">
                        <h3 class="mb-2" id="modelHeading">Advance Approvals</h3>
                    </div>
                    <table class="table">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Approver</th>
                                <th>Level</th>
                                <th>Status</th>
                                <th>Action At</th>
                                <th>Remarks</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('footer-script')
    <!-- BEGIN: Page Vendor JS-->
    <script src="/app-assets/js/scripts/ui/ui-feather.js"></script>

    <!-- END: Page Vendor JS-->
    <script src="/app-assets/vendors/js/extensions/toastr.min.js"></script>


    <!-- BEGIN: Page JS-->

    <script type="text/javascript" src="/assets/js/moment.min.js"></script>
    <script type="text/javascript" src="/assets/js/daterangepicker.js"></script>
    <link rel="stylesheet" type="text/css" href="/assets/css/daterangepicker.css" />

    <script src="{{ asset('js/common-script.js') }}"></script>
    <script src="{{ asset('js/sweetalert.js') }}"></script>

    <!-- END: Page JS-->

    <script>
        $("#search").change(function() {
            this.form.submit();
        });
        $(function() {
            $('.select2').select2();

            $('input[name="date_range"]').daterangepicker({
                opens: 'left'
            })
        });

        $('#comp-off-select-all').change(function() {
            if ($(this).is(':checked')) {
                $('.comp-off-select').prop('checked', true);
            } else {
                $('.comp-off-select').prop('checked', false);
            }
        });

        $('.comp-off-select').change(function() {
            if ($('.comp-off-select').length == $('.comp-off-select:checked').length) {
                $('#comp-off-select-all').prop('checked', true);
            } else {
                $('#comp-off-select-all').prop('checked', false);
            }
        });

        $('.approval-btn').on('click', function(e) {
            e.preventDefault();
            let status = $(this).data('status');
            let ids = [$(this).data('id')];

            setApprovalFormFields(status, ids);
        });

        $('.approval-multiple-btn').on('click', function(e) {
            e.preventDefault();
            let status = $(this).data('status');
            let ids = [];

            $('.comp-off-select:checked').each(function(key, item) {
                ids.push($(item).val());
            });

            if (ids.length > 0) {
                setApprovalFormFields(status, ids);
            } else {

            }
        });

        function setApprovalFormFields(status, ids) {
            $('#status').val(status);
            $('#ids').val(ids);
            $('#remarks').val('');

            let actionUrl = "{{ $orgUrl }}";
            if (ids.length == 1) {
                actionUrl += `/advance/requests/${status}/${ids[0]}`;
            } else {
                actionUrl += `/advance/requests/${status}/multiple`;
            }

            $('#approval-form').attr('action', actionUrl);

            if (status == 'rejected') {
                $('#submit-btn').html('Reject');
            } else {
                $('#submit-btn').html('Approve');
            }

            $('#approval-popup').modal('show');
        }

        function showApprovalLevels(approvalLevels) {
            html = '';
            approvalLevels.forEach((item, key) => {
                html += `
                    <tr>
                        <td>${key + 1}</td>
                        <td>${item?.approver?.name || ''} ${item?.approver?.employee_code ? "("+item?.approver?.employee_code+")" : ''}</td>
                        <td>${item?.approver_level   || '-'}</td>
                        <td>${item?.status || ''}</td>
                        <td>${item?.action_at || ''}</td>
                        <td>${item?.remarks || ''}</td>
                    </tr>
                `;
            });

            $('#approval-level-popup tbody').html(html);
            $('#approval-level-popup').modal('show');
        }

        function putInFilters() {
            var search = $('#search').val();
            $('#searchFilter').val(search);

            $('#filterSubmitBtn').click();
        }
    </script>
@endpush