@extends('web.layouts.layout')
@section('content')


    <style>
        /* Invoice Page Styles */
        .invoice-pg .invoice-card {
            background-color: #f7f7f7;
            padding: 40px;
            border-radius: 12px;
        }
        .invoice-pg .invoice-header {
            border-bottom: 2px solid #f8f9fa;
            padding-bottom: 20px;
            margin-bottom: 30px;
        }
        .invoice-pg .invoice-logo img {
            height: 50px;
        }
        .invoice-pg .invoice-title {
            font-size: 28px;
            font-weight: bold;
            color: #0b50bd;
        }
        .invoice-pg .info-block {
            margin-bottom: 30px;
        }
        .invoice-pg .info-block h6 {
            font-weight: bold;
            color: #333;
            margin-bottom: 15px;
            font-size: 16px;
            border-bottom: 1px solid #eee;
            padding-bottom: 8px;
            display: inline-block;
        }
        .invoice-pg .info-block p {
            color: #666;
            margin-bottom: 5px;
            font-size: 15px;
        }
        .invoice-pg .info-block p strong {
            color: #333;
        }
        .invoice-pg .table-invoice {
            width: 100%;
            margin-bottom: 30px;
        }
        .invoice-pg .table-responsive {
            overflow-x: auto;
        }
        .invoice-pg .table-invoice th {
            background-color: #f8f9fa;
            padding: 15px;
            font-size: 15px;
            color: #333;
            border-bottom: 1px solid #eee;
            white-space: nowrap;
        }
        .invoice-pg .table-invoice td {
            padding: 15px;
            font-size: 15px;
            color: #666;
            border-bottom: 1px solid #eee;
            vertical-align: middle;
        }
        .invoice-pg .table-invoice td .prod-name {
            font-weight: bold;
            color: #333;
        }
        .invoice-pg .summary-block {
            background-color: #f8f9fa;
            padding: 20px;
            border-radius: 8px;
        }
        .invoice-pg .summary-block .d-flex {
            margin-bottom: 10px;
            font-size: 15px;
            color: #666;
        }
        .invoice-pg .summary-block .total-row {
            border-top: 1px solid #ddd;
            padding-top: 15px;
            margin-top: 15px;
            font-size: 18px;
            font-weight: bold;
            color: #0b50bd !important;
        }
        .invoice-pg .invoice-actions .btn {
            padding: 12px 25px;
            border-radius: 8px;
            font-weight: bold;
            font-size: 15px;
            transition: all 0.3s;
            border: none;
        }
        .invoice-pg .btn-print {
            background-color: #0b50bd;
            color: #fff;
        }
        .invoice-pg .btn-print:hover {
            background-color: #083c8f;
            color: #fff;
        }
        @media screen and (max-width: 767px) {
            .invoice-pg .invoice-card {
                padding: 20px;
            }
            .invoice-pg .invoice-title {
                font-size: 22px;
                margin-top: 15px;
            }
            .invoice-pg .invoice-actions {
                flex-direction: column;
            }
            .invoice-pg .invoice-actions .btn {
                width: 100%;
            }
        }
        @media print {
            body * {
                visibility: hidden;
            }
            .invoice-pg, .invoice-pg * {
                visibility: visible;
            }
            .invoice-pg {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                padding: 0;
            }
            .invoice-pg .invoice-card {
                border: none;
                box-shadow: none;
                padding: 30px;
            }
            .invoice-actions, .nav-breadcrumb, .navbar, .links-navbar, .footer, .progress-wrap {
                display: none !important;
            }
        }
    </style>




    <main>


        <!-- ---------- Start breadcrumb ----------- -->
        @include('web.pages.components.header.header')

        <!-- ---------- invoice page ----------- -->
        <section class="invoice-pg pb-5 pt-5">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-10">
                        <div class="invoice-card" id="invoiceArea">
                            <!-- Header -->
                            <div class="invoice-header d-flex justify-content-between align-items-center">
                                <div class="invoice-logo mb-3 mb-md-0 text-md-start text-center w-100 w-md-auto text-md-start">
                                    <img src="{{url('')}}/assets/web/images/logo.svg" alt="NowGo">
                                </div>
                                <div class="text-md-end text-center w-100 w-md-auto mt-3 mt-md-0">
                                    <h2 class="invoice-title mb-1">{{__('web.invoice_summary')}}</h2>
                                    <p class="text-muted mb-0">{{__('web.invoice_summary_desc')}}!</p>
                                </div>
                            </div>

                            <div class="row">
                                <!-- Order Info -->
                                <div class="col-md-4">
                                    <div class="info-block text-start">
                                        <h6>{{__('web.order_info')}}</h6>
                                        <p><strong>{{__('web.order_id')}} :</strong> <span dir="ltr">{{$order->id}}</span></p>
                                        <p><strong>{{__('web.order_date')}} :</strong>  {{$order->date}} </p>
                                        <p><strong> {{__('web.order_status')}} :</strong> <span class="badge bg-success text-white px-2 py-1 radius-4"> {{__('web.order_statuses.'.$order->status)}}</span></p>
                                    </div>
                                </div>

                                <!-- Customer Info -->
                                <div class="col-md-4">
                                    <div class="info-block text-start">
                                        <h6>{{__('web.client_info')}}</h6>
                                        <p><strong>{{__('web.name')}}:</strong>{{$order->user->name ?? ''}}</p>
                                        <p><strong>{{__('web.phone')}}:</strong> <span dir="ltr">{{$order->user->phone ?? ''}}</span></p>
                                        <p><strong>{{__('web.email')}}:</strong> {{$order->user->email ?? ''}}</p>
                                    </div>
                                </div>

                                <!-- Delivery Info -->
                                <div class="col-md-4">
                                    <div class="info-block text-start">
                                        <h6>{{__('web.contact_info')}}</h6>
                                        <p><strong>{{__('web.address')}}:</strong>{{$order->address->address}}</p>
                                    </div>
                                </div>
                            </div>

                            <!-- Order Items -->
                            <div class="table-responsive">
                                <table class="table-invoice text-start">
                                    <thead>
                                        <tr>
                                            <th>{{__('web.product')}}</th>
                                            <th class="text-center">{{__('web.count')}}</th>
                                            <th class="text-center">{{__('web.cost')}}</th>
                                            <th class="text-end">{{__('web.total')}}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($order->products as $row)
                                        <tr>
                                            <td>
                                                <div class="prod-name"> {!! $row->product->currentDescription->title ?? '' !!} </div>
                                                <div class="text-muted small mt-1">{{$row->product->category->currentDescription->title ?? ''}} </div>
                                            </td>
                                            <td class="text-center">{{$row->count}}</td>
                                            <td class="text-center">{{$row->product_cost}} {{__('web.sar')}}</td>
                                            <td class="text-end">{{$row->total}} {{__('web.sar')}}</td>
                                        </tr>
                                       @endforeach
                                    </tbody>
                                </table>
                            </div>

                            <!-- Pricing Summary -->
                            <div class="row justify-content-end">
                                <div class="col-lg-5 col-md-6">
                                    <div class="summary-block">
                                        <div class="d-flex justify-content-between">
                                            <span>{{ __('web.total_product') }}:</span>
                                            <span>{{$order->total_products}} {{__('web.sar') }}</span>
                                        </div>
                                        @if($order->discount)
                                            <div class="d-flex justify-content-between text-success">
                                                <span>{{__('web.discount')}} ({{__('web.coupon')}} {{$order->coupon->code ?? ''}}):</span>
                                                <span dir="ltr">-{{$order->discount}} {{__('web.sar') }}</span>
                                            </div>
                                        @endif
                                        <div class="d-flex justify-content-between">
                                            <span>{{__('web.total_tax')}}:</span>
                                            <span>{{$order->total_tax}} {{__('web.sar') }}</span>
                                        </div>
                                        <div class="d-flex justify-content-between">
                                            <span>{{__('web.shipping_cost')}}:</span>
                                            <span>{{$order->shipping_cost}} {{__('web.sar') }}</span>
                                        </div>
                                        @if($order->on_hand_cost > 0)
                                        <div class="d-flex justify-content-between">
                                            <span>{{__('web.on_hand_cost')}}:</span>
                                            <span>{{$order->on_hand_cost}} {{__('web.sar') }}</span>
                                        </div>
                                        @endif
                                       {{-- <div class="d-flex justify-content-between">
                                            <span>{{__('web.total_products')}}:</span>
                                            <span>{{$order->total_products + $order->total_tax}} {{__('web.sar') }}</span>
                                        </div>--}}
                                        <div class="d-flex justify-content-between total-row">
                                            <span class="text-dark">{{__('web.full_total')}}:</span>
                                            <span>{{$order->total}} {{__('web.sar') }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Actions -->
                            <div class="invoice-actions d-flex justify-content-center justify-content-md-end gap-3 mt-4 pt-3">
                                <button class="btn btn-print" onclick="window.print()">
                                    {{__('web.print_invoice')}} <i class="fal fa-print ms-2"></i>
                                </button>
                            </div>

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





    </main>

@section('inject_js')

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var contactForm = document.getElementById('contact-form');
            var successAlert = document.getElementById('form-success');
            var errorAlert = document.getElementById('form-error');

            contactForm.addEventListener('submit', function (event) {
                event.preventDefault();
                event.stopPropagation();

                successAlert.style.display = 'none';
                errorAlert.style.display = 'none';

                if (!contactForm.checkValidity()) {
                    contactForm.classList.add('was-validated');
                    errorAlert.style.display = 'block';
                } else {
                    contactForm.classList.remove('was-validated');
                    // Simulate form submission success
                    successAlert.style.display = 'block';
                    contactForm.reset();

                    // Hide success message after 5 seconds
                    setTimeout(function() {
                        successAlert.style.display = 'none';
                    }, 5000);
                }
            }, false);
        });
    </script>

    <!-- WhatsApp Floating Button -->
    <a href="https://wa.me/966126338540" id="wa-btn-float" class="whatsapp-float" target="_blank" rel="noopener noreferrer" aria-label="Chat on WhatsApp">
        <i class="fab fa-whatsapp"></i>
    </a>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var waBtn = document.getElementById('wa-btn-float');
            if (waBtn) {
                waBtn.addEventListener('click', function (e) {
                    e.preventDefault();
                    var phoneNumber = '966126338540';
                    var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);

                    if (isMobile) {
                        window.open('https://wa.me/' + phoneNumber, '_blank');
                    } else {
                        window.open('https://web.whatsapp.com/send?phone=' + phoneNumber, '_blank');
                    }
                });
            }
        });
    </script>
@endsection

@endsection