@extends('admin.layouts.app')

@section('title', __('dashboard.country_details'))

@section('content')
<x-admin.page-header title="{{ __('dashboard.country_details') }}" :breadcrumbs="[__('dashboard.countries') => route('admin.countries.index'), __('dashboard.details') => '']" />

<div class="row justify-content-center">
    <div class="col-xl-12">
        <!-- Header Card -->
        <div class="card bg-primary bg-gradient mb-4">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="avatar-lg bg-white bg-opacity-25 rounded d-flex align-items-center justify-content-center me-4" style="width: 80px; height: 80px;">
                        <span class="text-white fs-1 fw-bold">{{ $country->code }}</span>
                    </div>
                    <div>
                        <h3 class="mb-1 text-white">{{ $country->getTranslation('name', app()->getLocale()) }}</h3>
                        @if($country->phone_code)
                            <p class="text-white-50 mb-0"><i class="ri-phone-line me-1"></i> +{{ $country->phone_code }}</p>
                        @endif
                    </div>

                    <div class="ms-auto text-end">
                        @if($country->is_active)
                            <span class="badge bg-success">{{ __('dashboard.active') }}</span>
                        @else
                            <span class="badge bg-danger">{{ __('dashboard.inactive') }}</span>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <!-- Info Card -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="card-title mb-0">{{ __('dashboard.general_info') }}</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <x-view-col label="{{ __('dashboard.id') }}" :value="$country->id"/>
                    <x-view-col label="{{ __('dashboard.name_en') }}" :value="$country->getTranslation('name', 'en')"/>
                    <x-view-col label="{{ __('dashboard.name_ar') }}" :value="$country->getTranslation('name', 'ar')"/>
                    <x-view-col label="{{ __('dashboard.code') }}" :value="$country->code"/>
                    <x-view-col label="{{ __('dashboard.phone_code') }}" :value="$country->phone_code ? '+' . $country->phone_code : '-'"/>
                    <x-view-col label="{{ __('dashboard.cities_count') }}" :value="$country->cities_count"/>
                    <x-view-col label="{{ __('dashboard.created_at') }}" :value="$country->created_at"/>
                    <x-view-col label="{{ __('dashboard.updated_at') }}" :value="$country->updated_at"/>
                </div>
            </div>
        </div>

        <!-- Tabs -->
        <div class="card">
            <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" data-bs-toggle="tab" href="#cities-tab" role="tab">
                            <i class="ri-building-line me-1"></i> {{ __('dashboard.cities') }}
                            <span class="badge bg-info ms-1">{{ $country->cities_count }}</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="card-body">
                <div class="tab-content">
                    <!-- Cities Tab -->
                    <div class="tab-pane fade show active" id="cities-tab" role="tabpanel">
                        <div class="row mb-3">
                            <div class="col-md-12">
                                <div class="d-flex flex-wrap gap-2 align-items-center">
                                    <x-report name="cities-report" />
                                    <x-status-filter name="cities-status-filter" :enum="\App\Enums\StatusEnum::class" />
                                </div>
                            </div>
                        </div>
                        {{ $citiesDataTable->table(['class' => 'table table-bordered table-striped dt-responsive nowrap w-100']) }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
{{ $citiesDataTable->scripts() }}

<script>
$(document).ready(function() {
    // Cities tab filters
    $('.cities-report').on('click', '.report', function() {
        $('.cities-report .report').removeClass('active');
        $(this).addClass('active');
        window.LaravelDataTables['country-cities-table'].ajax.reload();
    });

    $('.cities-status-filter').on('click', '.status-filter', function() {
        $('.cities-status-filter .status-filter').removeClass('active');
        $(this).addClass('active');
        window.LaravelDataTables['country-cities-table'].ajax.reload();
    });

    // Reload DataTable when tab is shown
    $('a[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) {
        var target = $(e.target).attr('href');
        if (target === '#cities-tab') {
            window.LaravelDataTables['country-cities-table'].columns.adjust();
        }
    });
});
</script>
@endpush