@extends('sales.layout.guest-layout')
@section('main')
    <div class="container-xxl py-4">
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="mt-3 ms-4">
                        <h4>Reports</h4>
                    </div>
                    <form action="{{ route('sales.report.export') }}" method="post">

                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-3">
                                    <label for="customerSearch">Search by customer</label>
                                    <select class="form-select" aria-label="Default select example" id="customer_id" name="customer_id">
                                        <option value="">Search by customer</option>
                                        @foreach ($customer as $customers)
                                            <option value="{{ $customers->id }}">{{ $customers->contact_person }}</option>
                                        @endforeach

                                    </select>
                                </div>
                                <div class="col-md-2">
                                    <label for="fromDate">From date</label>
                                    <input type="date" id="fromDate" name="from_date" class="form-control">
                                </div>
                                <div class="col-md-2">
                                    <label for="fromDate">To date</label>
                                    <input type="date" id="toDate" name="to_date" class="form-control">
                                </div>
                                <div class="col-md-3 ">
                                    <label for="orderId">Search by order Id </label>
                                    <input type="text" id="order_idd" name="order_idd"
                                        placeholder="Search by order id..." class="form-control search-bar-1">
                                    <button class="btn search-btn-1"><i class="fas fa-search"></i></button>
                                </div>
                                <div class="col-md-2 report-button-correction">
                                    @csrf
                                    <button class="btn btn-success"><i class="fas fa-download"></i></button>
                                    <a href="{{ route('sales.reports') }}" contenteditable="false"
                                        style="cursor: pointer;"><button type="button"
                                            class="btn btn-danger report-reset">reset</button></a>

                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-12 reportsTable">
                                    <table class="table">
                                        <thead>
                                            <tr>
                                                <th>S.No.</th>
                                                <th>Ordered Date</th>
                                                <th>Customer Name</th>
                                                <th>No. Of Products</th>
                                                <th>Total Amount</th>
                                                <th>HST Amount</th>
                                                <th>Grand Total</th>
                                                <th>View Details</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @forelse ($orders as $index => $order)
                                                <tr>
                                                    <td>{{ $index + 1 }}</td>
                                                    <td>{{ \Carbon\Carbon::parse($order->created_at)->format('d/m/Y') }}
                                                    </td>
                                                    <td>{{ $order->customer_name ?? 'N/A' }}</td>
                                                    <td>{{ $order->total_product }}</td>
                                                    <td>{{ $order->total_amount }}</td>
                                                    <td>{{ $order->tax }}</td>
                                                    <td>{{ $order->grand_total }}</td>
                                                    <td>
                                                        <a href="javascript:void(0)" class="btn view-details"
                                                            data-id="{{ $order->id }}" data-bs-toggle="modal"
                                                            data-bs-target="#exampleModal">
                                                            <i class="fas fa-eye"></i>
                                                        </a>
                                                    </td>
                                                </tr>
                                            @empty
                                                <tr>
                                                    <td colspan="8" class="text-center">No records found</td>
                                                </tr>
                                            @endforelse
                                        </tbody>

                                    </table>
                                </div>
                            </div>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Product Details</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="dynamicReportsProduct">

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

    <script>
        $(document).ready(function() {
            function fetchReports() {
                const customerId = $('#customer_id').val();
                const fromDate = $('#fromDate').val();
                const toDate = $('#toDate').val();
                const orderId = $('#order_idd').val();

                $.ajax({
                    url: "{{ route('sales.reports') }}",
                    method: "GET",
                    data: {
                        customer_id: customerId,
                        from_date: fromDate,
                        to_date: toDate,
                        order_id: orderId,
                    },
                    success: function(response) {
                        const tbody = $('table tbody');
                        tbody.empty();

                        if (response.orders && response.orders.length > 0) {
                            response.orders.forEach((order, index) => {
                                const createdDate = new Date(order.created_at);
                                const formattedDate = createdDate.toLocaleDateString('en-GB');

                                tbody.append(`
                            <tr>
                                <td>${index + 1}</td>
                                <td>${formattedDate}</td>
                                <td>${order.customer_name}</td>
                                <td>${order.total_product}</td>
                                <td>${order.total_amount}</td>
                                <td>${order.tax}</td>
                                <td>${order.grand_total}</td>
                                <td>
                                    <a href="javascript:void(0)" class="btn view-details" 
                                        data-id="${order.id}" 
                                        data-bs-toggle="modal" 
                                        data-bs-target="#exampleModal">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                </td>
                            </tr>
                        `);
                            });
                        } else {
                            tbody.append(
                                '<tr><td colspan="8" class="text-center">No records found</td></tr>'
                            );
                        }
                    },
                    error: function() {
                        alert('Error fetching reports.');
                    },
                });
            }

            $('#customer_id, #fromDate, #toDate').on('change keyup', fetchReports);
            $('.search-btn-1').on('click', fetchReports);

            // View order details
            $(document).on('click', '.view-details', function() {
                const orderId = $(this).data('id');

                $.ajax({
                    url: `https://versova.ca/beta/public/sales/reports/order/details/${orderId}`,
                    method: "GET",
                    success: function(response) {
                        $('#dynamicReportsProduct').html(response);
                        $('#exampleModal').modal('show');
                    },
                    error: function() {
                        alert('Error fetching product details.');
                    },
                });
            });
        });
    </script>
@endsection