@extends('admin.layouts.app')

@section('page-title', 'Shipment Management')

@section('content')

<div class="container-fluid py-4">

    {{-- SUCCESS / ERROR MESSAGES --}}
    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif

    @if(session('error'))
        <div class="alert alert-danger">{{ session('error') }}</div>
    @endif


    <!-- ============================= -->
    <!--    CREATE SHIPMENT BOX       -->
    <!-- ============================= -->
    <div class="card shadow-sm mb-4">
        <div class="card-header bg-light">
            <h5 class="mb-0">
                <i class="bi bi-truck"></i> Create Shipment
            </h5>
        </div>

        <div class="card-body">

            <form action="{{ route('admin.shipments.store') }}" method="POST">
                @csrf

                <div class="row g-3">

                    <div class="col-md-4">
                        <label class="form-label">Origin</label>
                        <input type="text" class="form-control" name="origin" required>
                    </div>

                    <div class="col-md-4">
                        <label class="form-label">Destination</label>
                        <input type="text" class="form-control" name="destination" required>
                    </div>

                    <div class="col-md-4">
                        <label class="form-label">Shipment Date</label>
                        <input type="date" name="shipment_date" class="form-control" 
                               value="{{ date('Y-m-d') }}" required>
                    </div>

                </div>

                <hr class="my-3">

                <h6 class="fw-bold text-primary mb-2">Select Orders for Shipment</h6>

                {{-- Orders Table --}}
                <div class="table-responsive" style="max-height: 350px; overflow-y:auto;">
                    <table class="table table-bordered table-striped text-center align-middle">
                        <thead class="table-light">
                            <tr>
                                <th>Select</th>
                                <th>Order ID</th>
                                <th>Mark No</th>
                                <th>Origin</th>
                                <th>Destination</th>
                                <th>CTN</th>
                                <th>QTY</th>
                                <th>TTL Qty</th>
                                <th>Amount</th>
                                <th>KG</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($availableOrders as $order)
                            <tr>
                                <td>
                                    <input type="checkbox" name="order_ids[]" value="{{ $order->id }}">
                                </td>
                                <td class="text-primary fw-bold">{{ $order->order_id }}</td>
                                <td>{{ $order->mark_no }}</td>
                                <td>{{ $order->origin }}</td>
                                <td>{{ $order->destination }}</td>
                                <td>{{ $order->ctn }}</td>
                                <td>{{ $order->qty }}</td>
                                <td>{{ $order->ttl_qty }}</td>
                                <td>₹{{ number_format($order->ttl_amount, 2) }}</td>
                                <td>{{ $order->ttl_kg }}</td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="10" class="text-muted">No available orders</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                <div class="text-end mt-3">
                    <button type="submit" class="btn btn-success btn-lg">
                        <i class="bi bi-check-circle"></i> Create Shipment
                    </button>
                </div>

            </form>

        </div>
    </div>




    <!-- ============================= -->
    <!--      SHIPMENT LIST TABLE     -->
    <!-- ============================= -->
    <div class="card shadow-sm">
        <div class="card-header bg-light">
            <h5 class="mb-0"><i class="bi bi-table"></i> Shipments List</h5>
        </div>

        <div class="card-body table-responsive">
            <table class="table table-striped table-bordered text-center align-middle">
                <thead class="table-light">
                    <tr>
                        <th>#</th>
                        <th>Shipment ID</th>
                        <th>Origin</th>
                        <th>Destination</th>

                        <th>Total QTY</th>
                        <th>Total KG</th>
                        <th>Total Amount</th>

                        <th>Status</th>
                        <th>Date</th>
                        <th>Action</th>
                    </tr>
                </thead>

                <tbody>
                    @forelse($shipments as $ship)
                    <tr>
                        <td>{{ $ship->id }}</td>

                        <td>
                            <a href="#" class="text-primary fw-bold"
                               onclick="openShipmentDetails({{ $ship->id }})">
                                {{ $ship->shipment_id }}
                            </a>
                        </td>

                        <td>{{ $ship->origin }}</td>
                        <td>{{ $ship->destination }}</td>

                        <td>{{ $ship->total_qty }}</td>
                        <td>{{ $ship->total_kg }}</td>
                        <td>₹{{ number_format($ship->total_amount, 2) }}</td>

                        <td>
                            <span class="badge bg-info text-dark">{{ ucfirst($ship->status) }}</span>
                        </td>

                        <td>{{ $ship->shipment_date }}</td>

                        <td>
                            <form action="{{ route('admin.shipments.updateStatus') }}" method="POST" class="d-inline">
                                @csrf
                                <input type="hidden" name="shipment_id" value="{{ $ship->id }}">

                                <select name="status" class="form-select form-select-sm"
                                        onchange="this.form.submit()">
                                    <option value="pending"     @selected($ship->status=='pending')>Pending</option>
                                    <option value="in_transit"  @selected($ship->status=='in_transit')>In Transit</option>
                                    <option value="dispatched"  @selected($ship->status=='dispatched')>Dispatched</option>
                                    <option value="delivered"   @selected($ship->status=='delivered')>Delivered</option>
                                </select>
                            </form>
                        </td>

                    </tr>
                    @empty
                    <tr>
                        <td colspan="10" class="text-muted">No shipments found</td>
                    </tr>
                    @endforelse
                </tbody>

            </table>
        </div>
    </div>




    <!-- ============================= -->
    <!--   SHIPMENT DETAILS MODAL     -->
    <!-- ============================= -->
    <div class="modal fade" id="shipmentDetailsModal" tabindex="-1">
        <div class="modal-dialog modal-xl modal-dialog-scrollable">
            <div class="modal-content">

                <div class="modal-header bg-light">
                    <h5 class="modal-title fw-bold">Shipment Details</h5>
                    <button class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body" id="shipmentDetailsContent">
                    <p class="text-center text-muted">Loading...</p>
                </div>

            </div>
        </div>
    </div>

