@extends('layouts.admin')
@section('page-title')
    {{ __('Manage Ambulances') }}
@endsection

@section('content')
    <div class="card">
        <div class="card-body">
            <div class="float-end">
                <a href="#" data-size="lg" data-url="{{ route('admin.ambulances.create') }}" data-ajax-popup="true"
                    data-title="{{ __('Add New Ambulance') }}" class="btn btn-sm btn-primary">
                    <i class="ti ti-plus"></i>
                </a>
            </div>
            <h4>{{ __('Ambulance List') }}</h4>

            <hr>

            <div class="row mb-3 align-items-end">
                <div class="col-md-4">
                    <label class="form-label fw-bold">{{ __('Filter by Type') }}</label>
                    <select id="filter_type" class="form-control select2">
                        <option value="">{{ __('All Types') }}</option>
                        @foreach ($types as $type)
                            <option value="{{ $type->type_id }}">{{ $type->type_name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-4">
                    <label class="form-label fw-bold">{{ __('Filter by Pincode') }}</label>
                    <select id="filter_pincode" class="form-control select2">
                        <option value="">{{ __('All Pincodes') }}</option>
                        @foreach ($pincodes as $pin)
                            <option value="{{ $pin->id }}">{{ $pin->pincode }} - {{ $pin->area_name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <button id="reset_filter" class="btn btn-danger btn-sm px-3 py-2">
                        <i class="ti ti-refresh"></i> {{ __('Reset') }}
                    </button>
                </div>
            </div>
        </div>

        <div class="table-responsive card-body">
            <table id="ambulanceTable" class="table table-striped table-bordered w-100">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Vehicle No</th>
                        <th>Type</th>
                        <th>Service Area</th>
                        <th>Pincode</th>
                        <th>Owner</th>
                        <th>Phone</th>
                        <th>Available</th>
                        <th>Action</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
@endsection

@push('script-page')
    <script>
        $(document).ready(function() {
            $('.select2').select2();

            // 1. Initialize DataTable
            const table = $('#ambulanceTable').DataTable({
                processing: true,
                serverSide: true,
                // This sends filter data to the Controller
                ajax: {
                    url: "{{ route('admin.ambulances.index') }}",
                    data: function(d) {
                        d.type_id = $('#filter_type').val();
                        d.pincode_id = $('#filter_pincode').val();
                    }
                },
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'vehicle_number',
                        name: 'vehicle_number'
                    },
                    {
                        data: 'type_name',
                        name: 'type_name'
                    },
                    {
                        data: 'service_area',
                        name: 'service_area'
                    },
                    {
                        data: 'pincode',
                        name: 'pincode'
                    },
                    {
                        data: 'owner_name',
                        name: 'owner_name'
                    },
                    {
                        data: 'owner_phone',
                        name: 'owner_phone'
                    },
                    {
                        data: 'is_available',
                        name: 'is_available',
                        render: function(data, type, row) {
                            // Handled by editColumn in Controller, but row data is available here too
                            return data;
                        }
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    }
                ],
                language: {
                    emptyTable: "No ambulances found matching your criteria"
                }
            });

            // 2. Trigger Table Reload on Filter Change
            $('#filter_type, #filter_pincode').on('change', function() {
                table.ajax.reload();
            });

            // 3. Reset Filter Button
            $('#reset_filter').on('click', function() {
                $('#filter_type').val('').trigger('change');
                $('#filter_pincode').val('').trigger('change');
            });

            // 4. Delete Functionality
            $(document).on('click', '.delete-btn', function() {
                if (confirm('Are you sure you want to delete this ambulance?')) {
                    let id = $(this).data('id');
                    $.ajax({
                        url: "{{ url('admin/ambulances') }}/" + id + "/destroy",
                        type: 'DELETE',
                        data: {
                            _token: '{{ csrf_token() }}'
                        },
                        success: function(response) {
                            if (response.success) {
                                show_toastr('Success', response.success, 'success');
                                table.ajax.reload();
                            }
                        },
                        error: function() {
                            show_toastr('Error', 'Something went wrong', 'error');
                        }
                    });
                }
            });
        });
    </script>
@endpush