@extends('layouts.dashboard.superadminapp')

@section('title', 'Purchase RFQ Details')

@section('content')

<style>
/* ==================== MODERN PAGE HEADER ==================== */
.page-header-compact {
    background: linear-gradient(135deg, #fff 0%, #f8fafc 100%);
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
    margin-bottom: 1.5rem;
}

.page-header-compact h1 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.page-header-compact h1 i {
    color: #06b6d4;
    font-size: 1.125rem;
}

.datetime-display {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.datetime-display .time {
    font-size: 0.875rem;
    color: #64748b;
    font-weight: 500;
    font-family: 'SF Mono', 'Monaco', monospace;
    background: #f1f5f9;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.datetime-display .time i {
    color: #06b6d4;
}

/* ==================== INFO CARDS ==================== */
.info-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.info-card {
    background: #fff;
    border-radius: 0.75rem;
    padding: 1.25rem;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
    transition: all 0.2s ease;
    border-left: 4px solid;
}

.info-card:hover {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    transform: translateY(-2px);
}

.info-card.teal {
    border-color: #06b6d4;
}

.info-card.blue {
    border-color: #3b82f6;
}

.info-card.amber {
    border-color: #f59e0b;
}

.info-card.green {
    border-color: #10b981;
}

.info-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.info-card-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: #fff;
}

.info-card.teal .info-card-icon {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
}

.info-card.blue .info-card-icon {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.info-card.amber .info-card-icon {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.info-card.green .info-card-icon {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.info-card-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-card-value {
    font-size: 1.125rem;
    font-weight: 700;
    color: #1e293b;
    margin-top: 0.25rem;
}

.info-card .badge {
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.badge.bg-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #fff;
}

.badge.bg-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: #fff;
}

.badge.bg-secondary {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%) !important;
    color: #fff;
}

/* ==================== SECTION CARDS ==================== */
.section-card {
    background: #fff;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
    margin-bottom: 1.5rem;
    transition: all 0.2s ease;
}

.section-card:hover {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

.section-header {
    padding: 1rem 1.5rem;
    font-weight: 600;
    font-size: 1rem;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.section-header i {
    font-size: 1.125rem;
}

.section-card .card-body {
    padding: 1.5rem;
}

/* Section Color Variants */
.section-card.teal .section-header {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
}

.section-card.blue .section-header {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.section-card.cyan .section-header {
    background: linear-gradient(135deg, #22d3ee 0%, #06b6d4 100%);
}

.section-card.amber .section-header {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.section-card.slate .section-header {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
}

/* ==================== DETAIL FIELDS ==================== */
.detail-field {
    margin-bottom: 1.25rem;
}

.detail-field label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.375rem;
    display: block;
}

.detail-field .value {
    font-size: 0.9375rem;
    font-weight: 500;
    color: #1e293b;
}

/* ==================== ATTACHMENTS ==================== */
.attachments-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem;
}

.attachment-item {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
    text-decoration: none;
}

.attachment-item:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    transform: translateX(4px);
}

.attachment-item i {
    color: #06b6d4;
    font-size: 1.125rem;
    margin-right: 0.625rem;
}

.attachment-item span {
    color: #1e293b;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.no-attachments {
    text-align: center;
    padding: 2rem;
    color: #94a3b8;
    font-style: italic;
}

/* ==================== ITEMS TABLE ==================== */
.items-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.9375rem;
}

.items-table thead th {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 2px solid #e2e8f0;
    color: #475569;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    padding: 0.875rem 0.75rem;
    white-space: nowrap;
    text-align: left;
}

.items-table tbody tr {
    transition: all 0.15s ease;
}

.items-table tbody tr:hover {
    background: #f8fafc;
}

.items-table tbody td {
    padding: 0.875rem 0.75rem;
    vertical-align: middle;
    border-bottom: 1px solid #f1f5f9;
    color: #1e293b;
}

.items-table tbody tr:last-child td {
    border-bottom: none;
}

.no-items {
    text-align: center;
    padding: 2rem;
    color: #94a3b8;
    font-style: italic;
}

/* ==================== ACTION BUTTONS ==================== */
.action-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e2e8f0;
}

.btn {
    border-radius: 0.5rem;
    padding: 0.625rem 1.25rem;
    font-weight: 500;
    transition: all 0.2s ease;
    border: none;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    font-size: 0.9375rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
}

.btn-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
}

.btn-success:hover {
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
    color: #fff;
}

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

.btn-secondary:hover {
    box-shadow: 0 4px 12px rgba(100, 116, 139, 0.4);
    color: #fff;
}

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

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

    .info-cards-grid {
        grid-template-columns: 1fr;
    }

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

    .action-buttons {
        flex-direction: column;
    }

    .btn {
        width: 100%;
        justify-content: center;
    }
}
</style>

