@extends('layouts.dashboard.superadminapp')

@section('title', 'GRN Details')

@section('styles')
<style>
    /* Modern Page Header */
    .modern-page-header {
        background: linear-gradient(135deg, #ffffff 0%, #f0fdfa 100%);
        border-radius: 1rem;
        padding: 1.25rem 1.5rem;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        margin-bottom: 1.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 1rem;
    }

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

    .header-right {
        display: flex;
        align-items: center;
        gap: 1.5rem;
    }

    .display-date {
        font-size: 0.875rem;
        color: #64748b;
        font-weight: 500;
    }

    .display-time {
        font-family: 'SF Mono', 'Monaco', monospace;
        background: #ecfeff;
        color: #0e7490;
        padding: 0.375rem 0.75rem;
        border-radius: 0.5rem;
        font-size: 0.875rem;
        font-weight: 600;
    }

    /* Info Cards Grid */
    .info-cards-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

    .info-card {
        background: #ffffff;
        border-radius: 1rem;
        padding: 1.25rem;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        border: 1px solid #e2e8f0;
        transition: all 0.2s;
    }

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

    .info-card.teal {
        border-left: 4px solid #06b6d4;
    }

    .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.125rem;
    }

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

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

    .info-card-value {
        font-size: 1.125rem;
        font-weight: 600;
        color: #0f172a;
        margin-top: 0.25rem;
    }

    /* Section Cards */
    .section-card {
        background: #ffffff;
        border-radius: 1rem;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        margin-bottom: 1.5rem;
        overflow: hidden;
        border: 1px solid #e2e8f0;
    }

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

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

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

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

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

    /* Detail Row */
    .detail-row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1.25rem;
        margin-bottom: 1rem;
    }

    .detail-item {
        display: flex;
        flex-direction: column;
        gap: 0.375rem;
    }

    .detail-label {
        font-size: 0.8125rem;
        font-weight: 500;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }

    .detail-value {
        font-size: 0.9375rem;
        font-weight: 600;
        color: #0f172a;
    }

    /* Enhanced Table */
    .table-responsive {
        border-radius: 0.75rem;
        overflow: hidden;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    .table {
        margin-bottom: 0;
    }

    .table thead th {
        background: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%);
        border-bottom: 2px solid #06b6d4;
        color: #0e7490;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 0.75rem;
        letter-spacing: 0.5px;
        padding: 1rem;
        white-space: nowrap;
    }

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

    .table tbody tr:hover {
        background: #f0fdfa;
    }

    .table tbody td {
        padding: 1rem;
        vertical-align: middle;
        border-bottom: 1px solid #e2e8f0;
        color: #475569;
    }

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

    /* Modern Buttons */
    .btn {
        border-radius: 0.5rem;
        padding: 0.625rem 1.25rem;
        font-weight: 500;
        transition: all 0.2s;
        border: none;
        font-size: 0.875rem;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
    }

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

    .btn-warning {
        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
        color: #ffffff;
    }

    .btn-warning:hover {
        background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
        box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
    }

    .btn-primary {
        background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
        color: #ffffff;
    }

    .btn-primary:hover {
        background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);
        box-shadow: 0 4px 12px rgba(6, 182, 212, 0.4);
    }

    .btn-outline-secondary {
        background: transparent;
        border: 2px solid #cbd5e1;
        color: #64748b;
    }

    .btn-outline-secondary:hover {
        background: #f8fafc;
        border-color: #94a3b8;
        color: #475569;
    }

    .btn-sm {
        padding: 0.375rem 0.875rem;
        font-size: 0.8125rem;
    }

    /* Responsive */
    @media (max-width: 768px) {
        .modern-page-header {
            flex-direction: column;
            align-items: flex-start;
        }

        .header-right {
            width: 100%;
            justify-content: space-between;
        }

        .info-cards-grid {
            grid-template-columns: 1fr;
        }
    }
</style>
@endsection

@section('content')

<!-- Modern Page Header -->
<div class="modern-page-header">
    <h1>
        <i class="fas fa-file-invoice" style="color: #06b6d4;"></i>
        GRN Details - {{ $grn->grn_no }}
    </h1>
    <div class="header-right">
        <div class="display-date">
            <span id="day">{{ now()->format('l') }}</span>,
            <span id="daynum">{{ now()->format('d') }}</span>
            <span id="month">{{ now()->format('F') }}</span>
            <span id="year">{{ now()->format('Y') }}</span>
        </div>
        <div class="display-time" id="current-time">{{ now()->format('h:i:s A') }}</div>
    </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">GRN Number</div>
            </div>
        </div>
        <div class="info-card-value">{{ $grn->grn_no ?? '-' }}</div>
    </div>

    <div class="info-card teal">
        <div class="info-card-header">
            <div class="info-card-icon">
                <i class="fas fa-calendar"></i>
            </div>
            <div>
                <div class="info-card-title">GRN Date</div>
            </div>
        </div>
        <div class="info-card-value">{{ $grn->grn_date ? \Carbon\Carbon::parse($grn->grn_date)->format('d M Y') : '-' }}</div>
    </div>

    <div class="info-card teal">
        <div class="info-card-header">
            <div class="info-card-icon">
                <i class="fas fa-shopping-cart"></i>
            </div>
            <div>
                <div class="info-card-title">Order Number</div>
            </div>
        </div>
        <div class="info-card-value">{{ $grn->order_no ?? '-' }}</div>
    </div>

    <div class="info-card teal">
        <div class="info-card-header">
            <div class="info-card-icon">
                <i class="fas fa-building"></i>
            </div>
            <div>
                <div class="info-card-title">Company</div>
            </div>
        </div>
        <div class="info-card-value">{{ $grn->company_name ?? '-' }}</div>
    </div>
</div>

