@extends('layouts.app')

@section('page-title', 'Quotations')

@push('styles')
<style>
    /* =============================================
       CSS CUSTOM PROPERTIES
    ============================================= */
    :root {
        --radius-xl: 20px;
        --radius-lg: 16px;
        --radius-md: 12px;
        --radius-sm: 8px;
        --shadow-sm: 0 2px 12px rgba(0,0,0,0.06);
        --shadow-md: 0 8px 32px rgba(0,0,0,0.10);
        --shadow-hover: 0 16px 48px rgba(0,0,0,0.13);
        --transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        --color-primary:   #667eea;
        --color-sale:      #11998e;
        --color-not-sale:  #eb3349;
        --color-pending:   #f59e0b;
        --color-draft:     #94a3b8;
    }

    /* =============================================
       PAGE WRAPPER
    ============================================= */
    .quotations-page { padding: 4px 0 28px; }

    /* =============================================
       PAGE HEADER
    ============================================= */
    .page-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 12px;
        margin-bottom: 20px;
    }

    .page-header h3 {
        font-size: clamp(1.2rem, 3vw, 1.55rem);
        font-weight: 700;
        color: #1a1a2e;
        margin: 0;
    }

    .header-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
    }

    /* =============================================
       BUTTONS
    ============================================= */
    .btn {
        border-radius: var(--radius-md);
        padding: 9px 16px;
        font-weight: 600;
        font-size: 0.87rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        border: none;
        text-decoration: none;
        transition: var(--transition);
        cursor: pointer;
        white-space: nowrap;
        line-height: 1.2;
    }

    .btn:hover { transform: translateY(-2px); }

    .btn-primary {
        background: linear-gradient(135deg, #667eea, #764ba2);
        color: #fff;
        box-shadow: 0 4px 12px rgba(102,126,234,0.35);
    }
    .btn-primary:hover { color: #fff; }

    .btn-secondary {
        background: #f1f5f9;
        color: #475569;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    }
    .btn-secondary:hover { background: #e2e8f0; color: #334155; }

    .btn-success {
        background: linear-gradient(135deg, #11998e, #38ef7d);
        color: #fff;
        box-shadow: 0 4px 12px rgba(17,153,142,0.3);
    }
    .btn-success:hover { color: #fff; }

    .btn-info {
        background: linear-gradient(135deg, #06b6d4, #4facfe);
        color: #fff;
        box-shadow: 0 3px 10px rgba(6,182,212,0.3);
    }
    .btn-info:hover { color: #fff; }

    .btn-danger {
        background: linear-gradient(135deg, #eb3349, #f45c43);
        color: #fff;
        box-shadow: 0 3px 10px rgba(235,51,73,0.3);
    }
    .btn-danger:hover { color: #fff; }

    .btn-warning {
        background: linear-gradient(135deg, #f59e0b, #fbbf24);
        color: #1a1a2e;
        box-shadow: 0 3px 10px rgba(245,158,11,0.3);
    }

    .btn-sm {
        padding: 6px 11px;
        font-size: 0.78rem;
        border-radius: var(--radius-sm);
        gap: 5px;
    }

    .btn-w-full { width: 100%; }

    /* =============================================
       ALERT
    ============================================= */
    .alert-success {
        background: rgba(17,153,142,0.1);
        color: #0f766e;
        border: none;
        border-radius: var(--radius-md);
        padding: 12px 16px;
        margin-bottom: 16px;
        font-size: 0.9rem;
        font-weight: 500;
    }

    /* =============================================
       TABLE CARD
    ============================================= */
    .table-card {
        background: #fff;
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-sm);
        border: none;
        overflow: hidden;
    }

    .table-card .card-body { padding: 0; }

    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table { width: 100%; border-collapse: collapse; }

    thead th {
        background: #f8fafc;
        padding: 13px 14px;
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #64748b;
        border-bottom: 2px solid #e2e8f0;
        white-space: nowrap;
    }

    tbody td {
        padding: 12px 14px;
        font-size: 0.87rem;
        font-weight: 500;
        color: #334155;
        border-bottom: 1px solid #f1f5f9;
        vertical-align: middle;
    }

    tbody tr { transition: var(--transition); }
    tbody tr:hover { background: rgba(102,126,234,0.04); }
    tbody tr:last-child td { border-bottom: none; }

    /* =============================================
       QUOTATION NUMBER
    ============================================= */
    .quot-num {
        font-family: monospace;
        font-size: 0.83rem;
        font-weight: 700;
        background: rgba(102,126,234,0.1);
        color: var(--color-primary);
        padding: 3px 9px;
        border-radius: var(--radius-sm);
        white-space: nowrap;
    }

    /* =============================================
       CLIENT / COMPANY CELLS
    ============================================= */
    .client-cell, .company-cell {
        max-width: 130px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: block;
    }

    .client-cell { font-weight: 600; color: #1a1a2e; }
    .company-cell { color: #64748b; font-size: 0.82rem; }

    /* =============================================
       AMOUNT CELL
    ============================================= */
    .amount-cell {
        font-weight: 700;
        color: #334155;
        white-space: nowrap;
    }

    /* =============================================
       STATUS BADGES
    ============================================= */
    .badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 4px 11px;
        border-radius: 20px;
        font-size: 0.72rem;
        font-weight: 700;
        white-space: nowrap;
    }

    .badge-sale     { background: rgba(17,153,142,0.12); color: var(--color-sale); }
    .badge-not-sale { background: rgba(235,51,73,0.12);  color: var(--color-not-sale); }
    .badge-pending  { background: rgba(245,158,11,0.15); color: #92400e; }
    .badge-draft    { background: rgba(148,163,184,0.15); color: #475569; }

    /* =============================================
       ACTION GROUP
    ============================================= */
    .action-group {
        display: flex;
        gap: 5px;
        align-items: center;
        flex-wrap: wrap;
    }

    /* =============================================
       EMPTY STATE
    ============================================= */
    .empty-state {
        text-align: center;
        padding: 56px 20px;
        color: #94a3b8;
    }

    .empty-state i { display: block; margin-bottom: 14px; opacity: 0.4; }
    .empty-state p { font-size: 0.9rem; margin-bottom: 18px; }

    /* =============================================
       PAGINATION
    ============================================= */
    .pagination-wrapper {
        padding: 16px 20px;
        border-top: 1px solid #f1f5f9;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 6px;
    }

    /* =============================================
       MOBILE CARD LIST  (hidden ≥ 576px)
    ============================================= */
    .quot-card-list { display: none; padding: 12px; }

    .quot-card {
        background: #fafafa;
        border: 1px solid #f1f5f9;
        border-radius: var(--radius-md);
        padding: 14px 16px 12px;
        margin-bottom: 10px;
        transition: var(--transition);
        position: relative;
        overflow: hidden;
    }

    /* left accent coloured by status */
    .quot-card::before {
        content: '';
        position: absolute;
        top: 0; left: 0;
        width: 4px;
        height: 100%;
        border-radius: 4px 0 0 4px;
    }

    .quot-card.status-sale::before      { background: var(--color-sale); }
    .quot-card.status-not_sale::before  { background: var(--color-not-sale); }
    .quot-card.status-pending::before   { background: var(--color-pending); }
    .quot-card.status-draft::before     { background: var(--color-draft); }

    .quot-card:hover { background: #f1f5f9; }

    /* top row */
    .quot-card-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 10px;
        padding-left: 8px;
    }

    .quot-card-left { min-width: 0; flex: 1; }

    .quot-card-num {
        font-family: monospace;
        font-size: 0.75rem;
        font-weight: 700;
        color: var(--color-primary);
        background: rgba(102,126,234,0.1);
        padding: 2px 8px;
        border-radius: 6px;
        display: inline-block;
        margin-bottom: 5px;
    }

    .quot-card-client {
        font-size: 0.92rem;
        font-weight: 700;
        color: #1a1a2e;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 2px;
    }

    .quot-card-company {
        font-size: 0.78rem;
        color: #64748b;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .quot-card-meta {
        text-align: right;
        flex-shrink: 0;
    }

    .quot-card-amount {
        font-size: 1.1rem;
        font-weight: 800;
        color: #1a1a2e;
        white-space: nowrap;
        display: block;
    }

    .quot-card-date {
        font-size: 0.73rem;
        color: #94a3b8;
        white-space: nowrap;
        display: block;
        margin-top: 2px;
    }

    /* bottom row */
    .quot-card-bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        flex-wrap: wrap;
        padding-left: 8px;
        border-top: 1px solid #f1f5f9;
        padding-top: 10px;
        margin-top: 2px;
    }

    .quot-card-actions {
        display: flex;
        gap: 5px;
        flex-wrap: wrap;
    }

    /* =============================================
       ============================================
       RESPONSIVE BREAKPOINTS
       ============================================
    ============================================= */

    /* ---- EXTRA SMALL < 480px ---- */
    @media (max-width: 479px) {
        .quotations-page { padding: 0 0 16px; }

        .page-header { flex-direction: column; align-items: stretch; }
        .page-header h3 { font-size: 1.15rem; }

        .header-actions {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
        }

        .header-actions .btn:first-child {
            grid-column: 1 / -1; /* Print All spans full width */
        }

        /* Hide table, show cards */
        .table-responsive { display: none; }
        .quot-card-list   { display: block; }

        .pagination-wrapper { padding: 12px; }
    }

    /* ---- SMALL 480–575px ---- */
    @media (min-width: 480px) and (max-width: 575px) {
        .page-header { flex-direction: column; align-items: stretch; }

        .header-actions {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 8px;
        }

        /* Hide table, show cards */
        .table-responsive { display: none; }
        .quot-card-list   { display: block; }
    }

    /* ---- MEDIUM 576–767px ---- */
    @media (min-width: 576px) and (max-width: 767px) {
        /* Table shown but compact — hide Company col */
        .col-company { display: none; }

        thead th, tbody td { padding: 10px 9px; font-size: 0.79rem; }

        .client-cell  { max-width: 90px; }
        .action-group { flex-wrap: wrap; gap: 4px; }
        .btn-sm       { padding: 5px 8px; font-size: 0.74rem; }
    }

    /* ---- TABLET 768–991px ---- */
    @media (min-width: 768px) and (max-width: 991px) {
        .client-cell, .company-cell { max-width: 100px; }
        .action-group { flex-wrap: wrap; gap: 4px; }
    }

    /* ---- DESKTOP 992px+ ---- */
    @media (min-width: 992px) {
        .col-company { display: table-cell; }
        .client-cell, .company-cell { max-width: 160px; }
    }

    /* ---- WIDE 1400px+ ---- */
    @media (min-width: 1400px) {
        .client-cell, .company-cell { max-width: 220px; }
    }

    /* =============================================
       TOUCH OPTIMISATIONS
    ============================================= */
    @media (hover: none) and (pointer: coarse) {
        .btn:hover        { transform: none; }
        tbody tr:hover    { background: transparent; }
        .quot-card:hover  { background: #fafafa; }
        .btn    { padding: 11px 16px; }
        .btn-sm { padding: 9px 12px; }
        thead th, tbody td { padding: 14px 12px; }
    }

    /* =============================================
       ACCESSIBILITY
    ============================================= */
    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            transition-duration: 0.01ms !important;
            animation-duration: 0.01ms !important;
        }
    }

    :focus-visible {
        outline: 3px solid #667eea;
        outline-offset: 2px;
        border-radius: 4px;
    }

    /* =============================================
       LANDSCAPE PHONES
    ============================================= */
    @media (max-height: 500px) and (orientation: landscape) {
        .quot-card { padding: 10px 14px 9px; }
        .quot-card-top { margin-bottom: 8px; }
    }

    /* =============================================
       PRINT
    ============================================= */
    @media print {
        .header-actions,
        .quot-card-list { display: none !important; }

        .table-responsive { display: block !important; overflow: visible !important; }
        .table-card { box-shadow: none !important; border: 1px solid #ccc !important; }
        .col-company { display: table-cell !important; }
        thead th, tbody td { padding: 7px 9px !important; font-size: 0.77rem !important; }

        /* Hide action buttons in print */
        .action-group { display: none !important; }
        td:last-child { display: none !important; }
        th:last-child { display: none !important; }
    }
</style>
@endpush

@section('content')
<div class="quotations-page">

    {{-- ========================================
         PAGE HEADER
    ======================================== --}}
    <div class="page-header">
        <h3>Quotation List</h3>
        <div class="header-actions">
            <a href="{{ route('quotations.print') }}" class="btn btn-secondary">
                <i class="fas fa-print"></i> Print All
            </a>
            <a href="{{ route('quotations.create') }}" class="btn btn-primary">
                <i class="fas fa-plus"></i> Add New
            </a>
            <a href="{{ route('quotations.sales') }}" class="btn btn-success">
                <i class="fas fa-chart-line"></i> Sales Proposals
            </a>
        </div>
    </div>

    {{-- ========================================
         FLASH MESSAGE
    ======================================== --}}
    @if(session('success'))
        <div class="alert-success">
            <i class="fas fa-check-circle" style="margin-right:6px;"></i>{{ session('success') }}
        </div>
    @endif

    {{-- ========================================
         TABLE CARD
    ======================================== --}}
    <div class="table-card">
        <div class="card-body">

            {{-- Desktop / Tablet Table --}}
            <div class="table-responsive">
                <table>
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Date</th>
                            <th>Client</th>
                            <th class="col-company">Company</th>
                            <th>Total</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($quotations as $quotation)
                            <tr>
                                <td>
                                    <span class="quot-num">{{ $quotation->quotation_number }}</span>
                                </td>
                                <td style="white-space:nowrap;">
                                    {{ $quotation->date
                                        ? \Illuminate\Support\Carbon::parse($quotation->date)->format('M d, Y')
                                        : '—' }}
                                </td>
                                <td>
                                    <span class="client-cell" title="{{ $quotation->bill_to }}">
                                        {{ $quotation->bill_to ?? '—' }}
                                    </span>
                                </td>
                                <td class="col-company">
                                    <span class="company-cell" title="{{ $quotation->company_name }}">
                                        {{ $quotation->company_name ?? '—' }}
                                    </span>
                                </td>
                                <td class="amount-cell">
                                    ৳{{ number_format($quotation->total, 2) }}
                                </td>
                                <td>
                                    @php $s = $quotation->status; @endphp
                                    @if($s === 'sale')
                                        <span class="badge badge-sale">
                                            <i class="fas fa-check" style="font-size:0.58rem;"></i> Sale
                                        </span>
                                    @elseif($s === 'not_sale')
                                        <span class="badge badge-not-sale">
                                            <i class="fas fa-times" style="font-size:0.58rem;"></i> Not Sale
                                        </span>
                                    @elseif($s === 'pending')
                                        <span class="badge badge-pending">
                                            <i class="fas fa-clock" style="font-size:0.58rem;"></i> Pending
                                        </span>
                                    @else
                                        <span class="badge badge-draft">
                                            <i class="fas fa-file" style="font-size:0.58rem;"></i> {{ ucfirst($s) }}
                                        </span>
                                    @endif
                                </td>
                                <td>
                                    <div class="action-group">
                                        <a href="{{ route('quotations.show', $quotation) }}"
                                           class="btn btn-sm btn-secondary"
                                           target="_blank"
                                           title="Print quotation">
                                            <i class="fas fa-print"></i>
                                            <span class="btn-label">Print</span>
                                        </a>
                                        <a href="{{ route('quotations.edit', $quotation) }}"
                                           class="btn btn-sm btn-info"
                                           title="Edit quotation">
                                            <i class="fas fa-edit"></i>
                                            <span class="btn-label">Edit</span>
                                        </a>
                                        <form action="{{ route('quotations.destroy', $quotation) }}"
                                              method="POST"
                                              style="display:contents;"
                                              onsubmit="return confirm('Delete this quotation?');">
                                            @csrf @method('DELETE')
                                            <button type="submit"
                                                    class="btn btn-sm btn-danger"
                                                    title="Delete quotation">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </form>

                                        @if($quotation->status !== 'sale')
                                            <form action="{{ route('quotations.updateStatus', $quotation) }}"
                                                  method="POST"
                                                  style="display:contents;">
                                                @csrf @method('PATCH')
                                                <input type="hidden" name="status" value="sale">
                                                <button type="submit"
                                                        class="btn btn-sm btn-success"
                                                        title="Mark as Sale">
                                                    <i class="fas fa-check"></i>
                                                    <span class="btn-label">Sale</span>
                                                </button>
                                            </form>
                                        @endif

                                        @if($quotation->status !== 'not_sale')
                                            <form action="{{ route('quotations.updateStatus', $quotation) }}"
                                                  method="POST"
                                                  style="display:contents;">
                                                @csrf @method('PATCH')
                                                <input type="hidden" name="status" value="not_sale">
                                                <button type="submit"
                                                        class="btn btn-sm btn-warning"
                                                        title="Mark as Not Sale">
                                                    <i class="fas fa-times"></i>
                                                    <span class="btn-label">Not Sale</span>
                                                </button>
                                            </form>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7">
                                    <div class="empty-state">
                                        <i class="fas fa-file-alt fa-3x"></i>
                                        <p>No quotations found.</p>
                                        <a href="{{ route('quotations.create') }}" class="btn btn-primary btn-sm">
                                            + Add New Quotation
                                        </a>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            {{-- Mobile Card List (< 576px) --}}
            <div class="quot-card-list">
                @forelse($quotations as $quotation)
                    @php $s = $quotation->status; @endphp
                    <div class="quot-card status-{{ $s }}">

                        {{-- Top: number / client / company  |  amount / date --}}
                        <div class="quot-card-top">
                            <div class="quot-card-left">
                                <span class="quot-card-num">{{ $quotation->quotation_number }}</span>
                                <div class="quot-card-client">
                                    {{ $quotation->bill_to ?? '—' }}
                                </div>
                                @if($quotation->company_name)
                                    <div class="quot-card-company">
                                        {{ $quotation->company_name }}
                                    </div>
                                @endif
                            </div>
                            <div class="quot-card-meta">
                                <span class="quot-card-amount">
                                    ৳{{ number_format($quotation->total, 2) }}
                                </span>
                                <span class="quot-card-date">
                                    {{ $quotation->date
                                        ? \Illuminate\Support\Carbon::parse($quotation->date)->format('M d, Y')
                                        : '—' }}
                                </span>
                            </div>
                        </div>

                        {{-- Bottom: status badge  |  actions --}}
                        <div class="quot-card-bottom">
                            <div>
                                @if($s === 'sale')
                                    <span class="badge badge-sale">
                                        <i class="fas fa-check" style="font-size:0.58rem;"></i> Sale
                                    </span>
                                @elseif($s === 'not_sale')
                                    <span class="badge badge-not-sale">
                                        <i class="fas fa-times" style="font-size:0.58rem;"></i> Not Sale
                                    </span>
                                @elseif($s === 'pending')
                                    <span class="badge badge-pending">
                                        <i class="fas fa-clock" style="font-size:0.58rem;"></i> Pending
                                    </span>
                                @else
                                    <span class="badge badge-draft">
                                        <i class="fas fa-file" style="font-size:0.58rem;"></i> {{ ucfirst($s) }}
                                    </span>
                                @endif
                            </div>

                            <div class="quot-card-actions">
                                <a href="{{ route('quotations.show', $quotation) }}"
                                   class="btn btn-sm btn-secondary"
                                   target="_blank">
                                    <i class="fas fa-print"></i>
                                </a>
                                <a href="{{ route('quotations.edit', $quotation) }}"
                                   class="btn btn-sm btn-info">
                                    <i class="fas fa-edit"></i>
                                </a>

                                @if($quotation->status !== 'sale')
                                    <form action="{{ route('quotations.updateStatus', $quotation) }}"
                                          method="POST"
                                          style="display:contents;">
                                        @csrf @method('PATCH')
                                        <input type="hidden" name="status" value="sale">
                                        <button type="submit" class="btn btn-sm btn-success" title="Mark as Sale">
                                            <i class="fas fa-check"></i>
                                        </button>
                                    </form>
                                @endif

                                @if($quotation->status !== 'not_sale')
                                    <form action="{{ route('quotations.updateStatus', $quotation) }}"
                                          method="POST"
                                          style="display:contents;">
                                        @csrf @method('PATCH')
                                        <input type="hidden" name="status" value="not_sale">
                                        <button type="submit" class="btn btn-sm btn-warning" title="Not Sale">
                                            <i class="fas fa-times"></i>
                                        </button>
                                    </form>
                                @endif

                                <form action="{{ route('quotations.destroy', $quotation) }}"
                                      method="POST"
                                      style="display:contents;"
                                      onsubmit="return confirm('Delete this quotation?');">
                                    @csrf @method('DELETE')
                                    <button type="submit" class="btn btn-sm btn-danger" title="Delete">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </form>
                            </div>
                        </div>

                    </div>
                @empty
                    <div class="empty-state">
                        <i class="fas fa-file-alt fa-2x"></i>
                        <p>No quotations found.</p>
                        <a href="{{ route('quotations.create') }}" class="btn btn-primary btn-sm">
                            + Add New Quotation
                        </a>
                    </div>
                @endforelse
            </div>

            {{-- Pagination (if model is paginated) --}}
            @if(method_exists($quotations, 'hasPages') && $quotations->hasPages())
                <div class="pagination-wrapper">
                    {{ $quotations->links() }}
                </div>
            @endif

        </div>
    </div>

</div>
@endsection

@push('scripts')
<script>
/* Hide button text labels on medium-small screens to save space in action cells */
(function () {
    function toggleBtnLabels() {
        const labels = document.querySelectorAll('.action-group .btn-label');
        const hide   = window.innerWidth < 1100;
        labels.forEach(function (el) {
            el.style.display = hide ? 'none' : '';
        });
    }

    toggleBtnLabels();

    let t;
    window.addEventListener('resize', function () {
        clearTimeout(t);
        t = setTimeout(toggleBtnLabels, 120);
    });
})();
</script>
@endpush
