@extends('frontEnd.layouts.master')
@section('title','Order Tracking Details')

@push('css')
<style>
    :root {
        --amz-navy: #232f3e;
        --amz-navy-light: #37475a;
        --amz-orange: #FF9900;
        --amz-orange-dark: #e47911;
        --amz-blue: #007185;
        --amz-gray-bg: #f0f2f2;
        --amz-border: #D5D9D9;
        --amz-text: #0F1111;
        --amz-price: #B12704;
    }

    .tracking-result-section {
        background: #fdfdfd;
        min-height: 90vh;
        padding: 40px 0;
        font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    }

    .invoice-card {
        background: #ffffff;
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.08);
        overflow: hidden;
        margin-bottom: 30px;
        border: 1px solid var(--amz-border);
    }

    .invoice-header {
        background: var(--amz-navy);
        padding: 24px 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #fff;
    }
    .invoice-id {
        font-size: 20px;
        font-weight: 700;
        letter-spacing: -0.5px;
    }
    .invoice-date {
        font-size: 14px;
        opacity: 0.8;
        margin-top: 4px;
    }
    .status-badge {
        background: #FFD814;
        color: #111;
        padding: 6px 16px;
        border-radius: 50px;
        font-size: 13px;
        font-weight: 700;
        border: 1px solid #FCD200;
        box-shadow: 0 2px 5px rgba(213,217,217,.3);
    }

    .info-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        padding: 30px;
        background: #fff;
        border-bottom: 1px solid var(--amz-border);
    }
    .info-box {
        display: flex;
        align-items: flex-start;
        gap: 15px;
    }
    .info-icon {
        width: 44px;
        height: 44px;
        background: var(--amz-gray-bg);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--amz-navy);
        font-size: 18px;
        border: 1px solid var(--amz-border);
        flex-shrink: 0;
    }
    .info-content h6 {
        font-size: 12px;
        text-transform: uppercase;
        color: #565959;
        font-weight: 700;
        margin-bottom: 5px;
        letter-spacing: 1px;
    }
    .info-content p {
        font-size: 15px;
        font-weight: 700;
        color: var(--amz-text);
        margin: 0;
        line-height: 1.4;
    }
    .info-content small {
        color: #565959;
        font-size: 13px;
    }

    .product-list-container {
        padding: 30px;
    }
    .section-title {
        font-size: 18px;
        font-weight: 700;
        color: var(--amz-navy);
        margin-bottom: 20px;
        display: block;
    }

    .product-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 15px 0;
        border-bottom: 1px solid #f0f2f2;
    }
    .product-item:last-child { border-bottom: none; }
    
    .prod-img-box {
        width: 60px;
        height: 60px;
        border-radius: 4px;
        overflow: hidden;
        border: 1px solid var(--amz-border);
        margin-right: 15px;
        background: #fff;
    }
    .prod-img-box img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .prod-details h5 {
        font-size: 15px;
        font-weight: 600;
        color: var(--amz-blue);
        margin-bottom: 5px;
        text-decoration: none;
    }
    .prod-meta span {
        font-size: 12px;
        color: #565959;
        background: var(--amz-gray-bg);
        padding: 3px 8px;
        border-radius: 4px;
        margin-right: 6px;
        border: 1px solid var(--amz-border);
    }

    .prod-price { text-align: right; }
    .prod-price .amount {
        display: block;
        font-weight: 700;
        color: var(--amz-price);
        font-size: 16px;
    }
    .prod-price .qty {
        font-size: 13px;
        color: #565959;
    }

    .summary-section {
        background: #fafafa;
        padding: 30px;
        border-top: 1px solid var(--amz-border);
    }
    .summary-row {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        font-size: 14px;
        color: #565959;
    }
    .summary-row.total {
        border-top: 2px solid var(--amz-border);
        padding-top: 15px;
        margin-top: 15px;
        font-size: 18px;
        font-weight: 800;
        color: var(--amz-navy);
    }

    .btn-print {
        background: #fff;
        color: var(--amz-text);
        border: 1px solid #888c8c;
        padding: 10px 24px;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 600;
        transition: 0.2s;
        box-shadow: 0 2px 5px rgba(213,217,217,.5);
        cursor: pointer;
    }
    .btn-print:hover {
        background: var(--amz-gray-bg);
        border-color: #adb1b1;
    }

    .not-found-card {
        text-align: center;
        padding: 60px 40px;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.08);
        border: 1px solid var(--amz-border);
    }
    .btn-retry {
        background: #FFD814;
        color: #111;
        border: 1px solid #FCD200;
        padding: 12px 40px;
        border-radius: 50px;
        font-weight: 700;
        text-decoration: none;
        display: inline-block;
        margin-top: 25px;
        transition: 0.2s;
        box-shadow: 0 2px 5px rgba(213,217,217,.5);
    }
    .btn-retry:hover {
        background: #f7ca00;
        border-color: #f2c200;
    }

    @media (max-width: 768px) {
        .info-grid { grid-template-columns: 1fr; gap: 20px; }
        .invoice-header { flex-direction: column; align-items: flex-start; gap: 15px; }
        .status-badge { align-self: flex-start; }
    }
</style>
@endpush

