@extends('layouts.base')
@section('title', 'Dashboard')
@section('content')
    <style>
        .list {
            display: inline-block;
            margin-top: 2px;
            margin-right: 1%;
            margin-bottom: -8px;
        }
    </style>
    <div id="layoutSidenav_content">
        <main>
            <div class="container-fluid px-4">
                <h3 class="mt-4">Dashboard</h3>
                <div class="row">
                    <div class="col-xl-4 col-md-6">
                        <div class="card bg-primary text-white mb-4">
                            <div class="card-body">All Customer ({{ $allCustomer }})</div>
                            <div class="card-footer d-flex align-items-center justify-content-between">
                                <a class="small text-white stretched-link" href="{{ route('customers') }}">View Details</a>
                                <div class="small text-white"><i class="fas fa-angle-right"></i></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4 col-md-6">
                        <div class="card bg-warning text-white mb-4">
                            <div class="card-body">All Modal ({{ $allCategories }})</div>
                            <div class="card-footer d-flex align-items-center justify-content-between">
                                <a class="small text-white stretched-link" href="{{ route('modal-index') }}">View
                                    Details</a>
                                <div class="small text-white"><i class="fas fa-angle-right"></i></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4 col-md-6">
                        <div class="card bg-success text-white mb-4">
                            <div class="card-body">All Products ({{ $allProducts }})</div>
                            <div class="card-footer d-flex align-items-center justify-content-between">
                                <a class="small text-white stretched-link" href="{{ route('product-index') }}">View
                                    Details</a>
                                <div class="small text-white"><i class="fas fa-angle-right"></i></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card mb-4">
                    <div class="card-header">
                        <ul>
                            <li class="list">
                                <p style="margin-right:360px"> <i class="fas fa-table me-1"></i> Orders</p>
                            </li>
                            <li class="list">
                                <button class="btn btn-info" style="margin-bottom: 1%" onclick="generateCSV()">
                                    <a href="#" style="text-decoration: none;color:white">CSV</a>
                                </button>
                            </li>
                            <li class="list">
                                <button class="btn btn-info" style="margin-bottom: 1%" onclick="generatePDF()">
                                    <a href="#" style="text-decoration: none;color:white">PDF</a>
                                </button>
                            </li>
                            <li class="list">
                                <div>
                                    <small><label for="startDate">Start Date:</label></small>
                                    <input type="date" class="form-control" id="startDate" name="startDate">
                                </div>
                            </li>
                            <li class="list">
                                <div>
                                    <small><label for="endDate">End Date:</label></small>
                                    <input type="date" class="form-control" id="endDate" name="endDate">
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="card-body">
                        <table id="datatablesSimple">
                            <thead>
                                <tr>
                                    <th><b>Order Number</b></th>
                                    <th><b>Container No</b></th>
                                    <th><b>Total Price</b></th>
                                    <th><b>Quantity</b></th>
                                    <th><b>Date</b></th>
                                    <th><b>Action</b></th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($allOrder as $allOrder)
                                    @php
                                        $totalPrice = 0;
                                        $totalQuantity = 0;
                                    @endphp

                                    <tr>
                                        <td>{{ $allOrder->orderNumber }}</td>
                                        <td>{{ $allOrder->ContainerNo }}</td>
                                        <td>
                                            @foreach ($groupedOrders[$allOrder->ContainerNo] as $order)
                                                @php
                                                    $totalPrice += $order->totalprice;
                                                @endphp
                                            @endforeach
                                            {{ number_format($totalPrice) }}

                                        </td>
                                        <td>
                                            @foreach ($groupedOrders[$allOrder->ContainerNo] as $order)
                                                @php
                                                    $totalQuantity += $order->totalItems;
                                                @endphp
                                            @endforeach
                                            {{ number_format($totalQuantity) }}
                                        </td>
                                        <td>{{ $allOrder->date }}</td>
                                        <td>
                                            <div style="display: flex; gap: 10px;">

                                                <a href="{{ route('view-customer', $allOrder->ContainerNo) }}"
                                                    class="btn btn-info">view customer</a>

                                                    <a href="{{ route('pdf-company-container', $allOrder->ContainerNo) }}"
                                                        class="btn btn-info">Company</a>

                                                        
                                                    <a href="{{ route('pdf-shiping-container', $allOrder->ContainerNo) }}"
                                                        class="btn btn-info">Shiping</a>

                                                        
                                          </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </main>
    </div>
    <script src="../assets/extra-libs/datatables.net/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.flash.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js"></script>
    <script>
        function generateCSV() {
            const startDate = document.getElementById('startDate').value;
            const endDate = document.getElementById('endDate').value;
            if (startDate && endDate) {
                const csvUrl = `{{ route('csv', ['startDate' => ':startDate', 'endDate' => ':endDate']) }}`
                    .replace(':startDate', startDate)
                    .replace(':endDate', endDate);
                window.location.href = csvUrl;
            } else {
                alert("Please select both start and end dates.");
            }
        }

        function generatePDF() {
            const startDate = document.getElementById('startDate').value;
            const endDate = document.getElementById('endDate').value;
            if (startDate && endDate) {
                const pdfUrl = `{{ route('pdf', ['startDate' => ':startDate', 'endDate' => ':endDate']) }}`
                    .replace(':startDate', startDate)
                    .replace(':endDate', endDate);
                window.location.href = pdfUrl;
            } else {
                alert("Please select both start and end dates.");
            }
        }
    </script>
    <script>
        $('#datatablesSimple').DataTable({
            dom: 'Bfrtip',
            buttons: [
                'print'
            ]
        });
        $('.buttons-print').addClass('btn btn-info text-white ');
    </script>
    <script>
        @if (Session::has('messages'))
            toastr.options = {
                "closeButton": true,
                "progressBar": true
            }
            toastr.success("{{ session('message') }}");
        @endif
        @if (Session::has('error'))
            toastr.options = {
                "closeButton": true,
                "progressBar": true
            }
            toastr.error("{{ session('error') }}");
        @endif
        @if (Session::has('info'))
            toastr.options = {
                "closeButton": true,
                "progressBar": true
            }
            toastr.info("{{ session('info') }}");
        @endif
        @if (Session::has('warning'))
            toastr.options = {
                "closeButton": true,
                "progressBar": true
            }
            toastr.warning("{{ session('warning') }}");
        @endif
    </script>
@endsection