@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="Leave Balance Configuration"
                    description="Create a leave balance rule by leave type, job title, hiring duration, and employment eligibility.">
                    <a href="{{ route('leave-balance-configurations.index') }}" class="asset-btn asset-btn--secondary">
                        <iconify-icon icon="ion:arrow-back-outline"></iconify-icon>
                        <span>Back to List</span>
                    </a>
                </x-page-title>

                <form action="{{ route('leave-balance-configurations.store') }}" method="POST">
                    @csrf

                    <div class="ui-card">
                        <div class="form-section">
                            <div class="form-section__head">
                                <h5 class="form-section__title mb-1">Configuration Details</h5>
                                <p class="form-section__sub mb-0">
                                    Define leave eligibility rules and assign balances for full-time and part-time
                                    employees.
                                </p>
                            </div>

                            @if ($errors->any())
                                <div class="alert alert-danger alert-dismissible fade show mb-4" role="alert">
                                    <ul class="mb-0">
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                                </div>
                            @endif

                            <div class="ui-card ui-card--table border-0 shadow-none">
                                <div class="table-responsive">
                                    <table class="table align-middle mb-0 leave-config-table">
                                        <thead>
                                            <tr>
                                                <th>Leave Type</th>
                                                <th>Job Title</th>
                                                <th>Min. Hiring Duration</th>
                                                <th>Eligible Levels</th>
                                                <th>Days</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>
                                                    <select name="leave_type_id"
                                                        class="asset-select @error('leave_type_id') asset-invalid @enderror"
                                                        required>
                                                        <option value="">Select Leave Type</option>
                                                        @foreach ($leaveTypes as $leaveType)
                                                            @if ($leaveType->type != 'Sick Leave')
                                                                <option value="{{ $leaveType->id }}"
                                                                    {{ old('leave_type_id') == $leaveType->id ? 'selected' : '' }}>
                                                                    {{ $leaveType->type }}
                                                                </option>
                                                            @endif
                                                        @endforeach
                                                    </select>
                                                    @error('leave_type_id')
                                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                                    @enderror
                                                </td>

                                                <td>
                                                    <select name="job_title_id"
                                                        class="asset-select @error('job_title_id') asset-invalid @enderror"
                                                        required>
                                                        <option value="">Select Job Title</option>

                                                        @foreach ($jobTitles->filter(function ($f) {
            return $f->slug == 'teacher' || $f->slug == 'tester';
        }) as $jobTitle)
                                                            <option value="{{ $jobTitle->id }}"
                                                                {{ old('job_title_id') == $jobTitle->id ? 'selected' : '' }}>
                                                                {{ $jobTitle->name }}
                                                            </option>
                                                        @endforeach

                                                        <option value="staff"
                                                            {{ old('job_title_id') == 'staff' ? 'selected' : '' }}>
                                                            All Staff Members (not including teachers / testers)
                                                        </option>
                                                    </select>
                                                    @error('job_title_id')
                                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                                    @enderror
                                                </td>

                                                <td>
                                                    <div class="asset-input-group">
                                                        <input type="number" name="min_hiring_duration_years"
                                                            class="asset-input @error('min_hiring_duration_years') asset-invalid @enderror"
                                                            value="{{ old('min_hiring_duration_years', 0) }}"
                                                            step="0.01" min="0" placeholder="0" required>
                                                        <span class="asset-input-group__addon">Years</span>
                                                    </div>

                                                    <div class="field-note mt-2">
                                                        <span class="ui-pill ui-pill--neutral">0 = immediate</span>
                                                        <small class="text-muted d-block mt-2">
                                                            For months, use decimal values. Example: <strong>0.5</strong>
                                                        </small>
                                                    </div>

                                                    @error('min_hiring_duration_years')
                                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                                    @enderror
                                                </td>

                                                <td>
                                                    <div class="eligibility-stack">
                                                        <label class="eligibility-check">
                                                            <input class="form-check-input" type="checkbox"
                                                                id="fullTimeCheck" checked>
                                                            <span>Full-time</span>
                                                        </label>

                                                        <label class="eligibility-check">
                                                            <input class="form-check-input" type="checkbox"
                                                                id="partTimeCheck">
                                                            <span>Part-time</span>
                                                        </label>
                                                    </div>
                                                </td>

                                                <td>
                                                    <div class="balance-stack">
                                                        <div class="balance-row" id="fullTimeInput">
                                                            <div class="balance-label">Full-time</div>
                                                            <div class="asset-input-group">
                                                                <input type="number" name="full_time_balance"
                                                                    class="asset-input @error('full_time_balance') asset-invalid @enderror"
                                                                    value="{{ old('full_time_balance') }}" min="1"
                                                                    placeholder="Days">
                                                                <button
                                                                    class="asset-btn asset-btn--secondary balance-unlimited-btn"
                                                                    type="button"
                                                                    onclick="setUnlimited('full_time_balance')">
                                                                    ∞
                                                                </button>
                                                            </div>
                                                        </div>

                                                        <div class="balance-row" id="partTimeInput" style="display: none;">
                                                            <div class="balance-label">Part-time</div>
                                                            <div class="asset-input-group">
                                                                <input type="number" name="part_time_balance"
                                                                    class="asset-input @error('part_time_balance') asset-invalid @enderror"
                                                                    value="{{ old('part_time_balance') }}" min="1"
                                                                    placeholder="Days">
                                                                <button
                                                                    class="asset-btn asset-btn--secondary balance-unlimited-btn"
                                                                    type="button"
                                                                    onclick="setUnlimited('part_time_balance')">
                                                                    ∞
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    @error('full_time_balance')
                                                        <div class="invalid-feedback d-block mt-2">{{ $message }}</div>
                                                    @enderror

                                                    @error('part_time_balance')
                                                        <div class="invalid-feedback d-block mt-2">{{ $message }}</div>
                                                    @enderror
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                            <div class="leave-note-box mt-4">
                                <div class="leave-note-box__icon">
                                    <iconify-icon icon="mdi:information-outline"></iconify-icon>
                                </div>
                                <div>
                                    <div class="leave-note-box__title">Important Note</div>
                                    <div class="leave-note-box__text">
                                        Click <strong>∞</strong> to mark the balance as unlimited. At least one employment
                                        type must remain selected.
                                    </div>
                                </div>
                            </div>

                            <div class="asset-actions">
                                <a href="{{ route('leave-balance-configurations.index') }}"
                                    class="asset-btn asset-btn--secondary">
                                    Cancel
                                </a>
                                <button type="submit" class="asset-btn asset-btn--primary">
                                    Save Configuration
                                </button>
                            </div>
                        </div>
                    </div>
                </form>

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