@section('content')
<section class="tracking-result-section">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-9 col-md-11">

                {{-- Order Not Found --}}
                @if($order->count() == 0)
                    <div class="not-found-card">
                        <div style="font-size: 60px; color: #ddd; margin-bottom: 20px;">
                            <i class="fa-solid fa-magnifying-glass-location"></i>
                        </div>
                        <h2 style="color: var(--amz-navy); font-weight: 700; margin-bottom: 10px;">অর্ডার খুঁজে পাওয়া যায়নি</h2>
                        <p style="color: #565959; font-size: 16px;">আপনার ইনভয়েস আইডি অথবা ফোন নম্বরটি সঠিক কিনা যাচাই করুন।</p>
                        <a href="{{ route('customer.order_track') }}" class="btn-retry">
                            আবার চেষ্টা করুন
                        </a>
                    </div>
                @else

                    {{-- Order Loop --}}
                    @foreach($order as $value)
                    <div class="invoice-card">
                        
                        {{-- 1. Header --}}
                        <div class="invoice-header">
                            <div>
                                <div class="invoice-id">
                                    অর্ডার আইডি #{{$value->invoice_id}}
                                </div>
                                <div class="invoice-date">
                                    অর্ডারের তারিখ: {{ date('d M, Y h:i A', strtotime($value->created_at)) }}
                                </div>
                            </div>
                            <div class="status-badge">
                                {{ $value->status->name ?? 'অজ্ঞাত' }}
                            </div>
                        </div>

                        {{-- 2. Info Grid --}}
                        <div class="info-grid">
                            <div class="info-box">
                                <div class="info-icon"><i class="fas fa-user"></i></div>
                                <div class="info-content">
                                    <h6>গ্রাহকের বিবরণ</h6>
                                    <p>{{ $value->shipping->name ?? 'অজানা' }}</p>
                                    <small>{{ $value->shipping->phone ?? $value->shipping_phone }}</small>
                                </div>
                            </div>
                            <div class="info-box">
                                <div class="info-icon"><i class="fas fa-map-marker-alt"></i></div>
                                <div class="info-content">
                                    <h6>ডেলিভারি ঠিকানা</h6>
                                    <p>{{ $value->shipping->area ?? 'সাধারণ' }}</p>
                                    <small>{{ $value->shipping->address ?? '' }}</small>
                                </div>
                            </div>
                            <div class="info-box">
                                <div class="info-icon"><i class="fas fa-credit-card"></i></div>
                                <div class="info-content">
                                    <h6>পেমেন্ট তথ্য</h6>
                                    <p class="text-uppercase">{{ $value->payment->payment_method ?? 'COD' }}</p>
                                    <small style="font-weight: 700; color: {{ $value->payment_status == 'paid' ? '#067d17' : '#b12704' }}">
                                        স্ট্যাটাস: {{ $value->payment_status == 'paid' ? 'Paid' : 'Unpaid' }}
                                    </small>
                                </div>
                            </div>
                        </div>

                        {{-- 3. Product List --}}
                        <div class="product-list-container">
                            <span class="section-title">অর্ডার আইটেমসমূহ</span>
                            
                            @php
                                $orderdetails = App\Models\OrderDetails::where('order_id', $value->id)->get();
                                $subtotal = 0;
                            @endphp

                            @foreach($orderdetails as $product)
                            <div class="product-item">
                                <div style="display: flex; align-items: center;">
                                    <div class="prod-img-box">
                                        <img src="{{ asset($product->image->image ?? 'public/frontEnd/images/no-image.png') }}" alt="Product">
                                    </div>
                                    <div class="prod-details">
                                        <h5>{{ $product->product_name }}</h5>
                                        <div class="prod-meta">
                                            @if($product->product_size) <span>Size: {{ $product->product_size }}</span> @endif
                                            @if($product->product_color) <span>Color: {{ $product->product_color }}</span> @endif
                                        </div>
                                    </div>
                                </div>
                                <div class="prod-price">
                                    <span class="amount">৳{{ number_format($product->sale_price * $product->qty, 0) }}</span>
                                    <span class="qty">{{ $product->sale_price }} x {{ $product->qty }}</span>
                                </div>
                                @php $subtotal += ($product->sale_price * $product->qty); @endphp
                            </div>
                            @endforeach
                        </div>

                        {{-- 4. Summary & Total --}}
                        <div class="summary-section">
                            <div class="row justify-content-end">
                                <div class="col-md-6">
                                    <div class="summary-row">
                                        <span>সাব-টোটাল</span>
                                        <span>৳{{ number_format($subtotal, 0) }}</span>
                                    </div>
                                    <div class="summary-row">
                                        <span>ডেলিভারি চার্জ</span>
                                        <span>(+) ৳{{ number_format($value->shipping_charge, 0) }}</span>
                                    </div>
                                    @if($value->discount > 0)
                                    <div class="summary-row" style="color: #b12704; font-weight: 600;">
                                        <span>ডিসকাউন্ট</span>
                                        <span>(-) ৳{{ number_format($value->discount, 0) }}</span>
                                    </div>
                                    @endif
                                    <div class="summary-row total">
                                        <span>সর্বমোট</span>
                                        <span>৳{{ number_format($value->amount, 0) }}</span>
                                    </div>
                                </div>
                            </div>
                            
                            {{-- Print Button --}}
                            <div style="text-align: right; margin-top: 30px;">
                                <button onclick="window.print()" class="btn-print">
                                    <i class="fas fa-print" style="margin-right: 8px;"></i> ইনভয়েস প্রিন্ট করুন
                                </button>
                            </div>
                        </div>

                    </div>
                    @endforeach

                @endif

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