@extends('layouts.dashboard.superadminapp')

@section('title', 'View Sales Order')

@section('styles')
<style>
    /* Compact Page Header */
    .page-header-compact {
        background: linear-gradient(135deg, #ffffff 0%, #f8fafc 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 #10b981;
    }
    .page-header-compact h1 {
        font-size: 1.25rem;
        font-weight: 600;
        color: #1e293b;
        margin: 0;
    }

    /* Sales Order Header Card */
    .so-header {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        color: white;
        padding: 1.25rem 1.5rem;
        border-radius: 0.75rem;
        margin-bottom: 1.25rem;
        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
    }
    .so-header h3 {
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 0.75rem;
    }
    .so-header-info {
        display: flex;
        gap: 2rem;
        flex-wrap: wrap;
        margin-top: 0.75rem;
    }
    .so-header-item label {
        font-size: 0.75rem;
        opacity: 0.9;
        display: block;
        margin-bottom: 0.25rem;
    }
    .so-header-item value {
        font-size: 1rem;
        font-weight: 600;
    }

    /* Quick Info Cards */
    .info-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;
        height: 100%;
    }
    .info-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 16px rgba(0,0,0,0.15);
    }
    .info-card.green {
        border-left-color: #10b981;
        background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
    }
    .info-card.blue {
        border-left-color: #3b82f6;
        background: linear-gradient(135deg, #ffffff 0%, #eff6ff 100%);
    }
    .info-card.amber {
        border-left-color: #f59e0b;
        background: linear-gradient(135deg, #ffffff 0%, #fffbeb 100%);
    }
    .info-card.purple {
        border-left-color: #8b5cf6;
        background: linear-gradient(135deg, #ffffff 0%, #f5f3ff 100%);
    }
    .info-card h6 {
        font-size: 0.875rem;
        font-weight: 600;
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    .info-card.green h6 { color: #059669; }
    .info-card.blue h6 { color: #2563eb; }
    .info-card.amber h6 { color: #d97706; }
    .info-card.purple h6 { color: #7c3aed; }

    /* Detail Row */
    .detail-row {
        display: flex;
        padding: 0.5rem 0;
        border-bottom: 1px solid #f1f5f9;
    }
    .detail-row:last-child {
        border-bottom: none;
    }
    .detail-label {
        font-weight: 500;
        color: #64748b;
        font-size: 0.875rem;
        min-width: 140px;
    }
    .detail-value {
        color: #1e293b;
        font-size: 0.875rem;
        font-weight: 400;
    }

    /* Product Table */
    .products-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
    }
    .products-table 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.75rem 0.5rem;
        border: 1px solid #e2e8f0;
        white-space: nowrap;
        text-align: center;
    }
    .products-table tbody td {
        padding: 0.75rem 0.5rem;
        border: 1px solid #e2e8f0;
        font-size: 0.875rem;
        color: #475569;
    }
    .products-table tbody tr:hover {
        background: #f8fafc;
    }

    /* Summary Card */
    .summary-card {
        background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
        border-radius: 0.75rem;
        padding: 1.25rem;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        border: 2px solid #d1fae5;
    }
    .summary-row {
        display: flex;
        justify-content: space-between;
        padding: 0.5rem 0;
        font-size: 0.875rem;
    }
    .summary-row.total {
        border-top: 2px solid #059669;
        margin-top: 0.5rem;
        padding-top: 0.75rem;
        font-weight: 700;
        font-size: 1rem;
        color: #059669;
    }
    .summary-label {
        color: #059669;
        font-weight: 500;
    }
    .summary-value {
        font-weight: 600;
        color: #1e293b;
    }

    /* Status Badge */
    .status-badge {
        display: inline-block;
        padding: 0.5rem 1rem;
        border-radius: 9999px;
        font-size: 0.875rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    .status-badge.pending {
        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
        color: #ffffff;
    }
    .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;
    }

    /* Action Buttons */
    .btn {
        padding: 0.625rem 1.25rem;
        font-weight: 500;
        border-radius: 0.5rem;
        transition: all 0.2s ease;
        font-size: 0.875rem;
        border: none;
    }
    .btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    .btn-info {
        background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
        color: #ffffff;
    }
    .btn-primary {
        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
        color: #ffffff;
    }
    .btn-outline-secondary {
        background: #ffffff;
        border: 2px solid #e2e8f0;
        color: #64748b;
    }
    .btn-outline-secondary:hover {
        background: #f8fafc;
        border-color: #cbd5e1;
    }

    /* Responsive */
    @media (max-width: 768px) {
        .so-header-info {
            gap: 1rem;
        }
        .info-card {
            margin-bottom: 1rem;
        }
    }
</style>
@endsection

@section('content')
    <!-- Compact Page Header -->
    <div class="page-header-compact">
        <h1><i class="fas fa-shopping-cart mr-2" style="color: #10b981;"></i>Sales Order Details</h1>
    </div>

    <!-- Sales Order Header Card -->
    <div class="so-header">
        <div class="d-flex justify-content-between align-items-start flex-wrap">
            <div>
                <h3>{{ $order->sales_order_no }}</h3>
                <div class="so-header-info">
                    <div class="so-header-item">
                        <label>Order Date</label>
                        <value>{{ \Carbon\Carbon::parse($order->sales_order_date)->format('d M Y') }}</value>
                    </div>
                    <div class="so-header-item">
                        <label>Customer</label>
                        <value>{{ $order->customer->company ?? 'N/A' }}</value>
                    </div>
                    <div class="so-header-item">
                        <label>Grand Total</label>
                        <value>₹{{ number_format($order->grand_total, 2) }}</value>
                    </div>
                </div>
            </div>
            <div>
                @if($order->status === 'approved')
                    <span class="status-badge approved">Approved</span>
                @elseif($order->status === 'rejected')
                    <span class="status-badge rejected">Rejected</span>
                @else
                    <span class="status-badge pending">Pending</span>
                @endif
            </div>
        </div>
    </div>

    <!-- Quick Info Cards -->
    <div class="row mb-4">
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="info-card green">
                <h6><i class="fas fa-hashtag"></i>Reference Numbers</h6>
                <div class="detail-row">
                    <span class="detail-label">Quotation:</span>
                    <span class="detail-value">{{ $order->quotation->quotation_no ?? 'N/A' }}</span>
                </div>
                <div class="detail-row">
                    <span class="detail-label">GRN No:</span>
                    <span class="detail-value">{{ $order->grn_no ?? 'N/A' }}</span>
                </div>
                <div class="detail-row">
                    <span class="detail-label">Customer Ref:</span>
                    <span class="detail-value">{{ $order->customer_ref_no ?? 'N/A' }}</span>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="info-card blue">
                <h6><i class="fas fa-building"></i>Company Info</h6>
                <div class="detail-row">
                    <span class="detail-label">GST No:</span>
                    <span class="detail-value">{{ $order->company_gstn ?? 'N/A' }}</span>
                </div>
                <div class="detail-row">
                    <span class="detail-label">Phone:</span>
                    <span class="detail-value">{{ $order->company_phone ?? 'N/A' }}</span>
                </div>
                <div class="detail-row">
                    <span class="detail-label">Email:</span>
                    <span class="detail-value">{{ $order->company_email ?? 'N/A' }}</span>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="info-card amber">
                <h6><i class="fas fa-file-alt"></i>RFQ & Product</h6>
                <div class="detail-row">
                    <span class="detail-label">RFQ No:</span>
                    <span class="detail-value">{{ $order->rfq_no ?? 'N/A' }}</span>
                </div>
                <div class="detail-row">
                    <span class="detail-label">Part No:</span>
                    <span class="detail-value">{{ $order->part_no ?? 'N/A' }}</span>
                </div>
                <div class="detail-row">
                    <span class="detail-label">Product Type:</span>
                    <span class="detail-value">{{ $order->product_type ?? 'N/A' }}</span>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="info-card purple">
                <h6><i class="fas fa-calculator"></i>Financial Summary</h6>
                <div class="detail-row">
                    <span class="detail-label">Sub Total:</span>
                    <span class="detail-value">₹{{ number_format($order->subtotal, 2) }}</span>
                </div>
                <div class="detail-row">
                    <span class="detail-label">Total Tax:</span>
                    <span class="detail-value">₹{{ number_format(($order->sgst_amount ?? 0) + ($order->cgst_amount ?? 0) + ($order->igst_amount ?? 0), 2) }}</span>
                </div>
                <div class="detail-row">
                    <span class="detail-label">Grand Total:</span>
                    <span class="detail-value font-weight-bold">₹{{ number_format($order->grand_total, 2) }}</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Detailed Information -->
    <div class="row">
        <!-- Address Information -->
        <div class="col-lg-6 mb-4">
            <div class="info-card blue">
                <h6><i class="fas fa-map-marker-alt"></i>Address Information</h6>
                <div class="detail-row">
                    <span class="detail-label">Company Address:</span>
                    <span class="detail-value">{{ $order->company_address ?? 'N/A' }}</span>
                </div>
                <div class="detail-row">
                    <span class="detail-label">Bill To:</span>
                    <span class="detail-value">{{ $order->bill_address ?? 'N/A' }}</span>
                </div>
                <div class="detail-row">
                    <span class="detail-label">Ship To:</span>
                    <span class="detail-value">{{ $order->ship_address ?? 'N/A' }}</span>
                </div>
            </div>
        </div>

        <!-- Technical Details -->
        <div class="col-lg-6 mb-4">
            <div class="info-card purple">
                <h6><i class="fas fa-tools"></i>Technical Details</h6>
                <div class="detail-row">
                    <span class="detail-label">Drawing No:</span>
                    <span class="detail-value">{{ $order->drawing_no ?? 'N/A' }}</span>
                </div>
                <div class="detail-row">
                    <span class="detail-label">Drawing Revision:</span>
                    <span class="detail-value">{{ $order->drawing_rev ?? 'N/A' }}</span>
                </div>
                <div class="detail-row">
                    <span class="detail-label">Project/Material No:</span>
                    <span class="detail-value">{{ $order->project_material_no ?? 'N/A' }}</span>
                </div>
                @if($order->description)
                <div class="detail-row">
                    <span class="detail-label">Description:</span>
                    <span class="detail-value">{{ $order->description }}</span>
                </div>
                @endif
            </div>
        </div>
    </div>

    <!-- Product Items -->
    @if($order->items && $order->items->count() > 0)
    <div class="info-card amber mb-4">
        <h6><i class="fas fa-list"></i>Product Items</h6>
        <div class="table-responsive">
            <table class="products-table">
                <thead>
                    <tr>
                        <th width="40">#</th>
                        <th>Material Code</th>
                        <th>HSN Code</th>
                        <th>Description</th>
                        <th>Qty</th>
                        <th>UOM</th>
                        <th>Unit Rate</th>
                        <th>Disc %</th>
                        <th>Value</th>
                        <th>SGST %</th>
                        <th>CGST %</th>
                        <th>IGST %</th>
                        <th>Amount</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($order->items as $index => $item)
                    <tr>
                        <td class="text-center">{{ $item->sl_no ?? $index + 1 }}</td>
                        <td>{{ $item->material_code ?? '-' }}</td>
                        <td>{{ $item->hsn_code ?? '-' }}</td>
                        <td>{{ $item->material_description ?? '-' }}</td>
                        <td class="text-right">{{ $item->quantity ?? '0' }}</td>
                        <td>{{ $item->uom ?? '-' }}</td>
                        <td class="text-right">₹{{ number_format($item->unit_rate ?? 0, 2) }}</td>
                        <td class="text-right">{{ $item->discount ?? '0' }}%</td>
                        <td class="text-right font-weight-bold">₹{{ number_format($item->value ?? 0, 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 ?? 0, 2) }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
    @endif

    <!-- Financial Summary -->
    <div class="row">
        <div class="col-lg-6 mb-4">
            <div class="info-card green">
                <h6><i class="fas fa-rupee-sign"></i>Amount in Words</h6>
                <div class="detail-row">
                    <span class="detail-value font-weight-bold">{{ $order->inr_in_words }}</span>
                </div>
            </div>
        </div>
        <div class="col-lg-6 mb-4">
            <div class="summary-card">
                <div class="summary-row">
                    <span class="summary-label">Sub Total:</span>
                    <span class="summary-value">₹{{ number_format($order->subtotal, 2) }}</span>
                </div>
                <div class="summary-row">
                    <span class="summary-label">SGST Amount:</span>
                    <span class="summary-value">₹{{ number_format($order->sgst_amount, 2) }}</span>
                </div>
                <div class="summary-row">
                    <span class="summary-label">CGST Amount:</span>
                    <span class="summary-value">₹{{ number_format($order->cgst_amount, 2) }}</span>
                </div>
                <div class="summary-row">
                    <span class="summary-label">IGST Amount:</span>
                    <span class="summary-value">₹{{ number_format($order->igst_amount, 2) }}</span>
                </div>
                <div class="summary-row">
                    <span class="summary-label">Round Up:</span>
                    <span class="summary-value">₹{{ number_format($order->round_up, 2) }}</span>
                </div>
                <div class="summary-row total">
                    <span>Grand Total:</span>
                    <span>₹{{ number_format($order->grand_total, 2) }}</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Action Buttons -->
    <div class="d-flex justify-content-end mb-4">
        <a href="{{ route('superadmin.sales.order.print', $order->id) }}" class="btn btn-info mr-2" target="_blank">
            <i class="fas fa-print mr-1"></i> Print
        </a>
        <a href="{{ route('superadmin.sales.order.edit', $order->id) }}" class="btn btn-primary mr-2">
            <i class="fas fa-edit mr-1"></i> Edit
        </a>
        <a href="{{ route('superadmin.sales.salesdetails') }}" class="btn btn-outline-secondary">
            <i class="fas fa-arrow-left mr-1"></i> Back to List
        </a>
    </div>
@endsection
