@extends('layouts.app')

@section('title', 'Delivery Note: ' . $deliveryNote->delivery_note_number)

@push('css')
    <link href="{{ asset('assets/css/posm_custom.css') }}" rel="stylesheet" type="text/css" />
@endpush

@section('content')
    <div class="row mb-3">
        <div class="col-12">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('posm.index') }}">POSM</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('posm.delivery-notes.index') }}">Delivery Notes</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Details</li>
                </ol>
            </nav>
        </div>
    </div>

    <div class="fixed-action-bar d-flex align-items-center justify-content-between">
        <div class="fw-semibold fixed-nav-title">Delivery Note: {{ $deliveryNote->delivery_note_number }}</div>
        <div class="d-flex align-items-center">
            <!-- Additional Actions (Left) -->
            @if($deliveryNote->status === 'created')
                <i class="fa-solid fa-truck-fast fixed-nav-btn fixed-nav-btn-active p-1 d-inline-flex align-items-center justify-content-center mx-1"
                    onclick="if(confirm('Confirm handover? Stock will be deducted from the warehouse.')) document.getElementById('handover-dn-form').submit();"
                    data-toggle="tooltip" title="Handover" style="cursor: pointer;"></i>

                <form id="handover-dn-form" action="{{ route('posm.delivery-notes.handover', $deliveryNote->id) }}"
                    method="POST" class="d-none">
                    @csrf
                </form>
            @endif

            <a href="{{ route('posm.delivery-notes.gate-pass', $deliveryNote->id) }}" target="_blank" class="mx-1">
                <i class="fa-solid fa-file-pdf fixed-nav-btn fixed-nav-btn-active p-1 d-inline-flex align-items-center justify-content-center"
                    data-toggle="tooltip" title="Download Gate Pass"></i>
            </a>

            <i class="fa-solid fa-print fixed-nav-btn fixed-nav-btn-active p-1 d-inline-flex align-items-center justify-content-center mx-1"
                onclick="window.print()" data-toggle="tooltip" title="Print" style="cursor: pointer;"></i>

            <div class="ms-auto d-flex align-items-center">
                <!-- Mandatory Action Set (Right) -->
                <!-- Add -->
                <i class="fa-regular fa-plus fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1" data-toggle="tooltip" title="Add" style="cursor: default;"></i>

                <!-- Save -->
                <i class="fa-regular fa-save fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1" data-toggle="tooltip" title="Save" style="cursor: default;"></i>

                <!-- Edit -->
                @if($deliveryNote->status === 'created')
                    <a href="{{ route('posm.delivery-notes.edit', $deliveryNote->id) }}" class="mx-1">
                        <i class="fa-regular fa-edit fixed-nav-btn fixed-nav-btn-active p-1 d-inline-flex align-items-center justify-content-center"
                            data-toggle="tooltip" title="Edit Manifest"></i>
                    </a>
                @else
                    <i class="fa-regular fa-edit fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1" data-toggle="tooltip" title="Edit" style="cursor: default;"></i>
                @endif

                <!-- Delete -->
                @if($deliveryNote->status === 'created')
                    <i class="fa-regular fa-trash-can fixed-nav-btn fixed-nav-btn-active p-1 d-inline-flex align-items-center justify-content-center mx-1"
                        onclick="event.preventDefault(); if(confirm('Archive this manifest?')) document.getElementById('delete-dn-form').submit();"
                        data-toggle="tooltip" title="Archive" style="cursor: pointer;"></i>

                    <form id="delete-dn-form" action="{{ route('posm.delivery-notes.destroy', $deliveryNote->id) }}" method="POST"
                        class="d-none">
                        @csrf @method('DELETE')
                    </form>
                @else
                    <i class="fa-regular fa-trash-can fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1" data-toggle="tooltip" title="Delete" style="cursor: default;"></i>
                @endif

                <!-- Close -->
                <a href="{{ route('posm.delivery-notes.index') }}" class="mx-1">
                    <i class="fa-solid fa-xmark fixed-nav-btn fixed-nav-btn-active p-1 d-inline-flex align-items-center justify-content-center"
                        data-toggle="tooltip" title="Close"></i>
                </a>

                <!-- Column Visibility -->
                <i class="fa-solid fa-columns fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1" data-toggle="tooltip" title="Columns" style="cursor: default;"></i>
            </div>
        </div>
    </div>


    <div class="row mt-4 mb-5">
        <!-- Sidebar: Delivery Info -->
        <div class="col-md-4">
            <div class="card rounded-4 border-0 shadow-sm overflow-hidden mb-4 bg-white">
                <div class="p-4 bg-soft-warning border-bottom border-warning border-opacity-10 text-center">
                    @php
                        $statusMeta = [
                            'created' => ['color' => 'secondary', 'label' => 'Draft', 'icon' => 'fa-file-signature'],
                            'handed_over' => ['color' => 'primary', 'label' => 'Dispatched', 'icon' => 'fa-truck-fast'],
                            'returned' => ['color' => 'warning', 'label' => 'Returned', 'icon' => 'fa-rotate-left'],
                            'validated' => ['color' => 'success', 'label' => 'Validated', 'icon' => 'fa-circle-check']
                        ][$deliveryNote->status] ?? ['color' => 'dark', 'label' => 'Unknown', 'icon' => 'fa-circle-question'];
                    @endphp
                    <div class="avatar-lg bg-white rounded-circle d-inline-flex align-items-center justify-content-center shadow-sm mb-3"
                        style="width: 72px; height: 72px; border: 4px solid #fff;">
                        <i class="fa-solid {{ $statusMeta['icon'] }} text-{{ $statusMeta['color'] }} fs-2"></i>
                    </div>
                    <h5 class="fw-bold text-dark mb-1">{{ $statusMeta['label'] }}</h5>
                    <p class="text-muted small mb-0">Updated {{ $deliveryNote->updated_at->diffForHumans() }}</p>
                </div>

                <div class="card-body p-4">
                    <div class="logistics-item mb-4">
                        <label class="text-muted fs-10 text-uppercase fw-bold d-block mb-1 opacity-75">Event
                            Supplier</label>
                        <h6 class="text-dark fw-bold mb-0 fs-15">{{ $deliveryNote->supplier->name ?? 'N/A' }}
                        </h6>
                        <span class="text-muted fs-11"><i
                                class="fa-solid fa-phone me-1"></i>{{ $deliveryNote->supplier->contact_phone ?? 'No phone' }}</span>
                    </div>

                    <div class="logistics-item mb-4">
                        <label class="text-muted fs-10 text-uppercase fw-bold d-block mb-1 opacity-75">Warehouse</label>
                        <div class="d-flex align-items-center p-2 bg-light rounded-3">
                            <div class="avatar-xxs bg-white rounded-2 me-3 d-flex align-items-center justify-content-center shadow-sm"
                                style="width: 32px; height: 32px;">
                                <i class="fa-solid fa-warehouse fs-12 text-warning"></i>
                            </div>
                            <span class="fw-bold text-dark fs-14">{{ $deliveryNote->warehouse->name ?? 'N/A' }}</span>
                        </div>
                    </div>

                    <div class="row mb-4 g-2">
                        <div class="col-6">
                            <div class="p-3 bg-light rounded-3 border border-transparent">
                                <label class="text-muted fs-9 text-uppercase fw-bold d-block mb-1">Created Date</label>
                                <span
                                    class="fw-bold text-dark fs-12">{{ $deliveryNote->created_at->format('d M, Y') }}</span>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="p-3 bg-light rounded-3 border border-transparent">
                                <label class="text-muted fs-9 text-uppercase fw-bold d-block mb-1">Handover Date</label>
                                <span
                                    class="fw-bold text-dark fs-12 text-truncate d-block">{{ $deliveryNote->handed_over_at ? $deliveryNote->handed_over_at->format('d M, Y') : 'PENDING' }}</span>
                            </div>
                        </div>
                    </div>

                    <div class="logistics-item border-top pt-4">
                        <label class="text-muted fs-10 text-uppercase fw-bold d-block mb-2 opacity-75">Created By</label>
                        <div class="d-flex align-items-center p-3 bg-light-soft rounded-4 border border-dashed">
                            <div class="avatar-xs bg-soft-warning rounded-circle d-flex align-items-center justify-content-center me-3"
                                style="width: 36px; height: 36px;">
                                <i class="fa-solid fa-user-tie text-warning fs-14"></i>
                            </div>
                            <div>
                                <h6 class="fw-bold text-dark mb-0 fs-13">
                                    {{ $deliveryNote->creator->name ?? 'Admin' }}
                                </h6>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            @if($deliveryNote->status === 'handed_over')
                <div class="card rounded-4 border-dashed p-4 text-center bg-transparent border-primary border-opacity-25">
                    <div class="avatar-md bg-white rounded-circle d-inline-flex align-items-center justify-content-center shadow-sm mb-3 mx-auto"
                        style="width: 50px; height: 50px;">
                        <i class="fa-solid fa-qrcode fs-3 text-primary opacity-50"></i>
                    </div>
                    <h6 class="fw-bold text-dark">Awaiting Collection</h6>
                    <p class="text-muted small mb-3">The event supplier must acknowledge receipt of these items.</p>
                </div>
            @endif
        </div>

        <!-- Main: Delivery Items -->
        <div class="col-md-8">
            <div class="card rounded-4 border-0 shadow-sm overflow-hidden mb-4 bg-white">
                <div class="card-header bg-white border-bottom-0 p-4 d-flex justify-content-between align-items-center">
                    <h5 class="fw-bold mb-0">Delivery Items</h5>
                    <span
                        class="badge bg-soft-warning text-warning px-3 py-1 rounded-pill fs-11 fw-bold border border-warning border-opacity-10">
                        {{ $deliveryNote->items->count() }} Products
                    </span>
                </div>
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="bg-light-soft text-muted">
                            <tr>
                                <th class="ps-4 py-3 fs-11 text-uppercase fw-bold">Product</th>
                                <th class="py-3 fs-11 text-uppercase fw-bold text-center">Quantity</th>
                                <th class="py-3 fs-11 text-uppercase fw-bold text-end">Unit Price</th>
                                <th class="py-3 fs-11 text-uppercase fw-bold text-end pe-4">Total Price</th>
                            </tr>
                        </thead>
                        <tbody class="border-top-0">
                            @foreach($deliveryNote->items as $item)
                                <tr>
                                    <td class="ps-4">
                                        <div class="fw-bold text-dark fs-14">{{ $item->product->name ?? 'N/A' }}
                                        </div>
                                        <span class="text-muted fs-11 italic">{{ $item->product->sku ?? 'NO-SKU' }}</span>
                                    </td>
                                    <td class="text-center">
                                        <div
                                            class="badge bg-white text-dark border px-3 py-2 rounded-3 fs-13 fw-bold shadow-none">
                                            {{ $item->quantity }} <span
                                                class="text-muted fs-9 ms-1 uppercase">{{ $item->product->unit_of_measure ?? 'Units' }}</span>
                                        </div>
                                    </td>
                                    <td class="text-end text-muted fs-13 fw-medium">LKR {{ number_format($item->unit_cost, 0) }}
                                    </td>
                                    <td class="text-end pe-4 fw-bold text-dark fs-14">LKR
                                        {{ number_format($item->total_cost, 0) }}
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                        <tfoot class="bg-light-soft border-top">
                            <tr>
                                <td colspan="3"
                                    class="text-end py-4 fw-bold text-muted text-uppercase fs-11 tracking-wider">Total Value
                                </td>
                                <td class="text-end pe-4 py-4 fw-bold text-warning display-6"
                                    style="vertical-align: middle;">
                                    <span
                                        class="fs-14 fw-semibold text-muted font-monospace me-1">LKR</span>{{ number_format($deliveryNote->items->sum('total_cost'), 0) }}
                                </td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>

            @if($deliveryNote->returnNote)
                <div class="card rounded-4 border-0 shadow-sm overflow-hidden mb-4 border-top border-warning border-5 bg-white">
                    <div class="card-header bg-white border-bottom-0 p-4 d-flex justify-content-between align-items-center">
                        <div class="d-flex align-items-center">
                            <div class="avatar-xs bg-soft-warning rounded-circle d-flex align-items-center justify-content-center me-3"
                                style="width: 40px; height: 40px;">
                                <i class="fa-solid fa-rotate-left text-warning fs-14"></i>
                            </div>
                            <h5 class="fw-bold mb-0">Return Note ({{ $deliveryNote->returnNote->rn_number }})</h5>
                        </div>
                        <span class="badge bg-soft-warning text-warning px-3 py-1 rounded-pill fs-11 fw-bold">Validated
                            {{ $deliveryNote->returnNote->return_date->format('d M, Y') }}</span>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0">
                            <thead class="bg-light-soft text-muted">
                                <tr>
                                    <th class="ps-4 py-3 fs-11 text-uppercase fw-bold">Product</th>
                                    <th class="py-3 fs-11 text-uppercase fw-bold text-center">Good Stock</th>
                                    <th class="py-3 fs-11 text-uppercase fw-bold text-center text-danger">Damaged</th>
                                    <th class="py-3 fs-11 text-uppercase fw-bold text-center text-warning">Inventory Loss</th>
                                </tr>
                            </thead>
                            <tbody class="border-top-0">
                                @foreach($deliveryNote->returnNote->items as $rItem)
                                    <tr>
                                        <td class="ps-4">
                                            <div class="fw-bold text-dark fs-13">{{ $rItem->product->name ?? 'N/A' }}
                                            </div>
                                            <span
                                                class="text-muted fs-10 fw-bold uppercase opacity-50">{{ $rItem->product->sku ?? 'NO-SKU' }}</span>
                                        </td>
                                        <td class="text-center">
                                            <span
                                                class="badge bg-soft-success text-success px-3 py-2 rounded-3 fw-bold fs-13 border border-success-subtle">
                                                {{ $rItem->returned_quantity }}
                                            </span>
                                        </td>
                                        <td class="text-center">
                                            <span class="text-danger fw-bold fs-13">{{ $rItem->damaged_quantity ?: '-' }}</span>
                                        </td>
                                        <td class="text-center">
                                            <span class="text-warning fw-bold fs-13">{{ $rItem->missing_quantity ?: '-' }}</span>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            @endif
        </div>
    </div>

@endsection