@extends('layouts.app')

@section('content')
    <div class="d-flex align-items-center flex-wrap gap-3 justify-content-between px-3">
        <h4>{{ __('Bulk City Imports') }}</h4>
    </div>

    <div class="container-fluid mt-3">
        <div class="accordion" id="accordionExample">
            <div class="accordion-item">
                <h2 class="accordion-header">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                        data-bs-target="#showInstruction" aria-expanded="false" aria-controls="showInstruction">
                        <span class="info me-2" data-bs-toggle="tooltip" data-bs-placement="top"
                            data-bs-title="{{ __('Get instructions for bulk import') }}">
                            <i class="bi bi-info"></i>
                        </span>
                        {{ __('Get instructions') }}
                    </button>
                </h2>
                <div id="showInstruction" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                        <div class="row g-4">
                            <div class="col-lg-6 col-xl-4">
                                <div class="export-steps-item h-100">
                                    <h3 class="fz-20 text-dark">{{ __('Step 1') }}</h3>
                                    <div>{{ __('Download JSON Template') }}</div>
                                    <ul class="m-0 pl-4">
                                        <li>{{ __('Download the JSON Template if you don\'t have one.') }}</li>
                                        <li>{{ __('Use any JSON or text editor to edit the template.') }}</li>
                                    </ul>
                                    <div class="mt-4">
                                        <a href="{{ route('admin.city.import.json-template') }}"
                                           class="btn btn-primary py-2">
                                            <i class="fa-solid fa-download"></i>
                                            {{ __('Download Template') }}
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6 col-xl-4">
                                <div class="export-steps-item h-100">
                                    <h3 class="fz-20 text-dark">{{ __('Step 2') }}</h3>
                                    <div>{{ __('Ensure Correct Data Format') }}</div>
                                    <ul class="m-0 pl-4">
                                        <li>{{ __('The JSON file must include a valid "country" name that exists in the database.') }}</li>
                                        <li>{{ __('Only one country can be imported at a time.') }}</li>
                                        <li>{{ __('Cities should be listed under the "cities" array.') }}</li>
                                        <li>{{ __('City names can be freely defined.') }}</li>
                                    </ul>
                                    <div class="mt-3">
                                        <pre class="bg-light p-2 rounded small">
{
    "country": "Bangladesh",
    "cities": [
        "Dhaka",
        "Rajshahi",
        "Sylhet"
    ]
}
                                        </pre>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6 col-xl-4">
                                <div class="export-steps-item h-100">
                                    <h3 class="fz-20 text-dark">{{ __('Step 3') }}</h3>
                                    <div>{{ __('Upload and Import JSON File') }}</div>
                                    <ul class="m-0 pl-4">
                                        <li>{{ __('Upload your JSON file (.json format).') }}</li>
                                        <li>{{ __('Click Import to process the data and add new cities.') }}</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        @hasPermission('admin.city.import')
        <div class="card my-3">
            <div class="card-body text-center">
                <h4 class="text-muted mb-3">{{ __('Select JSON File to Import') }}</h4>
                <h6 class="text-danger mb-3">Warning: This will erase existing cities for the country.</h6>
                <form action="{{ route('admin.city.import') }}" method="POST" enctype="multipart/form-data" id="bulkForm">
                    @csrf
                    <div class="drop-zone mx-auto">
                        <span class="drop-zone__prompt">
                            <div class="icon">
                                <i class="fa-solid fa-cloud-arrow-up"></i>
                            </div>
                            {{ __('Drop file here or click to upload') }}
                        </span>
                        <input name="file" type="file" class="drop-zone__input" accept=".json">
                    </div>
                    @error('file')
                        <p class="text text-danger m-0">{{ $message }}</p>
                    @enderror
                    <button type="submit" class="btn btn-primary mt-3 py-2">{{ __('Import Cities') }}</button>
                </form>
            </div>
        </div>
        @endhasPermission
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('assets/scripts/drop-zone.js') }}"></script>
@endpush