@extends('backEnd.layouts.master')
@section('title', 'Location Bengali Names')

@push('styles')
<style>
.location-names-page .info-box {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 13px;
}
.location-names-page .district-picker { max-width: 360px; }
.location-names-page .locked-badge {
    font-size: 11px;
    background: #dcfce7;
    color: #166534;
    border-radius: 999px;
    padding: 2px 8px;
}
.location-names-page .en-name { color: #64748b; font-size: 12px; }
.location-names-page .table td { vertical-align: middle; }
.location-names-page .bn-input { font-family: inherit; }
</style>
@endpush

@section('content')
<div class="container-fluid py-3 location-names-page">
    <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
        <h4 class="fw-bold mb-0">
            <i class="fas fa-language me-2 text-success"></i>Location Bengali Names
        </h4>
    </div>

    <div class="info-box mb-3">
        <strong>Safe to edit:</strong> Checkout-এ শুধু <em>display</em> বদলাবে। Order/Shipping/Courier-এ English name (<code>Panchlaish</code>) save হয় — তাই order process বা shipping charge-এ কোনো সমস্যা হবে না।
        Save করলে auto-import আর আপনার correction overwrite করবে না।
    </div>

    <div class="card shadow-sm border-0 mb-3">
        <div class="card-body">
            <form method="GET" action="{{ route('admin.settings.location-names') }}" class="row g-2 align-items-end">
                <div class="col-md-4 district-picker">
                    <label class="form-label fw-semibold small">District / জেলা</label>
                    <select name="district" class="form-select" onchange="this.form.submit()">
                        @foreach($districts as $district)
                        <option value="{{ $district->id }}" {{ ($selected?->id ?? 0) === $district->id ? 'selected' : '' }}>
                            {{ $district->name }}@if($district->bn_name) — {{ $district->bn_name }}@endif
                        </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-4">
                    <label class="form-label fw-semibold small">Search upazila</label>
                    <input type="text" id="upazilaFilter" class="form-control" placeholder="Type English or Bengali name...">
                </div>
            </form>
        </div>
    </div>

    @if($selected)
    <form method="POST" action="{{ route('admin.settings.location-names.save') }}">
        @csrf
        <input type="hidden" name="district_id" value="{{ $selected->id }}">

        <div class="card shadow-sm border-0 mb-3">
            <div class="card-header bg-light fw-semibold d-flex justify-content-between align-items-center">
                <span>District Bengali Name</span>
                @if($selected->bn_name_locked)
                <span class="locked-badge"><i class="fas fa-lock me-1"></i>Custom saved</span>
                @endif
            </div>
            <div class="card-body">
                <div class="row g-3 align-items-center">
                    <div class="col-md-4">
                        <div class="fw-semibold">{{ $selected->name }}</div>
                        <div class="en-name">English name (unchanged)</div>
                    </div>
                    <div class="col-md-8">
                        <label class="form-label small fw-semibold">বাংলা নাম</label>
                        <input type="text" name="district_bn_name" class="form-control bn-input"
                               value="{{ old('district_bn_name', $selected->bn_name) }}"
                               placeholder="যেমন: চট্টগ্রাম">
                    </div>
                </div>
            </div>
        </div>

        <div class="card shadow-sm border-0">
            <div class="card-header bg-light fw-semibold d-flex justify-content-between align-items-center flex-wrap gap-2">
                <span>Upazila / Thana Bengali Names ({{ $upazilas->count() }})</span>
                <button type="submit" class="btn btn-success btn-sm">
                    <i class="fas fa-save me-1"></i>Save Changes
                </button>
            </div>
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead class="table-light">
                        <tr>
                            <th style="width:34%">English Name</th>
                            <th>বাংলা নাম (Edit)</th>
                            <th style="width:90px">Status</th>
                        </tr>
                    </thead>
                    <tbody id="upazilaRows">
                        @forelse($upazilas as $index => $upazila)
                        <tr data-search="{{ strtolower($upazila->name . ' ' . ($upazila->bn_name ?? '')) }}">
                            <td>
                                <div class="fw-semibold">{{ $upazila->name }}</div>
                                <input type="hidden" name="upazilas[{{ $index }}][id]" value="{{ $upazila->id }}">
                            </td>
                            <td>
                                <input type="text" name="upazilas[{{ $index }}][bn_name]"
                                       class="form-control form-control-sm bn-input"
                                       value="{{ old('upazilas.'.$index.'.bn_name', $upazila->bn_name) }}"
                                       placeholder="সঠিক বাংলা বানান লিখুন">
                            </td>
                            <td>
                                @if($upazila->bn_name_locked)
                                <span class="locked-badge">Custom</span>
                                @else
                                <span class="text-muted small">Auto</span>
                                @endif
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="3" class="text-center text-muted py-4">এই district-এ কোনো upazila পাওয়া যায়নি।</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            <div class="card-footer bg-white text-end">
                <button type="submit" class="btn btn-success">
                    <i class="fas fa-save me-1"></i>Save Changes
                </button>
            </div>
        </div>
    </form>
    @endif
</div>
@endsection

@push('scripts')
<script>
(function () {
    const filter = document.getElementById('upazilaFilter');
    const rows = document.querySelectorAll('#upazilaRows tr[data-search]');
    if (!filter) return;

    filter.addEventListener('input', function () {
        const q = this.value.trim().toLowerCase();
        rows.forEach(function (row) {
            const hay = row.getAttribute('data-search') || '';
            row.style.display = !q || hay.includes(q) ? '' : 'none';
        });
    });
})();
</script>
@endpush