@php use App\Models\SmHumanDepartment; @endphp

@extends('dashboard.layouts.app')

@section('content')
    @include('components.alert')

    <div class="container-fluid app-bg">
        <div class="page-shell">
            <div class="space-y-4">

                <x-page-title
                    title="Edit Regularization / Permission"
                    description="Update employee regularization or permission details, dates, times, and supporting reasons."
                >
                    <a href="{{ route('regularizations_permissions.index') }}" class="asset-btn asset-btn--secondary">
                        Back
                    </a>
                </x-page-title>

                <form id="regularizationForm" enctype="multipart/form-data">
                    @csrf
                    @method('POST')
                    <input type="hidden" name="id" value="{{ $record->id }}">

                    <div class="ui-card">
                        <div class="form-section">
                            <div class="form-section__head">
                                <h5 class="form-section__title mb-1">Request Information</h5>
                                <p class="form-section__sub mb-0">
                                    Update the employee, request type, and main request details.
                                </p>
                            </div>

                            <div class="asset-form-grid">
                                <div class="asset-col-6">
                                    <label class="asset-label">Employee</label>

                                    @if (isHumanResource())
                                        <select name="staff_id" class="asset-select regular-select" id="staffSelect">
                                            <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
                                        <div class="asset-input asset-input--static">
                                            {{ 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>

                                <div class="asset-col-6">
                                    <label for="type" class="asset-label">Type <span class="text-danger">*</span></label>
                                    <select name="type" id="type" class="asset-select" required>
                                        <option value="">Select Type</option>
                                        <option value="regularizations" {{ $record->type == 'regularizations' ? 'selected' : '' }}>
                                            Regularizations
                                        </option>
                                        <option value="permissions" {{ $record->type == 'permissions' ? 'selected' : '' }}>
                                            Permissions
                                        </option>
                                    </select>
                                    @error('type')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="asset-col-12">
                                    <label for="reason" class="asset-label">Reason <span class="text-danger">*</span></label>
                                    <textarea name="reason" id="reason" class="asset-input" rows="4">{{ $record->reason }}</textarea>
                                    @error('reason')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="ui-card" id="regularization-fields" style="display: none;">
                        <div class="form-section">
                            <div class="form-section__head">
                                <h5 class="form-section__title mb-1">Regularization Details</h5>
                                <p class="form-section__sub mb-0">
                                    Define the date range and update attendance corrections for each working day.
                                </p>
                            </div>

                            <div class="asset-form-grid">
                                <div class="asset-col-6">
                                    <label for="date_from" class="asset-label">Date From</label>
                                    <input type="date" id="date_from" name="date_from" class="asset-input"
                                        value="{{ $record->HrRegularizationsDates->min('date') }}">
                                </div>

                                <div class="asset-col-6">
                                    <label for="date_to" class="asset-label">Date To</label>
                                    <input type="date" id="date_to" name="date_to" class="asset-input"
                                        value="{{ $record->HrRegularizationsDates->max('date') }}">
                                </div>
                            </div>

                            <div id="working-days-table" class="mt-4">
                                @if ($record->type == 'regularizations')
                                    <div class="ui-card ui-card--table p-0 shadow-none border-0">
                                        <div class="table-responsive">
                                            <table class="table align-middle mb-0 regular-table">
                                                <thead>
                                                    <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="asset-input"
                                                                    value="{{ $date->date }}" readonly>
                                                            </td>
                                                            <td>
                                                                <input type="time" name="check_in[]" class="asset-input"
                                                                    value="{{ $date->check_in }}">
                                                            </td>
                                                            <td>
                                                                <input type="time" name="check_out[]" class="asset-input"
                                                                    value="{{ $date->check_out }}">
                                                            </td>
                                                            <td>
                                                                <select name="reason_bulk[]" class="asset-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>
                                @endif
                            </div>
                        </div>
                    </div>

                    <div class="ui-card" id="permission-fields" style="display: none;">
                        <div class="form-section">
                            <div class="form-section__head">
                                <h5 class="form-section__title mb-1">Permission Details</h5>
                                <p class="form-section__sub mb-0">
                                    Set the permission date and time range.
                                </p>
                            </div>

                            <div class="asset-form-grid">
                                <div class="asset-col-6">
                                    <label for="date" class="asset-label">Date</label>
                                    <input type="date" name="date" id="date" class="asset-input"
                                        value="{{ $record->date }}">
                                    @error('date')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="asset-col-6">
                                    <label for="from_time" class="asset-label">From Time</label>
                                    <input type="time" name="from_time" id="from_time" class="asset-input"
                                        value="{{ $record->from_time }}">
                                    @error('from_time')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="asset-col-6">
                                    <label for="end_time" class="asset-label">End Time</label>
                                    <input type="time" name="end_time" id="end_time" class="asset-input"
                                        value="{{ $record->end_time }}">
                                    @error('end_time')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>

                    <div id="alertContainer"></div>

                    <div class="asset-actions">
                        <a href="{{ route('regularizations_permissions.index') }}" class="asset-btn asset-btn--secondary">
                            Cancel
                        </a>
                        <button type="submit" id="btnSubmit" class="asset-btn asset-btn--primary">
                            Update Request
                        </button>
                    </div>
                </form>

            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .asset-input--static {
            display: flex;
            align-items: center;
            min-height: 44px;
            background: #f8fafc;
            color: #111827;
        }

        .regular-table th,
        .regular-table td {
            vertical-align: middle;
            text-align: center;
            padding: 0.85rem;
        }

        .regular-table thead th {
            font-size: 0.9rem;
            font-weight: 700;
            color: #374151;
            background: #f8fafc;
            border-bottom: 1px solid #e5e7eb;
            white-space: nowrap;
        }

        .regular-empty-box {
            display: flex;
            align-items: center;
            gap: 0.85rem;
            padding: 1rem 1.1rem;
            border: 1px dashed #cbd5e1;
            border-radius: 14px;
            background: #f8fafc;
            color: #475569;
        }

        .regular-empty-box__icon {
            font-size: 1.35rem;
            line-height: 1;
        }

        .regular-empty-box__title {
            font-weight: 700;
            color: #1e293b;
            margin-bottom: 0.15rem;
        }

        .regular-empty-box__text {
            font-size: 0.9rem;
        }
    </style>
@endpush

@push('scripts')
    <script>
        $(document).ready(function () {
            const form = $('#regularizationForm');
            const btn = $('#btnSubmit');
            const alertBox = $('#alertContainer');
            const typeSelect = $('#type');
            const regularizationFields = $('#regularization-fields');
            const permissionFields = $('#permission-fields');

            $('.regular-select').select2({
                width: '100%',
                allowClear: true,
                placeholder: '-- Choose Staff --'
            });

            function toggleFields() {
                const type = typeSelect.val();

                if (type === 'regularizations') {
                    regularizationFields.show();
                    permissionFields.hide();
                } else if (type === 'permissions') {
                    regularizationFields.hide();
                    permissionFields.show();
                } else {
                    regularizationFields.hide();
                    permissionFields.hide();
                }
            }

            function renderEmptyWorkingDaysMessage(message = 'No working days in the selected range.') {
                $('#working-days-table').html(`
                    <div class="regular-empty-box mt-3">
                        <div class="regular-empty-box__icon">
                            <iconify-icon icon="mdi:calendar-remove-outline"></iconify-icon>
                        </div>
                        <div>
                            <div class="regular-empty-box__title">No working days found</div>
                            <div class="regular-empty-box__text">${message}</div>
                        </div>
                    </div>
                `);
            }

            function ensureWorkingDaysTable() {
                if (!document.querySelector('#working-days-table tbody')) {
                    $('#working-days-table').html(`
                        <div class="ui-card ui-card--table p-0 shadow-none border-0 mt-3">
                            <div class="table-responsive">
                                <table class="table align-middle mb-0 regular-table">
                                    <thead>
                                        <tr>
                                            <th>Date</th>
                                            <th>Check In</th>
                                            <th>Check Out</th>
                                            <th>Reason</th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                        </div>
                    `);
                }
            }

            function generateWorkingDays(from, to) {
                const startDate = new Date(from);
                const endDate = new Date(to);

                if (isNaN(startDate.getTime()) || isNaN(endDate.getTime()) || startDate > endDate) {
                    renderEmptyWorkingDaysMessage('Please select a valid date range.');
                    return;
                }

                let newDates = [];
                let current = new Date(startDate);

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

                if (newDates.length === 0) {
                    renderEmptyWorkingDaysMessage();
                    return;
                }

                ensureWorkingDaysTable();

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

                const toAdd = newDates.filter(d => !existingDates.includes(d));
                const toRemove = existingDates.filter(d => !newDates.includes(d));

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

                const tbody = document.querySelector('#working-days-table tbody');

                toAdd.forEach(dateStr => {
                    tbody.insertAdjacentHTML('beforeend', `
                        <tr>
                            <td>
                                <input type="date" name="dates[]" class="asset-input" value="${dateStr}" readonly>
                            </td>
                            <td>
                                <input type="time" name="check_in[]" class="asset-input">
                            </td>
                            <td>
                                <input type="time" name="check_out[]" class="asset-input">
                            </td>
                            <td>
                                <select name="reason_bulk[]" class="asset-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>
                    `);
                });
            }

            typeSelect.on('change', toggleFields);
            $('#date_from, #date_to').on('change', function () {
                const from = $('#date_from').val();
                const to = $('#date_to').val();
                if (from && to) {
                    generateWorkingDays(from, to);
                }
            });

            toggleFields();

            form.on('submit', function (e) {
                e.preventDefault();

                alertBox.html('');

                $.ajax({
                    url: "{{ route('regularizations_permissions.update', $record->id) }}",
                    type: "POST",
                    data: form.serialize(),
                    beforeSend: function () {
                        btn.prop('disabled', true).text('Saving...');
                    },
                    success: function () {
                        window.location.href = "{{ route('regularizations_permissions.index') }}";
                    },
                    error: function (xhr) {
                        btn.prop('disabled', false).text('Update Request');

                        if (xhr.status === 422) {
                            const errors = xhr.responseJSON.errors;
                            let errorList = '<ul class="mb-0">';
                            $.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>
                            `);
                        }
                    }
                });
            });

            @if($record->type === 'regularizations' && $record->HrRegularizationsDates->count())
                toggleFields();
            @endif
        });
    </script>
@endpush