@extends('ecommerce::frontend.layout.main2')

@section('title') {{ $ecommerce_setting->site_title ?? 'Order Details' }} @endsection

@section('description') {{ $ecommerce_setting->site_description ?? '' }} @endsection

@section('content')
<style>
    /* Table Styles matching the Professional Design */
    .card-dashboard {
        background: #ffffff;
        border: 1px solid #e1e1e1;
        border-radius: 8px;
        padding: 30px;
        margin-bottom: 25px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.02);
    }
    
    .order-info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
        margin-bottom: 20px;
    }
    
    .info-item label {
        display: block;
        font-size: 12px;
        text-transform: uppercase;
        color: #777;
        letter-spacing: 0.5px;
        margin-bottom: 5px;
    }
    .info-item span {
        display: block;
        font-size: 16px;
        font-weight: 600;
        color: #222;
    }

    /* Custom Table Styling */
    .table-custom {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 20px;
    }
    .table-custom thead th {
        border-bottom: 2px solid #e1e1e1;
        padding: 15px 10px;
        text-align: left;
        font-size: 14px;
        font-weight: 700;
        color: #222;
        text-transform: uppercase;
    }
    .table-custom thead th.text-end {
        text-align: right;
    }
    .table-custom tbody td {
        border-bottom: 1px solid #f0f0f0;
        padding: 20px 10px;
        color: #555;
        font-size: 15px;
        vertical-align: middle;
    }
    .table-custom tbody tr:last-child td {
        border-bottom: none;
    }
    
    /* Footer Totals */
    .order-totals {
        display: flex;
        justify-content: flex-end;
        padding-top: 20px;
        border-top: 2px solid #f0f0f0;
    }
    .totals-list {
        width: 100%;
        max-width: 400px;
    }
    .total-row {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        font-size: 15px;
        color: #555;
    }
    .total-row.final {
        font-size: 20px;
        font-weight: 700;
        color: #222;
        margin-top: 15px;
        padding-top: 15px;
        border-top: 1px dashed #ddd;
    }
    .total-row.final .price {
        color: #c8102e;
    }
    
     .sidebar-menu-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .sidebar-menu-list li {
        margin-bottom: 10px;
        border-bottom: 1px solid #eee;
        padding-bottom: 10px;
    }
    .sidebar-menu-list li:last-child {
        border-bottom: none;
    }
    .sidebar-menu-list a {
        color: #555;
        text-decoration: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        transition: color 0.3s;
    }
    .sidebar-menu-list a:hover, .sidebar-menu-list a.active {
        color: #c8102e;
        padding-left: 5px;
    }
</style>

<!-- Breadcrumb Area -->
<div style="padding-top:50px;" class="tf-page-title flat-spacing pb-0">
    <div class="container">
        <div class="row">
            <div class="col-12 text-center">
                <div class="text-start">
                    <h1 class="text-display fw-medium">{{trans('file.Order Details')}}</h1>
                    <ul class="breadcrumb-list d-flex align-items-center">
                        <li><a href="{{url('/')}}" class="link">{{trans('file.Home')}}</a></li>
                        <li class="separator mx-2">/</li>
                        <li><a href="{{url('customer/profile')}}" class="link">{{trans('file.dashboard')}}</a></li>
                        <li class="separator mx-2">/</li>
                        <li class="active text-main fw-medium">{{trans('file.Order Details')}}</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Main Content -->
<section style="padding-top:50px;" class="flat-spacing">
    <div class="container">
        <div class="row">
            
            <!-- Sidebar -->
            <div class="col-lg-3 col-md-4 mb-md-0 mb-4">
                <div class="sidebar-wrapper">
                    <div class="widget-account-nav">
                        <h3 class="widget-title h5 fw-bold text-uppercase mb-4 pb-2 border-bottom">{{trans('Menu')}}</h3>
                        @include('ecommerce::frontend.customer-menu')
                    </div>
                </div>
            </div>

            <!-- Order Content -->
            <div class="col-lg-9 col-md-8">
                
                <!-- Order Info Header -->
                <div class="card-dashboard">
                    <div class="order-info-grid">
                        <div class="info-item">
                            <label>Order ID</label>
                            <span>#{{ $sale->reference_no }}</span>
                        </div>
                        <div class="info-item">
                            <label>Order Date</label>
                            <span>{{ date('d M, Y', strtotime($sale->created_at)) }}</span>
                        </div>
                    </div>
                </div>

                <!-- Order Items Table -->
                <div class="card-dashboard">
                    <div class="table-responsive">
                        <table class="table-custom">
                            <thead>
                                <tr>
                                    <th style="width: 50%;">Product</th>
                                    <th class="text-center">Qty</th>
                                    <th class="text-end">Price</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if(!empty($sale))
                                    @if(!empty($products))
                                        @foreach($products as $product)
                                        <tr>
                                            <td>
                                                <span class="fw-semibold text-dark">{{ $product->name }}</span>
                                            </td>
                                            <td class="text-center">
                                                <span class="fw-medium">{{ $product->qty }}</span>
                                            </td>
                                            <td class="text-end">
                                                {{ $currency->symbol ?? $currency->code }}{{ number_format($product->net_unit_price, 2) }} 
                                            </td>
                                        </tr>
                                        @endforeach
                                    @endif
                                @endif
                            </tbody>
                        </table>
                    </div>

                    <!-- Totals Section -->
                    <div class="order-totals">
                        <div class="totals-list">
                            <div class="total-row">
                                <span>Shipping Cost</span>
                                <span>(+) {{ $currency->symbol ?? $currency->code }}{{ number_format($sale->shipping_cost ?? 0, 2) }}</span>
                            </div>
                            <div class="total-row">
                                <span>Discount</span>
                                <span>(-) {{ $currency->symbol ?? $currency->code }}{{ number_format($sale->coupon_discount ?? 0, 2) }}</span>
                            </div>
                            <div class="total-row final">
                                <span>Grand Total</span>
                                <span class="price">{{ $currency->symbol ?? $currency->code }}{{ number_format(($sale->grand_total - $sale->coupon_discount), 2) }}</span>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</section>
@endsection