@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 Leave Request"
                    description="Update leave type, dates, and reason while ensuring balance availability.">
                    <a href="{{ route('leaves.index') }}" class="asset-btn asset-btn--secondary">
                        Cancel
                    </a>
                </x-page-title>

                <form action="{{ route('leaves.update', $leaveRequest->id) }}" method="POST" id="leaveForm">
                    @csrf
                    @method('PUT')

                    <div class="ui-card form-section">
                        <div class="form-section__head">
                            <div class="form-section__title">Leave Details</div>
                            <div class="form-section__sub">Modify leave type, date range, and reason.</div>
                        </div>

                        <div class="asset-form-grid">

                            {{-- Leave Type --}}
                            <div class="asset-col-12">
                                <label class="asset-label">Leave Type <span class="text-danger">*</span></label>

                                <div class="asset-select2-wrap">
                                    <select name="leave_type_id" id="leave_type_id"
                                        class="asset-select general-select" required>
                                        <option value="">Select Leave Type</option>
                                        @foreach ($leaveTypes as $item)
                                            <option value="{{ $item->id }}"
                                                {{ old('leave_type_id', $leaveRequest->leave_type_id) == $item->id ? 'selected' : '' }}>
                                                {{ $item->type }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                {{-- Balance --}}
                                <div id="balance_container" class="mt-2" style="display:none;">
                                    <div class="ui-pill ui-pill--info">
                                        Available Balance:
                                        <strong id="balance_amount" class="ms-1">--</strong> days
                                    </div>
                                </div>

                                {{-- Error --}}
                                <div id="balance_error" class="mt-2" style="display:none;">
                                    <div class="ui-pill ui-pill--danger" id="error_message"></div>
                                </div>

                                @error('leave_type_id')
                                    <div class="asset-invalid">{{ $message }}</div>
                                @enderror
                            </div>

                            {{-- Dates --}}
                            <div class="asset-col-6">
                                <label class="asset-label">Leave From <span class="text-danger">*</span></label>
                                <input type="date" name="leave_from"
                                    class="asset-input"
                                    value="{{ old('leave_from', $leaveRequest->leave_from) }}" required>

                                @error('leave_from')
                                    <div class="asset-invalid">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="asset-col-6">
                                <label class="asset-label">Leave To <span class="text-danger">*</span></label>
                                <input type="date" name="leave_to"
                                    class="asset-input"
                                    value="{{ old('leave_to', $leaveRequest->leave_to) }}" required>

                                @error('leave_to')
                                    <div class="asset-invalid">{{ $message }}</div>
                                @enderror
                            </div>

                            {{-- Reason --}}
                            <div class="asset-col-12">
                                <label class="asset-label">Reason <span class="text-danger">*</span></label>
                                <textarea name="leave_reason"
                                    class="asset-input"
                                    rows="4"
                                    required>{{ old('leave_reason', $leaveRequest->leave_reason) }}</textarea>

                                @error('leave_reason')
                                    <div class="asset-invalid">{{ $message }}</div>
                                @enderror
                            </div>

                        </div>
                    </div>

                    {{-- Actions --}}
                    <div class="asset-actions">
                        <a href="{{ route('leaves.index') }}" class="asset-btn asset-btn--secondary">
                            Cancel
                        </a>

                        <button type="submit" id="submitBtn" class="asset-btn asset-btn--primary">
                            <span class="submit-text">Update Request</span>
                            <span class="spinner-border spinner-border-sm d-none ms-2"></span>
                        </button>
                    </div>

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

@push('scripts')
<script>
$(function () {

    // ✅ Select2
    $('.select2').select2({
        width: '100%',
        allowClear: true
    });

    const staffId = "{{ $staff->id }}";

    function fetchBalance() {
        const leaveTypeId = $('#leave_type_id').val();

        if (!leaveTypeId) {
            $('#balance_container, #balance_error').hide();
            return;
        }

        $.get(`/requests/leave-balances/${leaveTypeId}`, { staff_id: staffId })
            .done(function (res) {
                if (res.success === false) {
                    $('#error_message').text(res.message);
                    $('#balance_error').show();
                    $('#balance_container').hide();
                    $('#submitBtn').prop('disabled', true);
                } else {
                    $('#balance_amount').text(res.balance);
                    $('#balance_container').show();
                    $('#balance_error').hide();
                    $('#submitBtn').prop('disabled', false);
                }
            })
            .fail(function () {
                $('#error_message').text('Error fetching balance');
                $('#balance_error').show();
                $('#balance_container').hide();
            });
    }

    $('#leave_type_id').on('change', fetchBalance);

    if ($('#leave_type_id').val()) fetchBalance();

    // ✅ AJAX Submit
    $('#leaveForm').on('submit', function (e) {
        e.preventDefault();

        let form = $(this);
        let btn = $('#submitBtn');
        let text = btn.find('.submit-text');
        let spinner = btn.find('.spinner-border');

        btn.prop('disabled', true);
        text.addClass('d-none');
        spinner.removeClass('d-none');

        $('.alert').remove();

        $.post(form.attr('action'), form.serialize())
            .done(function (res) {
                form.before(`<div class="alert alert-success">${res.message}</div>`);
                setTimeout(() => window.location.href = res.redirect, 1200);
            })
            .fail(function (xhr) {
                let html = `<div class="alert alert-danger"><ul>`;
                $.each(xhr.responseJSON?.errors || {}, (_, v) => {
                    html += `<li>${v[0]}</li>`;
                });
                html += `</ul></div>`;

                form.before(html);

                btn.prop('disabled', false);
                text.removeClass('d-none');
                spinner.addClass('d-none');
            });
    });

});
</script>
@endpush