</div>



<!-- ========================= -->
<!--  MODAL LOAD SCRIPT (AJAX) -->
<!-- ========================= -->
<script>
function openShipmentDetails(id) {
    let modal = new bootstrap.Modal(document.getElementById('shipmentDetailsModal'));
    document.getElementById('shipmentDetailsContent').innerHTML =
        "<p class='text-center text-muted'>Loading...</p>";

    fetch(`/admin/shipments/${id}`)
        .then(res => res.json())
        .then(data => {

            let html = `
                <h5 class="text-primary mb-3">Shipment: ${data.shipment.shipment_id}</h5>

                <div class="mb-3">
                    <strong>Origin:</strong> ${data.shipment.origin} &nbsp;&nbsp;&nbsp;
                    <strong>Destination:</strong> ${data.shipment.destination} &nbsp;&nbsp;&nbsp;
                    <strong>Status:</strong> ${data.shipment.status}
                </div>

                <h6 class="fw-bold mt-4">Orders Inside Shipment</h6>

                <table class="table table-bordered text-center">
                    <thead class="table-light">
                        <tr>
                            <th>Order ID</th>
                            <th>Mark No</th>
                            <th>Origin</th>
                            <th>Destination</th>

                            <th>CTN</th>
                            <th>QTY</th>
                            <th>TTL QTY</th>
                            
                            <th>TTL Amount</th>

                            <th>CBM</th>
                            <th>TTL CBM</th>

                            <th>KG</th>
                            <th>TTL KG</th>

                        </tr>
                    </thead>
                    <tbody>
            `;

            data.orders.forEach(order => {
                html += `
                    <tr>
                        <td class="fw-bold text-primary">${order.order_id}</td>
                        <td>${order.mark_no}</td>
                        <td>${order.origin}</td>
                        <td>${order.destination}</td>

                        <td>${order.ctn}</td>
                        <td>${order.qty}</td>
                        <td>${order.ttl_qty}</td>

                        <td>₹${order.ttl_amount}</td>

                        <td>${order.cbm ?? '-'}</td>
                        <td>${order.ttl_cbm ?? '-'}</td>

                        <td>${order.kg}</td>
                        <td>${order.ttl_kg}</td>

                    </tr>
                `;
            });

            html += `
                    </tbody>
                </table>

                <div class="mt-3">
                    <strong>Total CTN:</strong> ${data.shipment.total_ctn} <br>
                    <strong>Total QTY:</strong> ${data.shipment.total_qty} <br>
                    <strong>Total TTL QTY:</strong> ${data.shipment.total_ttl_qty} <br>

                    <strong>Total CBM:</strong> ${data.shipment.total_cbm} <br>
                    <strong>Total TTL CBM:</strong> ${data.shipment.total_ttl_cbm} <br>

                    <strong>Total KG:</strong> ${data.shipment.total_kg} <br>
                    <strong>Total TTL KG:</strong> ${data.shipment.total_ttl_kg} <br>

                    <strong>Total Amount:</strong> ₹${data.shipment.total_amount}
                </div>
            `;

            document.getElementById('shipmentDetailsContent').innerHTML = html;
        });

    modal.show();
}
</script>


@endsection