@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-edit me-2"></i>Edit Regularization / Permission</div>
            </div>
            <div class="card-body">
                <form id="regularizationForm" enctype="multipart/form-data">
                    @csrf
                    @method('POST')
                    <div class="row g-3">

                        <input type="hidden" name="id" value="{{ $record->id }}">
                        <!-- Staff -->
                        <div class="col-md-6">



                            @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>
                                    @php $selectedStaffId =  $record->staff_id @endphp
                                    @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" {{ $record->type == 'regularizations' ? 'selected' : '' }}>Regularizations</option>
                                <option value="permissions" {{ $record->type == 'permissions' ? 'selected' : '' }}>Permissions</option>
                            </select>
                            @error('type')
                            <div class="text-danger mt-1">{{ $message }}</div>
                            @enderror
                        </div>
                        @if($record->type == 'regularizations')
                            <div id="regularization-fields" class="mt-3">
                                <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"
                                               value="{{ $record->HrRegularizationsDates->min('date') }}">
                                    </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"
                                               value="{{ $record->HrRegularizationsDates->max('date') }}">
                                    </div>
                                </div>

                                <div id="working-days-table" class="mt-4">
                                    <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>
                                            @foreach ($record->HrRegularizationsDates as $date)
                                                <tr>
                                                    <td>
                                                        <input type="date" name="dates[]" class="form-control"
                                                               value="{{ $date->date }}" readonly>
                                                    </td>
                                                    <td>
                                                        <input type="time" name="check_in[]" class="form-control"
                                                               value="{{ $date->check_in }}">
                                                    </td>
                                                    <td>
                                                        <input type="time" name="check_out[]" class="form-control"
                                                               value="{{ $date->check_out }}">
                                                    </td>
                                                    <td>
                                                        <select name="reason_bulk[]" class="form-select">
                                                            <option value="Forgot to check-in" {{ $date->reason == 'Forgot to check-in' ? 'selected' : '' }}>Forgot to check-in</option>
                                                            <option value="Forgot to check-out" {{ $date->reason == 'Forgot to check-out' ? 'selected' : '' }}>Forgot to check-out</option>
                                                            <option value="System issue" {{ $date->reason == 'System issue' ? 'selected' : '' }}>System issue</option>
                                                            <option value="Internet issue" {{ $date->reason == 'Internet issue' ? 'selected' : '' }}>Internet issue</option>
                                                        </select>
                                                    </td>
                                                </tr>
                                            @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        @endif

                        <!-- Regularizations Fields -->


                        <!-- Permission Fields -->
                        <div id="permission-fields" class="row g-3">
                            <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="{{ $record->date }}">
                                @error('date')
                                <div class="text-danger mt-1">{{ $message }}</div>
                                @enderror
                            </div>

                            <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="{{ $record->from_time }}">
                                @error('from_time')
                                <div class="text-danger mt-1">{{ $message }}</div>
                                @enderror
                            </div>

                            <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="{{ $record->end_time }}">
                                @error('end_time')
                                <div class="text-danger mt-1">{{ $message }}</div>
                                @enderror
                            </div>

                            {{-- <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"
                                       pattern="[A-Za-z0-9\s]+" title="Only letters, numbers, and spaces are allowed"
                                       value="{{ $record->permission }}">
                                @error('permission')
                                <div class="text-danger mt-1">{{ $message }}</div>
                                @enderror
                            </div> --}}
                        </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">{{ $record->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" class="btn btn-primary px-4"><i class="fas fa-save me-2"></i>Update</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>
        $('#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.update', $record->id) }}",
                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');
                    $('#working-days-table').empty();
                    $('.select2').val(null).trigger('change');
                    window.location.href = "{{ route('regularizations_permissions.index') }}";

                },
                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>');
                    }
                }
            })
        });
        $(document).ready(function() {
            $('.select2').select2({ allowClear: true, width: '100%' });

            function toggleFields() {
                const type = $('#type').val();
                if (type === 'regularizations') {
                    $('#regularization-fields').show();
                    $('#permission-fields').hide();
                } else {
                    $('#regularization-fields').hide();
                    $('#permission-fields').show();
                }
            }

            // Run on page load and on type change
            toggleFields();
            $('#type').on('change', toggleFields);

            // --- Generate Working Days (same as create) ---
            $('#date_from, #date_to').on('change', function() {
                const from = $('#date_from').val();
                const to = $('#date_to').val();
                if (from && to) generateWorkingDays(from, to);
            });

            // let  days =  ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
            function generateWorkingDays(from, to) {
                const startDate = new Date(from);
                const endDate = new Date(to);

                // Collect all new working days (Mon–Fri)
                let newDates = [];
                let current = new Date(startDate);
                // alert(current.toDateString())
                while (current <= endDate) {

                    let day = current.getDay();
                    if (day !== 6 && day !== 5) {
                        newDates.push(current.toISOString().split('T')[0]);
                    }
                    current.setDate(current.getDate() + 1);
                }

                // Get existing rows and map their dates
                const existingRows = Array.from(document.querySelectorAll('#working-days-table tbody tr'));
                const existingDates = existingRows.map(row => row.querySelector('input[name="dates[]"]').value);

                // --- Add missing rows ---
                const toAdd = newDates.filter(d => !existingDates.includes(d));

                // --- Remove outdated rows ---
                const toRemove = existingDates.filter(d => !newDates.includes(d));

                // Remove outdated rows
                toRemove.forEach(date => {
                    const row = existingRows.find(r => r.querySelector('input[name="dates[]"]').value === date);
                    if (row) row.remove();
                });

                // Add missing rows
                const tbody = document.querySelector('#working-days-table tbody');
                if (!tbody) {
                    // If the table doesn't exist yet, create it
                    $('#working-days-table').html(`
            <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></tbody>
                </table>
            </div>
        `);
                }

                const updatedTbody = document.querySelector('#working-days-table tbody');
                toAdd.forEach(dateStr => {
                    updatedTbody.insertAdjacentHTML('beforeend', `
            <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>
        `);
                });

                // If there are no working days left
                if (newDates.length === 0) {
                    $('#working-days-table').html('<div class="alert alert-warning mt-3">No working days in the selected range.</div>');
                }
            }



            // Preload working days if editing regularization record
            @if($record->type === 'regularizations' && $record->date_from && $record->date_to)
            generateWorkingDays('{{ $record->date_from }}', '{{ $record->date_to }}');
            @endif
        });
    </script>
@endpush