@extends('layouts.dashboard.superadminapp')

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

@section('styles')
<style>
    /* ===== Modern Compact Page Header ===== */
    .page-header-compact {
        background: linear-gradient(135deg, #ffffff 0%, #f0fdfa 100%);
        border-radius: 0.75rem;
        padding: 0.5rem 1.25rem;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        margin-bottom: 1.25rem;
        border-left: 4px solid #06b6d4;
    }
    .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;
    }
    .datetime-display {
        display: flex;
        gap: 0.75rem;
        font-size: 0.875rem;
        color: #64748b;
        align-items: center;
    }
    .datetime-display .time {
        background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
        color: #fff;
        padding: 0.375rem 0.875rem;
        border-radius: 0.5rem;
        font-weight: 600;
        font-family: 'Courier New', monospace;
        box-shadow: 0 2px 4px rgba(6, 182, 212, 0.3);
    }

    /* ===== Stat Cards ===== */
    .stat-card {
        background: #ffffff;
        border-radius: 0.75rem;
        padding: 1.25rem;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        border-left: 4px solid;
        transition: all 0.3s ease;
        margin-bottom: 1rem;
        position: relative;
        overflow: hidden;
    }
    .stat-card::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 100px;
        height: 100px;
        opacity: 0.1;
        background-size: contain;
    }
    .stat-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 16px rgba(0,0,0,0.15);
    }
    .stat-card.teal {
        border-left-color: #06b6d4;
        background: linear-gradient(135deg, #ffffff 0%, #ecfeff 100%);
    }
    .stat-card.cyan {
        border-left-color: #0891b2;
        background: linear-gradient(135deg, #ffffff 0%, #cffafe 100%);
    }
    .stat-card.blue {
        border-left-color: #3b82f6;
        background: linear-gradient(135deg, #ffffff 0%, #eff6ff 100%);
    }
    .stat-card.amber {
        border-left-color: #f59e0b;
        background: linear-gradient(135deg, #ffffff 0%, #fffbeb 100%);
    }
    .stat-label {
        font-size: 0.75rem;
        text-transform: uppercase;
        color: #64748b;
        font-weight: 600;
        margin-bottom: 0.5rem;
        letter-spacing: 0.5px;
    }
    .stat-value {
        font-size: 1.75rem;
        font-weight: 700;
        color: #1e293b;
        line-height: 1;
    }
    .stat-icon {
        position: absolute;
        right: 1rem;
        top: 50%;
        transform: translateY(-50%);
        font-size: 2.5rem;
        opacity: 0.15;
    }
    .stat-card.teal .stat-icon { color: #06b6d4; }
    .stat-card.cyan .stat-icon { color: #0891b2; }
    .stat-card.blue .stat-icon { color: #3b82f6; }
    .stat-card.amber .stat-icon { color: #f59e0b; }

    /* ===== DataTable Card ===== */
    .datatable-card {
        border: none;
        border-radius: 0.75rem;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        overflow: hidden;
    }
    .datatable-card .card-header {
        background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
        padding: 1rem 1.25rem;
        border: none;
    }
    .datatable-card .card-header h6 {
        color: #fff;
        font-weight: 600;
        font-size: 1rem;
        margin: 0;
    }
    .datatable-card .card-body {
        padding: 0;
    }

    /* ===== Table Styling ===== */
    #rfqTable {
        margin-bottom: 0 !important;
    }
    #rfqTable thead th {
        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
        color: #475569;
        font-weight: 600;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        padding: 0.875rem 0.75rem;
        border-bottom: 2px solid #cbd5e1;
        white-space: nowrap;
    }
    #rfqTable tbody td {
        padding: 0.875rem 0.75rem;
        font-size: 0.875rem;
        vertical-align: middle;
        border-bottom: 1px solid #e2e8f0;
    }
    #rfqTable tbody tr {
        transition: all 0.15s ease;
    }
    #rfqTable tbody tr:hover {
        background: #f0f9ff;
        transform: scale(1.001);
    }

    /* ===== 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: 0.375rem;
        transition: all 0.2s;
        border: none;
    }
    .table-actions .btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }
    .table-actions .btn-secondary {
        background: linear-gradient(135deg, #64748b 0%, #475569 100%);
    }
    .table-actions .btn-info {
        background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    }
    .table-actions .btn-warning {
        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    }
    .table-actions .btn-success {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    }
    .table-actions .btn-danger {
        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    }

    /* ===== Status Badges ===== */
    .badge {
        padding: 0.375rem 0.75rem;
        border-radius: 9999px;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    .badge.bg-success {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
        color: #fff !important;
    }
    .badge.bg-danger {
        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
        color: #fff !important;
    }
    .badge.bg-secondary {
        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
        color: #fff !important;
    }

    /* ===== Add Button ===== */
    .btn-add-new {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        color: #fff;
        border: none;
        padding: 0.5rem 1.25rem;
        border-radius: 0.5rem;
        font-weight: 600;
        font-size: 0.875rem;
        box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
        transition: all 0.2s;
    }
    .btn-add-new:hover {
        background: linear-gradient(135deg, #059669 0%, #047857 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(16, 185, 129, 0.4);
        color: #fff;
    }

    /* ===== Toast Notification ===== */
    .toast-notification {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 9999;
        min-width: 300px;
        background: #fff;
        border-radius: 0.75rem;
        box-shadow: 0 8px 24px rgba(0,0,0,0.2);
        padding: 1rem 1.25rem;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        animation: slideInRight 0.3s ease;
    }
    @keyframes slideInRight {
        from { transform: translateX(100%); opacity: 0; }
        to { transform: translateX(0); opacity: 1; }
    }
    .toast-notification.success {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        color: #fff;
    }
    .toast-notification.error {
        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
        color: #fff;
    }
    .toast-notification i {
        font-size: 1.25rem;
    }
    .toast-notification .close {
        margin-left: auto;
        background: rgba(255,255,255,0.2);
        border: none;
        color: #fff;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s;
    }
    .toast-notification .close:hover {
        background: rgba(255,255,255,0.3);
    }

    /* ===== Responsive ===== */
    @media (max-width: 768px) {
        .page-header-compact {
            flex-direction: column;
            align-items: flex-start !important;
            gap: 0.75rem;
        }
        .stat-card {
            margin-bottom: 0.75rem;
        }
        .table-actions {
            flex-direction: column;
        }
    }
</style>
@endsection

@section('content')
<div class="container-fluid">

    <!-- 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 List
        </h1>
        <div class="datetime-display">
            <span class="date">
                <i class="far fa-calendar mr-1"></i>
                <span id="displayDate"></span>
            </span>
            <span class="time">
                <i class="far fa-clock mr-1"></i>
                <span id="currentTime"></span>
            </span>
        </div>
    </div>

    <!-- Stat Cards -->
    <div class="row">
        <div class="col-xl-3 col-md-6">
            <div class="stat-card teal">
                <i class="fas fa-file-alt stat-icon"></i>
                <div class="stat-label">Total RFQs</div>
                <div class="stat-value">{{ $rfqs->count() }}</div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="stat-card cyan">
                <i class="fas fa-clock stat-icon"></i>
                <div class="stat-label">Pending</div>
                <div class="stat-value">{{ $rfqs->where('status', 'pending')->count() }}</div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="stat-card blue">
                <i class="fas fa-check-circle stat-icon"></i>
                <div class="stat-label">Approved</div>
                <div class="stat-value">{{ $rfqs->where('status', 'approved')->count() }}</div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="stat-card amber">
                <i class="fas fa-times-circle stat-icon"></i>
                <div class="stat-label">Rejected</div>
                <div class="stat-value">{{ $rfqs->where('status', 'rejected')->count() }}</div>
            </div>
        </div>
    </div>

    <!-- DataTable Card -->
    <div class="card datatable-card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h6>
                <i class="fas fa-table mr-2"></i>
                Purchase RFQ Directory
            </h6>
            <a href="{{ route('superadmin.purchasebom.rfq.rfq') }}" class="btn btn-add-new">
                <i class="fas fa-plus mr-1"></i> Add New RFQ
            </a>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover" id="rfqTable">
                    <thead>
                        <tr>
                            <th>RFQ No</th>
                            <th>Date</th>
                            <th>Vendor</th>
                            <th>Vendor Ref No</th>
                            <th>RFQ Type</th>
                            <th class="text-center">Status</th>
                            <th class="text-center">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($rfqs as $rfq)
                            <tr id="row-{{ $rfq->id }}">
                                <td><strong>{{ $rfq->rfq_no }}</strong></td>
                                <td>{{ \Carbon\Carbon::parse($rfq->rfq_date)->format('d M Y') }}</td>
                                <td>{{ $rfq->customerInfo ? $rfq->customerInfo->company : '-' }}</td>
                                <td>{{ $rfq->vendor_reference_no ?: '-' }}</td>
                                <td><span class="badge bg-info">{{ $rfq->rfq_type }}</span></td>
                                <td class="text-center">
                                    @php
                                        $status = $rfq->status ?? 'pending';
                                        $statusClass = $status === 'approved' ? 'bg-success' : ($status === 'rejected' ? 'bg-danger' : 'bg-secondary');
                                    @endphp
                                    <span class="badge {{ $statusClass }}">{{ ucfirst($status) }}</span>
                                </td>
                                <td>
                                    <div class="table-actions">
                                        <a href="{{ route('superadmin.purchasebom.rfq.view', $rfq->id) }}" class="btn btn-info btn-sm" title="View">
                                            <i class="fa fa-eye"></i>
                                        </a>
                                        <a href="{{ route('superadmin.purchasebom.rfq.print', $rfq->id) }}" target="_blank" class="btn btn-secondary btn-sm" title="Print">
                                            <i class="fa fa-print"></i>
                                        </a>
                                        @if(($rfq->status ?? 'pending') === 'pending')
                                            <button class="btn btn-success btn-sm approve-btn" data-id="{{ $rfq->id }}" data-rfq="{{ $rfq->rfq_no }}" title="Approve">
                                                <i class="fa fa-check"></i>
                                            </button>
                                            <button class="btn btn-warning btn-sm reject-btn" data-id="{{ $rfq->id }}" data-rfq="{{ $rfq->rfq_no }}" title="Reject">
                                                <i class="fa fa-times"></i>
                                            </button>
                                            <a href="{{ route('superadmin.purchasebom.rfq.edit', $rfq->id) }}" class="btn btn-warning btn-sm" title="Edit">
                                                <i class="fa fa-edit"></i>
                                            </a>
                                        @endif
                                        <button class="btn btn-danger btn-sm delete-btn" data-id="{{ $rfq->id }}" data-rfq="{{ $rfq->rfq_no }}" title="Delete">
                                            <i class="fa fa-trash"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>

</div>
@endsection

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

    document.getElementById('displayDate').textContent = now.toLocaleDateString('en-US', dateOptions);
    document.getElementById('currentTime').textContent = now.toLocaleTimeString('en-US', timeOptions);
}
updateDateTime();
setInterval(updateDateTime, 1000);

// ===== DataTable Initialization =====
$(document).ready(function() {
    $('#rfqTable').DataTable({
        pageLength: 10,
        order: [[0, 'desc']],
        language: {
            search: "Search RFQs:",
            lengthMenu: "Show _MENU_ entries",
            info: "Showing _START_ to _END_ of _TOTAL_ RFQs",
            infoEmpty: "No RFQs found",
            zeroRecords: "No matching RFQs found"
        },
        dom: "<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
             "<'row'<'col-sm-12'tr>>" +
             "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>"
    });
});

// ===== Toast Notification Function =====
function showToast(type, message) {
    const toast = document.createElement('div');
    toast.className = `toast-notification ${type}`;
    toast.innerHTML = `
        <i class="fas fa-${type === 'success' ? 'check-circle' : 'exclamation-circle'}"></i>
        <span>${message}</span>
        <button class="close">&times;</button>
    `;
    document.body.appendChild(toast);

    toast.querySelector('.close').addEventListener('click', () => {
        toast.remove();
    });

    setTimeout(() => {
        toast.style.opacity = '0';
        setTimeout(() => toast.remove(), 300);
    }, 3500);
}

// ===== Approve RFQ =====
$(document).on('click', '.approve-btn', function() {
    const id = $(this).data('id');
    const rfqNo = $(this).data('rfq');

    if (!confirm(`Are you sure you want to approve RFQ ${rfqNo}?`)) return;

    $.post("{{ url('superadmin/purchase/rfq') }}/" + id + "/approve", {
        _token: "{{ csrf_token() }}"
    })
    .done(function(response) {
        showToast('success', response.message || 'RFQ approved successfully!');
        setTimeout(() => location.reload(), 1500);
    })
    .fail(function() {
        showToast('error', 'Failed to approve RFQ. Please try again.');
    });
});

// ===== Reject RFQ =====
$(document).on('click', '.reject-btn', function() {
    const id = $(this).data('id');
    const rfqNo = $(this).data('rfq');

    if (!confirm(`Are you sure you want to reject RFQ ${rfqNo}?`)) return;

    $.post("{{ url('superadmin/purchase/rfq') }}/" + id + "/reject", {
        _token: "{{ csrf_token() }}"
    })
    .done(function(response) {
        showToast('success', response.message || 'RFQ rejected successfully!');
        setTimeout(() => location.reload(), 1500);
    })
    .fail(function() {
        showToast('error', 'Failed to reject RFQ. Please try again.');
    });
});

// ===== Delete RFQ =====
$(document).on('click', '.delete-btn', function() {
    const id = $(this).data('id');
    const rfqNo = $(this).data('rfq');

    if (!confirm(`Are you sure you want to delete RFQ ${rfqNo}? This action cannot be undone.`)) return;

    $.ajax({
        url: "{{ url('superadmin/purchase/rfq') }}/" + id,
        type: 'DELETE',
        data: { _token: "{{ csrf_token() }}" },
        success: function(response) {
            $('#row-' + id).fadeOut(500, function() { $(this).remove(); });
            showToast('success', 'RFQ deleted successfully!');
            setTimeout(() => location.reload(), 1500);
        },
        error: function() {
            showToast('error', 'Failed to delete RFQ. Please try again.');
        }
    });
});
</script>
@endsection