@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);
        }

        .rule-lock-alert {
            display: flex;
            align-items: flex-start;
            gap: 0.75rem;
            padding: 1rem 1.1rem;
            border: 1px solid #dbeafe;
            border-radius: 14px;
            background: #f8fbff;
            color: #1e3a8a;
        }

        .rule-lock-alert__icon {
            font-size: 1.2rem;
            line-height: 1;
            margin-top: 0.1rem;
        }

        .rule-lock-alert__title {
            font-weight: 700;
            color: #1e40af;
            margin-bottom: 0.2rem;
        }

        .rule-lock-alert__text {
            color: #475569;
            font-size: 0.92rem;
            margin: 0;
        }

        .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="Edit Rule: {{ $rule->name }}"
                    description="Update rule details, staff scope, and progressive levels while keeping the configuration consistent.">
                    <a href="{{ route('rules.index') }}" class="asset-btn asset-btn--secondary">
                        Back to Rules
                    </a>
                </x-page-title>

                <form id="editRuleForm" action="{{ route('rules.update', $rule) }}" method="POST">
                    @csrf
                    @method('PUT')

                    <input type="hidden" name="insert_type" value="{{ $rule->insert_type }}">

                    <div class="ui-card">
                        <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">
                                    Update the core rule details including type, value, unit, status, and timing.
                                </p>
                            </div>

                            @if ($rule->insert_type == 'auto')
                                <div class="mb-4">
                                    <div class="rule-lock-alert">
                                        <div class="rule-lock-alert__icon">
                                            <iconify-icon icon="mdi:information-outline"></iconify-icon>
                                        </div>
                                        <div>
                                            <div class="rule-lock-alert__title">Auto-inserted rule</div>
                                            <p class="rule-lock-alert__text">
                                                This rule was generated automatically. Only the value can be modified.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            @endif

                            <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', $rule->name) }}"
                                           {{ $rule->insert_type == 'auto' ? 'disabled' : '' }}
                                           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"
                                            {{ $rule->insert_type == 'auto' ? 'disabled' : '' }}
                                            required>
                                        <option value="">Select Type</option>
                                        <option value="bonus" {{ old('type', $rule->type) == 'bonus' ? 'selected' : '' }}>Bonus</option>
                                        <option value="penalty" {{ old('type', $rule->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', $rule->value) }}"
                                           required>
                                    @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', $rule->units) === 'fixed' ? 'selected' : '' }}>Fixed</option>
                                        <option value="hour" {{ old('units', $rule->units) === 'hour' ? 'selected' : '' }}>Hour</option>
                                        <option value="day" {{ old('units', $rule->units) === 'day' ? 'selected' : '' }}>Day</option>
                                        <option value="percentage" {{ old('units', $rule->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', $rule->status) == 'active' ? 'selected' : '' }}>Active</option>
                                        <option value="inactive" {{ old('status', $rule->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="quarter" {{ old('time_check_unit', $rule->time_check_unit ?? 'quarter') == 'quarter' ? 'selected' : '' }}>Quarter</option>
                                        <option value="six_month" {{ old('time_check_unit', $rule->time_check_unit ?? 'quarter') == 'six_month' ? 'selected' : '' }}>Six Month</option>
                                        <option value="year" {{ old('time_check_unit', $rule->time_check_unit ?? 'quarter') == '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"
                                              {{ $rule->insert_type == 'auto' ? 'disabled' : '' }}
                                              required
                                              maxlength="1000">{{ old('description', $rule->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>

                            @php
                                $applyTo = old('apply_to', $rule->apply_to);
                            @endphp

                            <div class="apply-grid">
                                <label class="apply-card">
                                    <input type="radio" name="apply_to" value="all"
                                        {{ $applyTo == '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"
                                        {{ $applyTo == '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"
                                        {{ $applyTo == '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: {{ old('type', $rule->type) === 'penalty' ? 'block' : '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">
                                        Define progressive penalty levels for repeated violations.
                                    </p>
                                </div>

                                @if ($rule->insert_type != 'auto')
                                    <button type="button" class="asset-btn asset-btn--primary" id="addLevelBtn">
                                        + Add Level
                                    </button>
                                @endif
                            </div>

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

                            <div id="noLevelsMessage" class="empty-levels-box d-none">
                                <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="editRuleErrors"></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">
                            Update 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');
        const isAutoRule = @json($rule->insert_type === 'auto');

        function toggleLevelsSection() {
            if (!typeSelect || !levelsSection) return;

            const selectedType = typeSelect.value;

            if (selectedType === 'penalty') {
                levelsSection.style.display = 'block';

                if (levelsContainer.children.length === 0) {
                    noLevelsMessage.classList.remove('d-none');
                }
            } 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" 
                            ${isAutoRule ? 'disabled' : ''} 
                            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}" 
                           ${isAutoRule ? 'disabled' : ''} 
                           min="0">
                </div>
                <div>
                    ${!isAutoRule ? createLevelActionButton('mdi:close', 'remove-penalty-btn level-action-btn--danger', 'Remove Penalty') : ''}
                </div>
            `;
            
            penaltyCounter++;
            
            const pTypeSelect = row.querySelector('.penalty-type-select');
            const pValueInput = row.querySelector('.penalty-value-input');
            
            const updateDisabled = () => {
                if (isAutoRule) return;
                const val = pTypeSelect.value;
                if (val === 'warning' || val === 'termination' || val === 'double_the_previous' || val === '') {
                    pValueInput.disabled = true;
                    pValueInput.value = '';
                    pValueInput.removeAttribute('required');
                } else {
                    pValueInput.disabled = false;
                    pValueInput.setAttribute('required', 'required');
                }
            };
            
            pTypeSelect.addEventListener('change', updateDisabled);
            updateDisabled();
            
            const removeBtn = row.querySelector('.remove-penalty-btn');
            if (removeBtn) {
                removeBtn.addEventListener('click', function() {
                    row.remove();
                });
            }
            
            return row;
        }

        function addLevelCard(levelNumber = null, initialPenalties = []) {
            if (!levelsContainer) return;
            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">
                        ${!isAutoRule ? createLevelActionButton('mdi:arrow-up', 'move-level-up', 'Move Up') : ''}
                        ${!isAutoRule ? createLevelActionButton('mdi:arrow-down', 'move-level-down', 'Move Down') : ''}
                        ${!isAutoRule ? createLevelActionButton('mdi:delete-outline', 'remove-level-btn level-action-btn--danger', 'Remove Level') : ''}
                    </div>
                </div>
                <div class="penalty-rows-container"></div>
                ${!isAutoRule ? `
                <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');
            
            if (addBtn) {
                addBtn.addEventListener('click', () => {
                    container.appendChild(createPenaltyRow(nextLevel));
                });
            }
            
            if (initialPenalties.length > 0) {
                initialPenalties.forEach(p => {
                    container.appendChild(createPenaltyRow(nextLevel, p));
                });
            } else {
                container.appendChild(createPenaltyRow(nextLevel));
            }
            
            const removeLevelBtn = card.querySelector('.remove-level-btn');
            if (removeLevelBtn) {
                removeLevelBtn.addEventListener('click', () => {
                    card.remove();
                    updateLevelNumbers();
                    if (levelsContainer.children.length === 0) {
                        noLevelsMessage.classList.remove('d-none');
                    }
                });
            }

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

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

        function updateLevelNumbers() {
            if (isAutoRule) return;
            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}
                `;
                const addPenaltyBtn = card.querySelector('.add-penalty-btn');
                if (addPenaltyBtn) {
                    addPenaltyBtn.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());
        }

        @if (old('type', $rule->type) === 'penalty')
            @php
                $oldLevels = old('levels');
                $levelsData = [];
                if (is_array($oldLevels) && count($oldLevels)) {
                    foreach ($oldLevels as $level) {
                        $num = $level['level_number'];
                        $levelsData[$num][] = $level;
                    }
                } elseif ($rule->ruleLevels->count() > 0) {
                    foreach ($rule->ruleLevels as $level) {
                        $num = $level->level_number;
                        $levelsData[$num][] = [
                            'penalty_type' => $level->penalty_type,
                            'penalty_value' => $level->penalty_value
                        ];
                    }
                }
            @endphp

            @if (count($levelsData) > 0)
                @foreach ($levelsData as $levelNum => $penalties)
                    addLevelCard({{ $levelNum }}, @json($penalties));
                @endforeach
            @else
                noLevelsMessage.classList.remove('d-none');
            @endif
        @endif
    </script>
@endpush