@extends('layouts.admin')

@section('page-title')
    {{ __('Manage Bookings') }}
@endsection

@push('css-page')
    <style>
        @keyframes blink {

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0.35;
            }
        }

        .blink-badge {
            animation: blink 1.4s ease-in-out infinite;
        }
    </style>
@endpush

@section('content')
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0">{{ __('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>Amb. Type</th>
                            <th>Booking Type</th>
                            <th>Pickup</th>
                            <th>Drop</th>
                            <th>KMs</th>
                            <th>Price</th>
                            <th>Coupon</th>
                            {{-- <th>After Coupon</th> --}}
                            <th>Pay Type</th>
                            <th>Pay Summary</th>
                            <th>Pay Stage</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') }}",
                scrollX: true,
                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: 'type',
                        name: 'bookings.type'
                    },
                    {
                        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>`;
                        }
                    },
                    {
                        data: 'code',
                        name: 'bookings.code',
                        render: function(data, type, row) {
                            if (!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: 'payment_type',
                        name: 'bookings.payment_type'
                    },
                    {
                        data: 'payment_summary',
                        name: 'payment_summary',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'payment_stage',
                        name: 'bookings.payment_stage'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    }
                ],
                rowCallback: function(row, data) {
                    // Highlight entire row softly for advance payment with pending dues
                    if (data.payment_type === 'advanced_payment' && data.payment_stage !== 'paid') {
                        $(row).addClass('table-warning');
                    }
                }
            });

            // Delete handler
            $(document).on('click', '.delete-btn', function() {
                if (confirm('Are you sure you want to delete this booking?')) {
                    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