@extends('layouts.dashboard.superadminapp')

@section('title', 'Purchase Order 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;
    }

    .status-badge {
        padding: 0.375rem 0.875rem;
        border-radius: 9999px;
        font-weight: 500;
        font-size: 0.8125rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        display: inline-block;
    }

    .status-badge.approved {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        color: #ffffff;
    }

    .status-badge.rejected {
        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
        color: #ffffff;
    }

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

    /* 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.cyan .section-header {
        background: linear-gradient(135deg, #22d3ee 0%, #06b6d4 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;
        font-size: 0.875rem;
    }

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

    /* Summary Table */
    .summary-table {
        background: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%);
        border-radius: 0.75rem;
        padding: 1.5rem;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    .summary-table table {
        margin: 0;
    }

    .summary-table tr td {
        padding: 0.5rem 0;
        border: none;
        color: #475569;
        font-size: 0.9375rem;
    }

    .summary-table tr.grand-total td {
        font-size: 1.125rem;
        color: #0891b2;
        padding-top: 1rem;
        border-top: 2px solid #06b6d4;
    }

    .amount-in-words {
        background: #ffffff;
        padding: 1rem 1.25rem;
        border-radius: 0.5rem;
        border-left: 4px solid #06b6d4;
    }

    /* 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-success {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        color: #ffffff;
    }

    .btn-success:hover {
        background: linear-gradient(135deg, #059669 0%, #047857 100%);
        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
    }

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

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

        .table {
            font-size: 0.8125rem;
        }
    }
</style>
@endsection

@section('content')

<!-- Modern Page Header -->
<div class="modern-page-header">
    <h1>
        <i class="fas fa-shopping-bag" style="color: #06b6d4;"></i>
        Purchase Order Details
    </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">PO Number</div>
            </div>
        </div>
        <div class="info-card-value">{{ $po->purchase_order_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">PO Date</div>
            </div>
        </div>
        <div class="info-card-value">{{ \Carbon\Carbon::parse($po->purchase_order_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-check-circle"></i>
            </div>
            <div>
                <div class="info-card-title">Status</div>
            </div>
        </div>
        <div class="info-card-value">
            <span class="status-badge {{ $po->status === 'approved' ? 'approved' : ($po->status === 'rejected' ? 'rejected' : 'pending') }}">
                {{ ucfirst($po->status ?? 'pending') }}
            </span>
        </div>
    </div>

    <div class="info-card teal">
        <div class="info-card-header">
            <div class="info-card-icon">
                <i class="fas fa-rupee-sign"></i>
            </div>
            <div>
                <div class="info-card-title">Grand Total</div>
            </div>
        </div>
        <div class="info-card-value">₹{{ number_format($po->grand_total, 2) }}</div>
    </div>
</div>

<!-- Section 1: Vendor Information -->
<div class="section-card teal">
    <div class="section-header">
        <i class="fas fa-building"></i>
        Vendor Information
    </div>
    <div class="card-body">
        <div class="detail-row">
            <div class="detail-item">
                <div class="detail-label">Vendor Name</div>
                <div class="detail-value">{{ $po->vendor->company ?? $po->company_name }}</div>
            </div>
            <div class="detail-item">
                <div class="detail-label">Vendor Reference No</div>
                <div class="detail-value">{{ $po->customer_ref_no ?? '-' }}</div>
            </div>
            <div class="detail-item">
                <div class="detail-label">GSTN</div>
                <div class="detail-value">{{ $po->company_gstn ?? '-' }}</div>
            </div>
        </div>

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

<!-- Section 2: Reference Information -->
<div class="section-card amber">
    <div class="section-header">
        <i class="fas fa-file-invoice"></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">{{ $po->quotation_no ?? '-' }}</div>
            </div>
            <div class="detail-item">
                <div class="detail-label">Quotation Date</div>
                <div class="detail-value">{{ $po->quotation_date ? \Carbon\Carbon::parse($po->quotation_date)->format('d M Y') : '-' }}</div>
            </div>
            <div class="detail-item">
                <div class="detail-label">RFQ No</div>
                <div class="detail-value">{{ $po->rfq_no ?? '-' }}</div>
            </div>
            <div class="detail-item">
                <div class="detail-label">RFQ Date</div>
                <div class="detail-value">{{ $po->rfq_date ? \Carbon\Carbon::parse($po->rfq_date)->format('d M Y') : '-' }}</div>
            </div>
        </div>
    </div>
</div>

<!-- Section 3: Additional Details -->
<div class="section-card cyan">
    <div class="section-header">
        <i class="fas fa-info-circle"></i>
        Additional Details
    </div>
    <div class="card-body">
        <div class="detail-row">
            <div class="detail-item">
                <div class="detail-label">Delivery Terms</div>
                <div class="detail-value">{{ $po->delivery_terms ?? '-' }}</div>
            </div>
            <div class="detail-item">
                <div class="detail-label">Additional Charges</div>
                <div class="detail-value">{{ $po->additional_charges ?? '-' }}</div>
            </div>
        </div>

        <div class="detail-row">
            <div class="detail-item">
                <div class="detail-label">Note I</div>
                <div class="detail-value">{{ $po->description ?? '-' }}</div>
            </div>
            <div class="detail-item">
                <div class="detail-label">Note II</div>
                <div class="detail-value">{{ $po->note ?? '-' }}</div>
            </div>
        </div>

        <div class="detail-row">
            <div class="detail-item">
                <div class="detail-label">Bill To</div>
                <div class="detail-value">{{ $po->bill_address ?? '-' }}</div>
            </div>
            <div class="detail-item">
                <div class="detail-label">Ship To</div>
                <div class="detail-value">{{ $po->ship_address ?? '-' }}</div>
            </div>
        </div>
    </div>
</div>

<!-- Section 4: Product Details -->
<div class="section-card green">
    <div class="section-header">
        <i class="fas fa-cubes"></i>
        Product Details
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-bordered table-sm">
                <thead>
                    <tr>
                        <th>Sl No.</th>
                        <th>Item</th>
                        <th>Description</th>
                        <th>Req By Date</th>
                        <th class="text-right">Qty</th>
                        <th>UOM</th>
                        <th class="text-right">Unit Rate</th>
                        <th class="text-right">TDS %</th>
                        <th class="text-right">Discount %</th>
                        <th class="text-right">Value</th>
                        <th class="text-right">SGST %</th>
                        <th class="text-right">CGST %</th>
                        <th class="text-right">IGST %</th>
                        <th class="text-right">Amount</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($po->items as $item)
                        <tr>
                            <td>{{ $loop->iteration }}</td>
                            <td>{{ $item->stockItem->item_name ?? $item->item }}</td>
                            <td>{{ $item->description ?? '-' }}</td>
                            <td>{{ $item->req_by_date ? \Carbon\Carbon::parse($item->req_by_date)->format('d M Y') : '-' }}</td>
                            <td class="text-right">{{ $item->quantity }}</td>
                            <td>{{ $item->uom }}</td>
                            <td class="text-right">{{ number_format($item->unit_rate, 2) }}</td>
                            <td class="text-right">{{ $item->tds ?? 0 }}%</td>
                            <td class="text-right">{{ $item->discount ?? 0 }}%</td>
                            <td class="text-right">{{ number_format($item->value, 2) }}</td>
                            <td class="text-right">{{ $item->sgst ?? 0 }}%</td>
                            <td class="text-right">{{ $item->cgst ?? 0 }}%</td>
                            <td class="text-right">{{ $item->igst ?? 0 }}%</td>
                            <td class="text-right font-weight-bold">{{ number_format($item->amount, 2) }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Section 5: Summary -->
<div class="section-card teal">
    <div class="section-header">
        <i class="fas fa-calculator"></i>
        Summary
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-md-6">
                <div class="amount-in-words">
                    <div class="detail-label mb-2">Grand Total in Words</div>
                    <div class="detail-value" style="color: #06b6d4;">{{ $po->inr_in_words ?? '-' }}</div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="summary-table">
                    <table class="table table-sm table-borderless">
                        <tr>
                            <td class="text-right">Sub Total:</td>
                            <td class="text-right font-weight-bold" width="150">₹{{ number_format($po->subtotal, 2) }}</td>
                        </tr>
                        <tr>
                            <td class="text-right">SGST Amount:</td>
                            <td class="text-right">₹{{ number_format($po->sgst_amount, 2) }}</td>
                        </tr>
                        <tr>
                            <td class="text-right">CGST Amount:</td>
                            <td class="text-right">₹{{ number_format($po->cgst_amount, 2) }}</td>
                        </tr>
                        <tr>
                            <td class="text-right">IGST Amount:</td>
                            <td class="text-right">₹{{ number_format($po->igst_amount, 2) }}</td>
                        </tr>
                        <tr>
                            <td class="text-right">Round Up:</td>
                            <td class="text-right">₹{{ number_format($po->round_up, 2) }}</td>
                        </tr>
                        <tr class="grand-total">
                            <td class="text-right font-weight-bold">Grand Total:</td>
                            <td class="text-right font-weight-bold">₹{{ number_format($po->grand_total, 2) }}</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Action Buttons -->
<div class="d-flex justify-content-end gap-2 mb-4">
    <a href="{{ route('superadmin.purchase.order.edit', $po->id) }}" class="btn btn-warning">
        <i class="fa fa-edit"></i> Edit
    </a>
    <a href="{{ route('superadmin.purchase.order.print', $po->id) }}" class="btn btn-success" target="_blank">
        <i class="fa fa-print"></i> Print
    </a>
    <a href="{{ route('superadmin.purchase.purchasedetails') }}" class="btn btn-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
