@extends('Branch.layout')

@section('content')

<meta name="csrf-token" content="{{ csrf_token() }}">

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

<style>
    .select2-container {
        width: 100% !important;
    }

    .select2-container .select2-selection--single {
        height: 38px;
        border: 1px solid #d9dee3;
        border-radius: 6px;
    }

    .select2-container
    .select2-selection--single
    .select2-selection__rendered {
        line-height: 36px;
        padding-left: 12px;
    }

    .select2-container
    .select2-selection--single
    .select2-selection__arrow {
        height: 36px;
    }
</style>

    <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 class="mb-0">

            <a
                href="{{ route('branch.attendance') }}"
                class="btn btn-icon bg-white me-2"
                style="box-shadow: 0 9px 12px -2px #66328e1f;"
            >
                <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>

            Add Attendance

        </h5>

    </div>

</div>

<div class="row justify-content-center">

    <div class="col-lg-6 col-md-8 col-sm-12">

        <div class="card p-4 m-2">

            <form
                id="addAttendanceForm"
                method="POST"
                action="{{ route('branch.storeAttendance') }}"
            >
                @csrf

                <h6 class="mb-3">
                    Add Attendance
                </h6>

                {{-- Branch --}}
                <div class="col-lg-12 mt-2">

                    <label
                        for="branch_name"
                        class="form-label"
                    >
                        Branch
                    </label>

                    <input
                        type="text"
                        id="branch_name"
                        class="form-control"
                        value="{{ $branch->branch_name }}"
                        readonly
                    >

                    <input
                        type="hidden"
                        name="branch_id"
                        id="branch_id"
                        value="{{ old('branch_id', $branchId) }}"
                    >

                    @error('branch_id')
                        <div class="text-danger small mt-1">
                            {{ $message }}
                        </div>
                    @enderror

                </div>

                {{-- Staff --}}
                <div class="col-lg-12 mt-3">

                    <label
                        for="staff_id"
                        class="form-label"
                    >
                        Staff
                        <span class="text-danger">*</span>
                    </label>

                    <select
                        name="id"
                        id="staff_id"
                        class="form-select @error('id') is-invalid @enderror"
                        required
                    >
                        <option value="">
                            Select Staff
                        </option>

                        @foreach ($staffs as $staff)

                            <option
                                value="{{ $staff->user_id }}"
                                {{ (string) old('id') === (string) $staff->user_id ? 'selected' : '' }}
                            >
                                {{ $staff->user_id }} - {{ $staff->name }}
                            </option>

                        @endforeach

                    </select>

                    @error('id')
                        <div class="text-danger small mt-1">
                            {{ $message }}
                        </div>
                    @enderror

                    @if ($staffs->isEmpty())
                        <div class="text-danger small mt-1">
                            இந்த branch-க்கு active staff இல்லை.
                        </div>
                    @endif

                </div>

                {{-- Attendance Date --}}
                <div class="col-lg-12 mt-3">

                    <label
                        for="attendance_date"
                        class="form-label"
                    >
                        Attendance Date
                        <span class="text-danger">*</span>
                    </label>

                    {{-- <input
                        type="date"
                        name="attendance_date"
                        id="attendance_date"
                        class="form-control @error('attendance_date') is-invalid @enderror"
                        max="{{ now()->format('Y-m-d') }}"
                        value="{{ old('attendance_date', now()->format('Y-m-d')) }}"
                        required
                    > --}}

                    <input
    type="text"
    name="attendance_date"
    id="attendance_date"
    class="form-control @error('attendance_date') is-invalid @enderror"
    placeholder="DD/MM/YYYY"
    required
