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

@section('admin_styles')
    <style>
        #add-skill-dialog,
        #edit-skill-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: 460px;
            max-width: 94vw;
        }

        #add-skill-dialog::backdrop,
        #edit-skill-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)
        }

        .field-hint {
            font-size: 11px;
            color: var(--danger);
            margin-top: 4px;
            display: none
        }
    </style>
@endsection

@section('content')

    <div class="page">

        <div class="page-head">
            <div>
                <h1 class="page-title">{{ __('Skills') }}</h1>
                <p class="page-sub">{{ $all_skills->total() }} {{ __('skills') }}</p>
            </div>
            <div class="page-actions">
                @can('skill-add')
                    <button class="btn primary" onclick="document.getElementById('add-skill-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 Skill') }}
                    </button>
                @endcan
            </div>
        </div>

        <div
            style="background:color-mix(in oklch,var(--warning,#f59e0b) 10%,transparent);border:1px solid color-mix(in oklch,var(--warning,#f59e0b) 35%,transparent);border-radius:10px;padding:10px 14px;margin-bottom:16px;font-size:12px;color:var(--text-2);display:flex;gap:8px;align-items:flex-start">
            <svg class="icon" style="flex:none;margin-top:1px;color:var(--warning,#f59e0b)" viewBox="0 0 24 24"
                fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
                <path d="M12 3l9 16H3z" />
                <path d="M12 10v4" />
                <circle cx="12" cy="17" r=".6" fill="currentColor" />
            </svg>
            {{ __('A skill can only be deleted if it has no dependencies — it cannot be removed if it is linked to any jobs.') }}
        </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 skills…') }}"
                        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.skill.search-result')
                </div>
            </div>
        </div>

    </div>

    {{-- Add Skill Dialog --}}
    <dialog id="add-skill-dialog">
        <div class="dialog-head">
            <span>{{ __('Add Skill') }}</span>
            <button type="button" class="icon-btn" onclick="document.getElementById('add-skill-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.skill') }}" method="POST">
            @csrf
            <div class="dialog-body">
                <div>
                    <label class="field-label" for="skill">{{ __('Skill name') }}</label>
                    <input class="field-input" type="text" id="skill" name="skill"
                        placeholder="{{ __('e.g. PHP Development') }}" autocomplete="off">
                </div>
                <div>
                    <label class="field-label" for="add-category">{{ __('Category') }}</label>
                    <select class="field-input" id="add-category" name="category" style="height:36px;appearance:auto">
                        <option value="">{{ __('Select category') }}</option>
                        @foreach ($all_categories as $cat)
                            <option value="{{ $cat->id }}">{{ $cat->category }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="field-label" for="add-subcategory">{{ __('Subcategory') }} <span
                            style="font-weight:400;opacity:.6">{{ __('(optional)') }}</span></label>
                    <select class="field-input get_subcategory" id="add-subcategory" name="subcategory"
                        style="height:36px;appearance:auto">
                        <option value="">{{ __('Select category first') }}</option>
                    </select>
                    <p class="field-hint add-sub-hint">{{ __('No subcategory found for selected category.') }}</p>
                </div>
                <div>
                    <label class="field-label" for="add-status">{{ __('Status') }}</label>
                    <select class="field-input" id="add-status" name="status" style="height:36px;appearance:auto">
                        <option value="1">{{ __('Active') }}</option>
                        <option value="0">{{ __('Inactive') }}</option>
                    </select>
                </div>
            </div>
            <div class="dialog-foot">
                <button type="button" class="btn ghost sm"
                    onclick="document.getElementById('add-skill-dialog').close()">{{ __('Cancel') }}</button>
                <button type="submit" class="btn primary sm add_skill">{{ __('Save') }}</button>
            </div>
        </form>
    </dialog>

    {{-- Edit Skill Dialog --}}
    <dialog id="edit-skill-dialog">
        <div class="dialog-head">
            <span>{{ __('Edit Skill') }}</span>
            <button type="button" class="icon-btn" onclick="document.getElementById('edit-skill-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.skill.edit') }}" method="POST">
            @csrf
            <input type="hidden" name="skill_id" id="skill_id">
            <div class="dialog-body">
                <div>
                    <label class="field-label" for="edit_skill">{{ __('Skill name') }}</label>
                    <input class="field-input" type="text" id="edit_skill" name="edit_skill"
                        placeholder="{{ __('Enter skill name') }}" autocomplete="off">
                </div>
                <div>
                    <label class="field-label" for="edit_category">{{ __('Category') }}</label>
                    <select class="field-input" id="edit_category" name="edit_category"
                        style="height:36px;appearance:auto">
                        <option value="">{{ __('Select category') }}</option>
                        @foreach ($all_categories as $cat)
                            <option value="{{ $cat->id }}">{{ $cat->category }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="field-label" for="edit_sub_category">{{ __('Subcategory') }} <span
                            style="font-weight:400;opacity:.6">{{ __('(optional)') }}</span></label>
                    <select class="field-input get_subcategory" id="edit_sub_category" name="edit_sub_category"
                        style="height:36px;appearance:auto">
                        <option value="">{{ __('Select subcategory') }}</option>
                    </select>
                    <p class="field-hint edit-sub-hint">{{ __('No subcategory found for selected category.') }}</p>
                </div>
            </div>
            <div class="dialog-foot">
                <button type="button" class="btn ghost sm"
                    onclick="document.getElementById('edit-skill-dialog').close()">{{ __('Cancel') }}</button>
                <button type="submit" class="btn primary sm edit_skill_btn">{{ __('Update') }}</button>
            </div>
        </form>
    </dialog>

@endsection

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