<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no">
    <title>Order Confirmation - #{{ $Order->id }}</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: 'Arial', 'Helvetica', sans-serif;
            background-color: #f4f4f4;
        }
        .email-container {
            max-width: 600px;
            margin: 0 auto;
            background-color: #ffffff;
        }
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            padding: 30px 20px;
            text-align: center;
        }
        .header img {
            max-width: 180px;
            height: auto;
        }
        .order-number {
            background-color: #ffffff;
            color: #667eea;
            padding: 15px;
            margin: 20px 0 0 0;
            border-radius: 8px;
            font-size: 18px;
            font-weight: bold;
        }
        .content-section {
            padding: 30px 20px;
        }
        .section-title {
            font-size: 20px;
            font-weight: bold;
            color: #333;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 2px solid #667eea;
        }
        .info-box {
            background-color: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
        }
        .info-row {
            display: table;
            width: 100%;
            margin-bottom: 8px;
        }
        .info-label {
            display: table-cell;
            font-weight: bold;
            color: #555;
            width: 40%;
        }
        .info-value {
            display: table-cell;
            color: #333;
        }
        .product-table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }
        .product-table th {
            background-color: #667eea;
            color: #ffffff;
            padding: 12px 8px;
            text-align: left;
            font-weight: bold;
            font-size: 14px;
        }
        .product-table td {
            padding: 12px 8px;
            border-bottom: 1px solid #e0e0e0;
            color: #333;
        }
        .product-table tr:last-child td {
            border-bottom: none;
        }
        .product-name {
            font-weight: bold;
            color: #333;
            margin-bottom: 5px;
        }
        .product-options {
            font-size: 12px;
            color: #666;
            margin-top: 5px;
        }
        .product-note {
            font-size: 12px;
            color: #888;
            font-style: italic;
            margin-top: 5px;
        }
        .totals-section {
            background-color: #f8f9fa;
            padding: 20px;
            border-radius: 8px;
            margin: 20px 0;
        }
        .total-row {
            display: table;
            width: 100%;
            margin-bottom: 10px;
        }
        .total-label {
            display: table-cell;
            font-size: 14px;
            color: #555;
            text-align: right;
            padding-right: 20px;
        }
        .total-value {
            display: table-cell;
            font-size: 14px;
            color: #333;
            text-align: left;
            font-weight: 600;
        }
        .grand-total {
            border-top: 2px solid #667eea;
            padding-top: 15px;
            margin-top: 15px;
        }
        .grand-total .total-label,
        .grand-total .total-value {
            font-size: 18px;
            font-weight: bold;
            color: #667eea;
        }
        .address-grid {
            display: table;
            width: 100%;
            background-color: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
        }
        .address-item {
            display: table-row;
        }
        .address-label {
            display: table-cell;
            font-weight: bold;
            color: #555;
            padding: 5px 10px 5px 0;
            width: 35%;
        }
        .address-value {
            display: table-cell;
            color: #333;
            padding: 5px 0;
        }
        .contact-section {
            background-color: #f8f9fa;
            padding: 30px 20px;
            text-align: center;
        }
        .contact-grid {
            display: table;
            width: 100%;
            max-width: 400px;
            margin: 0 auto;
        }
        .contact-item {
            display: table-cell;
            padding: 0 15px;
            vertical-align: top;
        }
        .contact-icon {
            max-width: 60px;
            margin-bottom: 10px;
        }
        .contact-text {
            font-size: 14px;
            color: #555;
            margin: 5px 0;
        }
        .contact-link {
            color: #667eea;
            text-decoration: none;
            font-weight: bold;
        }
        .footer {
            background-color: #333;
            color: #ffffff;
            text-align: center;
            padding: 20px;
            font-size: 12px;
        }
        .highlight {
            color: #667eea;
            font-weight: bold;
        }
        .discount-badge {
            background-color: #e8f5e9;
            color: #2e7d32;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: bold;
        }
        .points-badge {
            background-color: #fff3e0;
            color: #e65100;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: bold;
        }
        @media only screen and (max-width: 600px) {
            .product-table th,
            .product-table td {
                padding: 8px 4px;
                font-size: 12px;
            }
            .contact-item {
                display: block;
                margin-bottom: 20px;
            }
        }
    </style>
