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

@section('content')
    <style>
        #add-country-dialog,
        #edit-country-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: 380px;
            max-width: 92vw;
        }

        #add-country-dialog::backdrop,
        #edit-country-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>

    <div class="page">

        <div class="page-head">
            <div>
                <h1 class="page-title">{{ __('Countries') }}</h1>
                <p class="page-sub">{{ $all_countries->total() }} {{ __('countries') }}</p>
            </div>
            <div class="page-actions">
                <a href="{{ route('admin.country.import.csv.settings') }}" class="btn ghost">
                    <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"
                        stroke-linecap="round" stroke-linejoin="round">
                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
                        <polyline points="17 8 12 3 7 8" />
                        <line x1="12" y1="3" x2="12" y2="15" />
                    </svg>
                    {{ __('Import CSV') }}
                </a>
                <button type="button" class="btn primary"
                    onclick="document.getElementById('add-country-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 country') }}
                </button>
            </div>
        </div>

        @if ($errors->any())
            <div
                style="background:var(--danger-soft);border:1px solid color-mix(in oklch,var(--danger) 30%,transparent);border-radius:10px;padding:12px 16px;margin-bottom:14px;font-size:12px;color:var(--danger);line-height:1.7">
                <div style="display:flex;gap:8px;align-items:flex-start">
                    <svg style="flex:none;margin-top:1px" class="icon" 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="0.6" fill="currentColor" />
                    </svg>
                    <ul style="margin:0;padding-left:16px">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
        @endif

        <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 countries…') }}"
                        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('countrymanage::country.search-result')
                </div>
            </div>
        </div>

    </div>

    {{-- Add Country Dialog --}}
    <dialog id="add-country-dialog">
        <div class="dialog-head">
            <span>{{ __('Add country') }}</span>
            <button type="button" class="icon-btn" onclick="document.getElementById('add-country-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.country.all') }}" method="POST">
            @csrf
            <div class="dialog-body">
                <div>
                    <label class="field-label" for="add-country-name">{{ __('Country name') }}</label>
                    <input class="field-input" type="text" id="add-country-name" name="country"
                        placeholder="{{ __('e.g. Bangladesh') }}" required autocomplete="off">
                </div>
                <div>
                    <label class="field-label" for="add-country-status">{{ __('Status') }}</label>
                    <select class="field-input" id="add-country-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-country-dialog').close()">{{ __('Cancel') }}</button>
                <button type="submit" class="btn primary sm add_country">{{ __('Add country') }}</button>
            </div>
        </form>
    </dialog>

    {{-- Edit Country Dialog --}}
    <dialog id="edit-country-dialog">
        <div class="dialog-head">
            <span>{{ __('Edit country') }}</span>
            <button type="button" class="icon-btn" onclick="document.getElementById('edit-country-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.country.edit') }}" method="POST">
            @csrf
            <input type="hidden" name="country_id" id="country_id">
            <div class="dialog-body">
                <div>
                    <label class="field-label" for="edit_country">{{ __('Country name') }}</label>
                    <input class="field-input" type="text" id="edit_country" name="edit_country"
                        placeholder="{{ __('Enter country name') }}" required autocomplete="off">
                </div>
            </div>
            <div class="dialog-foot">
                <button type="button" class="btn ghost sm"
                    onclick="document.getElementById('edit-country-dialog').close()">{{ __('Cancel') }}</button>
                <button type="submit" class="btn primary sm update_country">{{ __('Update') }}</button>
            </div>
        </form>
    </dialog>

@endsection

@section('script')
    @include('countrymanage::country.country-js')
@endsection