@push('styles')
    <style>
        .form-section__head {
            margin-bottom: 1rem;
            padding-bottom: 0.9rem;
            border-bottom: 1px solid #eef2f7;
        }

        .form-section__title {
            font-size: 1rem;
            font-weight: 700;
            color: #111827;
        }

        .form-section__sub {
            color: #6b7280;
            font-size: 0.92rem;
        }

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

        .leave-config-table td,
        .leave-config-table th {
            padding: 1rem;
            vertical-align: top;
            border-color: #eef2f7;
        }

        .asset-label {
            display: inline-block;
            margin-bottom: 0.45rem;
            font-weight: 600;
            color: #374151;
            font-size: 0.92rem;
        }

        .asset-input,
        .asset-select {
            width: 100%;
            min-height: 44px;
            border: 1px solid #dbe2ea;
            border-radius: 12px;
            padding: 0.7rem 0.9rem;
            background: #fff;
            color: #111827;
            transition: 0.2s ease;
        }

        .asset-input:focus,
        .asset-select:focus {
            outline: none;
            border-color: #b8c4d6;
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.08);
        }

        .asset-invalid {
            border-color: #dc3545 !important;
        }

        .asset-input-group {
            display: flex;
            align-items: stretch;
            width: 100%;
            gap: 0;
        }

        .asset-input-group .asset-input {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }

        .asset-input-group__addon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 80px;
            padding: 0.7rem 0.9rem;
            border: 1px solid #dbe2ea;
            border-left: 0;
            border-top-right-radius: 12px;
            border-bottom-right-radius: 12px;
            background: #f8fafc;
            color: #4b5563;
            font-weight: 600;
            white-space: nowrap;
        }

        .eligibility-stack {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
            min-width: 150px;
        }

        .eligibility-check {
            display: inline-flex;
            align-items: center;
            gap: 0.55rem;
            font-weight: 500;
            color: #374151;
        }

        .balance-stack {
            display: flex;
            flex-direction: column;
            gap: 0.85rem;
            min-width: 220px;
        }

        .balance-row {
            display: flex;
            flex-direction: column;
            gap: 0.45rem;
        }

        .balance-label {
            font-size: 0.85rem;
            font-weight: 700;
            color: #6b7280;
        }

        .balance-unlimited-btn {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
            min-width: 52px;
            justify-content: center;
        }

        .field-note small {
            line-height: 1.5;
        }

        .leave-note-box {
            display: flex;
            align-items: flex-start;
            gap: 0.85rem;
            padding: 1rem 1.1rem;
            border: 1px solid #dbeafe;
            background: #f8fbff;
            border-radius: 16px;
        }

        .leave-note-box__icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 38px;
            height: 38px;
            border-radius: 999px;
            background: #e0f2fe;
            color: #2563eb;
            font-size: 1.2rem;
            flex-shrink: 0;
        }

        .leave-note-box__title {
            font-weight: 700;
            color: #111827;
            margin-bottom: 0.2rem;
        }

        .leave-note-box__text {
            color: #4b5563;
            font-size: 0.94rem;
            line-height: 1.6;
        }

        .asset-actions {
            display: flex;
            justify-content: flex-end;
            gap: 0.75rem;
            margin-top: 1.25rem;
            flex-wrap: wrap;
        }

        @media (max-width: 991.98px) {
            .leave-config-table {
                min-width: 980px;
            }
        }
    </style>