</head>
<body>
    <table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#f4f4f4">
        <tr>
            <td align="center" style="padding: 20px 0;">
                <table class="email-container" width="600" cellpadding="0" cellspacing="0" border="0">
                    
                    <!-- Header -->
                    <tr>
                        <td class="header">
                            <img src="{{ asset(setting('logo')) }}" alt="{{ setting('title_en') }}" style="max-width: 180px; height: auto;"/>
                            <div class="order-number">
                                Order #{{ $Order->id }}
                                <div style="font-size: 14px; font-weight: normal; color: #666; margin-top: 5px;">
                                    {{ date('F j, Y', strtotime($Order->created_at)) }}
                                </div>
                            </div>
                        </td>
                    </tr>

                    <!-- Customer Info -->
                    <tr>
                        <td class="content-section">
                            <div class="section-title">Customer Information</div>
                            <div class="info-box">
                                <div class="info-row">
                                    <span class="info-label">Name:</span>
                                    <span class="info-value">{{ $Order->Client->name }}</span>
                                </div>
                                <div class="info-row">
                                    <span class="info-label">Email:</span>
                                    <span class="info-value">{{ $Order->Client->email }}</span>
                                </div>
                                <div class="info-row">
                                    <span class="info-label">Phone:</span>
                                    <span class="info-value">{{ $Order->Client->phone_code . ' ' . $Order->Client->phone }}</span>
                                </div>
                                <div class="info-row">
                                    <span class="info-label">Payment Method:</span>
                                    <span class="info-value">{{ $Order->Payment->title_en }}</span>
                                </div>
                            </div>
                        </td>
                    </tr>

                    <!-- Shipping Address -->
                    @if($Order->Address)
                    <tr>
                        <td class="content-section" style="padding-top: 0;">
                            <div class="section-title">Shipping Address</div>
                            <div class="address-grid">
                                <div class="address-item">
                                    <span class="address-label">Region:</span>
                                    <span class="address-value">{{ $Order->Address->Region->title_en }}</span>
                                </div>
                                @if($Order->Address->block)
                                <div class="address-item">
                                    <span class="address-label">Block:</span>
                                    <span class="address-value">{{ $Order->Address->block }}</span>
                                </div>
                                @endif
                                @if($Order->Address->road)
                                <div class="address-item">
                                    <span class="address-label">Road:</span>
                                    <span class="address-value">{{ $Order->Address->road }}</span>
                                </div>
                                @endif
                                @if($Order->Address->building)
                                <div class="address-item">
                                    <span class="address-label">Building:</span>
                                    <span class="address-value">{{ $Order->Address->building }}</span>
                                </div>
                                @endif
                                @if($Order->Address->apartment)
                                <div class="address-item">
                                    <span class="address-label">Apartment:</span>
                                    <span class="address-value">{{ $Order->Address->apartment }}</span>
                                </div>
                                @endif
                                @if($Order->Address->additional_directions)
                                <div class="address-item">
                                    <span class="address-label">Notes:</span>
                                    <span class="address-value">{{ $Order->Address->additional_directions }}</span>
                                </div>
                                @endif
                            </div>
                        </td>
                    </tr>
                    @endif

                    <!-- Order Items -->
                    <tr>
                        <td class="content-section" style="padding-top: 0;">
                            <div class="section-title">Order Items</div>
                            <table class="product-table">
                                <thead>
                                    <tr>
                                        <th width="50%">Product</th>
                                        <th width="15%" style="text-align: center;">Qty</th>
                                        <th width="18%" style="text-align: right;">Price</th>
                                        <th width="17%" style="text-align: right;">Total</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($Order->Products as $Item)
                                    <tr>
                                        <td>
                                            <div class="product-name">{{ $Item->Product->title() }}</div>
                                            @foreach($Item->Items as $option)
                                            <div class="product-options">
                                                {!! preg_replace('/-(.*?):/', '<strong>$1</strong>:', str_replace('*', '', $option->title())) !!}
                                            </div>
                                            @endforeach
                                            @if($Item->note)
                                            <div class="product-note">📝 {{ $Item->note }}</div>
                                            @endif
                                        </td>
                                        <td style="text-align: center;">{{ $Item->quantity }}</td>
                                        <td style="text-align: right;">{{ $Item->price }}</td>
                                        <td style="text-align: right; font-weight: bold;">{{ $Item->total . ' ' . Country()->currancy_code_en }}</td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </td>
                    </tr>

                    <!-- Order Summary -->
                    <tr>
                        <td class="content-section" style="padding-top: 0;">
                            <div class="section-title">Order Summary</div>
                            <div class="totals-section">
                                <div class="total-row">
                                    <span class="total-label">Subtotal:</span>
                                    <span class="total-value">{{ number_format($Order->sub_total, 3, '.', '') }} {{ Country()->currancy_code_en }}</span>
                                </div>

                                @if($Order->discount > 0)
                                <div class="total-row">
                                    <span class="total-label">
                                        Discount:
                                        <span class="discount-badge">SAVED</span>
                                    </span>
                                    <span class="total-value" style="color: #2e7d32;">-{{ number_format($Order->discount, 3, '.', '') }} {{ Country()->currancy_code_en }}</span>
                                </div>
                                @endif

                                @if($Order->coupon > 0)
                                <div class="total-row">
                                    <span class="total-label">
                                        Coupon Discount:
                                        @if($Order->coupon_code)
                                        <span class="discount-badge">{{ $Order->coupon_code }}</span>
                                        @endif
                                    </span>
                                    <span class="total-value" style="color: #2e7d32;">-{{ number_format($Order->coupon, 3, '.', '') }} {{ Country()->currancy_code_en }}</span>
                                </div>
                                @endif

                                @if($Order->vat > 0)
                                <div class="total-row">
                                    <span class="total-label">VAT ({{ $Order->vat_percentage ?? setting('vat').'%' }}):</span>
                                    <span class="total-value">{{ number_format($Order->vat, 3, '.', '') }} {{ Country()->currancy_code_en }}</span>
                                </div>
                                @endif

                                @if($Order->charge_cost > 0)
                                <div class="total-row">
                                    <span class="total-label">Delivery Charge:</span>
                                    <span class="total-value">{{ number_format($Order->charge_cost, 3, '.', '') }} {{ Country()->currancy_code_en }}</span>
                                </div>
                                @endif

                                @if($Order->points_value > 0)
                                <div class="total-row">
                                    <span class="total-label">
                                        Points Discount:
                                        <span class="points-badge">POINTS REDEEMED</span>
                                    </span>
                                    <span class="total-value" style="color: #e65100;">-{{ number_format($Order->points_value, 3, '.', '') }} {{ Country()->currancy_code_en }}</span>
                                </div>
                                @endif

                                <div class="total-row grand-total">
                                    <span class="total-label">Total Amount:</span>
                                    <span class="total-value">{{ number_format($Order->net_total, 3, '.', '') }} {{ Country()->currancy_code_en }}</span>
                                </div>
                            </div>
                        </td>
                    </tr>

                    <!-- Contact Section -->
                    <tr>
                        <td class="contact-section">
                            <h3 style="margin-top: 0; color: #333;">Need Help?</h3>
                            <p style="color: #666; margin-bottom: 20px;">We're here to assist you!</p>
                            <div class="contact-grid">
                                <div class="contact-item">
                                    <img src="https://img.icons8.com/color/96/000000/phone.png" alt="Phone" class="contact-icon"/>
                                    <div class="contact-text">Call Us</div>
                                    <a href="tel:{{ setting('phone') }}" class="contact-link">{{ setting('phone') }}</a>
                                </div>
                                <div class="contact-item">
                                    <img src="https://img.icons8.com/color/96/000000/email.png" alt="Email" class="contact-icon"/>
                                    <div class="contact-text">Email Us</div>
                                    <a href="mailto:{{ setting('email') }}" class="contact-link">{{ setting('email') }}</a>
                                </div>
                            </div>
                        </td>
                    </tr>

                    <!-- Footer -->
                    <tr>
                        <td class="footer">
                            <p style="margin: 0 0 10px 0;">Thank you for shopping with us!</p>
                            <p style="margin: 0; font-size: 11px; color: #999;">
                                © {{ date('Y') }} {{ setting('title_en') }}. All rights reserved.
                            </p>
                        </td>
                    </tr>

                </table>
            </td>
        </tr>
    </table>
</body>
</html>