@php
    $brandColor = \App\Models\Setting::getValue('primary_brand_color', '#006738');
    $siteName = \App\Models\Setting::getValue('site_name', 'Sawdabazar');
    $storePhone = \App\Models\Setting::getValue('store_phone');
    $storeEmail = \App\Models\Setting::getValue('store_email');
    $storeAddress = \App\Models\Setting::getValue('store_address');
    $logo = \App\Models\Setting::getValue('store_logo');
    $logoUrl = $logo ? \Illuminate\Support\Facades\Storage::url($logo) : null;
    
    // Social URLs
    $socialFacebook = \App\Models\Setting::getValue('social_facebook');
    $socialInstagram = \App\Models\Setting::getValue('social_instagram');
    $socialWhatsapp = \App\Models\Setting::getValue('social_whatsapp');
    $socialYoutube = \App\Models\Setting::getValue('social_youtube');
@endphp
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ $siteName }} Invoice</title>
    <style>
        body {
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            background-color: #f3f4f6;
            margin: 0;
            padding: 0;
            -webkit-font-smoothing: antialiased;
        }
        .wrapper {
            width: 100%;
            background-color: #f3f4f6;
            padding: 40px 0;
        }
        .container {
            max-width: 600px;
            margin: 0 auto;
            background-color: #ffffff;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
            border: 1px solid #e5e7eb;
        }
        .header {
            background-color: {{ $brandColor }};
            padding: 30px;
            text-align: center;
        }
        .header h1 {
            color: #ffffff;
            margin: 0;
            font-size: 24px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        .header img {
            max-height: 48px;
            display: inline-block;
        }
        .body {
            padding: 30px;
        }
        .body h2 {
            color: #111827;
            font-size: 20px;
            font-weight: 700;
            margin-top: 0;
            margin-bottom: 15px;
        }
        .body p {
            color: #4b5563;
            font-size: 14px;
            line-height: 1.6;
            margin: 0 0 20px 0;
        }
        .order-box {
            background-color: #f9fafb;
            border: 1px solid #f3f4f6;
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 25px;
        }
        .order-title {
            font-weight: bold;
            color: #111827;
            font-size: 14px;
            text-transform: uppercase;
            margin-bottom: 12px;
            letter-spacing: 0.5px;
        }
        .table-row {
            display: flex;
            justify-content: space-between;
            font-size: 13px;
            margin-bottom: 8px;
            color: #4b5563;
        }
        .table-row strong {
            color: #111827;
        }
        .divider {
            border-top: 1px solid #e5e7eb;
            margin: 15px 0;
        }
        .btn-wrapper {
            text-align: center;
            margin-top: 30px;
        }
        .btn {
            display: inline-block;
            background-color: {{ $brandColor }};
            color: #ffffff !important;
            text-decoration: none;
            padding: 12px 28px;
            font-size: 14px;
            font-weight: bold;
            border-radius: 8px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }
        .footer {
            background-color: #f9fafb;
            padding: 25px 20px;
            text-align: center;
            font-size: 12px;
            color: #9ca3af;
            border-top: 1px solid #f3f4f6;
            line-height: 1.8;
        }
        .social-link {
            display: inline-block;
            margin: 0 8px;
            color: {{ $brandColor }};
            text-decoration: none;
            font-weight: bold;
        }
    </style>
</head>
<body>

<div class="wrapper">
    <div class="container">
        <!-- Header -->
        <div class="header">
            @if($logoUrl)
                <img src="{{ $logoUrl }}" alt="{{ $siteName }}">
            @else
                <h1>{{ $siteName }}</h1>
            @endif
        </div>

        <!-- Body content -->
        <div class="body">
            <div style="font-size: 14px; line-height: 1.6; color: #4b5563; margin-bottom: 25px;">
                {!! $emailContent !!}
            </div>

            <!-- Order Details Summary -->
            <div class="order-box">
                <div class="order-title">Order Info</div>
                <div class="table-row">
                    <span>Order Number:</span>
                    <strong>#{{ $order->order_number }}</strong>
                </div>
                <div class="table-row">
                    <span>Placed At:</span>
                    <strong>{{ $order->created_at->format('M j, Y h:i A') }}</strong>
                </div>
                <div class="table-row">
                    <span>Payment Status:</span>
                    <strong>{{ strtoupper($order->payment_status) }}</strong>
                </div>
            </div>

            <!-- Financial Summary -->
            <div class="order-box" style="margin-top: 15px;">
                <div class="table-row">
                    <span>Subtotal:</span>
                    <strong>৳{{ number_format($order->subtotal, 2) }}</strong>
                </div>
                <div class="table-row">
                    <span>Delivery Charge:</span>
                    <strong>৳{{ number_format($order->shipping_charge, 2) }}</strong>
                </div>
                @if($order->discount > 0)
                    <div class="table-row" style="color: #047857;">
                        <span>Discount:</span>
                        <strong>-৳{{ number_format($order->discount, 2) }}</strong>
                    </div>
                @endif
                <div class="divider"></div>
                <div class="table-row" style="font-size: 15px; font-weight: bold;">
                    <span>Grand Total:</span>
                    <span style="color: {{ $brandColor }};">৳{{ number_format($order->grand_total, 2) }}</span>
                </div>
            </div>

            <!-- Button CTA -->
            <div class="btn-wrapper">
                <a href="{{ route('dashboard') }}?orderNumber={{ $order->order_number }}&phone={{ $order->customer_phone }}" class="btn">
                    Track Your Order
                </a>
            </div>
        </div>

        <!-- Footer -->
        <div class="footer">
            <strong>&copy; {{ date('Y') }} {{ $siteName }}. All rights reserved.</strong><br>
            @if($storeAddress)
                {{ $storeAddress }}<br>
            @endif
            @if($storePhone || $storeEmail)
                Need help? 
                @if($storePhone)
                    Call <strong>{{ $storePhone }}</strong>
                @endif
                @if($storePhone && $storeEmail)
                    or 
                @endif
                @if($storeEmail)
                    email <strong>{{ $storeEmail }}</strong>
                @endif
                <br>
            @endif
            
            <!-- Social links -->
            <div style="margin-top: 15px;">
                @if($socialFacebook)
                    <a href="{{ $socialFacebook }}" class="social-link" target="_blank">Facebook</a>
                @endif
                @if($socialInstagram)
                    <a href="{{ $socialInstagram }}" class="social-link" target="_blank">Instagram</a>
                @endif
                @if($socialWhatsapp)
                    <a href="https://wa.me/{{ preg_replace('/[^0-9]/', '', $socialWhatsapp) }}" class="social-link" target="_blank">WhatsApp</a>
                @endif
                @if($socialYoutube)
                    <a href="{{ $socialYoutube }}" class="social-link" target="_blank">YouTube</a>
                @endif
            </div>
        </div>
    </div>
</div>

</body>
</html>
