@extends('admin.layouts.app')

@section('title', 'Add Country')
@section('page-title', 'Add Country')

@push('styles')
<script src="https://cdn.tiny.cloud/1/{{ config('services.tinymce.api_key', 'no-api-key') }}/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
@endpush

@section('content')

{{-- Breadcrumb --}}
<nav class="flex items-center gap-2 text-sm text-gray-500 mb-6">
    <a href="{{ route('admin.countries.index') }}" class="hover:text-blue-600">Countries</a>
    <span>/</span>
    <span class="text-gray-800 font-medium">Add New</span>
</nav>

@include('admin.countries._form', [
    'country' => new \App\Models\Country(),
    'action'  => route('admin.countries.store'),
    'method'  => 'POST',
])

@endsection

@push('scripts')
@include('admin.countries._tinymce')
@include('admin.countries._slug_script')
<script>
function previewImage(input, imgId, wrapId) {
    const wrap = document.getElementById(wrapId);
    const img  = document.getElementById(imgId);
    if (input.files && input.files[0]) {
        const reader = new FileReader();
        reader.onload = e => { img.src = e.target.result; if(wrap) wrap.classList.remove('hidden'); };
        reader.readAsDataURL(input.files[0]);
    }
}
</script>
@endpush