@extends('layouts.admin')

@section('title', 'Currently Available Concessions')
@section('page-title', 'Currently Available Concessions')
@section('breadcrumb', 'Currently Available Concessions')

@section('content')
<div class="row gy-4">
    <div class="col-xxl-4">
        <div class="card h-100">
            <div class="card-header">
                <h6 class="text-lg fw-semibold mb-0">Add Concession</h6>
            </div>
            <div class="card-body">
                <p class="text-sm text-secondary-light mb-16">
                    Options appear in the public form “Currently available concessions” step. Sort order is assigned automatically — edit it in the table if needed.
                </p>
                <form method="POST" action="{{ route('admin.aid-types.store') }}">
                    @csrf
                    <div class="mb-16">
                        <label class="form-label fw-semibold" for="code">Code</label>
                        <input type="text"
                               name="code"
                               id="code"
                               class="form-control radius-8 @error('code') is-invalid @enderror"
                               value="{{ old('code') }}"
                               placeholder="e.g. mahajana"
                               pattern="[a-z][a-z0-9_]*"
                               maxlength="50"
                               required>
                        <span class="text-xs text-secondary-light">Lowercase letters, numbers, underscores. Must start with a letter.</span>
                        @error('code')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="mb-24">
                        <label class="form-label fw-semibold" for="label">Label (Sinhala)</label>
                        <input type="text"
                               name="label"
                               id="label"
                               class="form-control radius-8 @error('label') is-invalid @enderror"
                               value="{{ old('label') }}"
                               placeholder="e.g. මහජන ආධාර"
                               maxlength="255"
                               required>
                        @error('label')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>
                    <button type="submit" class="btn btn-primary-600 radius-8 px-20 py-11">
                        Add aid type
                    </button>
                </form>
            </div>
        </div>
    </div>

    <div class="col-xxl-8">
        <div class="card basic-data-table">
            <div class="card-header d-flex align-items-center justify-content-between flex-wrap gap-2">
                <h5 class="card-title mb-0">Configured Currently available concessions</h5>
                <span class="text-secondary-light text-sm">{{ $aidTypes->count() }} total</span>
            </div>
            <div class="card-body">
                @foreach ($aidTypes as $aidType)
                    <form method="POST"
                          action="{{ route('admin.aid-types.update', $aidType) }}"
                          id="update-aid-type-{{ $aidType->id }}"
                          class="d-none">
                        @csrf
                        @method('PATCH')
                    </form>
                    <form method="POST"
                          action="{{ route('admin.aid-types.destroy', $aidType) }}"
                          id="delete-aid-type-{{ $aidType->id }}"
                          class="d-none"
                          onsubmit="return confirm('Delete “{{ $aidType->label }}”? This cannot be undone.')">
                        @csrf
                        @method('DELETE')
                    </form>
                @endforeach

                <div class="table-responsive">
                    <table class="table bordered-table mb-0">
                        <thead>
                            <tr>
                                <th style="width:120px">Sort</th>
                                <th style="width:140px">Code</th>
                                <th>Label</th>
                                <th style="width:90px">Active</th>
                                <th>Usage</th>
                                <th style="width:160px">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($aidTypes as $aidType)
                                <tr class="aid-type-row" data-id="{{ $aidType->id }}">
                                    <td>
                                        <span class="sort-display fw-medium">{{ $aidType->sort_order }}</span>
                                        <input form="update-aid-type-{{ $aidType->id }}"
                                               type="number"
                                               name="sort_order"
                                               class="form-control form-control-sm radius-8 sort-input d-none"
                                               style="max-width:102px"
                                               min="0"
                                               max="9999"
                                               value="{{ $aidType->sort_order }}"
                                               data-original="{{ $aidType->sort_order }}"
                                               required
                                               disabled>
                                    </td>
                                    <td>
                                        <span class="code-display text-sm fw-medium">{{ $aidType->code }}</span>
                                        <input form="update-aid-type-{{ $aidType->id }}"
                                               type="text"
                                               name="code"
                                               class="form-control form-control-sm radius-8 code-input d-none"
                                               style="max-width:130px"
                                               pattern="[a-z][a-z0-9_]*"
                                               maxlength="50"
                                               value="{{ $aidType->code }}"
                                               data-original="{{ $aidType->code }}"
                                               required
                                               disabled>
                                    </td>
                                    <td>
                                        <span class="label-display fw-medium">{{ $aidType->label }}</span>
                                        <input form="update-aid-type-{{ $aidType->id }}"
                                               type="text"
                                               name="label"
                                               class="form-control form-control-sm radius-8 label-input d-none"
                                               maxlength="255"
                                               value="{{ $aidType->label }}"
                                               data-original="{{ $aidType->label }}"
                                               required
                                               disabled>
                                    </td>
                                    <td>
                                        <span class="active-display">
                                            @if ($aidType->is_active)
                                                <span class="badge bg-success-focus text-success-main px-12 py-6">Yes</span>
                                            @else
                                                <span class="badge bg-neutral-200 text-secondary-light px-12 py-6">No</span>
                                            @endif
                                        </span>
                                        <label class="active-input d-none mb-0">
                                            <input form="update-aid-type-{{ $aidType->id }}"
                                                   type="checkbox"
                                                   name="is_active"
                                                   value="1"
                                                   class="form-check-input"
                                                   {{ $aidType->is_active ? 'checked' : '' }}
                                                   data-original="{{ $aidType->is_active ? '1' : '0' }}"
                                                   disabled>
                                        </label>
                                    </td>
                                    <td>
                                        @if ($aidType->application_aids_count > 0)
                                            <span class="text-sm">{{ $aidType->application_aids_count }} record(s)</span>
                                        @else
                                            <span class="text-sm text-secondary-light">Unused</span>
                                        @endif
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center gap-2">
                                            <button type="button"
                                                    class="btn-start-edit w-32-px h-32-px bg-primary-light text-primary-600 rounded-circle d-inline-flex align-items-center justify-content-center border-0"
                                                    title="Edit">
                                                <iconify-icon icon="lucide:pencil"></iconify-icon>
                                            </button>
                                            <button type="submit"
                                                    form="update-aid-type-{{ $aidType->id }}"
                                                    class="btn-save-edit w-32-px h-32-px bg-success-focus text-success-main rounded-circle d-none align-items-center justify-content-center border-0"
                                                    title="Save">
                                                <iconify-icon icon="lucide:check"></iconify-icon>
                                            </button>
                                            <button type="button"
                                                    class="btn-cancel-edit w-32-px h-32-px bg-neutral-200 text-secondary-light rounded-circle d-none align-items-center justify-content-center border-0"
                                                    title="Cancel">
                                                <iconify-icon icon="lucide:x"></iconify-icon>
                                            </button>
                                            <button type="submit"
                                                    form="delete-aid-type-{{ $aidType->id }}"
                                                    class="btn-delete-aid-type w-32-px h-32-px bg-danger-focus text-danger-main rounded-circle d-inline-flex align-items-center justify-content-center border-0"
                                                    title="{{ $aidType->application_aids_count > 0 ? 'In use — cannot delete' : 'Delete' }}"
                                                    @disabled($aidType->application_aids_count > 0)>
                                                <iconify-icon icon="lucide:trash-2"></iconify-icon>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6" class="text-center py-24 text-secondary-light">No aid types configured yet.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
