@extends('dashboard.admin.layouts.app')

@section('content')

<div class="row justify-content-center">
    <div class="col-12">
        <h2 class="mb-2 page-title">States</h2>
        <p class="card-text">States table.</p>
        <div class="row my-4">
            <!-- data table -->
            <div class="col-md-12">
                <a href="{{ route('states.create') }}" class="btn btn-primary mb-2">Add New State</a>
                <div class="card shadow">
                    <div class="card-body">
                        <!-- table -->
                        <table class="table datatables" id="dataTable-1">
                            <thead>
                                <tr>
                                    <th>Sr#</th>
                                    <th>Country</th>
                                    <th>State</th>
                                    <th>State Code</th>
                                    <th>Date</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @php $counter = 1 @endphp <!-- Initialize counter -->
                                @foreach ($states as $state)
                                <tr id="row_{{ $state->id }}">
                                    <td>{{ $counter++ }}</td> <!-- Increment and display counter -->
                                    <td>{{ $state->country->name }}</td>
                                    <td>{{ $state->name }}</td>
                                    <td>{{ ucfirst($state->code) }}</td>
                                    <td>{{ $state->created_at }}</td>
                                    <td>
                                        <button class="btn btn-sm rounded dropdown-toggle more-horizontal text-muted"
                                            type="button" data-toggle="dropdown" aria-haspopup="true"
                                            aria-expanded="false">
                                            <span class="text-muted sr-only">Action</span>
                                        </button>
                                        <div class="dropdown-menu dropdown-menu-right shadow">
                                            <a class="dropdown-item" href="{{ route('states.edit', $state->id) }}"><i
                                                    class="fe fe-edit-2 fe-12 mr-3 text-muted"></i>Edit</a>
                                            <button type="button" class="dropdown-item delete-state" data-id="{{ $state->id }}"><i
                                                    class="fe fe-trash fe-12 mr-3 text-muted"></i>Remove</button>
                                        </div>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div> <!-- data table -->
        </div> <!-- end section -->
    </div> <!-- .col-12 -->
</div>

@endsection

@section('bottom_script')
<script>
    $(document).ready(function() {
        $('.delete-state').click(function() {
            var stateId = $(this).data('id');

            if (confirm('Are you sure you want to delete this state?')) {
                $.ajax({
                    type: 'POST',
                    url: "{{ route('states.destroy', '_tate_id__') }}".replace('_tate_id__', stateId),
                    data: {
                        "_token": "{{ csrf_token() }}",
                        "_method": "DELETE"
                    },
                    success: function(response) {
                        $('#row_' + stateId).remove();
                        alert('State deleted successfully.');
                    },
                    error: function(xhr, status, error) {
                        console.error(xhr.responseText);
                        alert('Failed to delete state.');
                    }
                });
            }
        });
    });
</script>
@endsection

• [F] create.blade.php
  Delete
• [F] edit.blade.php
  Delete
• [F] index.blade.php
  Delete