@extends('layouts.dashboard.superadminapp')

@section('title', 'View Tax Invoice')

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

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

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

    .datetime-display .time {
        font-size: 0.875rem;
        color: #6b7280;
        font-weight: 500;
        background: #f3f4f6;
        padding: 0.5rem 1rem;
        border-radius: 8px;
        font-family: 'SF Mono', Monaco, monospace;
    }

    /* ====== Invoice Header ====== */
    .invoice-header {
        background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
        color: #ffffff;
        border-radius: 12px;
        padding: 2rem;
        margin-bottom: 1.5rem;
        box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
    }

    .invoice-header h3 {
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 1rem;
    }

    .invoice-header-info {
        display: flex;
        gap: 2rem;
        flex-wrap: wrap;
    }

    .invoice-header-item {
        display: flex;
        flex-direction: column;
    }

    .invoice-header-item label {
        font-size: 0.75rem;
        text-transform: uppercase;
        opacity: 0.9;
        letter-spacing: 0.5px;
        margin-bottom: 0.25rem;
    }

    .invoice-header-item value {
        font-size: 1.125rem;
        font-weight: 600;
    }

    .status-badge {
        position: absolute;
        top: 2rem;
        right: 2rem;
        font-size: 0.875rem;
        padding: 0.5rem 1rem;
        border-radius: 9999px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

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

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

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

    /* ====== Info Cards ====== */
    .info-card {
        background: #ffffff;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        padding: 1.5rem;
        margin-bottom: 1.5rem;
        border-left: 4px solid;
        transition: all 0.3s ease;
    }

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

    .info-card.purple {
        border-left-color: #8b5cf6;
        background: linear-gradient(135deg, #ffffff 0%, #f5f3ff 100%);
    }

    .info-card.blue {
        border-left-color: #3b82f6;
        background: linear-gradient(135deg, #ffffff 0%, #eff6ff 100%);
    }

    .info-card.green {
        border-left-color: #10b981;
        background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
    }

    .info-card.amber {
        border-left-color: #f59e0b;
        background: linear-gradient(135deg, #ffffff 0%, #fffbeb 100%);
    }

    .info-card h5 {
        font-size: 1rem;
        font-weight: 600;
        color: #1f2937;
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .info-row {
        display: flex;
        padding: 0.75rem 0;
        border-bottom: 1px solid #f3f4f6;
    }

    .info-row:last-child {
        border-bottom: none;
    }

    .info-label {
        font-weight: 600;
        color: #6b7280;
        font-size: 0.875rem;
        flex: 0 0 150px;
    }

    .info-value {
        color: #1f2937;
        font-size: 0.875rem;
        flex: 1;
    }

    /* ====== Items Table ====== */
    .items-table-card {
        background: #ffffff;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        overflow: hidden;
        margin-bottom: 1.5rem;
    }

    .items-table-header {
        background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
        color: #ffffff;
        padding: 1rem 1.5rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .table-modern {
        margin-bottom: 0;
        font-size: 0.875rem;
    }

    .table-modern thead th {
        background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
        color: #374151;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 0.75rem;
        letter-spacing: 0.5px;
        padding: 1rem;
        border: none;
        white-space: nowrap;
    }

    .table-modern tbody tr {
        transition: all 0.2s ease;
    }

    .table-modern tbody tr:hover {
        background: linear-gradient(135deg, #faf5ff 0%, #f9fafb 100%);
    }

    .table-modern tbody td {
        padding: 1rem;
        vertical-align: middle;
        border-bottom: 1px solid #f3f4f6;
        color: #4b5563;
    }

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

    /* ====== Summary Card ====== */
    .summary-card {
        background: linear-gradient(135deg, #faf5ff 0%, #f5f3ff 100%);
        border-radius: 12px;
        padding: 1.5rem;
        box-shadow: 0 2px 8px rgba(139, 92, 246, 0.1);
        border: 2px solid #e9d5ff;
    }

    .summary-card h5 {
        color: #8b5cf6;
        font-weight: 600;
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .summary-row {
        display: flex;
        justify-content: space-between;
        padding: 0.5rem 0;
        font-size: 0.875rem;
    }

    .summary-row.grand-total {
        background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
        color: #ffffff;
        padding: 0.75rem 1rem;
        border-radius: 8px;
        margin-top: 0.5rem;
        font-size: 1rem;
        font-weight: 700;
    }

    /* ====== Action Buttons ====== */
    .btn {
        border-radius: 8px;
        padding: 0.625rem 1.25rem;
        font-weight: 500;
        transition: all 0.2s ease;
        border: none;
        font-size: 0.875rem;
    }

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

    .btn-primary {
        background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
        color: #ffffff;
    }

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

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

    .btn-secondary {
        background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
        color: #ffffff;
    }

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

    .btn i {
        margin-right: 0.375rem;
    }

    /* ====== Approval Info ====== */
    .approval-info {
        background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
        border-radius: 12px;
        padding: 1.5rem;
        border: 2px solid #bae6fd;
        margin-top: 1.5rem;
    }

    .approval-info h6 {
        color: #0369a1;
        font-weight: 600;
        margin-bottom: 1rem;
    }

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

        .datetime-display {
            width: 100%;
            justify-content: space-between;
        }

        .invoice-header {
            padding: 1.5rem;
        }

        .invoice-header-info {
            gap: 1rem;
        }

        .status-badge {
            position: static;
            display: inline-block;
            margin-bottom: 1rem;
        }

        .info-row {
            flex-direction: column;
            gap: 0.25rem;
        }

        .info-label {
            flex: none;
        }
    }
</style>
@endsection

@section('content')
    <!-- Modern Page Header -->
    <div class="page-header-compact">
        <h1>
            <i class="fas fa-file-invoice-dollar mr-2" style="color: #8b5cf6;"></i>
            View Tax Invoice
        </h1>
        <div class="datetime-display">
            <span class="time">
                <i class="far fa-clock mr-1"></i>
                <span id="currentTime"></span>
            </span>
        </div>
    </div>

    <!-- Invoice Header Card -->
    <div class="invoice-header" style="position: relative;">
        @php
            $status = $invoice->status ?? 'pending';
            $statusClass = match($status) {
                'approved' => 'approved',
                'rejected' => 'rejected',
                default => 'pending'
            };
        @endphp
        <span class="status-badge {{ $statusClass }}">
            <i class="fas fa-{{ $status === 'approved' ? 'check-circle' : ($status === 'rejected' ? 'times-circle' : 'clock') }} mr-1"></i>
            {{ ucfirst($status) }}
        </span>

        <h3>{{ $invoice->invoice_no }}</h3>
        <div class="invoice-header-info">
            <div class="invoice-header-item">
                <label>Invoice Date</label>
                <value>{{ \Carbon\Carbon::parse($invoice->invoice_date)->format('d M Y') }}</value>
            </div>
            <div class="invoice-header-item">
                <label>Customer</label>
                <value>{{ $invoice->company->company ?? '-' }}</value>
            </div>
            <div class="invoice-header-item">
                <label>Total Amount</label>
                <value>₹{{ number_format($invoice->total_amount, 2) }}</value>
            </div>
        </div>
    </div>

    <!-- Quick Info Cards -->
    <div class="row">
        <div class="col-md-6 mb-4">
            <div class="info-card purple">
                <h5><i class="fas fa-file-alt" style="color: #8b5cf6;"></i> Invoice Details</h5>
                <div class="info-row">
                    <div class="info-label">Invoice No:</div>
                    <div class="info-value font-weight-bold">{{ $invoice->invoice_no }}</div>
                </div>
                <div class="info-row">
                    <div class="info-label">Invoice Date:</div>
                    <div class="info-value">{{ \Carbon\Carbon::parse($invoice->invoice_date)->format('d-m-Y') }}</div>
                </div>
                <div class="info-row">
                    <div class="info-label">Reference No:</div>
                    <div class="info-value">{{ $invoice->reference_no ?? '-' }}</div>
                </div>
                <div class="info-row">
                    <div class="info-label">Buyer Order No:</div>
                    <div class="info-value">{{ $invoice->buyer_order_no ?? '-' }}</div>
                </div>
            </div>
        </div>

        <div class="col-md-6 mb-4">
            <div class="info-card blue">
                <h5><i class="fas fa-building" style="color: #3b82f6;"></i> Company Information</h5>
                <div class="info-row">
                    <div class="info-label">Company Name:</div>
                    <div class="info-value font-weight-bold">UMBREY ENGINEERING PVT LTD</div>
                </div>
                <div class="info-row">
                    <div class="info-label">Address:</div>
                    <div class="info-value">No. 31, 2nd Phase, Peenya Industrial Area, Bengaluru 560 058</div>
                </div>
                <div class="info-row">
                    <div class="info-label">GSTN:</div>
                    <div class="info-value">29AAACU2461N1ZY</div>
                </div>
                <div class="info-row">
                    <div class="info-label">PAN:</div>
                    <div class="info-value">AAACU2461N</div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6 mb-4">
            <div class="info-card green">
                <h5><i class="fas fa-user" style="color: #10b981;"></i> Buyer Information</h5>
                <div class="info-row">
                    <div class="info-label">Company:</div>
                    <div class="info-value font-weight-bold">{{ $invoice->company->company ?? '-' }}</div>
                </div>
                <div class="info-row">
                    <div class="info-label">Address:</div>
                    <div class="info-value">{{ $invoice->address ?? '-' }}</div>
                </div>
                <div class="info-row">
                    <div class="info-label">GST No:</div>
                    <div class="info-value">{{ $invoice->gst ?? '-' }}</div>
                </div>
                <div class="info-row">
                    <div class="info-label">Email:</div>
                    <div class="info-value">{{ $invoice->email ?? '-' }}</div>
                </div>
                <div class="info-row">
                    <div class="info-label">Phone:</div>
                    <div class="info-value">{{ $invoice->phone ?? '-' }}</div>
                </div>
            </div>
        </div>

        <div class="col-md-6 mb-4">
            <div class="info-card amber">
                <h5><i class="fas fa-shipping-fast" style="color: #f59e0b;"></i> Shipping Details</h5>
                <div class="info-row">
                    <div class="info-label">Delivery Note:</div>
                    <div class="info-value">{{ $invoice->delivery_note ?? '-' }}</div>
                </div>
                <div class="info-row">
                    <div class="info-label">Terms of Payment:</div>
                    <div class="info-value">{{ $invoice->terms_payment ?? '-' }}</div>
                </div>
                <div class="info-row">
                    <div class="info-label">Dispatch Through:</div>
                    <div class="info-value">{{ $invoice->dispatch_through ?? '-' }}</div>
                </div>
                <div class="info-row">
                    <div class="info-label">Destination:</div>
                    <div class="info-value">{{ $invoice->destination ?? '-' }}</div>
                </div>
                <div class="info-row">
                    <div class="info-label">Vehicle No:</div>
                    <div class="info-value">{{ $invoice->vehicle_no ?? '-' }}</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Invoice Items -->
    <div class="items-table-card">
        <div class="items-table-header">
            <i class="fas fa-list"></i>
            Invoice Items
        </div>
        <div class="table-responsive">
            <table class="table table-modern">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Description</th>
                        <th>HSN/SAC</th>
                        <th class="text-right">Qty</th>
                        <th class="text-right">Rate</th>
                        <th>Per</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>
                    @forelse($invoice->items as $i => $item)
                    <tr>
                        <td>{{ $i + 1 }}</td>
                        <td>{{ $item->description }}</td>
                        <td>{{ $item->hsn }}</td>
                        <td class="text-right">{{ $item->quantity }}</td>
                        <td class="text-right">₹{{ number_format($item->rate, 2) }}</td>
                        <td>{{ $item->per }}</td>
                        <td class="text-right">{{ $item->sgst }}%</td>
                        <td class="text-right">{{ $item->cgst }}%</td>
                        <td class="text-right">{{ $item->igst }}%</td>
                        <td class="text-right font-weight-bold">₹{{ number_format($item->amount, 2) }}</td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="10" class="text-center text-muted">No items found</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <!-- Summary -->
    <div class="row justify-content-end">
        <div class="col-md-5">
            <div class="summary-card">
                <h5><i class="fas fa-calculator"></i> Financial Summary</h5>
                <div class="summary-row">
                    <span>Taxable Value:</span>
                    <span class="font-weight-bold">₹{{ number_format($invoice->taxable_value, 2) }}</span>
                </div>
                <div class="summary-row">
                    <span>SGST:</span>
                    <span>₹{{ number_format($invoice->sgst, 2) }}</span>
                </div>
                <div class="summary-row">
                    <span>CGST:</span>
                    <span>₹{{ number_format($invoice->cgst, 2) }}</span>
                </div>
                <div class="summary-row">
                    <span>IGST:</span>
                    <span>₹{{ number_format($invoice->igst, 2) }}</span>
                </div>
                <div class="summary-row">
                    <span>Total Tax:</span>
                    <span class="font-weight-bold">₹{{ number_format($invoice->total_tax_amount, 2) }}</span>
                </div>
                <div class="summary-row grand-total">
                    <span>Grand Total:</span>
                    <span>₹{{ number_format($invoice->total_amount, 2) }}</span>
                </div>
                <div class="summary-row mt-2" style="font-size: 0.8125rem; font-style: italic;">
                    <span colspan="2">{{ $invoice->amount_in_words }}</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Approval Info -->
    @if($invoice->status !== 'pending')
    <div class="approval-info">
        <h6>
            <i class="fas fa-info-circle mr-1"></i>Approval Information
        </h6>
        <div class="row">
            <div class="col-md-4">
                <strong>Status:</strong><br>
                <span class="badge badge-{{ match($status) { 'approved' => 'success', 'rejected' => 'danger', default => 'warning' } }}">
                    {{ ucfirst($invoice->status) }}
                </span>
            </div>
            <div class="col-md-4">
                <strong>{{ $invoice->status === 'approved' ? 'Approved' : 'Rejected' }} At:</strong><br>
                {{ $invoice->approved_at ? $invoice->approved_at->format('d-m-Y H:i') : '-' }}
            </div>
            <div class="col-md-4">
                <strong>Remarks:</strong><br>
                {{ $invoice->approval_remarks ?? '-' }}
            </div>
        </div>
    </div>
    @endif

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

@section('scripts')
<script>
$(document).ready(function() {
    // Live DateTime
    function updateDateTime() {
        const now = new Date();
        const timeStr = now.toLocaleTimeString('en-IN', {
            hour: '2-digit',
            minute: '2-digit',
            second: '2-digit',
            hour12: true
        });
        $('#currentTime').text(timeStr);
    }
    updateDateTime();
    setInterval(updateDateTime, 1000);
});
</script>
@endsection
