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

@section('content')
    <div class="card">
        <div class="card-header d-flex justify-content-between">
            <h5>{{ __('Booking List') }}</h5>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table id="bookingTable" class="table table-striped table-bordered w-100">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>User</th>
                            <th>Patient</th>
                            <th>Type</th>
                            <th>Pickup Address</th>
                            <th>Drop Address</th>
                            <th>KMs</th>
                            <th>Price</th>
                            <th>Coupon</th> 
                            <th>After Coupon</th>
                            <th>Pay Status</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
@endsection

@push('script-page')
    <script>
        $(document).ready(function() {
            const table = $('#bookingTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('admin.bookings.index') }}",
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'username',
                        name: 'mobile_users.username'
                    },
                    {
                        data: 'patient_name',
                        name: 'patients.patient_name'
                    },
                    {
                        data: 'type_name',
                        name: 'ambulance_types.type_name'
                    },
                    {
                        data: 'pickup_address',
                        render: function(data, type, row) {
                            return `<small>${data}</small><br><span class="badge bg-light text-dark" style="font-size:10px">${row.pickup_lat}, ${row.pickup_long}</span>`;
                        }
                    },
                    {
                        data: 'drop_address',
                        render: function(data, type, row) {
                            return `<small>${data}</small><br><span class="badge bg-light text-dark" style="font-size:10px">${row.drop_lat}, ${row.drop_long}</span>`;
                        }
                    },
                    {
                        data: 'total_kms',
                        name: 'bookings.total_kms'
                    },
                    {
                        data: 'final_price',
                        render: function(data) {
                            return '<b>' + data + '</b>';
                        }
                    },
                    {
                        // Combined Code and Discount Column
                        data: 'code',
                        name: 'bookings.code',
                        render: function(data, type, row) {
                            if (!data || data === '') {
                                return `<span class="text-muted">-</span>`;
                            }
                            let symbol = row.discount_type === 'percentage' ? '%' : '';
                            return `
                                <div>
                                    <span class="badge bg-primary mb-1">${data}</span><br>
                                    <small class="text-danger">Save ${row.discount_value}${symbol}</small>
                                </div>
                            `;
                        }
                    },
                    {
                        data: 'final_price_after_coupon',
                        name: 'bookings.final_price_after_coupon',
                        render: function(data) {
                            return `<b class="text-primary">${data}</b>`;
                        }
                    },
                    {
                        data: 'status',
                        name: 'bookings.status'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    }
                ]
            });

            // Delete Logic
            $(document).on('click', '.delete-btn', function() {
                if (confirm('Delete this record?')) {
                    let id = $(this).data('id');
                    $.ajax({
                        url: "{{ url('admin/bookings') }}/" + id + "/destroy",
                        type: 'DELETE',
                        data: {
                            _token: '{{ csrf_token() }}'
                        },
                        success: function() {
                            table.ajax.reload();
                        }
                    });
                }
            });
        });
    </script>
@endpush