@extends('layouts.dashboard.superadminapp')

@section('title', 'Sales Quotation List')

@section('styles')
<style>
    /* ===================================
       CSS VARIABLES - PURPLE THEME
       =================================== */
    :root {
        --purple-primary: #8b5cf6;
        --purple-dark: #7c3aed;
        --purple-light: #a78bfa;
        --purple-lighter: #c4b5fd;
        --purple-pale: #f3f0ff;
        --purple-gradient: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);

        --teal-primary: #06b6d4;
        --teal-dark: #0891b2;
        --green-primary: #10b981;
        --green-dark: #059669;
        --amber-primary: #f59e0b;
        --amber-dark: #d97706;
        --red-primary: #ef4444;
        --red-dark: #dc2626;

        --text-dark: #1e293b;
        --text-medium: #475569;
        --text-light: #64748b;
        --border-color: #e2e8f0;
        --bg-gray: #f8fafc;
        --shadow-sm: 0 1px 3px rgba(139, 92, 246, 0.1);
        --shadow: 0 4px 12px rgba(139, 92, 246, 0.15);
        --shadow-lg: 0 10px 30px rgba(139, 92, 246, 0.2);
    }

    /* ===================================
       PAGE HEADER
       =================================== */
    .page-header {
        background: linear-gradient(135deg, var(--purple-pale) 0%, #ffffff 100%);
        border-radius: 12px;
        padding: 1rem 1.5rem;
        margin-bottom: 1.5rem;
        box-shadow: var(--shadow);
        border-left: 4px solid var(--purple-primary);
    }

    .page-header h1 {
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--purple-dark);
        margin: 0;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .page-header h1 i {
        font-size: 1.5rem;
        color: var(--purple-primary);
    }

    .datetime-display {
        display: flex;
        align-items: center;
        gap: 1rem;
        font-size: 0.875rem;
        color: var(--text-medium);
    }

    .datetime-display i {
        color: var(--purple-primary);
        margin-right: 0.25rem;
    }

    .datetime-display .date-box {
        background: #ffffff;
        padding: 0.5rem 0.875rem;
        border-radius: 8px;
        border: 1px solid var(--border-color);
        font-weight: 500;
    }

    .datetime-display .time-box {
        background: var(--purple-gradient);
        color: #ffffff;
        padding: 0.5rem 0.875rem;
        border-radius: 8px;
        font-weight: 600;
        box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
    }

    /* ===================================
       KPI CARDS
       =================================== */
    .kpi-card {
        border-radius: 12px;
        border: none;
        overflow: hidden;
        transition: all 0.3s ease;
        box-shadow: var(--shadow);
        position: relative;
    }

    .kpi-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 100%);
        pointer-events: none;
    }

    .kpi-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-lg);
    }

    .kpi-card .card-body {
        padding: 1.25rem 1.5rem;
    }

    .kpi-card.total {
        background: linear-gradient(135deg, var(--purple-primary) 0%, var(--purple-dark) 100%);
    }

    .kpi-card.pending {
        background: linear-gradient(135deg, var(--amber-primary) 0%, var(--amber-dark) 100%);
    }

    .kpi-card.approved {
        background: linear-gradient(135deg, var(--green-primary) 0%, var(--green-dark) 100%);
    }

    .kpi-card.rejected {
        background: linear-gradient(135deg, var(--red-primary) 0%, var(--red-dark) 100%);
    }

    .kpi-icon {
        width: 48px;
        height: 48px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.25);
        color: #ffffff;
        font-size: 1.25rem;
        backdrop-filter: blur(10px);
    }

    .kpi-label {
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: rgba(255, 255, 255, 0.9);
        margin-bottom: 0.375rem;
        font-weight: 600;
    }

    .kpi-value {
        font-size: 2rem;
        font-weight: 800;
        color: #ffffff;
        line-height: 1;
    }

    /* ===================================
       QUICK ACTIONS BAR
       =================================== */
    .quick-actions {
        background: linear-gradient(135deg, #ffffff 0%, var(--bg-gray) 100%);
        border-radius: 12px;
        padding: 1rem 1.5rem;
        margin-bottom: 1.5rem;
        border: 1px solid var(--border-color);
        box-shadow: var(--shadow-sm);
    }

    .quick-actions-title {
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--text-light);
        margin-bottom: 0.75rem;
    }

    .quick-actions .btn {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
        border-radius: 8px;
        font-weight: 600;
        transition: all 0.3s ease;
        border: none;
    }

    .quick-actions .btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .btn-gradient-purple {
        background: var(--purple-gradient);
        color: #ffffff;
    }

    .btn-gradient-purple:hover {
        background: linear-gradient(135deg, var(--purple-dark) 0%, #6d28d9 100%);
        color: #ffffff;
    }

    .btn-gradient-green {
        background: linear-gradient(135deg, var(--green-primary) 0%, var(--green-dark) 100%);
        color: #ffffff;
    }

    .btn-gradient-green:hover {
        background: linear-gradient(135deg, var(--green-dark) 0%, #047857 100%);
        color: #ffffff;
    }

    .btn-gradient-teal {
        background: linear-gradient(135deg, var(--teal-primary) 0%, var(--teal-dark) 100%);
        color: #ffffff;
    }

    .btn-gradient-teal:hover {
        background: linear-gradient(135deg, var(--teal-dark) 0%, #0e7490 100%);
        color: #ffffff;
    }

    /* ===================================
       TABLE CARD
       =================================== */
    .table-card {
        border-radius: 12px;
        border: none;
        box-shadow: var(--shadow);
        overflow: hidden;
    }

    .table-card .card-header {
        background: var(--purple-gradient);
        color: #ffffff;
        padding: 1rem 1.5rem;
        border: none;
    }

    .table-card .card-header .header-title {
        font-size: 1rem;
        font-weight: 700;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .table-card .card-header .header-title i {
        opacity: 0.9;
    }

    .table-card .card-header .btn {
        background: rgba(255, 255, 255, 0.25);
        color: #ffffff;
        border: 1px solid rgba(255, 255, 255, 0.3);
        font-weight: 600;
        padding: 0.375rem 0.875rem;
        font-size: 0.875rem;
        border-radius: 6px;
        transition: all 0.3s ease;
    }

    .table-card .card-header .btn:hover {
        background: #ffffff;
        color: var(--purple-primary);
        border-color: #ffffff;
    }

    .table-card .card-body {
        padding: 1rem;
        background: #ffffff;
    }

    /* ===================================
       DATATABLE STYLING
       =================================== */
    #quotationTable {
        width: 100% !important;
    }

    #quotationTable thead th {
        background: linear-gradient(135deg, var(--purple-pale) 0%, #faf5ff 100%);
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--purple-dark);
        padding: 0.875rem 0.75rem !important;
        border-bottom: 2px solid var(--purple-primary);
        white-space: nowrap;
    }

    #quotationTable tbody td {
        font-size: 0.875rem;
        padding: 0.75rem !important;
        vertical-align: middle;
        color: var(--text-medium);
        border-bottom: 1px solid var(--border-color);
    }

    #quotationTable tbody tr {
        transition: all 0.2s ease;
    }

    #quotationTable tbody tr:hover {
        background: var(--purple-pale);
        transform: scale(1.01);
    }

    /* ===================================
       STATUS BADGES
       =================================== */
    .badge-status {
        padding: 0.375rem 0.75rem;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
    }

    .badge-status.pending {
        background: linear-gradient(135deg, var(--amber-primary) 0%, var(--amber-dark) 100%);
        color: #ffffff;
    }

    .badge-status.approved {
        background: linear-gradient(135deg, var(--green-primary) 0%, var(--green-dark) 100%);
        color: #ffffff;
    }

    .badge-status.rejected {
        background: linear-gradient(135deg, var(--red-primary) 0%, var(--red-dark) 100%);
        color: #ffffff;
    }

    /* ===================================
       ACTION BUTTONS
       =================================== */
    .table-actions {
        display: flex;
        gap: 0.25rem;
        justify-content: center;
        flex-wrap: wrap;
    }

    .table-actions .btn {
        padding: 0.375rem 0.5rem;
        font-size: 0.75rem;
        border-radius: 6px;
        border: none;
        transition: all 0.2s ease;
        min-width: 32px;
        height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .table-actions .btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    .btn-action-print {
        background: linear-gradient(135deg, var(--teal-primary) 0%, var(--teal-dark) 100%);
        color: #ffffff;
    }

    .btn-action-view {
        background: linear-gradient(135deg, #64748b 0%, #475569 100%);
        color: #ffffff;
    }

    .btn-action-edit {
        background: var(--purple-gradient);
        color: #ffffff;
    }

    .btn-action-approve {
        background: linear-gradient(135deg, var(--green-primary) 0%, var(--green-dark) 100%);
        color: #ffffff;
    }

    .btn-action-reject {
        background: linear-gradient(135deg, var(--amber-primary) 0%, var(--amber-dark) 100%);
        color: #ffffff;
    }

    .btn-action-delete {
        background: linear-gradient(135deg, var(--red-primary) 0%, var(--red-dark) 100%);
        color: #ffffff;
    }

    /* ===================================
       DATATABLE CONTROLS
       =================================== */
    div.dt-buttons {
        margin-bottom: 0.75rem;
    }

    .dt-buttons .btn {
        padding: 0.375rem 0.75rem !important;
        font-size: 0.8rem !important;
        border-radius: 6px !important;
        margin-right: 0.375rem !important;
        background: #ffffff !important;
        border: 1px solid var(--border-color) !important;
        color: var(--text-medium) !important;
        font-weight: 600;
        transition: all 0.2s ease;
    }

    .dt-buttons .btn:hover {
        background: var(--purple-gradient) !important;
        border-color: transparent !important;
        color: #ffffff !important;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(139, 92, 246, 0.3) !important;
    }

    .dataTables_filter input {
        border-radius: 8px !important;
        border: 2px solid var(--border-color) !important;
        padding: 0.5rem 1rem !important;
        font-size: 0.875rem !important;
        transition: all 0.3s ease;
    }

    .dataTables_filter input:focus {
        border-color: var(--purple-primary) !important;
        box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.1) !important;
        outline: none;
    }

    .dataTables_info {
        font-size: 0.875rem;
        color: var(--text-light);
        font-weight: 500;
    }

    .dataTables_paginate .paginate_button {
        padding: 0.375rem 0.75rem !important;
        font-size: 0.875rem !important;
        border-radius: 6px !important;
        margin: 0 0.25rem !important;
        border: 1px solid var(--border-color) !important;
        background: #ffffff !important;
        color: var(--text-medium) !important;
        font-weight: 600;
    }

    .dataTables_paginate .paginate_button.current {
        background: var(--purple-gradient) !important;
        border-color: transparent !important;
        color: #ffffff !important;
        box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3) !important;
    }

    .dataTables_paginate .paginate_button:hover:not(.current) {
        background: var(--purple-pale) !important;
        border-color: var(--purple-light) !important;
        color: var(--purple-dark) !important;
    }

    /* ===================================
       MODALS
       =================================== */
    .modal-content {
        border-radius: 12px;
        border: none;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        overflow: hidden;
    }

    .modal-header {
        padding: 1rem 1.5rem;
        border: none;
    }

    .modal-header.modal-header-danger {
        background: linear-gradient(135deg, var(--red-primary) 0%, var(--red-dark) 100%);
        color: #ffffff;
    }

    .modal-header.modal-header-success {
        background: linear-gradient(135deg, var(--green-primary) 0%, var(--green-dark) 100%);
        color: #ffffff;
    }

    .modal-header.modal-header-warning {
        background: linear-gradient(135deg, var(--amber-primary) 0%, var(--amber-dark) 100%);
        color: #ffffff;
    }

    .modal-header .modal-title {
        font-size: 1rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .modal-header .close {
        color: #ffffff;
        opacity: 0.9;
        text-shadow: none;
        font-size: 1.5rem;
        padding: 0;
        margin: 0;
        transition: opacity 0.2s ease;
    }

    .modal-header .close:hover {
        opacity: 1;
    }

    .modal-body {
        padding: 1.5rem;
        font-size: 0.9375rem;
        color: var(--text-medium);
    }

    .modal-footer {
        padding: 1rem 1.5rem;
        border-top: 1px solid var(--border-color);
        background: var(--bg-gray);
    }

    .modal-footer .btn {
        padding: 0.5rem 1.25rem;
        font-size: 0.875rem;
        border-radius: 8px;
        font-weight: 600;
        transition: all 0.3s ease;
    }

    .modal-footer .btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }

    /* ===================================
       TOAST NOTIFICATIONS
       =================================== */
    .toast-container {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 9999;
    }

    .custom-toast {
        min-width: 320px;
        border-radius: 10px;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
        animation: slideInRight 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        overflow: hidden;
        margin-bottom: 1rem;
    }

    .custom-toast.toast-success {
        background: linear-gradient(135deg, var(--green-primary) 0%, var(--green-dark) 100%);
    }

    .custom-toast.toast-error {
        background: linear-gradient(135deg, var(--red-primary) 0%, var(--red-dark) 100%);
    }

    .custom-toast .toast-body {
        padding: 1rem 1.25rem;
        color: #ffffff;
        font-size: 0.9375rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .custom-toast .toast-body i {
        font-size: 1.25rem;
    }

    .custom-toast .toast-body .btn {
        background: rgba(255, 255, 255, 0.25);
        color: #ffffff;
        padding: 0.25rem 0.5rem;
        border-radius: 4px;
        border: none;
        transition: all 0.2s ease;
    }

    .custom-toast .toast-body .btn:hover {
        background: rgba(255, 255, 255, 0.4);
    }

    @keyframes slideInRight {
        from {
            transform: translateX(100%);
            opacity: 0;
        }
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }

    /* ===================================
       RESPONSIVE
       =================================== */
    @media (max-width: 768px) {
        .page-header {
            padding: 1rem;
        }

        .page-header h1 {
            font-size: 1rem;
        }

        .kpi-card .card-body {
            padding: 1rem;
        }

        .kpi-value {
            font-size: 1.5rem;
        }

        .quick-actions {
            padding: 0.875rem 1rem;
        }

        .datetime-display {
            flex-wrap: wrap;
            gap: 0.5rem;
        }

        .table-actions {
            gap: 0.125rem;
        }

        .table-actions .btn {
            padding: 0.25rem 0.375rem;
            min-width: 28px;
            height: 28px;
        }
    }
</style>
@endsection

@section('content')
    {{-- PAGE HEADER --}}
    <div class="page-header d-flex align-items-center justify-content-between flex-wrap">
        <h1>
            <i class="fas fa-file-invoice"></i>
            Sales Quotation Management
        </h1>
        <div class="datetime-display">
            <div class="date-box">
                <i class="far fa-calendar-alt"></i>
                <span id="day">Day</span>, <span id="daynum">00</span> <span id="month">Month</span> <span id="year">0000</span>
            </div>
            <div class="time-box">
                <i class="far fa-clock"></i>
                <span class="display-time">00:00:00</span>
            </div>
        </div>
    </div>

    {{-- KPI SUMMARY CARDS --}}
    <div class="row mb-3">
        <div class="col-xl-3 col-md-6 mb-3 mb-xl-0">
            <div class="card kpi-card total">
                <div class="card-body d-flex align-items-center justify-content-between">
                    <div>
                        <div class="kpi-label">Total Quotations</div>
                        <div class="kpi-value">{{ $quotations->count() }}</div>
                    </div>
                    <div class="kpi-icon">
                        <i class="fas fa-file-invoice"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6 mb-3 mb-xl-0">
            <div class="card kpi-card pending">
                <div class="card-body d-flex align-items-center justify-content-between">
                    <div>
                        <div class="kpi-label">Pending</div>
                        <div class="kpi-value">{{ $quotations->where('status', 'pending')->count() }}</div>
                    </div>
                    <div class="kpi-icon">
                        <i class="fas fa-clock"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6 mb-3 mb-md-0">
            <div class="card kpi-card approved">
                <div class="card-body d-flex align-items-center justify-content-between">
                    <div>
                        <div class="kpi-label">Approved</div>
                        <div class="kpi-value">{{ $quotations->where('status', 'approved')->count() }}</div>
                    </div>
                    <div class="kpi-icon">
                        <i class="fas fa-check-circle"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card kpi-card rejected">
                <div class="card-body d-flex align-items-center justify-content-between">
                    <div>
                        <div class="kpi-label">Rejected</div>
                        <div class="kpi-value">{{ $quotations->where('status', 'rejected')->count() }}</div>
                    </div>
                    <div class="kpi-icon">
                        <i class="fas fa-times-circle"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- QUICK ACTIONS BAR --}}
    <div class="quick-actions d-flex align-items-center justify-content-between flex-wrap">
        <div class="quick-actions-title">Quick Actions</div>
        <div class="d-flex flex-wrap gap-2">
            <a href="{{ route('superadmin.salesbom.quotation.quotationorder') }}" class="btn btn-gradient-purple">
                <i class="fas fa-plus mr-1"></i> New Quotation
            </a>
            <a href="{{ route('superadmin.salesbom.rfq.rfqdetails') }}" class="btn btn-gradient-green">
                <i class="fas fa-file-alt mr-1"></i> RFQs
            </a>
            <a href="{{ route('superadmin.customer.customerlist') }}" class="btn btn-gradient-teal">
                <i class="fas fa-users mr-1"></i> Customers
            </a>
        </div>
    </div>

    {{-- TABLE CARD --}}
    <div class="card table-card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h6 class="header-title mb-0">
                <i class="fas fa-table"></i>
                Sales Quotation Data
            </h6>
            <a href="{{ route('superadmin.salesbom.quotation.quotationorder') }}" class="btn btn-sm">
                <i class="fa fa-plus-square mr-1"></i> Add Quotation
            </a>
        </div>
        <div class="card-body">
            <table class="table table-hover" id="quotationTable">
                <thead>
                    <tr class="text-center">
                        <th style="width: 4%;">#</th>
                        <th style="width: 12%;">Quotation No</th>
                        <th style="width: 9%;">Date</th>
                        <th style="width: 18%;">Customer</th>
                        <th style="width: 10%;">Contact</th>
                        <th style="width: 10%;">Product Type</th>
                        <th style="width: 9%;">Grand Total</th>
                        <th style="width: 7%;">Status</th>
                        <th style="width: 5%;">Print</th>
                        <th style="width: 16%;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($quotations as $index => $quotation)
                        <tr id="row-{{ $quotation->id }}" class="text-center">
                            <td>{{ $index + 1 }}</td>
                            <td><strong style="color: var(--purple-primary);">{{ $quotation->quotation_no }}</strong></td>
                            <td>{{ \Carbon\Carbon::parse($quotation->quotation_date)->format('d-m-Y') }}</td>
                            <td class="text-left">
                                <span title="{{ $quotation->customer->company ?? $quotation->customer_name }}">
                                    {{ Str::limit($quotation->customer->company ?? $quotation->customer_name, 22) }}
                                </span>
                                @if($quotation->email)
                                    <br><small class="text-muted">{{ Str::limit($quotation->email, 22) }}</small>
                                @endif
                            </td>
                            <td>{{ $quotation->phone ?: '-' }}</td>
                            <td>{{ Str::limit($quotation->product_type, 15) ?: '-' }}</td>
                            <td class="text-right"><strong>₹{{ number_format($quotation->grand_total, 2) }}</strong></td>
                            <td>
                                @if($quotation->status == 'approved')
                                    <span class="badge-status approved">
                                        <i class="fas fa-check-circle"></i> Approved
                                    </span>
                                @elseif($quotation->status == 'rejected')
                                    <span class="badge-status rejected">
                                        <i class="fas fa-times-circle"></i> Rejected
                                    </span>
                                @else
                                    <span class="badge-status pending">
                                        <i class="fas fa-clock"></i> Pending
                                    </span>
                                @endif
                            </td>
                            <td>
                                <a href="{{ route('superadmin.salesbom.quotation.print', $quotation->id) }}" target="_blank"
                                    class="btn btn-action-print" title="Print PDF">
                                    <i class="fas fa-print"></i>
                                </a>
                            </td>
                            <td>
                                <div class="table-actions">
                                    <a href="{{ route('superadmin.salesbom.quotation.view', $quotation->id) }}"
                                        class="btn btn-action-view" title="View Details">
                                        <i class="fa fa-eye"></i>
                                    </a>
                                    <a href="{{ route('superadmin.salesbom.quotation.edit', $quotation->id) }}"
                                        class="btn btn-action-edit" title="Edit Quotation">
                                        <i class="fa fa-edit"></i>
                                    </a>
                                    @if ($quotation->status === 'pending')
                                        <button class="btn btn-action-approve approve-btn"
                                            data-id="{{ $quotation->id }}" data-no="{{ $quotation->quotation_no }}" title="Approve">
                                            <i class="fa fa-check"></i>
                                        </button>
                                        <button class="btn btn-action-reject reject-btn"
                                            data-id="{{ $quotation->id }}" data-no="{{ $quotation->quotation_no }}" title="Reject">
                                            <i class="fa fa-times"></i>
                                        </button>
                                    @endif
                                    <button class="btn btn-action-delete delete-btn"
                                        data-id="{{ $quotation->id }}" data-no="{{ $quotation->quotation_no }}" title="Delete">
                                        <i class="fa fa-trash"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

    {{-- DELETE CONFIRMATION MODAL --}}
    <div class="modal fade" id="deleteModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header modal-header-danger">
                    <h6 class="modal-title mb-0">
                        <i class="fas fa-exclamation-triangle"></i>
                        Delete Quotation
                    </h6>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p class="mb-2">Are you sure you want to delete this quotation?</p>
                    <p class="mb-3"><strong id="deleteItemNo" style="color: var(--purple-primary);"></strong></p>
                    <small class="text-muted">
                        <i class="fas fa-info-circle"></i>
                        This action cannot be undone.
                    </small>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-danger" id="confirmDeleteBtn">
                        <span class="spinner-border spinner-border-sm d-none" role="status"></span>
                        <span class="btn-text">Delete</span>
                    </button>
                </div>
            </div>
        </div>
    </div>

    {{-- APPROVE CONFIRMATION MODAL --}}
    <div class="modal fade" id="approveModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header modal-header-success">
                    <h6 class="modal-title mb-0">
                        <i class="fas fa-check-circle"></i>
                        Approve Quotation
                    </h6>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p class="mb-2">Are you sure you want to approve this quotation?</p>
                    <p class="mb-0"><strong id="approveItemNo" style="color: var(--green-primary);"></strong></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-success" id="confirmApproveBtn">
                        <span class="spinner-border spinner-border-sm d-none" role="status"></span>
                        <span class="btn-text">Approve</span>
                    </button>
                </div>
            </div>
        </div>
    </div>

    {{-- REJECT CONFIRMATION MODAL --}}
    <div class="modal fade" id="rejectModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header modal-header-warning">
                    <h6 class="modal-title mb-0">
                        <i class="fas fa-times-circle"></i>
                        Reject Quotation
                    </h6>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p class="mb-2">Are you sure you want to reject this quotation?</p>
                    <p class="mb-0"><strong id="rejectItemNo" style="color: var(--amber-primary);"></strong></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-warning" id="confirmRejectBtn">
                        <span class="spinner-border spinner-border-sm d-none" role="status"></span>
                        <span class="btn-text">Reject</span>
                    </button>
                </div>
            </div>
        </div>
    </div>

    {{-- TOAST CONTAINER --}}
    <div class="toast-container"></div>
