@extends('dashboard.layouts.app')

@section('content')
    <div class="container mt-5">
        <div class="card shadow-lg border-0 rounded-3">
            <div class="card-header py-3">
                <div class="mb-0"><i class="fas fa-plus-circle me-2"></i>Create Regularization / Permission</div>
            </div>
            <div class="card-body">
                <form id="regularizationForm" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="row g-3">

                        <div class="col-md-6">

                            @php
                                $hr_department_ids = \App\Models\SmHumanDepartment::where('name', 'like', '%hr%')
                                    ->pluck('id')
                                    ->toArray();
                            @endphp


                            @if (isHumanResource())
                                <!-- ✅ HR User: Can select any staff -->
                                <option value="">Filter by Employee</option>

                                <select name="staff_id" class="form-select select2">
                                    <option value="">-- Choose Staff --</option>
                                    @foreach ($staffs as $s)
                                        <option value="{{ $s->id }}" {{ (string) ($selectedStaffId ?? '') === (string) $s->id ? 'selected' : '' }}>
                                            {{ $s->staff_no }} -
                                            {{ optional($s->user)->full_name ?? ($s->first_name . ' ' . $s->last_name) }}
                                        </option>
                                    @endforeach
                                </select>
                            @else
                                <!-- ✅ Non-HR User: Show only their own info -->
                                <div class="form-control">
                                    {{ auth()->user()?->staff?->staff_no }} -
                                    {{ auth()->user()?->full_name ?? (auth()->user()?->staff?->first_name . ' ' . auth()->user()?->staff?->last_name) }}
                                </div>
                                <input type="hidden" name="staff_id" value="{{ auth()->user()?->staff?->id }}">
                            @endif
                        </div>
                        <!-- Type -->
                        <div class="col-md-6">
                            <label for="type" class="form-label fw-bold">Type  <span
                                class="text-danger">*</span></label>
                            <select name="type" id="type" class="form-select rounded-3 select2" required>
                                <option value="">Select</option>
                                <option value="regularizations" {{ old('type') == 'regularizations' ? 'selected' : '' }}>
                                    Regularization</option>
                                <option value="permissions" {{ old('type') == 'permissions' ? 'selected' : '' }}>Permissions
                                </option>
                            </select>
                            @error('type')
                                <div class="text-danger mt-1">{{ $message }}</div>
                            @enderror
                        </div>
                        <!-- Additional fields for Regularizations -->
                        <div id="regularization-fields" class="mt-3" style="display: none;">
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label for="date_from" class="form-label fw-bold">Date From</label>
                                    <input type="date" id="date_from" name="date_from" class="form-control rounded-3">
                                </div>

                                <div class="col-md-6">
                                    <label for="date_to" class="form-label fw-bold">Date To</label>
                                    <input type="date" id="date_to" name="date_to" class="form-control rounded-3">
                                </div>
                            </div>

                            <div id="working-days-table" class="mt-4"></div>
                        </div>

                        <!-- Date -->
                        <div class="col-md-6">
                            <label for="date" class="form-label fw-bold">Date</label>
                            <input type="date" name="date" id="date" class="form-control rounded-3"
                                value="{{ old('date')}}">
                            @error('date')
                                <div class="text-danger mt-1">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- From Time -->
                        <div class="col-md-6">
                            <label for="from_time" class="form-label fw-bold">From Time</label>
                            <input type="time" name="from_time" id="from_time" class="form-control rounded-3"
                                value="{{ old('from_time') }}">
                            @error('from_time')
                                <div class="text-danger mt-1">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- End Time -->
                        <div class="col-md-6">
                            <label for="end_time" class="form-label fw-bold">End Time</label>
                            <input type="time" name="end_time" id="end_time" class="form-control rounded-3"
                                value="{{ old('end_time') }}">
                            @error('end_time')
                                <div class="text-danger mt-1">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Permission -->
                        {{-- <div class="col-md-6">
                            <label for="permission" class="form-label fw-bold">Permission</label>
                            <input type="text" name="permission" id="permission" class="form-control rounded-3"
                                value="{{ old('permission') }}" pattern="[A-Za-z0-9\s]+"
                                title="Only letters, numbers, and spaces are allowed">
                            @error('permission')
                            <div class="text-danger mt-1">{{ $message }}</div>
                            @enderror
                        </div> --}}

                        <!-- Reason -->
                        <div class="col-md-12">
                            <label for="reason" class="form-label fw-bold">Reason <span
                                class="text-danger">*</span></label>
                            <textarea name="reason" id="reason" class="form-control rounded-3"
                                rows="4" required>{{ old('reason') }}</textarea>
                            @error('reason')
                                <div class="text-danger mt-1">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div id="alertContainer"></div>

                    <!-- Buttons -->
                    <div class="mt-3">
                        <button type="submit" id="tst_btn" class="btn btn-primary px-4"><i
                                class="fas fa-save me-2"></i>Submit</button>
                        <a href="{{ route('regularizations_permissions.index') }}" class="btn btn-secondary px-4 ms-2"><i
                                class="fas fa-arrow-left me-2"></i>Cancel</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script>

        $(document).ready(function () {
            $('.select2').select2({
                allowClear: true,
                width: '100%'
            });
        });

        $(document).ready(function () {
            $('.select2').select2({
                allowClear: true,
                width: '100%'
            });

            // Function to calculate 4 working days before today
            function getDateLimits() {
                const today = new Date();
                today.setHours(0, 0, 0, 0);

                let workingDaysCount = 0;
                let currentDate = new Date(today);
                let minDate = null;

                // Go back to find 4 working days before today
                while (workingDaysCount < 4) {
                    currentDate.setDate(currentDate.getDate() - 1);
                    const dayOfWeek = currentDate.getDay();

                    // Skip weekends (Friday = 5, Saturday = 6)
                    if (dayOfWeek !== 5 && dayOfWeek !== 6) {
                        workingDaysCount++;
                        minDate = new Date(currentDate);
                    }
                }

                // Format dates as YYYY-MM-DD for input[type="date"]
                const formatDate = (date) => {
                    const year = date.getFullYear();
                    const month = String(date.getMonth() + 1).padStart(2, '0');
                    const day = String(date.getDate()).padStart(2, '0');
                    return `${year}-${month}-${day}`;
                };

                return {
                    min: formatDate(minDate),
                    max: formatDate(today)
                };
            }

            // Set date restrictions on page load
            const dateLimits = getDateLimits();
            $('#date_from').attr('min', dateLimits.min).attr('max', dateLimits.max);
            $('#date_to').attr('min', dateLimits.min).attr('max', dateLimits.max);

            // Show/hide fields based on type
            $('#type').on('change', function () {
                if ($(this).val() === 'regularizations') {
                    $('#regularization-fields').show();
                    $('#date').closest('.col-md-6').hide();
                    $('input[name="date"]').hide();
                    $('#from_time').closest('.col-md-6').hide();
                    $('#end_time').closest('.col-md-6').hide();
                } else {
                    $('#regularization-fields').hide();
                    $('#working-days-table').empty();
                    $('input[name="date"]').show();
                    $('#date').closest('.col-md-6').show();
                    $('#from_time').closest('.col-md-6').show();
                    $('#end_time').closest('.col-md-6').show();
                }
            });

            // When both dates are selected, generate working days
            $('#date_from, #date_to').on('change', function () {
                const from = $('#date_from').val();
                const to = $('#date_to').val();

                if (from && to) {
                    generateWorkingDays(from, to);
                }
            });

            function generateWorkingDays(from, to) {
                const startDate = new Date(from);
                const endDate = new Date(to);
                let current = new Date(startDate);
                let rows = '';

                while (current <= endDate) {
                    const day = current.getDay();
                    // Skip weekends (0 = Sunday, 6 = Saturday)
                    if (day !== 5 && day !== 6) {
                        const dateStr = current.toISOString().split('T')[0];
                        rows += `
                        <tr>
                            <td><input type="date" name="dates[]" class="form-control" value="${dateStr}" readonly></td>
                            <td><input type="time" name="check_in[]" class="form-control" ></td>
                            <td><input type="time" name="check_out[]" class="form-control" ></td>
                            <td>
                                <select name="reason_bulk[]" class="form-select">
                                    <option value="Forgot to check-in">Forgot to check-in</option>
                                    <option value="Forgot to check-out">Forgot to check-out</option>
                                    <option value="System issue">System issue</option>
                                    <option value="internet issue">internet issue</option>
                                </select>
                            </td>
                        </tr>
                    `;
                    }
                    current.setDate(current.getDate() + 1);
                }

                if (rows) {
                    const table = `
                    <div class="table-responsive mt-3">
                        <table class="table table-bordered align-middle">
                            <thead class="table-light">
                                <tr>
                                    <th>Date</th>
                                    <th>Check In</th>
                                    <th>Check Out</th>
                                    <th>Reason</th>
                                </tr>
                            </thead>
                            <tbody>
                                ${rows}
                            </tbody>
                        </table>
                    </div>
                `;
                    $('#working-days-table').html(table);
                } else {
                    $('#working-days-table').html('<div class="alert alert-warning mt-3">No working days in the selected range.</div>');
                }
            }
        });



        $('#regularizationForm').on('submit', function (e) {
            e.preventDefault();
            const form = $(this);
            const btn = $('#btnSubmit');
            const alertBox = $('#alertContainer');

            // clear old alerts
            alertBox.html('');

            $.ajax({
                url: "{{ route('regularizations_permissions.store') }}",
                type: "POST",
                data: form.serialize(),
                beforeSend: function () {
                    btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-2"></i>Saving...');
                },
                success: function (response) {
                    btn.prop('disabled', false).html('<i class="fas fa-save me-2"></i>Submit');
                    alertBox.html(`<div class="alert alert-success">Record saved successfully!</div>`);
                    form.trigger('reset');
                    if (response.success) {
                        window.location.href = response.redirect;
                    }
                    $('#working-days-table').empty();
                    $('.select2').val(null).trigger('change');

                },
                error: function (xhr) {
                    btn.prop('disabled', false).html('<i class="fas fa-save me-2"></i>Submit');
                    if (xhr.status === 422) {
                        const errors = xhr.responseJSON.errors;
                        let errorList = '<ul>';
                        $.each(errors, function (key, val) {
                            errorList += `<li>${val[0]}</li>`;
                        });
                        errorList += '</ul>';
                        alertBox.html(`<div class="alert alert-danger">${errorList}</div>`);
                    } else {
                        alertBox.html('<div class="alert alert-danger">An unexpected error occurred.</div>');
                    }
                }
            })
        });
    </script>
@endpush