@php
    $totalQuantity = $products->sum('quantity');
    $totalOrders = $products->count();
    $deliveryCount = $products->where('LocationID', null)->count();
    $collectionCount = $products->where('LocationID', '!=', null)->count();
@endphp

<div class="modal-content">
    <div class="modal-header bg-primary text-white">
        <div class="w-100">
            <h5 class="modal-title mb-2">
                <i class="fa fa-box-open mr-2"></i>Product Breakdown
            </h5>
            <h6 class="mb-0 font-weight-normal">
                <strong>{{$product->name}}</strong>{{ ($item) ? ' - ' . $item->name : ''}}
            </h6>
        </div>
        <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    
    <div class="modal-body p-0">
        <!-- Summary Statistics -->
        <div class="bg-light p-3 border-bottom">
            <div class="row text-center">
                <div class="col-3">
                    <div class="card border-0 shadow-sm h-100">
                        <div class="card-body p-3">
                            <div class="text-muted small mb-1">Total Quantity</div>
                            <h3 class="mb-0 text-primary">{{ $totalQuantity }}</h3>
                        </div>
                    </div>
                </div>
                <div class="col-3">
                    <div class="card border-0 shadow-sm h-100">
                        <div class="card-body p-3">
                            <div class="text-muted small mb-1">Total Orders</div>
                            <h3 class="mb-0 text-info">{{ $totalOrders }}</h3>
                        </div>
                    </div>
                </div>
                <div class="col-3">
                    <div class="card border-0 shadow-sm h-100">
                        <div class="card-body p-3">
                            <div class="text-muted small mb-1"><i class="fa fa-truck mr-1"></i>Deliveries</div>
                            <h3 class="mb-0 text-success">{{ $deliveryCount }}</h3>
                        </div>
                    </div>
                </div>
                <div class="col-3">
                    <div class="card border-0 shadow-sm h-100">
                        <div class="card-body p-3">
                            <div class="text-muted small mb-1"><i class="fa fa-shopping-bag mr-1"></i>Collections</div>
                            <h3 class="mb-0 text-warning">{{ $collectionCount }}</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Orders Table -->
        <div class="p-3">
            <div class="table-responsive">
                <table class="table table-hover table-striped mb-0">
                    <thead class="thead-light">
                        <tr>
                            <th style="width: 8%;">Order</th>
                            <th style="width: 8%;" class="text-center">Qty</th>
                            <th style="width: 18%;">Customer</th>
                            <th style="width: 10%;" class="text-center">Type</th>
                            <th style="width: 23%;">Contact</th>
                            <th style="width: 33%;">Location</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($products->sortBy("DeliveryFirstName") as $order)
                            <tr>
                                <td>
                                    <a href="/admin/orders/{{$order->id}}/edit" class="btn btn-sm btn-outline-primary px-2 py-1" target="_blank">
                                        #{{$order->id}}
                                    </a>
                                </td>
                                <td class="text-center">
                                    <span class="badge badge-primary badge-pill" style="font-size: 0.95em;">
                                        {{$order->quantity}}
                                    </span>
                                </td>
                                <td>
                                    <a href="/admin/customers/{{$order->user_id}}/edit" target="_blank" class="text-dark">
                                        <i class="fa fa-user mr-1 text-muted"></i>
                                        <strong>{{$order->DeliveryFirstName}} {{$order->DeliveryLastName}}</strong>
                                    </a>
                                </td>
                                <td class="text-center">
                                    @if($order->LocationID !== null)
                                        <span class="badge badge-warning">
                                            <i class="fa fa-shopping-bag mr-1"></i>Collection
                                        </span>
                                    @else
                                        <span class="badge badge-success">
                                            <i class="fa fa-truck mr-1"></i>Delivery
                                        </span>
                                    @endif
                                </td>
                                <td>
                                    <div class="small">
                                        @if($order->DeliveryMobileNumber)
                                            <div class="mb-1">
                                                <i class="fa fa-phone text-success mr-1"></i>
                                                <a href="tel:{{$order->DeliveryMobileNumber}}" class="text-dark">
                                                    {{$order->DeliveryMobileNumber}}
                                                </a>
                                            </div>
                                        @endif
                                        @if($order->DeliveryEmail)
                                            <div>
                                                <i class="fa fa-envelope text-primary mr-1"></i>
                                                <a href="mailto:{{$order->DeliveryEmail}}" class="text-dark">
                                                    {{$order->DeliveryEmail}}
                                                </a>
                                            </div>
                                        @endif
                                    </div>
                                </td>
                                <td>
                                    @if($order->LocationID !== null)
                                        <span class="badge badge-light border">Collection Point</span>
                                    @else
                                        <div class="small text-muted">
                                            <i class="fa fa-map-marker-alt mr-1"></i>
                                            @php
                                                $addressParts = array_filter([
                                                    $order->DeliveryAddressLine1,
                                                    $order->DeliveryAddressLine2,
                                                    $order->DeliveryAddressLine3,
                                                    $order->DeliveryCity,
                                                    $order->DeliveryCounty,
                                                    $order->DeliveryPostcode
                                                ]);
                                            @endphp
                                            {{ implode(', ', $addressParts) }}
                                        </div>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    
    <div class="modal-footer bg-light">
        <div class="w-100 text-muted small">
            <i class="fa fa-info-circle mr-1"></i>
            Showing {{ $totalOrders }} order{{ $totalOrders != 1 ? 's' : '' }} with a total of {{ $totalQuantity }} unit{{ $totalQuantity != 1 ? 's' : '' }}
        </div>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
    </div>
</div>

<style>
    .modal-dialog.modal-lg {
        max-width: 1200px;
    }
    
    .table td {
        vertical-align: middle;
    }
    
    .table tbody tr:hover {
        background-color: rgba(0,123,255,0.05);
    }
    
    .badge {
        padding: 0.4em 0.6em;
    }
    
    .card {
        transition: transform 0.2s;
    }
    
    .card:hover {
        transform: translateY(-2px);
    }
</style>