>

                    @error('attendance_date')
                        <div class="text-danger small mt-1">
                            {{ $message }}
                        </div>
                    @enderror

                </div>

                {{-- Check-in Time --}}
                <div class="col-lg-12 mt-3">

                    <label
                        for="attendance_checkin"
                        class="form-label"
                    >
                        Check-in Time
                        <span class="text-danger">*</span>
                    </label>

                    <input
                        type="time"
                        name="attendance_checkin"
                        id="attendance_checkin"
                        class="form-control @error('attendance_checkin') is-invalid @enderror"
                        value="{{ old('attendance_checkin', now()->format('H:i')) }}"
                        
                    >

                    @error('attendance_checkin')
                        <div class="text-danger small mt-1">
                            {{ $message }}
                        </div>
                    @enderror

                </div>

                {{-- Attendance Type --}}
                <div class="col-lg-12 mt-3">

                    <label
                        for="attendance_type"
                        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"
                        required
                    >
                        <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 mt-1">
                            {{ $message }}
                        </div>
                    @enderror

                </div>

                {{-- Remark --}}
                <div class="col-lg-12 mt-3">

                    <label
                        for="remark"
                        class="form-label"
                    >
                        Remark
                    </label>

                    <textarea
                        name="remark"
                        id="remark"
                        class="form-control @error('remark') is-invalid @enderror"
                        rows="3"
                        placeholder="Enter remark"
                    >{{ old('remark') }}</textarea>

                    @error('remark')
                        <div class="text-danger small mt-1">
                            {{ $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"
                        id="discardBtn"
                    >
                        Discard
                    </button>

                    <button
                        type="submit"
                        class="btn btn-primary"
                        id="finalSubmit"
                        {{ $staffs->isEmpty() ? 'disabled' : '' }}
                    >
                        Submit
                    </button>

                </div>

            </form>

        </div>

    </div>

</div>

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


<script>
document.addEventListener('DOMContentLoaded', function () {

    if (typeof window.jQuery === 'undefined') {
        console.error('jQuery is not loaded.');
        return;
    }

    const $ = window.jQuery;

    function initializeSelect2() {
flatpickr("#attendance_date", {
    dateFormat: "Y-m-d",
    altInput: true,
    altFormat: "d/m/Y",
    maxDate: new Date(),
    allowInput: true,
    defaultDate: "{{ old('attendance_date', now()->format('Y-m-d')) }}"
});
        if (typeof $.fn.select2 === 'undefined') {
            console.error('Select2 is not loaded.');
            return;
        }

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

        console.log(
            'Login branch staff count:',
            $('#staff_id option').length - 1
        );
    }

    if (typeof $.fn.select2 !== 'undefined') {
        initializeSelect2();
    } else {

        const select2Script =
            document.createElement('script');

        select2Script.src =
            'https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js';

        select2Script.onload = function () {
            initializeSelect2();
        };

        select2Script.onerror = function () {
            console.error('Select2 CDN load failed.');
        };

        document.body.appendChild(select2Script);
    }

    $('#attendance_type').on('change', function () {

        const attendanceType = $(this).val();

        if (attendanceType === 'absent') {
            $('#attendance_checkin')
                .prop('required', false)
                .val('');
        } else {
            $('#attendance_checkin')
                .prop('required', true);

            if (!$('#attendance_checkin').val()) {
                const currentDate = new Date();

                const hours = String(
                    currentDate.getHours()
                ).padStart(2, '0');

                const minutes = String(
                    currentDate.getMinutes()
                ).padStart(2, '0');

                $('#attendance_checkin').val(
                    hours + ':' + minutes
                );
            }
        }
    });

    // $('#discardBtn').on('click', function () {

    //     setTimeout(function () {

    //         $('#staff_id')
    //             .val(null)
    //             .trigger('change');

    //         $('#attendance_type')
    //             .val('present')
    //             .trigger('change');

    //         $('#remark').val('');

    //     }, 10);
    // });

    $('#discardBtn').on('click', function () {
    setTimeout(function () {
        flatpickr("#attendance_date").clear();
        flatpickr("#attendance_date").setDate(new Date());
        $('#staff_id').val(null).trigger('change');
        $('#attendance_type').val('present').trigger('change');
        $('#remark').val('');
    }, 10);
});

    $('#addAttendanceForm').on('submit', function (event) {

        const submitButton =
            document.getElementById('finalSubmit');

        if (submitButton.disabled) {
            event.preventDefault();
            return;
        }

        const staffId =
            $('#staff_id').val();

        const attendanceDate =
            $('#attendance_date').val();

        const attendanceType =
            $('#attendance_type').val();

        const checkin =
            $('#attendance_checkin').val();

        if (!staffId) {
            event.preventDefault();
            alert('Staff select பண்ணுங்க.');
            return;
        }

        if (!attendanceDate) {
            event.preventDefault();
            alert('Attendance date select பண்ணுங்க.');
            return;
        }

        if (!attendanceType) {
            event.preventDefault();
            alert('Attendance type select பண்ணுங்க.');
            return;
        }

        if (
            attendanceType === 'present' &&
            !checkin
        ) {
            event.preventDefault();
            alert('Check-in time select பண்ணுங்க.');
            return;
        }

        submitButton.disabled = true;
        submitButton.innerText = 'Processing...';
    });

});
</script>

@endsection