@extends('layouts.admin')

@section('title','Taluk List')

@section('content')

<div class="container-fluid p-0">
    <!--title-->
    <div class="mb-3">
        <h1 class="h3 d-inline align-middle">Taluks</h1>
    </div>

    <div class="mt-2 mt-md-0">
        <a href="{{ route('admin.taluks.create') }}" class="btn btn-primary">Create Taluk </a>
    </div>

    <div class="col-md-6">
        <br>
        <!-- <div class="collapse navbar-collapse" id="navbarSearch">-->
            <form class="d-flex ms-auto" action="{{ route('admin.taluks.index') }}" role="search">
                <input class="form-control me-2" type="search" placeholder="Search" name="search" value="{{ $search}}"  aria-label="Search">
                <button class="btn btn-outline-primary" type="submit">Search</button>
            </form>
            <!--  </div>-->
        </div>
        <!--title-->

        <!--content-->

        <br>
        <div class="row">
            <div class="col-12 col-xl-12">
                <div class="card">

                    <div class="table-responsive">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Taluk Name</th>
                                    <th>District</th>
                                    <th>Status</th>
                                    <th>Actions</th>                                                                                                
                                </tr>
                            </thead>
                            <tbody>                                      

                              @forelse($taluks as $taluk)


                              <tr>
                                <td>{{ $loop->iteration + ($taluks->currentPage() - 1) * $taluks->perPage() }}</td>

                                <td>{{ $taluk->taluk_name }}</td>                 
                                <td>{{ $taluk->district?->district ?? '—' }}</td>     

                                <td>@if($taluk->status==1)<div class="alert alert-success">Active</div> @else  <div class="alert alert-danger">Inactive</div>@endif</td>


                                <td class="table-action">
                                    <a href="{{ route('admin.taluks.edit', Crypt::encryptString($taluk->id)) }}">
                                        <i class="align-middle" data-feather="edit-2"></i>
                                    </a>
                                    <a href="javascript:void(0);" 
                                    class="toggle-taluk-status"
                                    data-id="{{ Crypt::encryptString($taluk->id) }}"
                                    data-status="{{ $taluk->status }}">
                                    @if ($taluk->status == 1)
                                    <i class="align-middle fas fa-ban" title="Deactivate"></i>
                                    @else
                                    <i class="align-middle fas fa-check" title="Activate"></i>
                                    @endif
                                </a>
                            </td>
                        </tr>                                        
                        @empty
                        <tr><td colspan="7" class="text-center">No hospitals found.</td></tr>
                        @endforelse

                    </tbody>
                </table>

                <div class="d-flex justify-content-center">
                    {{ $taluks->links() }}
                </div>
            </div>

        </div>
    </div>
</div>
<!--content-->

</div>
@endsection


@push('scripts')
<script>
   
  $(document).on("click", ".toggle-taluk-status", function () {
    let button = $(this);
    let talukId = button.data("id");
    let currentStatus = button.data("status"); // 1 = active, 0 = inactive

    let action = currentStatus == 1 ? "deactivate" : "activate";
    let actionText = action.charAt(0).toUpperCase() + action.slice(1);

    Swal.fire({
        title: "Are you sure?",
        text: `Do you want to ${action} this Taluk?`,
        icon: "warning",
        showCancelButton: true,
        confirmButtonText: `Yes, ${actionText}`
    }).then((result) => {
        if (result.isConfirmed) {
            $.ajax({
                url: "{{ route('admin.taluks.toggle-status', ':id') }}".replace(':id', talukId),
                type: "POST",
                data: { _token: '{{ csrf_token() }}' },
                success: function(response) {
                    if (response.status == "success") {
                        let statusCell = button.closest("tr").find("td:nth-child(4)");

                        if (response.new_status == 1) {
                            statusCell.html('<div class="alert alert-success">Active</div>');
                            button.data("status", 1);
                            button.html('<i class="align-middle fas fa-ban" title="Deactivate"></i>');
                        } else {
                            statusCell.html('<div class="alert alert-danger">Inactive</div>');
                            button.data("status", 0);
                            button.html('<i class="align-middle fas fa-check" title="Activate"></i>');
                        }

                        Swal.fire({
                            title: actionText,
                            text: response.message,
                            icon: "success",
                            timer: 1500,
                            showConfirmButton: false
                        });
                    } else {
                        Swal.fire("Error!", response.message, "error");
                    }
                },
                error: function() {
                    Swal.fire("Error!", "Something went wrong", "error");
                }
            });
        }
    });
});




</script>
@endpush