@extends('admin.layouts.app')

@section('title', 'Şehirler')
@section('header', 'Şehirler')

@section('content')
<div class="card">
    <div class="card-header">
        <div class="float-right">
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#cityModal" id="createCityBtn">
                <i class="fas fa-plus"></i> Yeni Şehir Ekle
            </button>
        </div>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover text-nowrap">
                <thead>
                    <tr>
                        <th>Şehir Adı</th>
                        <th>İlçe Sayısı</th>
                        <th style="width: 150px">İşlemler</th>
                    </tr>
                </thead>
                <tbody id="sortable">
                    @forelse($cities as $city)
                        <tr>
                            <td>{{ $city->name }}</td>
                            <td>{{ $city->districts_count }}</td>
                            <td>
                                <button type="button" class="btn btn-sm btn-info edit-city" data-id="{{ $city->id }}">
                                    <i class="fas fa-edit"></i>
                                </button>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="text-center">Henüz şehir eklenmemiş.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    @if($cities->hasPages())
        <div class="card-footer clearfix">
            <div class="float-right">
                {{ $cities->onEachSide(1)->links('admin.layouts.pagination') }}
            </div>
            <div class="float-left text-muted">
                {{ $cities->total() }} sonuçtan {{ $cities->firstItem() }} - {{ $cities->lastItem() }} arası gösteriliyor
            </div>
        </div>
    @endif
</div>

<!-- City Modal -->
<div class="modal fade" id="cityModal" tabindex="-1" role="dialog" aria-labelledby="cityModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="cityModalLabel">Yeni Şehir Ekle</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="cityForm" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="form-group">
                        <label for="name">Şehir Adı <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="name" name="name" required>
                        <div class="invalid-feedback" id="nameError"></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">İptal</button>
                    <button type="submit" class="btn btn-primary">Kaydet</button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('styles')
    <style>
        .cursor-move {
            cursor: move;
        }
        tr.sortable-ghost {
            background-color: #f8f9fa;
            opacity: 0.5;
        }
        .gap-2 > * {
            margin-right: 0.5rem;
        }
        .gap-2 > *:last-child {
            margin-right: 0;
        }
    </style>
@endpush

@push('scripts')
<script>
$(document).ready(function() {
    // Reset form when modal is closed
    $('#cityModal').on('hidden.bs.modal', function () {
        $('#cityForm').trigger('reset');
        $('#cityForm').attr('method', 'POST');
        $('#cityForm').attr('action', '{{ route('admin.cities.store') }}');
        $('.invalid-feedback').hide();
        $('.is-invalid').removeClass('is-invalid');
        $('#cityModalLabel').text('Yeni Şehir Ekle');
    });

    // Create city form submit
    $('#cityForm').on('submit', function(e) {
        e.preventDefault();
        const form = $(this);
        const url = form.attr('action');
        const method = form.attr('method');

        $.ajax({
            url: url,
            method: method,
            data: form.serialize(),
            success: function(response) {
                $('#cityModal').modal('hide');
                window.location.reload();
            },
            error: function(xhr) {
                if (xhr.status === 422) {
                    const errors = xhr.responseJSON.errors;
                    Object.keys(errors).forEach(field => {
                        $(`#${field}`).addClass('is-invalid');
                        $(`#${field}Error`).text(errors[field][0]).show();
                    });
                }
            }
        });
    });

    // Edit city button click
    $('.edit-city').on('click', function() {
        const cityId = $(this).data('id');
        $('#cityModalLabel').text('Şehir Düzenle');
        $('#cityForm').attr('method', 'PUT');
        $('#cityForm').attr('action', `/admin/cities/${cityId}`);

        // Fetch city data
        $.get(`/admin/cities/${cityId}/edit`, function(response) {
            $('#name').val(response.name);
            $('#cityModal').modal('show');
        });
    });
});
</script>
@endpush

@endsection