@extends('layouts.admin')
@php
    use Illuminate\Support\Facades\Crypt;
@endphp

@section('content')
    <div class="container py-4">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h3>District Master Management</h3>
            <a href="{{ route('admin.districts.create') }}" class="btn btn-primary">+ Add District</a>
        </div>

        @if (session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif

        <!-- SEARCH FORM -->
        <form method="GET" action="{{ route('admin.districts.index') }}" class="row g-3 mb-3">
            <div class="col-md-4">
                <input type="text" name="search" value="{{ request('search') }}" class="form-control"
                    placeholder="Search by district name">
            </div>
            <div class="col-md-2">
                <button type="submit" class="btn btn-primary">Search</button>
            </div>
        </form>

        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>#</th>
                    <th>District Name</th>
                    <th>Status</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($districts as $district)
                    <tr data-id="{{ Crypt::encryptString($district->id) }}">
                        <td>{{ $loop->iteration + ($districts->currentPage() - 1) * $districts->perPage() }}</td>
                        <td>{{ $district->district }}</td>
                        <td>
                            <span
                                class="badge status-badge bg-{{ $district->status ? 'success' : 'secondary' }}">{{ $district->status ? 'Active' : 'Inactive' }}</span>
                        </td>
                        <td>
                            <a href="{{ route('admin.districts.edit', Crypt::encryptString($district->id)) }}"
                                class="btn btn-sm btn-warning">Edit</a>

                            {{-- <button class="btn btn-sm btn-danger delete-btn">Delete</button> --}}

                            @if ($district->status)
                                <button class="btn btn-sm btn-secondary toggle-btn">Deactivate</button>
                            @else
                                <button class="btn btn-sm btn-success toggle-btn">Activate</button>
                            @endif
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="4" class="text-center">No districts found</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
        {{ $districts->links() }}
    </div>
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {

            //  DELETE DISTRICT

            $(document).on("click", ".delete-btn", function(e) {
                e.preventDefault();

                let row = $(this).closest("tr");
                let encryptedId = row.data("id");

                Swal.fire({
                    title: "Are you sure?",
                    text: "This district will be permanently deleted.",
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonText: "Yes, delete it!",
                    cancelButtonText: "Cancel"
                }).then((result) => {
                    if (!result.isConfirmed) return;

                    $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': "{{ csrf_token() }}"
                        },
                        url: `/admin/districts/${encryptedId}`,
                        method: "POST",
                        data: {
                            _method: "DELETE"
                        },
                        dataType: "JSON",
                        success: function(response) {
                            if (response.status === "success") {
                                Swal.fire({
                                    title: "Deleted!",
                                    text: response.message,
                                    icon: "success",
                                    confirmButtonText: "Ok"
                                }).then(() => {
                                    window.location.reload();
                                });
                            } else {
                                Swal.fire({
                                    title: "Failed!",
                                    text: response.message ||
                                        "Something went wrong.",
                                    icon: "error",
                                    confirmButtonText: "Ok"
                                });
                            }
                        },
                        error: function(xhr) {
                            Swal.fire({
                                title: "Error!",
                                text: "Server error. Please try again.",
                                icon: "error",
                                confirmButtonText: "Ok"
                            });
                            console.error(xhr.responseText);
                        }
                    });
                });
            });



            //  TOGGLE STATUS (Activate / Deactivate)

            $(document).on("click", ".toggle-btn", function(e) {
                e.preventDefault();

                let button = $(this);
                let row = button.closest("tr");
                let encryptedId = row.data("id");
                let actionText = button.text().trim();
                let confirmText = `Are you sure you want to ${actionText.toLowerCase()} this district?`;

                Swal.fire({
                    title: "Confirm Action",
                    text: confirmText,
                    icon: "question",
                    showCancelButton: true,
                    confirmButtonText: "Yes",
                    cancelButtonText: "No"
                }).then((result) => {
                    if (!result.isConfirmed) return;

                    $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': "{{ csrf_token() }}"
                        },
                        url: "{{ route('admin.districts.toggleStatus') }}",
                        method: "POST",
                        data: {
                            encryptedId: encryptedId
                        }, // send in body
                        dataType: "JSON",
                        success: function(response) {
                            if (response.status === "success") {
                                Swal.fire({
                                    title: "Success!",
                                    text: response.message,
                                    icon: "success",
                                    confirmButtonText: "Ok"
                                }).then(() => {
                                    window.location.reload();
                                });
                            } else {
                                Swal.fire({
                                    title: "Failed!",
                                    text: response.message ||
                                        "Unable to update status.",
                                    icon: "error",
                                    confirmButtonText: "Ok"
                                });
                            }
                        },
                        error: function(xhr) {
                            Swal.fire({
                                title: "Error!",
                                text: "Server error. Please try again.",
                                icon: "error",
                                confirmButtonText: "Ok"
                            });
                            console.error(xhr.responseText);
                        }
                    });
                });
            });

        });
    </script>
@endpush