@extends('Admin.layout')
@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">


    <div class="row align-items-center justify-content-between mb-3 mt-3">
        <div class="col-auto">
            <h5>
                <button type="button" class="btn btn-icon bg-white me-2" style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                    <a href="{{ route('attendance') }}">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                            stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                            class="icon icon-tabler">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path d="M15 6l-6 6l6 6" />
                        </svg>
                    </a>
                </button>
                Add Attendance
            </h5>
        </div>
    </div>

    <div class="row d-flex justify-content-center">
        <div class="col-lg-6">
            <div class="card p-4 m-2">
                <form id="addAttendanceForm" method="POST" action="{{ route('storeAttendance') }}">
                    @csrf
                    <h6>Add Attendance</h6>

                    <div class="col-lg-12 mt-2">
                        <label class="form-label">Branch</label>
                        <select name="branch_id" id="branch_id" class="form-select @error('branch_id') is-invalid
                        @enderror">
                            <option value="">Select Branch</option>

                            @foreach($branches as $branch)
                                <option value="{{ $branch->id }}" {{ old('branch_id') == $branch->id ? 'selected' : '' }}>
                                    {{ $branch->branch_name }}
                                </option>
                            @endforeach
                        </select>
                        @error('branch_id')
                            <div class="text-danger small">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-lg-12 mt-2">
                        <label class="form-label">User ID</label>
                        <select name="id" id="staff_id" class="form-select @error('id') is-invalid
                        @enderror">
                            <option value="">Select User</option>
                        </select>
                        @error('id')
                            <div class="text-danger small">{{ $message }}</div>
                        @enderror

                    </div>


                    <div class="col-lg-12 mt-2">
                        <label class="form-label">Attendance Date</label>
                        <div class="input-group">
                            {{-- <input type="date" name="attendance_date" id="attendance_date" class="form-control @error('attendance_date') is-invalid
                                @enderror" max="{{ \Carbon\Carbon::today()->format('Y-m-d') }}" required
                                value="{{ old('attendance_date', \Carbon\Carbon::today()->format('Y-m-d')) }}"> --}}
                            <input type="text" name="attendance_date" id="attendance_date"
                                class="form-control @error('attendance_date') is-invalid @enderror" placeholder="DD/MM/YYYY"
                                required value="{{ old('attendance_date', \Carbon\Carbon::today()->format('d/m/Y')) }}">
                        </div>
                        @error('attendance_date')
                            <div class="text-danger small">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-lg-12 mt-2">
                        <label class="form-label">Checkin Time</label>
                        <div class="input-group">
                            <input type="time" name="attendance_checkin" id="attendance_checkin" class="form-control @error('attendance_checkin') is-invalid
                            @enderror" required
                                value="{{ old('attendance_checkin', \Carbon\Carbon::now()->format('H:i')) }}">
                        </div>
                        @error('attendance_checkin')
                            <div class="text-danger small">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-lg-12 mt-2">
                        <label class="form-label">
                            Attendance Type <span class="text-danger">*</span>
                        </label>

                        <select name="attendance_type" id="attendance_type" class="form-select @error('attendance_type') is-invalid
                        @enderror">

                            <option value="">Select Attendance Type</option>
                            <option value="present" {{ old('attendance_type', 'present') == 'present' ? 'selected' : '' }}>
                                Present
                            </option>
                            <option value="absent" {{ old('attendance_type') == 'absent' ? 'selected' : '' }}>
                                Absent
                            </option>

                        </select>

                        @error('attendance_type')
                            <div class="text-danger small">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="form-actions mt-4 d-flex gap-3 justify-content-center">

                        <button type="reset" class="btn btn-label-secondary me-2">Discard</button>
                        <button type="submit" class="btn btn-primary" id="finalSubmit">
                            Submit
                        </button>
                    </div>
                </form>

            </div>
        </div>

    </div>



    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>


    <script>
        flatpickr("#attendance_date", {
            dateFormat: "Y-m-d",
            altInput: true,
            altFormat: "d/m/Y",
            maxDate: new Date(),
            allowInput: true,
            defaultDate: "{{ old('attendance_date', \Carbon\Carbon::today()->format('Y-m-d')) }}"
        });
        const staffs = @json($staffs);
    </script>

    <script>
        function loadSelect2AndInit() {

            if (typeof $.fn.select2 !== 'undefined') {
                initAttendanceForm();
                return;
            }

            let script = document.createElement('script');
            script.src = 'https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js';
            script.onload = initAttendanceForm;
            document.body.appendChild(script);
        }

        function initAttendanceForm() {

            $('#staff_id').select2({
                placeholder: 'Search by ID or Name',
                width: '100%'
            });

            $('#branch_id').change(function () {

                let branchId = $(this).val();
                let options = '<option value="">Select User</option>';

                staffs.forEach(function (staff) {
                    if (staff.branch_id == branchId) {

                        options += `
                                <option value="${staff.user_id}"
                                        data-name="${staff.name}">
                                    ${staff.user_id} (${staff.name})
                                </option>
                            `;
                    }
                });

                $('#staff_id').html(options).trigger('change');
            });

            $('#staff_id').on('change', function () {
                let name = $(this).find(':selected').data('name');
                $('#staff_name').val(name || '');
            });
        }

        $(window).on('load', function () {
            loadSelect2AndInit();
        });
    </script>

    <script>
        document.getElementById('finalSubmit').addEventListener('click', function (e) {
            e.preventDefault();

            let btn = this;
            let form = document.getElementById('addAttendanceForm'); //form

            btn.disabled = true;
            btn.innerText = 'Processing...';

            setTimeout(() => {
                form.submit();
            }, 300);
        });
    </script>


@endsection