<!-- Modern Compact Page Header -->
<div class="page-header-compact d-flex justify-content-between align-items-center flex-wrap">
    <h1>
        <i class="fas fa-file-alt"></i>
        Purchase RFQ Details
    </h1>
    <div class="datetime-display">
        <span class="time">
            <i class="far fa-clock"></i>
            <span id="currentTime"></span>
        </span>
    </div>
</div>

<!-- Info Cards -->
<div class="info-cards-grid">
    <div class="info-card teal">
        <div class="info-card-header">
            <div class="info-card-icon">
                <i class="fas fa-hashtag"></i>
            </div>
            <div>
                <div class="info-card-title">RFQ Number</div>
            </div>
        </div>
        <div class="info-card-value">{{ $rfq->rfq_no }}</div>
    </div>

    <div class="info-card blue">
        <div class="info-card-header">
            <div class="info-card-icon">
                <i class="fas fa-building"></i>
            </div>
            <div>
                <div class="info-card-title">Vendor</div>
            </div>
        </div>
        <div class="info-card-value">{{ $rfq->customerInfo->company ?? '-' }}</div>
    </div>

    <div class="info-card amber">
        <div class="info-card-header">
            <div class="info-card-icon">
                <i class="fas fa-tag"></i>
            </div>
            <div>
                <div class="info-card-title">RFQ Type</div>
            </div>
        </div>
        <div class="info-card-value">{{ $rfq->rfq_type ?? '-' }}</div>
    </div>

    <div class="info-card green">
        <div class="info-card-header">
            <div class="info-card-icon">
                <i class="fas fa-info-circle"></i>
            </div>
            <div>
                <div class="info-card-title">Status</div>
            </div>
        </div>
        <div class="info-card-value">
            <span class="badge {{ $rfq->status == 'approved' ? 'bg-success' : ($rfq->status == 'rejected' ? 'bg-danger' : 'bg-secondary') }}">
                {{ ucfirst($rfq->status ?? 'pending') }}
            </span>
        </div>
    </div>
</div>

<!-- Section 1: RFQ Details (Teal) -->
<div class="section-card teal">
    <div class="section-header">
        <i class="fas fa-file-alt"></i>
        RFQ Information
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-md-6">
                <div class="detail-field">
                    <label>RFQ Number</label>
                    <div class="value">{{ $rfq->rfq_no }}</div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="detail-field">
                    <label>RFQ Date</label>
                    <div class="value">{{ $rfq->rfq_date }}</div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="detail-field">
                    <label>RFQ Type</label>
                    <div class="value">{{ $rfq->rfq_type ?? '-' }}</div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="detail-field">
                    <label>Status</label>
                    <div class="value">
                        <span class="badge {{ $rfq->status == 'approved' ? 'bg-success' : ($rfq->status == 'rejected' ? 'bg-danger' : 'bg-secondary') }}">
                            {{ ucfirst($rfq->status ?? 'pending') }}
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Section 2: Vendor Information (Blue) -->
<div class="section-card blue">
    <div class="section-header">
        <i class="fas fa-building"></i>
        Vendor Information
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-md-6">
                <div class="detail-field">
                    <label>Vendor Name</label>
                    <div class="value">{{ $rfq->customerInfo->company ?? '-' }}</div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="detail-field">
                    <label>Vendor Reference No</label>
                    <div class="value">{{ $rfq->vendor_reference_no ?? '-' }}</div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Section 3: Additional Information (Cyan) -->