(function () {
    function toggleField(display, input, editing) {
        display.classList.toggle('d-none', editing);
        input.classList.toggle('d-none', !editing);
        if (input.matches('input[type="checkbox"]')) {
            input.disabled = !editing;
        } else if (input.tagName === 'LABEL') {
            input.querySelector('input').disabled = !editing;
        } else {
            input.disabled = !editing;
        }
    }

    function setEditing(row, editing) {
        toggleField(row.querySelector('.sort-display'), row.querySelector('.sort-input'), editing);
        toggleField(row.querySelector('.code-display'), row.querySelector('.code-input'), editing);
        toggleField(row.querySelector('.label-display'), row.querySelector('.label-input'), editing);
        toggleField(row.querySelector('.active-display'), row.querySelector('.active-input'), editing);

        const startBtn = row.querySelector('.btn-start-edit');
        const saveBtn = row.querySelector('.btn-save-edit');
        const cancelBtn = row.querySelector('.btn-cancel-edit');
        const deleteBtn = row.querySelector('.btn-delete-aid-type');

        startBtn.classList.toggle('d-none', editing);
        startBtn.classList.toggle('d-inline-flex', !editing);

        saveBtn.classList.toggle('d-none', !editing);
        saveBtn.classList.toggle('d-inline-flex', editing);

        cancelBtn.classList.toggle('d-none', !editing);
        cancelBtn.classList.toggle('d-inline-flex', editing);

        if (deleteBtn) {
            deleteBtn.classList.toggle('d-none', editing);
        }

        if (editing) {
            row.querySelector('.label-input').focus();
            row.querySelector('.label-input').select();
        }
    }

    function cancelEditing(row) {
        row.querySelectorAll('.code-input, .label-input, .sort-input').forEach((input) => {
            input.value = input.dataset.original;
        });

        const activeInput = row.querySelector('.active-input input');
        activeInput.checked = activeInput.dataset.original === '1';

        setEditing(row, false);
    }

    function isEditing(row) {
        return !row.querySelector('.label-input').classList.contains('d-none');
    }

    document.querySelectorAll('.aid-type-row').forEach((row) => {
        row.querySelector('.btn-start-edit')?.addEventListener('click', () => {
            document.querySelectorAll('.aid-type-row').forEach((other) => {
                if (other !== row && isEditing(other)) {
                    cancelEditing(other);
                }
            });
            setEditing(row, true);
        });

        row.querySelector('.btn-cancel-edit')?.addEventListener('click', () => {
            cancelEditing(row);
        });

        row.querySelectorAll('.code-input, .label-input, .sort-input').forEach((input) => {
            input.addEventListener('keydown', (event) => {
                if (event.key === 'Escape') {
                    cancelEditing(row);
                }
            });
        });
    });
})();
</script>
@endpush