@extends('layouts.dashboard.superadminapp')

@section('title', 'View Quotation')

@section('styles')
<style>
    /* ===== Modern Compact Page Header ===== */
    .modern-page-header {
        background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
        border-radius: 0.75rem;
        padding: 0.5rem 1rem;
        margin-bottom: 1rem;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .modern-page-header h1 {
        font-size: 1rem;
        font-weight: 600;
        color: #1e293b;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    .modern-page-header h1 i {
        color: #f59e0b;
        font-size: 1.1rem;
    }
    .header-datetime {
        display: flex;
        gap: 1rem;
        font-size: 0.813rem;
        color: #64748b;
    }
    .header-datetime > div {
        display: flex;
        align-items: center;
        gap: 0.375rem;
    }

    /* ===== Quotation Header ===== */
    .quotation-header {
        background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
        color: white;
        padding: 1.25rem 1.5rem;
        border-radius: 0.75rem;
        margin-bottom: 1.25rem;
        box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
    }
    .quotation-header h3 {
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
        color: #ffffff;
    }
    .quotation-header .company-name {
        font-size: 1rem;
        opacity: 0.9;
    }
    .quotation-header .badge {
        background: rgba(255, 255, 255, 0.2);
        color: #ffffff;
        padding: 0.375rem 0.75rem;
        border-radius: 9999px;
        font-size: 0.813rem;
        font-weight: 500;
    }
    .quotation-header .btn-light {
        background: rgba(255, 255, 255, 0.95);
        border: none;
        color: #7c3aed;
        font-weight: 500;
        padding: 0.5rem 1rem;
        border-radius: 0.5rem;
        transition: all 0.2s;
    }
    .quotation-header .btn-light:hover {
        background: #ffffff;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }
    .quotation-header .btn-outline-light {
        border: 2px solid rgba(255, 255, 255, 0.3);
        color: #ffffff;
        background: transparent;
        padding: 0.5rem 1rem;
        border-radius: 0.5rem;
        font-weight: 500;
        transition: all 0.2s;
    }
    .quotation-header .btn-outline-light:hover {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.5);
    }

    /* ===== Quick Info Cards ===== */
    .info-card {
        background: #ffffff;
        border-radius: 0.75rem;
        padding: 1.25rem;
        height: 100%;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        border-left: 4px solid;
        transition: all 0.2s;
    }
    .info-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }
    .info-card.purple { border-left-color: #8b5cf6; background: linear-gradient(135deg, #ffffff 0%, #f5f3ff 100%); }
    .info-card.cyan { border-left-color: #06b6d4; background: linear-gradient(135deg, #ffffff 0%, #ecfeff 100%); }
    .info-card.green { border-left-color: #10b981; background: linear-gradient(135deg, #ffffff 0%, #ecfdf5 100%); }
    .info-card.amber { border-left-color: #f59e0b; background: linear-gradient(135deg, #ffffff 0%, #fffbeb 100%); }

    .info-card-title {
        font-size: 0.75rem;
        text-transform: uppercase;
        color: #64748b;
        font-weight: 600;
        margin-bottom: 0.5rem;
        letter-spacing: 0.5px;
    }
    .info-card-value {
        font-size: 1.125rem;
        font-weight: 700;
        color: #1e293b;
        word-break: break-word;
    }

    /* ===== Detail Cards ===== */
    .detail-card {
        border: none;
        border-radius: 0.75rem;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        overflow: hidden;
    }
    .detail-card .card-header {
        background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
        color: #fff !important;
        font-weight: 600;
        padding: 1rem 1.25rem;
        font-size: 1rem;
        border-bottom: none;
    }
    .detail-card .card-header i {
        color: #fff !important;
    }
    .detail-card.cyan .card-header {
        background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
        color: #fff !important;
    }
    .detail-card.cyan .card-header i {
        color: #fff !important;
    }
    .detail-card.gray .card-header {
        background: linear-gradient(135deg, #64748b 0%, #475569 100%);
        color: #fff !important;
    }
    .detail-card.gray .card-header i {
        color: #fff !important;
    }
    .detail-card.amber .card-header {
        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
        color: #fff !important;
    }
    .detail-card.amber .card-header i {
        color: #fff !important;
    }
    .detail-card.red .card-header {
        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
        color: #fff !important;
    }
    .detail-card.red .card-header i {
        color: #fff !important;
    }
    .detail-card.indigo .card-header {
        background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
        color: #fff !important;
    }
    .detail-card.indigo .card-header i {
        color: #fff !important;
    }

    .detail-row {
        display: flex;
        padding: 0.75rem 0;
        border-bottom: 1px solid #f1f5f9;
    }
    .detail-row:last-child {
        border-bottom: none;
    }
    .detail-label {
        font-weight: 600;
        color: #64748b;
        min-width: 180px;
        font-size: 0.875rem;
    }
    .detail-value {
        color: #1e293b;
        font-size: 0.875rem;
        word-break: break-word;
        font-weight: 500;
    }
    .detail-value code {
        background: #f1f5f9;
        padding: 0.25rem 0.5rem;
        border-radius: 0.25rem;
        font-size: 0.813rem;
        color: #6366f1;
    }

    /* ===== Cost Tables ===== */
    .cost-table {
        font-size: 0.875rem;
        border-collapse: separate;
        border-spacing: 0;
    }
    .cost-table thead th {
        background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
        color: #475569;
        font-weight: 600;
        font-size: 0.813rem;
        padding: 0.75rem 0.5rem;
        border-bottom: 2px solid #cbd5e1;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }
    .cost-table tbody tr {
        transition: background 0.15s;
    }
    .cost-table tbody tr:hover {
        background: #f8fafc;
    }
    .cost-table tbody td {
        padding: 0.75rem 0.5rem;
        vertical-align: middle;
        border-bottom: 1px solid #e2e8f0;
        color: #475569;
    }

    /* ===== Totals Box ===== */
    .totals-box {
        background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
        border-radius: 0.5rem;
        padding: 1.25rem;
        border-left: 4px solid #8b5cf6;
    }
    .totals-box .row {
        padding: 0.5rem 0;
    }
    .totals-box .total-label {
        font-weight: 600;
        color: #475569;
        font-size: 0.938rem;
    }
    .totals-box .total-value {
        text-align: right;
        font-weight: 600;
        color: #1e293b;
        font-size: 0.938rem;
    }
    .totals-box .grand-total {
        font-size: 1.25rem;
        color: #8b5cf6;
        font-weight: 700;
    }

    /* ===== Gradient Buttons ===== */
    .btn-gradient-primary {
        background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
        color: #ffffff;
        border: none;
        padding: 0.5rem 1.25rem;
        border-radius: 0.5rem;
        font-weight: 500;
        transition: all 0.2s;
        box-shadow: 0 2px 4px rgba(139, 92, 246, 0.3);
    }
    .btn-gradient-primary:hover {
        background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(139, 92, 246, 0.4);
        color: #ffffff;
    }
    .btn-gradient-info {
        background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
        color: #ffffff;
        border: none;
        padding: 0.5rem 1.25rem;
        border-radius: 0.5rem;
        font-weight: 500;
        transition: all 0.2s;
        box-shadow: 0 2px 4px rgba(6, 182, 212, 0.3);
    }
    .btn-gradient-info:hover {
        background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(6, 182, 212, 0.4);
        color: #ffffff;
    }
    .btn-outline-secondary {
        border: 2px solid #e2e8f0;
        color: #64748b;
        background: #ffffff;
        padding: 0.5rem 1.25rem;
        border-radius: 0.5rem;
        font-weight: 500;
        transition: all 0.2s;
    }
    .btn-outline-secondary:hover {
        background: #f8fafc;
        border-color: #cbd5e1;
        color: #475569;
    }

    /* ===== Status Badges ===== */
    .status-badge {
        padding: 0.375rem 0.875rem;
        border-radius: 9999px;
        font-size: 0.813rem;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
    }
    .status-badge.approved {
        background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
        color: #047857;
        border: 1px solid #10b981;
    }
    .status-badge.rejected {
        background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
        color: #dc2626;
        border: 1px solid #ef4444;
    }
    .status-badge.pending {
        background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
        color: #d97706;
        border: 1px solid #f59e0b;
    }

    /* ===== Responsive ===== */
    @media (max-width: 768px) {
        .modern-page-header {
            flex-direction: column;
            align-items: flex-start;
        }
        .header-datetime {
            flex-direction: column;
            gap: 0.5rem;
        }
        .quotation-header {
            padding: 1rem;
        }
        .quotation-header h3 {
            font-size: 1.25rem;
        }
        .detail-label {
            min-width: 140px;
        }
    }
</style>
@endsection

@section('content')
    <!-- Modern Compact Page Header -->
    <div class="modern-page-header">
        <h1>
            <i class="fas fa-file-invoice"></i>
            View Quotation
        </h1>
        <div class="header-datetime">
            <div>
                <i class="far fa-calendar" style="color: #8b5cf6;"></i>
                <span class="display-date"></span>
            </div>
            <div>
                <i class="far fa-clock" style="color: #06b6d4;"></i>
                <span class="display-time"></span>
            </div>
        </div>
    </div>

    <!-- Quotation Header Card -->
    <div class="quotation-header">
        <div class="row align-items-center">
            <div class="col">
                <h3>{{ $quotation->quotation_no }}</h3>
                <p class="company-name mb-2">{{ $quotation->customer->company ?? $quotation->customer_name ?? 'N/A' }}</p>
                <div class="d-flex flex-wrap align-items-center gap-2">
                    @if($quotation->status == 'approved')
                        <span class="badge"><i class="fas fa-check-circle mr-1"></i> Approved</span>
                    @elseif($quotation->status == 'rejected')
                        <span class="badge"><i class="fas fa-times-circle mr-1"></i> Rejected</span>
                    @else
                        <span class="badge"><i class="fas fa-clock mr-1"></i> Pending</span>
                    @endif
                    <span class="badge"><i class="fas fa-calendar mr-1"></i> {{ \Carbon\Carbon::parse($quotation->quotation_date)->format('d M Y') }}</span>
                </div>
            </div>
            <div class="col-auto">
                <div class="d-flex flex-wrap gap-2">
                    <a href="{{ route('superadmin.salesbom.quotation.edit', $quotation->id) }}" class="btn btn-light btn-sm">
                        <i class="fas fa-edit mr-1"></i> Edit
                    </a>
                    <a href="{{ route('superadmin.salesbom.quotation.print', $quotation->id) }}" target="_blank" class="btn btn-light btn-sm">
                        <i class="fas fa-print mr-1"></i> Print
                    </a>
                    <a href="{{ route('superadmin.salesbom.quotation.quotationdetails') }}" class="btn btn-outline-light btn-sm">
                        <i class="fas fa-arrow-left mr-1"></i> Back
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Quick Info Cards -->
    <div class="row mb-4">
        <div class="col-md-3 mb-3">
            <div class="info-card purple">
                <div class="info-card-title"><i class="fas fa-phone mr-1"></i> Contact</div>
                <div class="info-card-value">{{ $quotation->phone ?: '-' }}</div>
            </div>
        </div>
        <div class="col-md-3 mb-3">
            <div class="info-card cyan">
                <div class="info-card-title"><i class="fas fa-envelope mr-1"></i> Email</div>
                <div class="info-card-value" style="font-size: 0.938rem;">{{ $quotation->email ?: '-' }}</div>
            </div>
        </div>
        <div class="col-md-3 mb-3">
            <div class="info-card amber">
                <div class="info-card-title"><i class="fas fa-box mr-1"></i> Product Type</div>
                <div class="info-card-value">{{ $quotation->product_type ?: '-' }}</div>
            </div>
        </div>
        <div class="col-md-3 mb-3">
            <div class="info-card green">
                <div class="info-card-title"><i class="fas fa-rupee-sign mr-1"></i> Grand Total</div>
                <div class="info-card-value" style="color: #10b981;">₹{{ number_format($quotation->grand_total, 2) }}</div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Customer Information -->
        <div class="col-lg-6 mb-4">
            <div class="card detail-card h-100">
                <div class="card-header" style="background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); color: #fff !important;">
                    <i class="fas fa-user mr-2" style="color: #fff !important;"></i> Customer Information
                </div>
                <div class="card-body">
                    <div class="detail-row">
                        <span class="detail-label">Customer Name</span>
                        <span class="detail-value">{{ $quotation->customer->company ?? $quotation->customer_name ?? '-' }}</span>
                    </div>
                    <div class="detail-row">
                        <span class="detail-label">Address</span>
                        <span class="detail-value">{{ $quotation->address ?: '-' }}</span>
                    </div>
                    <div class="detail-row">
                        <span class="detail-label">GST No</span>
                        <span class="detail-value"><code>{{ $quotation->gst ?: '-' }}</code></span>
                    </div>
                    <div class="detail-row">
                        <span class="detail-label">Phone</span>
                        <span class="detail-value">{{ $quotation->phone ?: '-' }}</span>
                    </div>
                    <div class="detail-row">
                        <span class="detail-label">Email</span>
                        <span class="detail-value">
                            @if($quotation->email)
                                <a href="mailto:{{ $quotation->email }}" style="color: #6366f1;">{{ $quotation->email }}</a>
                            @else
                                -
                            @endif
                        </span>
                    </div>
                    <div class="detail-row">
                        <span class="detail-label">Customer Ref No</span>
                        <span class="detail-value">{{ $quotation->cust_ref_no ?: '-' }}</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- RFQ & Product Details -->
        <div class="col-lg-6 mb-4">
            <div class="card detail-card cyan h-100">
                <div class="card-header" style="background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%); color: #fff !important;">
                    <i class="fas fa-file-alt mr-2" style="color: #fff !important;"></i> RFQ & Product Information
                </div>
                <div class="card-body">
                    <div class="detail-row">
                        <span class="detail-label">RFQ No</span>
                        <span class="detail-value">{{ $quotation->rfq->rfq_no ?? $quotation->rfq_no ?? '-' }}</span>
                    </div>
                    <div class="detail-row">
                        <span class="detail-label">RFQ Date</span>
                        <span class="detail-value">{{ $quotation->rfq_date ? \Carbon\Carbon::parse($quotation->rfq_date)->format('d M Y') : '-' }}</span>
                    </div>
                    <div class="detail-row">
                        <span class="detail-label">Part No</span>
                        <span class="detail-value">{{ $quotation->part_no ?: '-' }}</span>
                    </div>
                    <div class="detail-row">
                        <span class="detail-label">Project/Material No</span>
                        <span class="detail-value">{{ $quotation->project_material_no ?: '-' }}</span>
                    </div>
                    <div class="detail-row">
                        <span class="detail-label">Drawing No</span>
                        <span class="detail-value">{{ $quotation->drawing_no ?: '-' }}</span>
                    </div>
                    <div class="detail-row">
                        <span class="detail-label">Drawing Revision</span>
                        <span class="detail-value">{{ $quotation->drawing_rev ?: '-' }}</span>
                    </div>
                    <div class="detail-row">
                        <span class="detail-label">Quantity</span>
                        <span class="detail-value"><strong>{{ $quotation->quantity ?: '-' }} {{ $quotation->quantity_uom }}</strong></span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Description -->
    @if($quotation->description)
    <div class="card detail-card gray mb-4">
        <div class="card-header" style="background: linear-gradient(135deg, #64748b 0%, #475569 100%); color: #fff !important;">
            <i class="fas fa-align-left mr-2" style="color: #fff !important;"></i> Description
        </div>
        <div class="card-body">
            <p class="mb-0" style="color: #475569; line-height: 1.6;">{{ $quotation->description }}</p>
        </div>
    </div>
    @endif

    <!-- Raw Materials -->
    @php
        $rawMaterials = is_array($quotation->raw_materials) ? $quotation->raw_materials : json_decode($quotation->raw_materials, true);
    @endphp
    @if($rawMaterials && count($rawMaterials) > 0)
    <div class="card detail-card amber mb-4">
        <div class="card-header" style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: #fff !important;">
            <i class="fas fa-cubes mr-2" style="color: #fff !important;"></i> Raw Material Charges
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered cost-table">
                    <thead>
                        <tr class="text-center">
                            <th>#</th>
                            <th>Material</th>
                            <th>Type</th>
                            <th>Quantity</th>
                            <th>Rate</th>
                            <th>RM Weight</th>
                            <th>RM Cost</th>
                            <th>Value</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($rawMaterials as $index => $rm)
                        <tr class="text-center">
                            <td>{{ $index + 1 }}</td>
                            <td class="text-left">{{ $rm['material_id'] ?? '-' }}</td>
                            <td>{{ $rm['type'] ?? '-' }}</td>
                            <td>{{ $rm['quantity'] ?? '-' }}</td>
                            <td class="text-right">{{ isset($rm['rate']) ? number_format($rm['rate'], 2) : '-' }}</td>
                            <td class="text-right">{{ $rm['rm_weight'] ?? '-' }}</td>
                            <td class="text-right">{{ isset($rm['rm_cost']) ? number_format($rm['rm_cost'], 2) : '-' }}</td>
                            <td class="text-right"><strong>₹{{ isset($rm['value']) ? number_format($rm['value'], 2) : '-' }}</strong></td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    @endif

    <!-- Conversion Costs -->
    @php
        $conversionCosts = is_array($quotation->conversion_costs) ? $quotation->conversion_costs : json_decode($quotation->conversion_costs, true);
    @endphp
    @if($conversionCosts && count($conversionCosts) > 0)
    <div class="card detail-card red mb-4">
        <div class="card-header" style="background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: #fff !important;">
            <i class="fas fa-cogs mr-2" style="color: #fff !important;"></i> Conversion Costs
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered cost-table">
                    <thead>
                        <tr class="text-center">
                            <th>#</th>
                            <th>Description</th>
                            <th>Quantity</th>
                            <th>Unit</th>
                            <th>Rate (INR)</th>
                            <th>Value (INR)</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($conversionCosts as $index => $cc)
                        <tr class="text-center">
                            <td>{{ $index + 1 }}</td>
                            <td class="text-left">{{ $cc['desc'] ?? '-' }}</td>
                            <td>{{ $cc['quantity'] ?? '-' }}</td>
                            <td>{{ $cc['unit'] ?? '-' }}</td>
                            <td class="text-right">{{ isset($cc['rate']) ? number_format($cc['rate'], 2) : '-' }}</td>
                            <td class="text-right"><strong>₹{{ isset($cc['value']) ? number_format($cc['value'], 2) : '-' }}</strong></td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    @endif

    <!-- Packing Charges -->
    @php
        $packingCharges = is_array($quotation->packing_charges) ? $quotation->packing_charges : json_decode($quotation->packing_charges, true);
    @endphp
    @if($packingCharges && count($packingCharges) > 0)
    <div class="card detail-card indigo mb-4">
        <div class="card-header" style="background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); color: #fff !important;">
            <i class="fas fa-box-open mr-2" style="color: #fff !important;"></i> Packing Charges
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered cost-table">
                    <thead>
                        <tr class="text-center">
                            <th>#</th>
                            <th>Description</th>
                            <th>Quantity</th>
                            <th>Unit</th>
                            <th>Rate (INR)</th>
                            <th>Value (INR)</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($packingCharges as $index => $pc)
                        <tr class="text-center">
                            <td>{{ $index + 1 }}</td>
                            <td class="text-left">{{ $pc['desc'] ?? '-' }}</td>
                            <td>{{ $pc['quantity'] ?? '-' }}</td>
                            <td>{{ $pc['unit'] ?? '-' }}</td>
                            <td class="text-right">{{ isset($pc['rate']) ? number_format($pc['rate'], 2) : '-' }}</td>
                            <td class="text-right"><strong>₹{{ isset($pc['value']) ? number_format($pc['value'], 2) : '-' }}</strong></td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    @endif

    <!-- Note & Totals -->
    <div class="row">
        <!-- Note -->
        <div class="col-lg-6 mb-4">
            <div class="card detail-card gray h-100">
                <div class="card-header" style="background: linear-gradient(135deg, #64748b 0%, #475569 100%); color: #fff !important;">
                    <i class="fas fa-sticky-note mr-2" style="color: #fff !important;"></i> Note / Remarks
                </div>
                <div class="card-body">
                    @if($quotation->note)
                        <p class="mb-0" style="color: #475569; line-height: 1.6;">{{ $quotation->note }}</p>
                    @else
                        <p class="text-muted mb-0"><i class="fas fa-info-circle mr-1"></i> No notes available</p>
                    @endif
                </div>
            </div>
        </div>

        <!-- Totals -->
        <div class="col-lg-6 mb-4">
            <div class="card detail-card h-100">
                <div class="card-header" style="background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); color: #fff !important;">
                    <i class="fas fa-rupee-sign mr-2" style="color: #fff !important;"></i> Summary
                </div>
                <div class="card-body">
                    <div class="totals-box">
                        <div class="row">
                            <div class="col-6 total-label">Sub Total</div>
                            <div class="col-6 total-value">₹{{ number_format($quotation->sub_total, 2) }}</div>
                        </div>
                        <div class="row">
                            <div class="col-6 total-label">Discount</div>
                            <div class="col-6 total-value">{{ $quotation->discount ?: '0' }}%</div>
                        </div>
                        <div class="row">
                            <div class="col-6 total-label">Round Up</div>
                            <div class="col-6 total-value">₹{{ number_format($quotation->round_up, 2) }}</div>
                        </div>
                        <hr class="my-2">
                        <div class="row">
                            <div class="col-6 total-label grand-total">Grand Total</div>
                            <div class="col-6 total-value grand-total">₹{{ number_format($quotation->grand_total, 2) }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Action Buttons -->
    <div class="d-flex justify-content-between flex-wrap gap-2 mb-4">
        <a href="{{ route('superadmin.salesbom.quotation.quotationdetails') }}" class="btn btn-outline-secondary">
            <i class="fas fa-arrow-left mr-1"></i> Back to List
        </a>
        <div class="d-flex flex-wrap gap-2">
            <a href="{{ route('superadmin.salesbom.quotation.print', $quotation->id) }}" target="_blank" class="btn btn-gradient-info">
                <i class="fas fa-print mr-1"></i> Print PDF
            </a>
            <a href="{{ route('superadmin.salesbom.quotation.edit', $quotation->id) }}" class="btn btn-gradient-primary">
                <i class="fas fa-edit mr-1"></i> Edit Quotation
            </a>
        </div>
    </div>
@endsection

@section('scripts')
<script>
// ===== DateTime Update =====
function updateDateTime() {
    const now = new Date();
    const dateOptions = { year: 'numeric', month: 'short', day: 'numeric' };
    const timeOptions = { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: true };

    document.querySelector('.display-date').textContent = now.toLocaleDateString('en-US', dateOptions);
    document.querySelector('.display-time').textContent = now.toLocaleTimeString('en-US', timeOptions);
}
updateDateTime();
setInterval(updateDateTime, 1000);
</script>
@endsection