<div class="section-card cyan">
    <div class="section-header">
        <i class="fas fa-info-circle"></i>
        Additional Information
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-md-6">
                <div class="detail-field">
                    <label>Delivery Terms</label>
                    <div class="value">{{ $rfq->delivery_terms ?? '-' }}</div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="detail-field">
                    <label>Description</label>
                    <div class="value">{{ $rfq->description ?? '-' }}</div>
                </div>
            </div>
            <div class="col-md-12">
                <div class="detail-field">
                    <label>Note</label>
                    <div class="value">{{ $rfq->note ?? '-' }}</div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Section 4: RFQ Items (Amber) -->
<div class="section-card amber">
    <div class="section-header">
        <i class="fas fa-boxes"></i>
        RFQ Items
    </div>
    <div class="card-body">
        @if ($rfq->items->count())
            <div class="table-responsive">
                <table class="items-table">
                    <thead>
                        <tr>
                            <th width="50">#</th>
                            <th>Item</th>
                            <th>Description</th>
                            <th width="120">Quantity</th>
                            <th width="100">UOM</th>
                            <th width="140">Required By</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($rfq->items as $index => $item)
                            <tr>
                                <td>{{ $index + 1 }}</td>
                                <td>{{ $item->stockItem->item_name ?? '-' }}</td>
                                <td>{{ $item->description ?? '-' }}</td>
                                <td>{{ $item->quantity ?? '-' }}</td>
                                <td>{{ $item->uom ?? '-' }}</td>
                                <td>{{ $item->required_by ?? '-' }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @else
            <div class="no-items">
                <i class="fas fa-inbox fa-2x mb-2"></i>
                <p>No items added to this RFQ.</p>
            </div>
        @endif
    </div>
</div>

<!-- Section 5: Attachments (Slate) -->
<div class="section-card slate">
    <div class="section-header">
        <i class="fas fa-paperclip"></i>
        Attachments
    </div>
    <div class="card-body">
        @php
            $hasFiles = false;
            $allFiles = [];
            foreach (['drawing' => 'Drawing File', 'material_spec' => 'Material Specification', 'rfq_form' => 'RFQ Form', 'annexure' => 'Annexure'] as $type => $label) {
                $files = $rfq->rfqFiles->where('file_type', $type);
                if ($files->count()) {
                    $hasFiles = true;
                    foreach ($files as $file) {
                        $allFiles[] = ['file' => $file, 'label' => $label];
                    }
                }
            }
        @endphp

        @if ($hasFiles)
            <div class="attachments-grid">
                @foreach ($allFiles as $fileData)
                    <a href="{{ asset('storage/' . $fileData['file']->file_path) }}"
                       target="_blank"
                       class="attachment-item"
                       title="{{ $fileData['file']->file_name }}">
                        <i class="fas fa-file-download"></i>
                        <span>{{ $fileData['file']->file_name }}</span>
                    </a>
                @endforeach
            </div>
        @else
            <div class="no-attachments">
                <i class="fas fa-paperclip fa-2x mb-2"></i>
                <p>No attachments available.</p>
            </div>
        @endif
    </div>
</div>

<!-- Action Buttons -->
<div class="action-buttons">
    <a href="{{ route('superadmin.purchasebom.rfq.print', $rfq->id) }}" class="btn btn-success" target="_blank">
        <i class="fa fa-print"></i> Print
    </a>
    <a href="{{ route('superadmin.purchasebom.rfq.rfqdetails') }}" class="btn btn-secondary">
        <i class="fa fa-arrow-left"></i> Back to List
    </a>
</div>

@endsection

@section('scripts')
<script>
// ==================== LIVE DATE & TIME ====================
function updateDateTime() {
    const now = new Date();
    const timeOptions = { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: true };
    document.getElementById('currentTime').textContent = now.toLocaleTimeString('en-US', timeOptions);
}
setInterval(updateDateTime, 1000);
updateDateTime();
</script>
@endsection