@endpush

@push('scripts')
    <script>
        function toggleBalanceInput(checkboxId, inputWrapperId, inputName) {
            const checkbox = document.getElementById(checkboxId);
            const wrapper = document.getElementById(inputWrapperId);
            const input = document.querySelector(`input[name="${inputName}"]`);

            if (!checkbox || !wrapper || !input) return;

            wrapper.style.display = checkbox.checked ? 'flex' : 'none';

            if (!checkbox.checked) {
                input.value = '';
                input.placeholder = 'Days';
            }
        }

        function setUnlimited(fieldName) {
            const input = document.querySelector(`input[name="${fieldName}"]`);
            if (!input) return;

            input.value = '';
            input.placeholder = 'Unlimited';
        }

        document.addEventListener('DOMContentLoaded', function() {
            const partTimeCheck = document.getElementById('partTimeCheck');
            const fullTimeCheck = document.getElementById('fullTimeCheck');

            if (partTimeCheck) {
                partTimeCheck.addEventListener('change', function() {
                    toggleBalanceInput('partTimeCheck', 'partTimeInput', 'part_time_balance');
                });
            }

            if (fullTimeCheck) {
                fullTimeCheck.addEventListener('change', function() {
                    toggleBalanceInput('fullTimeCheck', 'fullTimeInput', 'full_time_balance');
                });
            }

            toggleBalanceInput('partTimeCheck', 'partTimeInput', 'part_time_balance');
            toggleBalanceInput('fullTimeCheck', 'fullTimeInput', 'full_time_balance');

            setTimeout(() => {
                let alert = document.getElementById('successAlert');
                if (alert) {
                    let bsAlert = new bootstrap.Alert(alert);
                    bsAlert.close();
                }
            }, 10000);
        });
    </script>
@endpush