@extends('dashboard.layouts.app')
@section('content')
    <style>
        .ui-card {
            border: 0;
            border-radius: 18px;
            background: #fff;
            box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
            padding: 1.25rem;
        }

        .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;
        }

        .asset-form-grid {
            display: grid;
            grid-template-columns: repeat(12, minmax(0, 1fr));
            gap: 1rem;
        }

        .asset-col-12 {
            grid-column: span 12 / span 12;
        }

        .asset-col-6 {
            grid-column: span 6 / span 6;
        }

        .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;
        }

        textarea.asset-input {
            min-height: 120px;
            resize: vertical;
        }

        .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;
        }

        .apply-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 1rem;
        }

        .apply-card {
            display: block;
            cursor: pointer;
            margin: 0;
        }

        .apply-card input {
            display: none;
        }

        .apply-card__box {
            display: block;
            padding: 1rem;
            border: 1px solid #e5e7eb;
            border-radius: 16px;
            background: #fff;
            transition: 0.2s ease;
            min-height: 110px;
        }

        .apply-card__title {
            display: block;
            font-weight: 700;
            color: #111827;
            margin-bottom: 0.35rem;
        }

        .apply-card__text {
            display: block;
            color: #6b7280;
            font-size: 0.9rem;
            line-height: 1.55;
        }

        .apply-card input:checked + .apply-card__box {
            border-color: #c7d2fe;
            background: #f8faff;
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.08);
        }

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

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

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

        .empty-levels-box__text {
            font-size: 0.9rem;
        }

        .level-card {
            border: 1px solid #e5e7eb;
            border-radius: 18px;
            padding: 1.25rem;
            background: #fdfdfd;
            margin-bottom: 1.5rem;
            transition: 0.2s ease;
        }

        .level-card:hover {
            border-color: #cbd5e1;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
        }

        .level-card__header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1.25rem;
            padding-bottom: 0.75rem;
            border-bottom: 1px dashed #e2e8f0;
        }

        .level-card__title {
            font-weight: 800;
            color: #1e293b;
            font-size: 1.05rem;
            margin: 0;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .penalty-row {
            display: grid;
            grid-template-columns: 1.5fr 1fr auto;
            gap: 1rem;
            align-items: end;
            padding: 1rem;
            background: #fff;
            border: 1px solid #f1f5f9;
            border-radius: 12px;
            margin-bottom: 0.75rem;
            position: relative;
        }

        .penalty-row:last-child {
            margin-bottom: 0;
        }

        .level-action-btn {
            width: 32px;
            height: 32px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            border: 1px solid #dbe2ea;
            background: #fff;
            color: #475569;
            transition: 0.2s ease;
            font-size: 1rem;
        }

        .level-action-btn:hover {
            transform: translateY(-1px);
            background: #f8fafc;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
        }

        .level-action-btn--danger {
            color: #ef4444;
            border-color: #fecaca;
        }

        .level-action-btn--danger:hover {
            background: #fef2f2;
            border-color: #fca5a5;
        }

        .add-penalty-btn {
            background: #f8fafc;
            border: 1px dashed #cbd5e1;
            border-radius: 12px;
            width: 100%;
            padding: 0.6rem;
            color: #64748b;
            font-weight: 600;
            font-size: 0.85rem;
            transition: 0.2s ease;
            margin-top: 0.5rem;
        }

        .add-penalty-btn:hover {
            background: #f1f5f9;
            border-color: #94a3b8;
            color: #334155;
        }

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

        @media (max-width: 991.98px) {
            .penalty-row {
                grid-template-columns: 1fr;
            }
        }
    </style>

@include('components.alert')

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

                <x-page-title title="Create New Rule" description="Add a new rule with its configuration, staff scope, and progressive levels if needed.">
                    <a href="{{ route('rules.index') }}" class="asset-btn asset-btn--secondary">
                        Back to Rules
                    </a>
                </x-page-title>

                <form id="createRuleForm" action="{{ route('rules.store') }}" method="POST">
                    @csrf

                    <div class="ui-card" style="margin-bottom: 10px;">
                        <div class="form-section">
                            <div class="form-section__head">
                                <h5 class="form-section__title mb-1">Rule Information</h5>
                                <p class="form-section__sub mb-0">
                                    Fill in the core rule details including type, value, unit, and timing.
                                </p>
                            </div>

                            <div class="asset-form-grid">
                                <div class="asset-col-6">
                                    <label class="asset-label">Name <span class="text-danger">*</span></label>
                                    <input type="text" name="name"
                                        class="asset-input @error('name') asset-invalid @enderror"
                                        value="{{ old('name') }}" required maxlength="255">
                                    @error('name')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="asset-col-6">
                                    <label class="asset-label">Type <span class="text-danger">*</span></label>
                                    <select name="type" id="ruleTypeSelect"
                                        class="asset-select @error('type') asset-invalid @enderror" required>
                                        <option value="">Select Type</option>
                                        <option value="bonus" {{ old('type') == 'bonus' ? 'selected' : '' }}>Bonus</option>
                                        <option value="penalty" {{ old('type') == 'penalty' ? 'selected' : '' }}>Penalty</option>
                                    </select>
                                    @error('type')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="asset-col-6">
                                    <label class="asset-label">Value <span class="text-danger">*</span></label>
                                    <input type="number" step="0.01" name="value"
                                        class="asset-input @error('value') asset-invalid @enderror"
                                        value="{{ old('value') }}" required min="0.25">
                                    @error('value')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="asset-col-6">
                                    <label class="asset-label">Units <span class="text-danger">*</span></label>
                                    <select name="units"
                                        class="asset-select @error('units') asset-invalid @enderror" required>
                                        <option value="">Select Units</option>
                                        <option value="fixed" {{ old('units') == 'fixed' ? 'selected' : '' }}>Fixed</option>
                                        <option value="hour" {{ old('units') == 'hour' ? 'selected' : '' }}>Hour</option>
                                        <option value="day" {{ old('units') == 'day' ? 'selected' : '' }}>Day</option>
                                        <option value="percentage" {{ old('units') == 'percentage' ? 'selected' : '' }}>Percentage</option>
                                    </select>
                                    @error('units')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="asset-col-6">
                                    <label class="asset-label">Status <span class="text-danger">*</span></label>
                                    <select name="status"
                                        class="asset-select @error('status') asset-invalid @enderror" required>
                                        <option value="active" {{ old('status', 'active') == 'active' ? 'selected' : '' }}>Active</option>
                                        <option value="inactive" {{ old('status') == 'inactive' ? 'selected' : '' }}>Inactive</option>
                                    </select>
                                    @error('status')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="asset-col-6">
                                    <label class="asset-label">Time Check Unit <span class="text-danger">*</span></label>
                                    <select name="time_check_unit"
                                        class="asset-select @error('time_check_unit') asset-invalid @enderror" required>
                                        <option value="week" {{ old('time_check_unit') == 'week' ? 'selected' : '' }}>Week</option>
                                        <option value="month" {{ old('time_check_unit') == 'monther' ? 'selected' : '' }}>Month</option>
                                        <option value="quarter" {{ old('time_check_unit', 'quarter') == 'quarter' ? 'selected' : '' }}>Quarter</option>
                                        <option value="six_month" {{ old('time_check_unit') == 'six_month' ? 'selected' : '' }}>Six Month</option>
                                        <option value="year" {{ old('time_check_unit') == 'year' ? 'selected' : '' }}>Year</option>
                                    </select>
                                    @error('time_check_unit')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="asset-col-12">
                                    <label class="asset-label">Description <span class="text-danger">*</span></label>
                                    <textarea name="description" rows="4"
                                        class="asset-input @error('description') asset-invalid @enderror"
                                        required maxlength="1000">{{ old('description') }}</textarea>
                                    @error('description')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="ui-card">
                        <div class="form-section">
                            <div class="form-section__head">
                                <h5 class="form-section__title mb-1">Applicable Staff</h5>
                                <p class="form-section__sub mb-0">
                                    Choose which staff group this rule should apply to.
                                </p>
                            </div>

                            <div class="apply-grid">
                                <label class="apply-card">
                                    <input type="radio" name="apply_to" value="all"
                                        {{ old('apply_to', 'all') == 'all' ? 'checked' : '' }}>
                                    <span class="apply-card__box">
                                        <span class="apply-card__title">All Staff</span>
                                        <span class="apply-card__text">Apply this rule across all staff members.</span>
                                    </span>
                                </label>

                                <label class="apply-card">
                                    <input type="radio" name="apply_to" value="teachers"
                                        {{ old('apply_to') == 'teachers' ? 'checked' : '' }}>
                                    <span class="apply-card__box">
                                        <span class="apply-card__title">Teachers</span>
                                        <span class="apply-card__text">Apply this rule only to teachers.</span>
                                    </span>
                                </label>

                                <label class="apply-card">
                                    <input type="radio" name="apply_to" value="testers"
                                        {{ old('apply_to') == 'testers' ? 'checked' : '' }}>
                                    <span class="apply-card__box">
                                        <span class="apply-card__title">Testers</span>
                                        <span class="apply-card__text">Apply this rule only to testers.</span>
                                    </span>
                                </label>
                            </div>

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

                    <div class="ui-card" id="levelsSection" style="display: none;">
                        <div class="form-section">
                            <div class="form-section__head d-flex align-items-start justify-content-between flex-wrap gap-2">
                                <div>
                                    <h5 class="form-section__title mb-1">Progressive Rule Levels</h5>
                                    <p class="form-section__sub mb-0">
                                        Add progressive penalty levels for repeated violations.
                                    </p>
                                </div>

                                <button type="button" class="asset-btn asset-btn--primary" id="addLevelBtn">
                                    + Add Level
                                </button>
                            </div>

                            <div id="levelsContainer" class="space-y-4"></div>

                            <div id="noLevelsMessage" class="empty-levels-box">
                                <div class="empty-levels-box__icon">
                                    <iconify-icon icon="mdi:information-outline"></iconify-icon>
                                </div>
                                <div>
                                    <div class="empty-levels-box__title">No levels added yet</div>
                                    <div class="empty-levels-box__text">
                                        Click <strong>Add Level</strong> to define progressive penalties for repeated violations.
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="alert alert-danger d-none" id="createRuleErrors"></div>

                    <div class="asset-actions">
                        <a href="{{ route('rules.index') }}" class="asset-btn asset-btn--secondary">
                            Cancel
                        </a>
                        <button type="submit" class="asset-btn asset-btn--primary">
                            Create Rule
                        </button>
                    </div>
                </form>

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


@push('scripts')
    <script>
        let penaltyCounter = 0;

        const typeSelect = document.getElementById('ruleTypeSelect');
        const levelsSection = document.getElementById('levelsSection');
        const levelsContainer = document.getElementById('levelsContainer');
        const noLevelsMessage = document.getElementById('noLevelsMessage');
        const addLevelBtn = document.getElementById('addLevelBtn');

        function toggleLevelsSection() {
            const selectedType = typeSelect.value;
            if (selectedType === 'penalty') {
                levelsSection.style.display = 'block';
            } else {
                levelsSection.style.display = 'none';
                levelsContainer.innerHTML = '';
                penaltyCounter = 0;
                noLevelsMessage.classList.remove('d-none');
            }
        }

        function createLevelActionButton(icon, className = '', title = '') {
            return `
                <button type="button" class="level-action-btn ${className}" title="${title}">
                    <iconify-icon icon="${icon}"></iconify-icon>
                </button>
            `;
        }

        function createPenaltyRow(levelNumber, penaltyData = null) {
            const row = document.createElement('div');
            row.className = 'penalty-row';

            const type = penaltyData ? penaltyData.penalty_type : '';
            const value = penaltyData ? penaltyData.penalty_value : '';

            row.innerHTML = `
                <div>
                    <input type="hidden" name="levels[${penaltyCounter}][level_number]" value="${levelNumber}">
                    <label class="asset-label">Penalty Type</label>
                    <select name="levels[${penaltyCounter}][penalty_type]" class="asset-select penalty-type-select" required>
                        <option value="">Select Type</option>
                        <option value="warning" ${type === 'warning' ? 'selected' : ''}>Warning</option>
                        <option value="money" ${type === 'money' ? 'selected' : ''}>Money</option>
                        <option value="days" ${type === 'days' ? 'selected' : ''}>Days</option>
                        <option value="hours" ${type === 'hours' ? 'selected' : ''}>Hours</option>
                        <option value="double_the_previous" ${type === 'double_the_previous' ? 'selected' : ''}>Double the Previous</option>
                        <option value="termination" ${type === 'termination' ? 'selected' : ''}>Termination</option>
                    </select>
                </div>
                <div>
                    <label class="asset-label">Value</label>
                    <input type="number" step="0.01" name="levels[${penaltyCounter}][penalty_value]"
                           class="asset-input penalty-value-input" value="${value}" min="0">
                </div>
                <div>
                    ${createLevelActionButton('mdi:close', 'remove-penalty-btn level-action-btn--danger', 'Remove Penalty')}
                </div>
            `;

            penaltyCounter++;

            const typeSelect = row.querySelector('.penalty-type-select');
            const valueInput = row.querySelector('.penalty-value-input');

            const updateDisabled = () => {
                const val = typeSelect.value;
                if (val === 'warning' || val === 'termination' || val === 'double_the_previous' || val === '') {
                    valueInput.disabled = true;
                    valueInput.value = '';
                    valueInput.removeAttribute('required');
                } else {
                    valueInput.disabled = false;
                    valueInput.setAttribute('required', 'required');
                }
            };

            typeSelect.addEventListener('change', updateDisabled);
            updateDisabled();

            row.querySelector('.remove-penalty-btn').addEventListener('click', function() {
                const parent = row.parentElement;
                row.remove();
                if (parent.children.length === 0) {
                    // If no penalties left, maybe remove the level or add one default?
                    // For now let's just keep the empty level or the user can remove the level card.
                }
            });

            return row;
        }

        function addLevelCard(levelNumber = null) {
            noLevelsMessage.classList.add('d-none');

            const nextLevel = levelNumber || (levelsContainer.querySelectorAll('.level-card').length + 1);

            const card = document.createElement('div');
            card.className = 'level-card';
            card.innerHTML = `
                <div class="level-card__header">
                    <h6 class="level-card__title">
                        <iconify-icon icon="mdi:layers-outline"></iconify-icon>
                        Level ${nextLevel}
                    </h6>
                    <div class="d-flex gap-2">
                        ${createLevelActionButton('mdi:arrow-up', 'move-level-up', 'Move Up')}
                        ${createLevelActionButton('mdi:arrow-down', 'move-level-down', 'Move Down')}
                        ${createLevelActionButton('mdi:delete-outline', 'remove-level-btn level-action-btn--danger', 'Remove Level')}
                    </div>
                </div>
                <div class="penalty-rows-container"></div>
                <button type="button" class="add-penalty-btn">
                    <iconify-icon icon="mdi:plus"></iconify-icon> Add Penalty to Level ${nextLevel}
                </button>
            `;

            const container = card.querySelector('.penalty-rows-container');
            const addBtn = card.querySelector('.add-penalty-btn');

            addBtn.addEventListener('click', () => {
                container.appendChild(createPenaltyRow(nextLevel));
            });

            // Add initial penalty row
            container.appendChild(createPenaltyRow(nextLevel));

            card.querySelector('.remove-level-btn').addEventListener('click', () => {
                card.remove();
                updateLevelNumbers();
                if (levelsContainer.children.length === 0) {
                    noLevelsMessage.classList.remove('d-none');
                }
            });

            card.querySelector('.move-level-up').addEventListener('click', () => {
                const prev = card.previousElementSibling;
                if (prev) {
                    levelsContainer.insertBefore(card, prev);
                    updateLevelNumbers();
                }
            });

            card.querySelector('.move-level-down').addEventListener('click', () => {
                const next = card.nextElementSibling;
                if (next) {
                    levelsContainer.insertBefore(next, card);
                    updateLevelNumbers();
                }
            });

            levelsContainer.appendChild(card);
        }

        function updateLevelNumbers() {
            const cards = levelsContainer.querySelectorAll('.level-card');
            cards.forEach((card, idx) => {
                const newNum = idx + 1;
                card.querySelector('.level-card__title').innerHTML = `
                    <iconify-icon icon="mdi:layers-outline"></iconify-icon> Level ${newNum}
                `;
                card.querySelector('.add-penalty-btn').innerHTML = `
                    <iconify-icon icon="mdi:plus"></iconify-icon> Add Penalty to Level ${newNum}
                `;

                // Update hidden inputs
                card.querySelectorAll('input[type="hidden"][name*="level_number"]').forEach(input => {
                    input.value = newNum;
                });
            });
        }

        if (typeSelect) {
            toggleLevelsSection();
            typeSelect.addEventListener('change', toggleLevelsSection);
        }

        if (addLevelBtn) {
            addLevelBtn.addEventListener('click', () => addLevelCard());
        }
    </script>
@endpush