@extends('layout')

@section('content')
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h4>Orders List</h4>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-bordered w-100" id="orders-table">
    <thead>
        <tr>
            <th>ID</th>
            <th>Customer Name</th>
            <th>Phone</th>
            <!--<th>Email</th>-->
            <th>Address</th>
            <th>Total Price</th>
            <th>Status</th>
            <th>Payment Status</th> <!-- New column -->
            <th>Created At</th>
            <th>Action</th>
        </tr>
    </thead>
</table>
        </div>
    </div>
</div>

<!-- View Modal -->
<div class="modal fade" id="viewModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Order Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="viewModalBody">
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    var previousCount = 0;
    var bellAudio = new Audio("{{ asset('notification.mp3') }}");

    // Initialize DataTable
    var table = $('#orders-table').DataTable({
    processing: true,
    serverSide: true,
    responsive: true,
    ajax: {
        url: "{{ route('orders.data') }}",
        dataSrc: function(json) {
            if(previousCount > 0 && json.recordsTotal > previousCount) {
                bellAudio.play();
                toastr.info('New order received!');
            }
            previousCount = json.recordsTotal;
            return json.data;
        }
    },
    columns: [
        {data: 'id', name: 'id'},
        {data: 'customer_name', name: 'customer_name'},
        {data: 'phone', name: 'phone'},
        // {data: 'email', name: 'email', responsivePriority: 4},
        {data: 'address', name: 'address', responsivePriority: 4},
        {
            data: 'total_price', 
            name: 'total_price',
            responsivePriority: 2,
            render: function(data) {
                return data; // Already formatted in PHP
            }
        },
        {
            data: 'order_status', 
            name: 'order_status',
            responsivePriority: 1,
            orderable: true // Make sure this is true
        },
        {data: 'payment_status', name: 'payment_status', responsivePriority: 1}, // New column
        {
            data: 'created_at', 
            name: 'created_at',
            responsivePriority: 3,
            render: function(data) {
                return data; // Already formatted in PHP
            }
        },
        {
            data: 'action', 
            name: 'action', 
            orderable: false, 
            searchable: false, 
            responsivePriority: 1
        }
    ],
    order: [[0, 'desc']], // Default sorting
    language: {
        processing: '<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading...</span>'
    },
    drawCallback: function(settings) {
        // Reinitialize any plugins or handlers after table redraw
    }
});

    // Auto refresh every 20 seconds
    function refreshTable() {
        table.ajax.reload(null, false);
    }
    
    setInterval(refreshTable, 20000);

    // Status Change Handler
    $(document).on('change', '.status-change', function() {
        var id = $(this).data('id');
        var status = $(this).val();
        var select = $(this);

        $.ajax({
            url: "{{ url('/orders/update-status') }}/" + id,
            type: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                status: status
            },
            success: function(response) {
                if(response.success) {
                    toastr.success('Status updated successfully');
                } else {
                    toastr.error('Error updating status');
                    refreshTable();
                }
            },
            error: function() {
                toastr.error('Error updating status');
                refreshTable();
            }
        });
    });
    
    // New: Payment Status Change Handler
$(document).on('change', '.payment-status-change', function() {
    var id = $(this).data('id');
    var paymentStatus = $(this).val();

    $.ajax({
        url: "{{ url('/orders/update-payment-status') }}/" + id,
        type: 'POST',
        data: {
            _token: '{{ csrf_token() }}',
            payment_status: paymentStatus
        },
        success: function(response) {
            if(response.success) {
                toastr.success('Payment status updated successfully');
            } else {
                toastr.error('Error updating payment status');
                refreshTable();
            }
        },
        error: function() {
            toastr.error('Error updating payment status');
            refreshTable();
        }
    });
});

    // View Order
    $(document).on('click', '.view-order', function() {
        var id = $(this).data('id');
        $.ajax({
            url: "{{ url('/orders/show') }}/" + id,
            type: 'GET',
            success: function(response) {
                var html = generateOrderDetailsHtml(response);
                $('#viewModalBody').html(html);
                var viewModal = new bootstrap.Modal(document.getElementById('viewModal'));
                viewModal.show();
            },
            error: function() {
                toastr.error('Error loading order details');
            }
        });
    });

    // Helper function to generate order details HTML
    function generateOrderDetailsHtml(response) {
        var order = response.order;
        var items = response.orderItems;
        
        var html = `
            <div class="order-info mb-4">
                <h6>Order Information</h6>
                <table class="table table-bordered">
                    <tr>
                        <th width="20%">Customer Name</th>
                        <td>${order.customer_name}</td>
                        <th width="20%">Phone</th>
                        <td>${order.phone}</td>
                    </tr>
                    <tr>
                        <th>Email</th>
                        <td>${order.email || '-'}</td>
                        <th>Address</th>
                        <td>${order.address || '-'}</td>
                    </tr>
                    <tr>
                        <th>Status</th>
                        <td>${order.order_status}</td>
                        <th>Total Price</th>
                        <td>AED ${parseFloat(order.total_price).toFixed(2)}</td>
                    </tr>
                </table>
            </div>`;

        if(items && items.length > 0) {
            html += `
                <div class="order-items">
                    <h6>Order Items</h6>
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>Item</th>
                                <th>Quantity</th>
                                <th>Price</th>
                                <th>Modifiers & Options</th>
                            </tr>
                        </thead>
                        <tbody>`;

            items.forEach(function(item) {
                html += `
                    <tr>
                        <td>${item.product_name}</td>
                        <td>${item.quantity}</td>
                        <td>AED ${parseFloat(item.unit_price).toFixed(2)}</td>
                        <td>`;
                
                if(item.modifiers && item.modifiers.length > 0) {
                    html += '<strong>Modifiers:</strong><ul class="mb-2">';
                    item.modifiers.forEach(function(mod) {
                        html += `<li>${mod.modifier_name}</li>`;
                    });
                    html += '</ul>';
                }

                if(item.options && item.options.length > 0) {
                    html += '<strong>Options:</strong><ul class="mb-0">';
                    item.options.forEach(function(opt) {
                        html += `<li>${opt.option_name}</li>`;
                    });
                    html += '</ul>';
                }

                html += `</td></tr>`;
            });

            html += `
                        </tbody>
                    </table>
                </div>`;
        }

        return html;
    }
});
</script>
@endpush