@endsection

@section('scripts')
<script>
$(document).ready(function() {
    // ========== DateTime Display ==========
    function updateDateTime() {
        const now = new Date();
        const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
        const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

        $('#day').text(days[now.getDay()]);
        $('#daynum').text(now.getDate().toString().padStart(2, '0'));
        $('#month').text(months[now.getMonth()]);
        $('#year').text(now.getFullYear());
        $('.display-time').text(now.toLocaleTimeString('en-US', { hour12: false }));
    }
    updateDateTime();
    setInterval(updateDateTime, 1000);

    // ========== Initialize DataTable ==========
    var table = $('#quotationTable').DataTable({
        dom: 'Bfrtip',
        buttons: [
            { extend: 'copy', className: 'btn', text: '<i class="fas fa-copy"></i> Copy' },
            { extend: 'csv', className: 'btn', text: '<i class="fas fa-file-csv"></i> CSV' },
            { extend: 'excel', className: 'btn', text: '<i class="fas fa-file-excel"></i> Excel' },
            { extend: 'pdf', className: 'btn', text: '<i class="fas fa-file-pdf"></i> PDF' },
            { extend: 'print', className: 'btn', text: '<i class="fas fa-print"></i> Print' }
        ],
        pageLength: 10,
        lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
        order: [[1, 'desc']],
        autoWidth: false,
        columnDefs: [
            { orderable: false, targets: [8, 9] }
        ],
        language: {
            emptyTable: '<div class="text-center py-4"><i class="fas fa-inbox fa-3x text-muted mb-3" style="opacity: 0.3;"></i><br><strong>No quotations found</strong><br><small class="text-muted">Start by creating a new quotation</small></div>',
            search: '<i class="fas fa-search"></i>',
            searchPlaceholder: 'Search quotations...'
        }
    });

    // ========== Toast Notification Helper ==========
    function showToast(type, message) {
        var toastClass = type === 'success' ? 'toast-success' : 'toast-error';
        var icon = type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle';

        var toastHtml = `
            <div class="custom-toast ${toastClass}" role="alert">
                <div class="toast-body">
                    <i class="fas ${icon}"></i>
                    <span>${message}</span>
                    <button type="button" class="ml-auto btn btn-sm" onclick="$(this).closest('.custom-toast').fadeOut(300, function(){ $(this).remove(); })">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            </div>
        `;

        var $toast = $(toastHtml);
        $('.toast-container').append($toast);

        setTimeout(function() {
            $toast.fadeOut(300, function() { $(this).remove(); });
        }, 5000);
    }

    // ========== Delete Quotation ==========
    var deleteId = null;
    $(document).on('click', '.delete-btn', function() {
        deleteId = $(this).data('id');
        $('#deleteItemNo').text($(this).data('no'));
        $('#deleteModal').modal('show');
    });

    $('#confirmDeleteBtn').on('click', function() {
        if (!deleteId) return;

        var $btn = $(this);
        var $spinner = $btn.find('.spinner-border');
        var $text = $btn.find('.btn-text');

        $btn.prop('disabled', true);
        $spinner.removeClass('d-none');
        $text.text('Deleting...');

        $.ajax({
            url: '{{ url("superadmin/sales/quotations") }}/' + deleteId,
            type: 'DELETE',
            data: { '_token': '{{ csrf_token() }}' },
            success: function(response) {
                $('#deleteModal').modal('hide');
                table.row('#row-' + deleteId).remove().draw(false);
                showToast('success', response.message || 'Quotation deleted successfully!');
                setTimeout(function() { location.reload(); }, 1500);
            },
            error: function(xhr) {
                showToast('error', xhr.responseJSON?.message || 'Could not delete quotation.');
            },
            complete: function() {
                $btn.prop('disabled', false);
                $spinner.addClass('d-none');
                $text.text('Delete');
                deleteId = null;
            }
        });
    });

    // ========== Approve Quotation ==========
    var approveId = null;
    $(document).on('click', '.approve-btn', function() {
        approveId = $(this).data('id');
        $('#approveItemNo').text($(this).data('no'));
        $('#approveModal').modal('show');
    });

    $('#confirmApproveBtn').on('click', function() {
        if (!approveId) return;

        var $btn = $(this);
        var $spinner = $btn.find('.spinner-border');
        var $text = $btn.find('.btn-text');

        $btn.prop('disabled', true);
        $spinner.removeClass('d-none');
        $text.text('Approving...');

        $.ajax({
            url: '{{ url("superadmin/sales/quotations") }}/' + approveId + '/approve',
            type: 'POST',
            data: { '_token': '{{ csrf_token() }}' },
            success: function(response) {
                $('#approveModal').modal('hide');
                showToast('success', response.message || 'Quotation approved successfully!');
                setTimeout(function() { location.reload(); }, 1500);
            },
            error: function(xhr) {
                showToast('error', xhr.responseJSON?.message || 'Could not approve quotation.');
            },
            complete: function() {
                $btn.prop('disabled', false);
                $spinner.addClass('d-none');
                $text.text('Approve');
                approveId = null;
            }
        });
    });

    // ========== Reject Quotation ==========
    var rejectId = null;
    $(document).on('click', '.reject-btn', function() {
        rejectId = $(this).data('id');
        $('#rejectItemNo').text($(this).data('no'));
        $('#rejectModal').modal('show');
    });

    $('#confirmRejectBtn').on('click', function() {
        if (!rejectId) return;

        var $btn = $(this);
        var $spinner = $btn.find('.spinner-border');
        var $text = $btn.find('.btn-text');

        $btn.prop('disabled', true);
        $spinner.removeClass('d-none');
        $text.text('Rejecting...');

        $.ajax({
            url: '{{ url("superadmin/sales/quotations") }}/' + rejectId + '/reject',
            type: 'POST',
            data: { '_token': '{{ csrf_token() }}' },
            success: function(response) {
                $('#rejectModal').modal('hide');
                showToast('success', response.message || 'Quotation rejected successfully!');
                setTimeout(function() { location.reload(); }, 1500);
            },
            error: function(xhr) {
                showToast('error', xhr.responseJSON?.message || 'Could not reject quotation.');
            },
            complete: function() {
                $btn.prop('disabled', false);
                $spinner.addClass('d-none');
                $text.text('Reject');
                rejectId = null;
            }
        });
    });
});
</script>
@endsection
