@extends('sales.layout.guest-layout')
@section('main')
    <section class="mt-4 mb-4">
        <div class="container-xxl">
            <div class="row">
                <input type="hidden" id="sessionCustomer_id" value="{{ session('selectedCustomerID') }}">
                <div class="table-card">
                    <div class="tbl-header pt-4">
                        <div class="row">
                            <div class="col-lg-4 col-md-4">
                                <h4 class="px-2">Order Details</h4>

                            </div>
                            <div class="col-lg-6 col-md-6 text-end my-auto ms-auto customer-search">
                                <div class="row">

                                    <form action="{{ route('sales.orders') }}" method="GET">
                                        <div class="col-lg-6 ms-auto col-md-9">
                                            <input type="text" name="search_id" class="search-bar"
                                                placeholder="Search by order id ..."
                                                value="{{ request()->get('search_id') }}">
                                            <button type="submit" class="btn search-btn"><i
                                                    class="fas fa-search"></i></button>
                                        </div>
                                    </form>



                                </div>
                            </div>
                            <div class="col-lg-2 ms-auto col-md-3">
                                <a class="btn-outline-light px-2" href="{{route('sales.orders')}}"
                                    contenteditable="false" style="cursor: pointer;">
                                    <button class="btn btn-danger order-reset"> reset</button>
                                </a>
                                <a class="btn btn-outline-light px-3 ms-3 customer_select order-add"
                                    href="{{ route('sales.products') }}?customer_id={{ $customer->id }}"
                                    style="color: rgb(255, 255, 255); background-color: green; cursor: pointer;"
                                    contenteditable="false">
                                    Add
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="table-responsive table-scroll" id="dynamic_customer">
                        <table class="table ">
                            <thead class="text-center">
                                <tr>
                                    <th>S.No.</th>
                                    <th>Order Id</th>
                                    <th>Customer</th>
                                    <th>Customer Phone</th>
                                    <th>Total Product</th>
                                    <th>Total Amount</th>
                                    <th>HST Amount</th>
                                    <th>Grand Total</th>
                                    <th>View Order</th>
                                </tr>
                            </thead>
                            <tbody class="text-center">
                                @forelse($orders as $index => $order)
                                    <tr>
                                        <td>{{ $index + 1 }}</td>
                                        <td>{{ $order->id }}</td>
                                        <td>{{ $customer->contact_person }}</td>
                                        <td>{{ $customer->phone }}</td>
                                        <td>{{ $order->total_product }}</td>
                                        <td>${{ number_format($order->total_amount, 2) }}</td>
                                        <td>${{ number_format($order->tax, 2) }}</td>
                                        <td>${{ number_format($order->grand_total, 2) }}</td>
                                        <td>
                                            <a href="javascript:void(0)" data-id="{{ $order->id }}" class="order_detail"
                                                style="cursor: pointer;">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                        </td>

                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="9">No orders found for this customer.</td>
                                    </tr>
                                @endforelse
                            </tbody>

                        </table>

                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade orders-detail" id="orderModal" tabindex="-1" aria-labelledby="orderModalLabel"
            aria-hidden="true">
            <div class="modal-dialog" style="max-width: 60%;">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="orderModalLabel">Order Details</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body order_detailTable">

                    </div>
                </div>
            </div>
        </div>

    </section>
    <script>
        $(document).on('click', '.order_detail', function() {
            const orderId = $(this).data('id');

            $.ajax({
                url: "{{ route('sales.order.details', ':id') }}".replace(':id', orderId),
                type: 'GET',
                success: function(response) {
                    $('#orderModal .modal-body').html(response);
                    $('#orderModal').modal('show');
                },
                error: function() {
                    alert('Failed to fetch order details. Please try again.');
                }
            });
        });
    </script>
@endsection