@extends('backend.layout.master-tailwind')
@section('title', __('All Experience Levels'))

@section('admin_styles')
    <style>
        #add-level-dialog,
        #edit-level-dialog {
            border: none;
            border-radius: 12px;
            padding: 0;
            background: var(--surface);
            color: var(--text);
            box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3);
            width: 400px;
            max-width: 94vw;
        }

        #add-level-dialog::backdrop,
        #edit-level-dialog::backdrop {
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(2px);
        }

        .dialog-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px 18px 12px;
            border-bottom: 1px solid var(--border);
            font-weight: 600;
            font-size: 14px
        }

        .dialog-body {
            padding: 18px;
            display: flex;
            flex-direction: column;
            gap: 14px
        }

        .dialog-foot {
            display: flex;
            gap: 8px;
            justify-content: flex-end;
            padding: 12px 18px 16px;
            border-top: 1px solid var(--border)
        }

        .field-label {
            display: block;
            font-size: 12px;
            color: var(--text-2);
            margin-bottom: 6px;
            font-weight: 500
        }

        .field-input {
            width: 100%;
            padding: 8px 10px;
            border: 1px solid var(--border);
            border-radius: 7px;
            background: var(--surface-2);
            color: var(--text);
            font-size: 13px;
            outline: none;
            box-sizing: border-box
        }

        .field-input:focus {
            border-color: var(--accent)
        }
    </style>
@endsection

@section('content')

    <div class="page">

        <div class="page-head">
            <div>
                <h1 class="page-title">{{ __('Experience Levels') }}</h1>
                <p class="page-sub">{{ $all_levels->total() }} {{ __('levels') }}</p>
            </div>
            <div class="page-actions">
                <button class="btn primary" onclick="document.getElementById('add-level-dialog').showModal()">
                    <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"
                        stroke-linecap="round" stroke-linejoin="round">
                        <path d="M12 5v14M5 12h14" />
                    </svg>
                    {{ __('Add Level') }}
                </button>
            </div>
        </div>

        <div class="card">
            <div class="toolbar">
                <div style="position:relative;width:220px">
                    <svg class="icon"
                        style="position:absolute;left:8px;top:50%;transform:translateY(-50%);color:var(--text-3);pointer-events:none"
                        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"
                        stroke-linejoin="round">
                        <circle cx="11" cy="11" r="7" />
                        <path d="m20 20-3.5-3.5" />
                    </svg>
                    <input type="text" id="string_search" placeholder="{{ __('Search levels…') }}"
                        style="width:100%;padding:4px 10px 4px 30px;background:var(--bg);border:1px solid var(--border);border-radius:6px;font-size:13px;color:var(--text);outline:none;height:32px">
                </div>
            </div>
            <div style="overflow-x:auto">
                <div class="search_result">
                    @include('backend.pages.level.search-result')
                </div>
            </div>
        </div>

    </div>

    {{-- Add Level Dialog --}}
    <dialog id="add-level-dialog">
        <div class="dialog-head">
            <span>{{ __('Add Experience Level') }}</span>
            <button type="button" class="icon-btn" onclick="document.getElementById('add-level-dialog').close()">
                <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"
                    stroke-linecap="round" stroke-linejoin="round">
                    <path d="M18 6 6 18M6 6l12 12" />
                </svg>
            </button>
        </div>
        <form action="{{ route('admin.experience.level.all') }}" method="POST">
            @csrf
            <div class="dialog-body">
                <div>
                    <label class="field-label" for="level">{{ __('Level') }}</label>
                    <input class="field-input" type="text" id="level" name="level" value="{{ old('level') }}"
                        placeholder="{{ __('e.g. Entry Level') }}" autocomplete="off">
                </div>
            </div>
            <div class="dialog-foot">
                <button type="button" class="btn ghost sm"
                    onclick="document.getElementById('add-level-dialog').close()">{{ __('Cancel') }}</button>
                <button type="submit" class="btn primary sm add_level">{{ __('Save') }}</button>
            </div>
        </form>
    </dialog>

    {{-- Edit Level Dialog --}}
    <dialog id="edit-level-dialog">
        <div class="dialog-head">
            <span>{{ __('Edit Experience Level') }}</span>
            <button type="button" class="icon-btn" onclick="document.getElementById('edit-level-dialog').close()">
                <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"
                    stroke-linecap="round" stroke-linejoin="round">
                    <path d="M18 6 6 18M6 6l12 12" />
                </svg>
            </button>
        </div>
        <form action="{{ route('admin.experience.level.edit') }}" method="POST">
            @csrf
            <input type="hidden" name="level_id" id="level_id">
            <div class="dialog-body">
                <div>
                    <label class="field-label" for="edit_level">{{ __('Level') }}</label>
                    <input class="field-input" type="text" id="edit_level" name="edit_level"
                        placeholder="{{ __('Enter level name') }}" autocomplete="off">
                </div>
            </div>
            <div class="dialog-foot">
                <button type="button" class="btn ghost sm"
                    onclick="document.getElementById('edit-level-dialog').close()">{{ __('Cancel') }}</button>
                <button type="submit" class="btn primary sm update_level">{{ __('Update') }}</button>
            </div>
        </form>
    </dialog>

@endsection

@section('script')
    @include('backend.pages.level.level-js')
@endsection