<!-- Section 1: Order & Company Details -->
<div class="section-card teal">
    <div class="section-header">
        <i class="fas fa-building"></i>
        Order & Company Details
    </div>
    <div class="card-body">
        <div class="detail-row">
            <div class="detail-item">
                <div class="detail-label">Order Date</div>
                <div class="detail-value">{{ $grn->order_date ? \Carbon\Carbon::parse($grn->order_date)->format('d M Y') : '-' }}</div>
            </div>
            <div class="detail-item">
                <div class="detail-label">Reference No</div>
                <div class="detail-value">{{ $grn->order_ref_no ?? '-' }}</div>
            </div>
            <div class="detail-item">
                <div class="detail-label">GST No</div>
                <div class="detail-value">{{ $grn->company_gst ?? '-' }}</div>
            </div>
        </div>

        <div class="detail-row">
            <div class="detail-item">
                <div class="detail-label">Address</div>
                <div class="detail-value">{{ $grn->company_address ?? '-' }}</div>
            </div>
            <div class="detail-item">
                <div class="detail-label">Phone</div>
                <div class="detail-value">{{ $grn->company_phone ?? '-' }}</div>
            </div>
            <div class="detail-item">
                <div class="detail-label">Email</div>
                <div class="detail-value">{{ $grn->company_email ?? '-' }}</div>
            </div>
        </div>

        <div class="detail-row">
            <div class="detail-item">
                <div class="detail-label">Product Type</div>
                <div class="detail-value">{{ $grn->product_type ?? '-' }}</div>
            </div>
            <div class="detail-item">
                <div class="detail-label">Challan File</div>
                <div class="detail-value">
                    @if ($grn->challan_file)
                        <a href="{{ asset('storage/' . $grn->challan_file) }}" target="_blank" class="btn btn-primary btn-sm">
                            <i class="fa fa-file-pdf"></i> View Challan
                        </a>
                    @else
                        <span class="text-muted">No challan uploaded</span>
                    @endif
                </div>
            </div>
            <div class="detail-item">
                <div class="detail-label">Description</div>
                <div class="detail-value">{{ $grn->description ?? '-' }}</div>
            </div>
        </div>
    </div>
</div>

<!-- Section 2: Reference Information -->
<div class="section-card amber">
    <div class="section-header">
        <i class="fas fa-tags"></i>
        Reference Information
    </div>
    <div class="card-body">
        <div class="detail-row">
            <div class="detail-item">
                <div class="detail-label">Quotation No</div>
                <div class="detail-value">{{ $grn->quotation_no ?? '-' }}</div>
            </div>
            <div class="detail-item">
                <div class="detail-label">Quotation Date</div>
                <div class="detail-value">{{ $grn->quotation_date ? \Carbon\Carbon::parse($grn->quotation_date)->format('d M Y') : '-' }}</div>
            </div>
            <div class="detail-item">
                <div class="detail-label">RFQ No</div>
                <div class="detail-value">{{ $grn->rfq_no ?? '-' }}</div>
            </div>
            <div class="detail-item">
                <div class="detail-label">RFQ Date</div>
                <div class="detail-value">{{ $grn->rfq_date ? \Carbon\Carbon::parse($grn->rfq_date)->format('d M Y') : '-' }}</div>
            </div>
        </div>

        <div class="detail-row">
            <div class="detail-item">
                <div class="detail-label">Part No</div>
                <div class="detail-value">{{ $grn->part_no ?? '-' }}</div>
            </div>
            <div class="detail-item">
                <div class="detail-label">Project Material No</div>
                <div class="detail-value">{{ $grn->project_material_no ?? '-' }}</div>
            </div>
            <div class="detail-item">
                <div class="detail-label">Drawing No</div>
                <div class="detail-value">{{ $grn->drawing_no ?? '-' }}</div>
            </div>
            <div class="detail-item">
                <div class="detail-label">Drawing Revision</div>
                <div class="detail-value">{{ $grn->drawing_rev ?? '-' }}</div>
            </div>
        </div>
    </div>
</div>

<!-- Section 3: Product Details -->
<div class="section-card green">
    <div class="section-header">
        <i class="fas fa-boxes"></i>
        Product Details
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-bordered table-sm">
                <thead>
                    <tr>
                        <th width="60">Sl No</th>
                        <th>Description</th>
                        <th width="100">Qty</th>
                        <th width="80">Unit</th>
                        <th width="120">Date</th>
                        <th>Supplier</th>
                        <th>Remarks</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($grn->products as $product)
                        <tr>
                            <td>{{ $product->sl_no }}</td>
                            <td>{{ $product->description ?? '-' }}</td>
                            <td>{{ number_format($product->quantity, 2) }}</td>
                            <td>{{ $product->unit ?? '-' }}</td>
                            <td>{{ $product->date ? \Carbon\Carbon::parse($product->date)->format('d M Y') : '-' }}</td>
                            <td>{{ $product->supplier ?? '-' }}</td>
                            <td>{{ $product->remarks ?? '-' }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="text-center text-muted">No Product Rows Found</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Action Buttons -->
<div class="d-flex justify-content-end gap-2 mb-4">
    <a href="{{ route('superadmin.grn.edit', $grn->id) }}" class="btn btn-warning">
        <i class="fa fa-edit"></i> Edit GRN
    </a>
    <a href="{{ route('superadmin.grn.grndetails') }}" class="btn btn-outline-secondary">
        <i class="fa fa-arrow-left"></i> Back to List
    </a>
</div>

<script>
// Live Clock Update
function updateTime() {
    const now = new Date();
    const timeString = now.toLocaleTimeString('en-US', {
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
        hour12: true
    });
    document.getElementById('current-time').textContent = timeString;
}
setInterval(updateTime, 1000);
</script>

@endsection
