@extends('layouts.horizontal', ['title' => 'Bookings', 'topbarTitle' => 'Customer Visits'])

@section('css')

@vite(['node_modules/select2/dist/css/select2.min.css'])
@vite(['node_modules/flatpickr/dist/flatpickr.min.css'])

@endsection

@section('content')

<style>
     tr.strike-through > td {text-decoration:line-through !important; color:red;}      
     tr.border-top > td {border-top: 2px solid #dee2e6 !important;} 
</style>


<div class="BookingsPage">
    <!-- start page title -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="page-title-box d-flex align-items-center justify-content-between">
                <h2 class="mb-0">Bookings</h2>
                <div class="page-title-right">
                    <a href="{{ route('bookings.new_booking') }}" target="newbooking" class="btn btn-outline-success btn-sm me-2" id="newBookingBtn">
                        <iconify-icon icon="mdi:plus" class="me-1" width="16" inline></iconify-icon>
                         Booking</a>
                     {{ session('user_role') }}
                </div>
            </div>
        </div>
    </div>
    <!-- end page title -->
    <div class="row mb-1">
        <div class="col-12">
            <div class="card">
                <div class="card-body">                    
                    <div class="mb-4">
                        <h4 class="card-title mb-1">Future Bookings.</h4>
                        
                    </div>
                    <div class="row g-3 px-3">
                        <div class="col-md-3 d-none">
                            <div class="d-flex align-items-center">
                                <label for="filterStartDate" class="form-label me-2 mb-0">Start Date:</label>
                            </div>
                        </div>
                        <div class="col-md-3 d-none">
                            <div class="d-flex align-items-center">
                                <label for="filterEndDate" class="form-label me-2 mb-0">Booking End Date:</label>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="d-flex align-items-center">
                                <label for="filterBusiness" class="form-label me-2 mb-0">Business:</label>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="d-flex align-items-center">
                                <label class="form-label me-2 mb-0">Agent:</label>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="d-flex align-items-center">
                                <label class="form-label me-2 mb-0">&nbsp;</label>
                            </div>
                        </div>
                    </div>
                    <div class="row g-3 px-3 pb-3">
                        <div class="col-md-3 d-none">
                            <div class="d-flex align-items-center">                            
                                <input type="date" id="filterStartDate" class="form-control form-control-sm w-auto" placeholder="Select Start Date" value="{{ $start_date }}" >
                            </div>            
                        </div>
                        <div class="col-md-3 d-none">
                            <div class="d-flex align-items-center">                            
                                <input type="date" id="filterEndDate" class="form-control form-control-sm w-auto" placeholder="Select End Date" value="{{ $end_date }}" >
                            </div>            
                        </div>
                        <div class="col-md-2">
                            <div class="d-flex align-items-center">                            
                                <select id="filterBusiness" class="form-select form-select-sm w-auto">
                                    
                                    @foreach($businesses as $business)
                                        <option value="{{ $business->id_business }}">{{ $business->business_name }}</option>
                                    @endforeach
                                    @if(session('ho')=="Yes")
                                    <option value="">All Businesses</option>
                                    @endif
                                </select>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="d-flex align-items-center">                            
                                <select id="filterAgent" class="form-select form-select-sm w-auto">
                                    <option value="all">All Agents</option>
                                    @foreach($agents as $agent)
                                        <option value="{{ $agent->user_name }}">{{ $agent->user_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="d-flex align-items-center">
                                <button type="button" id="applyFiltersBtn" class="btn btn-sm btn-ghost-success btn-icon rounded-circle me-2" title="Apply Filters">
                                    <iconify-icon icon="mdi:reload" width="24" inline></iconify-icon>                                    
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <table id="bookingsTable" class="table table-bordered dt-responsive fs-12 w-100">
                        <thead>
                            <tr>                                
                                <th>Booking ID</th>
                                <th>Visit ID</th>
                                <th>VisitDate</th>
                                <th>BookingDate</th>
                                <th>Booked By</th>
                                <th>Customer Name</th>
                                <th>Cell</th>
                                <th>Type</th>
                                <th>Category</th>
                                <th>Service</th>                                
                                <th>Visit Status</th>
                                <th>Service Rate</th>
                                <th>Discount</th>
                                <th>Adv. Amount</th>
                                <th>Remaining Amount</th>                                
                                <th>Actions</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
</div>

@endsection

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
      
        initializeBookingstable();
    });

    document.getElementById('applyFiltersBtn').addEventListener('click', function() {
        $('#bookingsTable').DataTable().ajax.reload();
    });

    initializeBookingstable = function() {
    var lastBookingId = null;
    var table = $('#bookingsTable').DataTable({
        processing: true,
        serverSide: true,
        scrollX: true,
        scrollY: '400px',
        scrollCollapse: true,
        responsive: false,
        fixedHeader: true,

        ajax: {
            url: '{{ route("bookings.bookingsdata") }}',
            type: 'POST',
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            data: function(d) {
                d.start_date = document.getElementById('filterStartDate').value;
                //d.end_date = document.getElementById('filterEndDate').value;
                d.business_id = document.getElementById('filterBusiness').value;
                d.user_name = document.getElementById('filterAgent').value;
            }
        },

        columns: [
            { data: 'id_bookings', name: 'id_bookings' },
            { data: 'id_customer_visits', name: 'id_customer_visits' },
            { data: 'visit_date', name: 'visit_date', class: 'nowrap' },
            { data: 'booking_date', name: 'booking_date', class: 'nowrap' },
            { data: 'created_by', name: 'created_by' },
            { data: 'customer_name', name: 'customer_name' },
            { data: 'customer_cell', name: 'customer_cell' },
            { data: 'service_type', name: 'service_type' },
            { data: 'service_category', name: 'service_category' },
            { data: 'service_name', name: 'service_name', class: 'wrap-text' },
            { data: 'visit_status', name: 'visit_status' },
            { data: 'service_rate', name: 'service_rate',
                render: $.fn.dataTable.render.number( ',', '.', 2, '' )
             },
            { data: 'discount', name: 'discount', searchable: false,
                render: $.fn.dataTable.render.number( ',', '.', 2, '' )
             },

            { data: 'advance_amount', name: 'advance_amount', searchable: false,
                render: $.fn.dataTable.render.number( ',', '.', 2, '' )
             },

            {
                data: null,
                name: 'remaining_amount',
                searchable: false,
                render: function (data, type, row) {
                    return (
                        parseFloat(row.service_rate)
                        - parseFloat(row.discount)
                        - parseFloat(row.advance_amount)
                    ).toFixed(2);
                }
            },

            { data: null, orderable: false, searchable: false,
                render : function (data, type, row) {
                    return '';
                }
             }
        ],
        ordering: false,
        drawCallback: function(settings) {
            var api = this.api();
            var rows = api.rows({page: 'current'}).nodes();
            var data = api.rows({page: 'current'}).data();

            var lastId = null;
            var groupStartIndex = 0;

            api.rows({page: 'current'}).every(function(idx) {

                var row = data[idx];
                var bookingId = row.id_bookings;

                if (lastId === null) {
                    // First row in page
                    lastId = bookingId;
                    groupStartIndex = idx;
                    return;
                }

                // If booking ID changed → previous group ended here
                if (lastId !== bookingId) {
                    insertSubtotalAfterGroup(api, rows, data, lastId, groupStartIndex, idx - 1);
                    lastId = bookingId;
                    groupStartIndex = idx;
                }

            });

            // Insert subtotal for last group on page
            if (lastId !== null) {
                insertSubtotalAfterGroup(api, rows, data, lastId, groupStartIndex, data.length - 1);
            }
        },        
    });
};

// Helper function
        function insertSubtotalAfterGroup(api, rows, data, bookingId, startIdx, endIdx) {

            // Calculate subtotal for this group
            var totalservice = 0;
            data.each(function(r) {
                if (r.id_bookings == bookingId) {
                    totalservice += parseFloat(r.service_rate);
                    discount = parseFloat(r.discount);
                    advance = parseFloat(r.advance_amount);
                    remaining = totalservice - discount - advance;
                }
            });

            if (totalservice > 0) {
                var url = "{{ route('bookings.print_booking_receipt', ':id') }}".replace(':id', bookingId);
                var totalRow =
                    `<tr class="group-total border-top">
                        <td colspan="11" class="text fw-bold text-end">
                            Total Price for Booking ID ${bookingId}:
                        </td>
                        <td class="text-end text-success fw-bold">${  totalservice.toFixed(2) }</td>
                        <td class="text-end text-danger fw-bold">${ discount.toFixed(2) }</td>
                        <td class="text-end text-success fw-bold">${ advance.toFixed(2) }</td>
                        <td class="text-end text-success fw-bold">${ remaining.toFixed(2) }</td>
                        <td>
                            <a href="${url}" class="btn btn-icon btn-ghost-primary btn-sm me-1" target="_blank" title="View Booking Receipt">
                                <iconify-icon icon="bytesize:print" width="20" inline></iconify-icon>
                            </a>

                        </td>
                    </tr>`;

                // Insert AFTER the last row of the group
                $(rows).eq(endIdx).after(totalRow);
            }
        }




</script>
@endsection