@extends('app-new')
@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">Overtime Approval</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="home">{{ trans('common/common.home') }}</a>
                    </li>
                    <li class="breadcrumb-item active">Overtime Approval
                    </li>
                </ol>
            </div>
        </div>
    </div>
@endpush
@section('content')
    <!-- Column Search -->
    <section id="column-search-datatable">

        <!-- Filters -->
        <form id="filter-form" method="GET">
            <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 class="row">
                            <div class="col-md-2">
                                <label for="limit" class="form-label">Show</label>
                                <select name="limit" id="limit" class="form-control">
                                    <option value="10">10</option>
                                    <option value="50">50</option>
                                    <option value="100">100</option>
                                    <option value="500">500</option>
                                    <option value="1000">1000</option>
                                </select>
                            </div>

                            <div class="col-md-10 pt-2" id="pagination-links">
                            </div>
                        </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="dropdown">
                            <button type="button" data-status = "approved" class="btn btn-primary btn-sm" id="approveAll"><i
                                data-feather="check-circle"></i> Approve All</button>
                            <button type="button" data-status = "unapproved" class="btn btn-primary btn-sm" id="unapproveAll"><i
                                    data-feather="check-circle"></i> Unapprove All</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"
                                type="button"><i data-feather='filter'></i></button>

                            
                        </div>
                    </div>
                </div>
            </div>

            <div class="offcanvas-end-example">
                <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasEnd" aria-labelledby="offcanvasEndLabel">
                    <div class="offcanvas-header">
                        <h5 id="offcanvasEndLabel" class="offcanvas-title">{{ trans('common/common.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">

                        <label class="form-label">From Date</label>
                        <input type="date" id="from_date" name="from_date" class="form-control flatpickr-basic"
                            value="{{ date('Y-m-d', strtotime('first day of previous month')) }}">
                        <label class="form-label">To Date</label>
                        <input type="date" id="fp-default" name="to_date" class="form-control flatpickr-basic"
                            value="{{ date('Y-m-d', strtotime('last day of previous month')) }}">


                        <label class="form-label mt-2" for="area_id">Location</label>
                        <select class="form-control mb-2 select2" name="location_id[]" id="location_id" multiple>
                            @foreach($locations as $location)
                                <option value="{{$location->id}}">{{$location->name}}</option>
                            @endforeach
                        </select>                        
            
                        <label class="form-label mt-2" for="area_id">Sub Location</label>
                        <select class="form-control mb-2 select2" name="sublocation_id[]" id="sub_location_id" multiple>
                        @foreach($subLocations as $subLocation)
                            <option value="{{$subLocation->id}}">{{$subLocation->name}}</option>
                            @endforeach
                        </select>    

                        <label class="form-label mt-2" for="area_id">{{ trans('master/master.department') }}</label>
                        <select class="form-control select2" name="department_id[]" id="department_id" multiple>
                            <option value="">Select {{ trans('master/master.department') }}</option>
                            @foreach ($departments as $department)
                                <option value="{{ $department->id }}">
                                    {{ $department->name }}</option>
                            @endforeach
                        </select>
                        <label class="form-label mt-2" for="area_id">Sub Department</label>
                        <select class="form-control mb-2 select2" name="sub_department_id[]" id="sub_department_id"
                            multiple>
                            @foreach ($subDepartments as $subDepartment)
                                <option value="{{ $subDepartment->id }}">
                                    {{ $subDepartment->name }}</option>
                            @endforeach
                        </select>

                        <label class="form-label mt-2" for="area_id">{{ trans('master/master.designation') }}</label>
                        <select class="form-control select2" name="designation_id[]" id="designation_id" multiple>
                            <option value="">Select {{ trans('master/master.designation') }}</option>
                            @foreach ($designations as $designation)
                                <option value="{{ $designation->id }}">
                                    {{ $designation->name }}
                                </option>
                            @endforeach
                        </select>
                        <label class="form-label mt-2" for="area_id">{{ trans('master/master.contractor') }}</label>
                        <select class="form-control mb-2 select2" name="contractor_id[]" id="contractor_id" multiple>
                            <option value="">Select contractor</option>
                            @foreach ($contractors as $contractor)
                                <option value="{{ $contractor->id }}" @if( ($contractorIds) && in_array($contractor->id, $contractorIds)) selected @endif>
                                    {{ $contractor->name }}
                                </option>
                            @endforeach
                        </select>
                        <label class="form-label mt-2" for="area_id">{{ trans('master/master.employee_type') }}</label>
                        @if (Auth::user()->is_contractor == 0)
                            <select class="form-control mb-2 select2" name="employee_type" id="employee_type"
                                onchange="getEmployeeByType(this.value)">
                                <option value="">Select {{ trans('master/master.type') }}</option>
                                @foreach ($employeeTypes as $empType)
                                    <option value="{{ $empType }}">{{ ucwords($empType) }}
                                    </option>
                                @endforeach
                            </select>
                        @else
                            <select class="form-control mb-2 select2" name="employee_type" id="employee_type"
                                onchange="getEmployeeByType(this.value)">
                                <option value="">Select {{ trans('master/master.type') }}</option>
                                <option value="{{ $employeeType }}">{{ ucwords($employeeType) }}</option>
                            </select>
                        @endif
                        <label class="form-label mt-2" for="area_id">{{ trans('master/master.employees') }}</label>
                        <select class="form-control select2" name="employee_id[]" id="employee_id" multiple>
                            <option value="">Select {{ trans('master/master.employees') }}</option>
                            @foreach ($employees as $employee)
                                <option value="{{ $employee->id }}" @if ($employeeIds && in_array($employee->id, $employeeIds)) selected @endif>
                                    {{ $employee->name }}({{ $employee->employee_code }})
                                </option>
                            @endforeach
                        </select>
                        
                        <label class="form-label mt-2" for="order_by">Status</label>
                        <select class="form-control select2" name="status" id="status" >
                            <option value="">All</option>
                        <option value="approved" @if(request()->input('status') == "approved" ) selected
                            @endif>Approved</option>
                        <option value="pending" @if(request()->input('status') == "pending" ) selected
                            @endif>Pending</option>
                        </select>

                        <div class="row px-1">
                            <div class="col-md-7 p-0">
                                <label class="form-label mt-2" for="field_name">Field Name</label>
                                <select class="form-control select2" name="field_name" id="field_name" >
                                    <option value="">--Select--</option>
                                    {{-- <option value="employee_name">Employee</option> --}}
                                    <option value="attendance_date">Date</option>
                                    <option value="working_time">Working Hrs</option>
                                </select>
                            </div>

                            <div class="col-md-5 p-0">
                                <label class="form-label mt-2" for="order_by">Order</label>
                                <select class="form-control select2" name="order_by" id="order_by" >
                                    <option value="">--Select--</option>
                                    <option value="ASC">ASC</option>
                                    <option value="DESC">DESC</option>
                                </select>
                            </div>
                        </div>

                        <button type="button" id="apply-filter"
                            class="btn btn-primary mt-2 mb-1 d-grid w-100 d-flex justify-content-center"
                            data-bs-dismiss="offcanvas" aria-label="Close"><i data-feather='search' class="me-2"></i>
                            {{ trans('common/common.search') }}</button>
                    </div>
                </div>
        </form>
        <!-- // Filters // -->


        <div class="row">
            <div class="col-md-12 col-12">
                <div class="table-card">
                    <div class="card  new-cardbox">
                        <div class="table-responsive">
                            <table class="table table-striped" id="ot-approval-table">
                                <thead>
                                    <tr>
                                        <th class="pe-0">
                                            <div class="form-check form-check-inline">
                                                <input class="form-check" type="checkbox" id="select-all">
                                            </div>
                                        </th>
                                        <th>Employee</th>
                                        <th>Date</th>
                                        <th>In</th>
                                        <th>Out</th>
                                        <th>Working Hrs</th>
                                        <th>System Generated OT</th>
                                        <th>Approved OT</th>
                                        <th>Remarks</th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody id="append-ot-data">
                                    {{-- Append Overtime Data --}}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>



    </section>
    <!--/ Column Search -->
@endsection
@push('footer-script')
    <!-- BEGIN: Page Vendor JS-->
    <script src="/app-assets/js/scripts/ui/ui-feather.js"></script>
    <script src="/app-assets/vendors/js/extensions/toastr.min.js"></script>
    <script src="{{ asset('js/common-script.js') }}"></script>

    <script>
        let currentPage = 1;
        // For time picker
        function initTimePicker() {
            let allTimes = document.querySelectorAll('[id*="approved-overtime-"]');
            allTimes.forEach((element,index) => {
                flatpickr(`#${element.id}`, {
                    enableTime: true,
                    noCalendar: true,
                    enableSeconds:true,
                    dateFormat: "H:i:S",
                    time_24hr: true
                });
            })
        }
        $(function() {
            $('.select2').select2();
            renderOvertimeData();

            $('#select-all').on('change',function(){
                    if(this.checked){
                        $('.checkbox').each(function(){

                            this.checked = true;
                            let overtimeId = $(this).data('id');
                            let approvedOvertime = $('#approved-overtime-'+overtimeId).val();
                            pushData(overtimeId, approvedOvertime);
                        });
                    }else{
                        $('.checkbox').each(function(){
                            this.checked = false;
                        });
                    }
                });
                $(document).on('change','.checkbox',function(e){
                    let overtimeId = $(this).data('id');
                    let approvedOvertime = $('#approved-overtime-'+overtimeId).val();
                    
                        if(e.target.checked){                           
                            pushData(overtimeId, approvedOvertime);
                    }else{
                        removeApprovedData(overtimeId);
                    }
                });
        });

        $('#apply-filter').click(function(){
            let from_date = $('[name="from_date"]').val();
            let to_date = $('[name="to_date"]').val();
            $("#to_error").remove();
            if(from_date && to_date == '') {
                $('[name="to_date"]').after('<div id="to_error"><span class="text-danger">Please select to date.</span><br></div>');
                return false;
            }
            if(from_date > to_date) {
                $('[name="from_date"]').after('<div id="to_error"><span class="text-danger">From date  must be smaller then  To date.</span><br></div>');
                return false;
            }
            
            currentPage = 1;
            renderOvertimeData();
        });

        $('#limit').change(function() {
            currentPage = 1;
            renderOvertimeData();
        });

        var approvedOvertimes = {};
        var remarks = {};

        
        function pushData(id, value,status) {
            if(status=='approved'){
                Swal.fire({
                title: 'Enter Remark',
                input: 'text',
                inputLabel: 'Your Remark',
                confirmButtonText: 'Submit',
                allowOutsideClick: false,
                inputValidator: (value) => {
                    if (!value) {
                        return 'Please enter a remark!';
                        }
                    }
                }).then((result) => {
                    if (result.isConfirmed) {
                        remarks[id] = result.value;  
                    }
                });
            }
            let inputCheckBox = $(`#approved-overtime-${id}`).closest('tr').find('[type="checkbox"]');
            inputCheckBox.prop('checked',true);
            approvedOvertimes[id] = value;  
        }

        function removeApprovedData(id) {
            delete approvedOvertimes[id];
            delete remarks[id];
        }

        $('#approveAll, #unapproveAll').click(function() {
            var orgUrl = '{{ $orgUrl }}';
            var url = orgUrl + '/update-overtimes';
            var status = $(this).data("status");
            if(!Object.keys(approvedOvertimes).length) {
                Swal.fire("Alert!", "Please select at least one row.", "danger");
                return false;
            }
            var data = {'status': status, 'overtimes': approvedOvertimes ,'overtime_remarks': remarks };
            $.ajax({
                beforeSend: function(xhr) {},
                url: url,
                type: "POST",
                data: data,
                dataType: "JSON",
                success: function(response) {

                    Swal.fire("Success!", response.message, "success");
                    setTimeout(function() {
                        location.reload();
                    }, 2200);
                },
                error: function(response) {
                    Swal.fire(
                        "error!",
                        response.responseJSON.message,
                        "warning"
                    );
                    setTimeout(function() {}, 1200);
                }
            });
        });

        function renderOvertimeData() {
            let filterForm = $('#filter-form').serialize();
            var orgUrl = '{{ $orgUrl }}';
            var url = orgUrl + '/get-overtimes?page=' + currentPage + '&' + filterForm;
            
            $.ajax({
                beforeSend: function(xhr) {},
                url: url,
                type: "GET",
                success: function(response) {                    
                    $("#append-ot-data").html(response.html);
                    $("#pagination-links").html(response.pagination);
                },
                error: function(response) {
                    Swal.fire("Error!", "Something went wrong!", "danger");
                }
            });
        }

        function getEmployeeByType(employee_type) {
            var url = "{{ route('employees-by-type', ['alias' => $alias]) }}?employee_type=" + employee_type;
            $.ajax({
                url: url,
                type: "GET",
                success: function(data) {
                    op = '<option value="">Select Employees</option>';
                    for (var i = 0; i < data.length; i++) {
                        op += '<option value="' + data[i].id + '">' + data[i].name + '(' + data[i]
                            .employee_code + ')</option>';
                    }
                    $('#employee_id').html(op);
                }
            });
        }    
        
        $(document).on('click', '#pagination-links a', function(e) {
            e.preventDefault();
            let pageUrl = $(this).attr('href');
            let page = new URL(pageUrl).searchParams.get("page");
            if (page) {
                currentPage = page;
                renderOvertimeData();
            }
        });
    </script>
@endpush