@extends('app-new')

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

@push('prev-next-head')
    <div class="content-header-right text-end col-md-3 col-12">
        <div class="form-group breadcrumb-right">
            <a href="javascript:history.back()" class="btn btn-secondary btn-sm"><i data-feather="arrow-left-circle"></i>
                Back</a>
            <button type="button" data-request="ajax-submit" data-target="[role=post-data]"
                class="btn btn-primary btn-sm"><i data-feather="check-circle"></i> Approve</button>
        </div>
    </div>
@endpush

@section('content')
    <!-- Column Search -->
    <section id="column-search-datatable">
        <div class="row">
            <div class="col-12">
                <div class="card new-cardbox">
                    <div class="card-body">
                        <form action="{{ "/$alias/bus/$bus->id/late-approvals" }}" role="post-data" method="POST">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="row">
                                        <div class="col-md-2">
                                            <div class="mb-1">
                                                <label class="form-label">Bus Name <span
                                                        class="text-danger">*</span></label>
                                                <input type="text" class="form-control" name="name"
                                                    value="{{ @$bus->name }}" disabled />
                                            </div>
                                        </div>
                                        <div class="col-md-2">
                                            <div class="mb-1">
                                                <label class="form-label">Bus Number <span
                                                        class="text-danger">*</span></label>
                                                <input type="text" class="form-control" name="number"
                                                    value="{{ @$bus->number }}" disabled />
                                            </div>
                                        </div>
                                        <div class="col-md-2">
                                            <div class="mb-1">
                                                <label class="form-label">Shift <span class="text-danger">*</span></label>
                                                <select class="form-control" name="shift_id" id="shift_id">
                                                    @foreach ($shifts as $shift)
                                                        <option value="{{$shift->id}}" {{$shiftId == $shift->id ? 'selected' : ''}}>{{$shift->name}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-2">
                                            <div class="mb-1">
                                                <label class="form-label">Date</label>
                                                <input type="date" class="form-control" name="date" id="date"
                                                    max="{{ date('Y-m-d') }}"
                                                    value="{{ $request->date ?: date('Y-m-d') }}" />
                                            </div>
                                        </div>
                                        <div class="col-md-2">
                                            <div class="mb-1">
                                                <label class="form-label">Time</label>
                                                <input type="time" class="form-control" name="max_time" id="max_time"
                                                    value="{{ $lateAllowedTime }}" />
                                            </div>
                                        </div>
                                        <div class="col-md-2">
                                            <div class="mb-1">
                                                <button type="button" style="float:right"
                                                    class="btn btn-primary mt-2 exportExcel">Excel</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row mt-2">
                                        <div class="col-md-12"></div>
                                        <div class="col-md-12">
                                            <table class="table table-responsive">
                                                <thead>
                                                    <th><input type="checkbox" id="select-all"></th>
                                                    <th>ID</th>
                                                    <th>Name (Emp Code)</th>
                                                    <th>Shift</th>
                                                    <th>In Time</th>
                                                    <th>Out Time</th>
                                                </thead>
                                                <tbody>
                                                    @foreach ($attendances as $key => $attendance)
                                                        <tr>
                                                            <td><input type="checkbox" name="attendance_id[]"
                                                                    value="{{ $attendance->id }}" class="select-all"></td>

                                                            <td>
                                                                {{ $attendances->firstItem() + $key }}
                                                            </td>
                                                            <td>{{ @$attendance->employee->name }}
                                                                ({{ @$attendance->employee->employee_code }})
                                                            </td>
                                                            <td>{{ @$attendance->shift->name }}</td>
                                                            <td>{{ $attendance->in_time }}</td>
                                                            <td>{{ $attendance->out_time }}</td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="col-md-12 d-flex justify-content-end">
                                            {{ $attendances->appends($request->except('page'))->links('pagination::bootstrap-4') }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            @if ($approvedBusLates->count())
                <div class="col-12">
                    <div class="card new-cardbox">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-12">
                                    <h4><strong>Late Approved Employees</strong>
                                        <button type="button" style="float:right" data-type="approved"
                                            class="btn btn-primary exportExcel">Excel</button>
                                    </h4>
                                </div>
                                <div class="col-md-12">
                                    <table class="table table-bordered" id="datatable-table">
                                        <thead>
                                            <tr>
                                                <th scope="col">#</th>
                                                <th scope="col">Employee</th>
                                                <th scope="col">Employee Code</th>
                                                <th scope="col">Shift</th>
                                                <th scope="col">In Time</th>
                                                <th scope="col">Out Time</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($approvedBusLates as $key => $approvedBusLate)
                                                <tr>
                                                    <td>
                                                        {{ $key + 1 }}
                                                    </td>
                                                    <td>
                                                        {{ @$approvedBusLate->employee->name }}
                                                    </td>
                                                    <td>
                                                        {{ @$approvedBusLate->employee->employee_code }}
                                                    </td>
                                                    <td>
                                                        {{ @$approvedBusLate->shift->name }}
                                                    </td>
                                                    <td>
                                                        {{ @$approvedBusLate->in_time }}
                                                    </td>
                                                    <td>
                                                        {{ @$approvedBusLate->out_time }}
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </section>
    <!--/ Column Search -->
@endsection

@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">
@endpush

@push('footer-script')
    <script src="/app-assets/vendors/js/tables/datatable/jquery.dataTables.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/dataTables.bootstrap5.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/dataTables.responsive.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/responsive.bootstrap5.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/datatables.checkboxes.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/datatables.buttons.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/jszip.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/pdfmake.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/vfs_fonts.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/buttons.html5.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/buttons.print.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/dataTables.rowGroup.min.js"></script>
    <script src="/app-assets/js/scripts/tables/table-datatables-basic.js"></script>
    <script src="/app-assets/js/scripts/tables/table-datatables-advanced.js"></script>
    <script src="/js/common-script.js"></script>

    <!-- END: Page JS-->
    <script>
        let attendances = @json($attendances);
        let approvedBusLates = @json($approvedBusLates);
        let bus = @json($bus);

        $(document).ready(function() {
            $('.select2').select2();
            $('#datatable-table').DataTable();
        })

        $(window).on('load', function() {
            if (feather) {
                feather.replace({
                    width: 14,
                    height: 14
                });
            }
        });

        $('#date, #shift_id').change(function() {
            let date = $('#date').val();
            let shift_id = $('#shift_id').val();
            const url = new URL(location.href);

            location.href = url.pathname + `?date=${date}&shift_id=${shift_id}`;
        });

        $('#max_time').change(function() {
            let date = $('#date').val();
            let shift_id = $('#shift_id').val();
            let max_time = $(this).val();
            const url = new URL(location.href);

            location.href = url.pathname + `?date=${date}&shift_id=${shift_id}&max_time=${max_time}`;
        });

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

        $('.select-all').change(function() {
            if ($('.select-all').length == $('.select-all:checked').length) {
                $('#select-all').prop('checked', true);
            } else {
                $('#select-all').prop('checked', false);
            }
        })
    </script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.13.1/xlsx.full.min.js"></script>
    <script>
        $('.exportExcel').click(function() {
            let type = $(this).data('type');
            let data = attendances?.data;
            let filename = 'Bus Late Pending Employees.xlsx';

            if (type == 'approved') {
                data = approvedBusLates;
                filename = 'Bus Late Approved Employees.xlsx';
            }else{
                type = 'pending'
            }

            let finalArr = [];

            finalArr.push([
                "Bus Name",
                "Bus Number",
                "Date",
                "Time",
            ]);

            finalArr.push([
                '{{@$bus->name}}',
                '{{@$bus->number}}',
                '{{$request->date ?: date('Y-m-d')}}',
                '{{$lateAllowedTime}}',
            ]);

            finalArr.push([[],[]])

            finalArr.push([
                "#", 
                "Employee", 
                "Employee Code", 
                "Shift", 
                "In Time", 
                "Out Time", 
                "Status", 
            ]);

            data.forEach((item, key) => {
                finalArr.push([
                    key + 1,
                    item?.employee?.name || '-',
                    item?.employee?.employee_code || '-',
                    item?.shift?.name || '-',
                    item?.in_time,
                    item?.out_time,
                    type
                ]);
            })

            var wb = XLSX.utils.book_new();
            var ws = XLSX.utils.aoa_to_sheet(finalArr);

            XLSX.utils.book_append_sheet(wb, ws, "Sheet 1");
            XLSX.writeFile(wb, filename);
        });
    </script>
@endpush