@extends('layouts.app')

@section('title', 'AWB Tracking Details')

@section('page-wrapper')
    <div class="page-header d-print-none">
        <div class="container-fluid">
            <div class="row g-2 align-items-center">
                <div class="col d-flex justify-content-between align-items-center">
                    <h2 class="page-title">
                        AWB Tracking Details: {{ $booking->airway_number }}
                    </h2>
                </div>
            </div>
        </div>
    </div>
    <div class="page-body">
        <div class="container-fluid">
            <div class="row row-cards mb-3">
                <div class="col-md-6 col-lg-6">
                    <div class="row row-cards row-deck">
                        <div class="col-6">
                            <div class="card">
                                <div class="card-header">
                                    <h3 class="card-title">Sender Details</h3>
                                </div>
                                <div class="card-body">
                                    <div class="row row-cards">
                                        <div class="col-6 datagrid-item">
                                            <div class="datagrid-title">Name</div>
                                            <div class="datagrid-content">{{ $booking->sender_name }}</div>
                                        </div>
                                        <div class="col-6 datagrid-item">
                                            <div class="datagrid-title">Mobile</div>
                                            <div class="datagrid-content">{{ $booking->sender_mobile }}</div>
                                        </div>
                                        <div class="col-12 datagrid-item">
                                            <div class="datagrid-title">Address</div>
                                            <div class="datagrid-content">{{ $booking->sender_address }},
                                                {{ $booking->senderCity->CityName }},
                                                {{ $booking->senderState->StateName }},
                                                {{ $booking->sender_pincode }}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="card">
                                <div class="card-header">
                                    <h3 class="card-title">Receiver Details</h3>
                                </div>
                                <div class="card-body">
                                    <div class="row row-cards">
                                        <div class="col-6 datagrid-item">
                                            <div class="datagrid-title">Name</div>
                                            <div class="datagrid-content">{{ $booking->receiver_name }}</div>
                                        </div>
                                        <div class="col-6 datagrid-item">
                                            <div class="datagrid-title">Mobile</div>
                                            <div class="datagrid-content">{{ $booking->receiver_mobile }}</div>
                                        </div>
                                        <div class="col-12 datagrid-item">
                                            <div class="datagrid-title">Address</div>
                                            <div class="datagrid-content">{{ $booking->receiver_address }},
                                                {{ $booking->receiverCity->CityName }},
                                                {{ $booking->receiverstate->StateName }}, {{ $booking->receiver_pincode }}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="card">
                                <div class="card-header">
                                    <h3 class="card-title">Warehouse Details</h3>
                                </div>
                                <div class="card-body">
                                    <div class="row row-cards">
                                        <div class="col-6 datagrid-item">
                                            <div class="datagrid-title">Name</div>
                                            <div class="datagrid-content">
                                                {{ ucwords(strtolower($booking->warehouse->name)) }}</div>
                                        </div>
                                        <div class="col-6 datagrid-item">
                                            <div class="datagrid-title">Mobile</div>
                                            <div class="datagrid-content">{{ $booking->warehouse->phone }}</div>
                                        </div>
                                        <div class="col-12 datagrid-item">
                                            <div class="datagrid-title">Address</div>
                                            <div class="datagrid-content">{{ $booking->warehouse->address }},
                                                {{ $booking->warehouse->city->CityName }},
                                                {{ $booking->warehouse->state->StateName }},
                                                {{ $booking->warehouse->pin }}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="card">
                                <div class="card-header">
                                    <h3 class="card-title">Package Details</h3>
                                </div>
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table class="table table-bordered table-sm">
                                            <thead class="table-light">
                                                <tr>
                                                    <th>#</th>
                                                    @if ($booking->booking_type == 'B2B')
                                                        <th>No of Boxes</th>
                                                        <th>Eway Bill</th>
                                                        <th>Invoice No</th>
                                                        <th>Invoice Amount</th>
                                                    @endif
                                                    <th>Dimensions (L×W×H in cm)</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($booking->dimension as $key => $dimension)
                                                    <tr>
                                                        <td>{{ (int) $key + 1 }}</td>
                                                        @if ($booking->booking_type == 'B2B')
                                                            <td>{{ $dimension->box_count }}</td>
                                                            <td>{{ $dimension->eway_bill }}</td>
                                                            <td>{{ $dimension->inv_num }}</td>
                                                            <td>{{ $dimension->inv_amt }}</td>
                                                        @endif
                                                        <td>
                                                            {{ $dimension->length_cm }} ×
                                                            {{ $dimension->width_cm }} ×
                                                            {{ $dimension->height_cm }}
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @if ($booking->booking_type == 'B2B')
                            <div class="col-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h3 class="card-title">Documents Details</h3>
                                    </div>
                                    <div class="card-body">
                                        <div class="fw-bold">
                                            <div class="d-flex flex-row flex-wrap gap-3 overflow-auto">
                                                @foreach ($booking->bookingDocuments as $doc)
                                                    <a href="{{ asset('storage/' . $doc->document) }}" target="_blank">
                                                        <div class="card shadow-sm border text-center w-100">
                                                            <div class="card-body p-2">
                                                                <img src="{{ asset('storage/' . $doc->document) }}"
                                                                    alt="Document" class="img-fluid rounded"
                                                                    style="height: 100px; object-fit: cover;" />
                                                                <small class="d-block mt-2 text-muted">View Document</small>
                                                            </div>
                                                        </div>
                                                    </a>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
                <div class="col-md-6 col-lg-6">
                    <div class="row row-cards row-deck">
                        <div class="col-md-12">
                            <div class="card">
                                <div class="card-header">
                                    <ul class="nav nav-tabs card-header-tabs" data-bs-toggle="tabs" role="tablist"
                                        id="trackingTabs">
                                        <li class="nav-item" role="presentation">
                                            <a class="nav-link active" id="tracking-tab" data-bs-toggle="tab"
                                                aria-selected="true" role="tab" href="#tracking"> Tracking </a>
                                        </li>
                                        <li class="nav-item" role="presentation">
                                            <a class="nav-link" id="info-tab" data-bs-toggle="tab" aria-selected="false"
                                                role="tab" tabindex="-1" href="#information">
                                                Information </a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="card-body overflow-auto" style="height:255px;">
                                    <!-- Loader -->
                                    <div id="tracking-loader" class="text-center my-3" style="display:none;">
                                        <div class="spinner-border text-primary" role="status"></div>
                                        <div class="mt-2">Fetching latest tracking data...</div>
                                    </div>
                                    <div class="tab-content">
                                        <!-- Tracking Tab -->
                                        <div class="tab-pane show active" id="tracking" role="tabpanel">
                                            <ul id="tracking-list" class="steps steps-vertical" style="display:none;">
                                                <li class="step-item">Manifested</li>
                                                <li class="step-item">Not Picked</li>
                                                <li class="step-item">In Transit</li>
                                                <li class="step-item">Pending</li>
                                                <li class="step-item">Dispatched</li>
                                                <li class="step-item">Delivered</li>
                                            </ul>
                                        </div>

                                        <!-- Information Tab -->
                                        <div class="tab-pane" id="information" role="tabpanel">
                                            <div id="info-content">
                                                Loading shipment info...
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="card">
                                <div class="card-header">
                                    <h3 class="card-title">AWB Details ({{ $booking->airway_number }})</h3>
                                </div>
                                <div class="card-body">
                                    <dl class="row">
                                        <dt class="col-5">Courier:</dt>
                                        <dd class="col-7">
                                            <span class="avatar me-2 rounded-circle flex-shrink-0"
                                                style="background-image: url('{{ asset('storage/' . $booking->Couriers->logo) }}')">
                                            </span>
                                            {{ $booking->Couriers->name }}
                                        </dd>
                                        <dt class="col-5">Courier Setup:</dt>
                                        <dd class="col-7">
                                            {{ ucwords(strtolower($booking->CourierSetups->business_name)) }}
                                            ({{ $booking->booking_type }})</dd>
                                        <dt class="col-5">Date:</dt>
                                        <dd class="col-7">
                                            {{ \App\Helpers\DateHelper::formatDate($booking->date, 'd M Y') }}</dd>
                                        <dt class="col-5">Insurance:</dt>
                                        <dd class="col-7">{{ $booking->rov_insurance == 'true' ? 'Delivery' : 'Owner' }}
                                        </dd>
                                        @if ($booking->booking_type == 'B2C')
                                            <dt class="col-5">Shipment Type:</dt>
                                            <dd class="col-7">{{ $booking->shipment_type }}</dd>
                                        @endif
                                        <dt class="col-5">Shipment Weight:</dt>
                                        <dd class="col-7">{{ $booking->shipment_weight }}</dd>
                                        <dt class="col-5">Shipment Box Count:</dt>
                                        <dd class="col-7">{{ $booking->shipment_total_box_count }}</dd>
                                        @if ($booking->booking_type == 'B2B')
                                            <dt class="col-5">Freight Mode:</dt>
                                            <dd class="col-7">{{ strtoupper($booking->freight_mode) }}</dd>
                                            <dt class="col-5">Shipment Description:</dt>
                                            <dd class="col-7">{{ $booking->shipment_description }}</dd>
                                        @endif
                                        <dt class="col-5">Total Cost:</dt>
                                        <dd class="col-7">₹
                                            {{ \App\Helpers\DateHelper::formatIndianAmount($booking->booking_amount) }}
                                        </dd>
                                    </dl>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

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

@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            let waybill = "{{ $booking->id }}"; //9251410027156;


            function loadTrackingData() {
                $.ajax({
                    url: "{{ route('delhivery.tracking') }}",
                    type: "GET",
                    data: {
                        waybill: waybill
                    },
                    beforeSend: function() {
                        $("#tracking-loader").show();
                        $("#tracking-list").hide();
                        $("#info-content").html("Loading shipment info...");
                    },
                    success: function(res) {
                        $("#tracking-loader").hide();

                        @if ($booking->booking_type === 'B2B')
                            // ----- Handle B2B JSON Format -----
                            if (!res || !res.webhook_logs || res.webhook_logs.length === 0) {
                                $("#tracking-list").html(
                                    "<li class='text-danger'>No tracking details available.</li>");
                                $("#info-content").html(
                                    "<div class='text-danger'>No shipment details available.</div>");
                                return;
                            }

                            let trackingHtml = "";
                            res.webhook_logs.forEach(function(item) {
                                trackingHtml += `
                                <li class="step-item ${item.status === 'Delivered' ? 'active' : ''}">${item.status}
                                    ${item.status?.trim().toLowerCase() === 'delivered' ? `
                                                <div class="text-secondary">
                                                    ${new Date(item.status_date_time).toLocaleString('en-GB')} |
                                                    <span class="small">${item.status_location || ''}</span>
                                                </div>
                                            ` : ''}
                                </li>
                            `;
                            });
                            $("#tracking-list").html(trackingHtml).show();

                            // // Info Tab
                            let scanHtml = '<ul class="steps steps-vertical">';
                            let lastIndex = res.webhook_logs.length - 1;
                            res.webhook_logs.forEach((item, index) => {
                                let scanDate = item.status_date_time || '';
                                let formattedScanDate = scanDate ? new Date(scanDate)
                                    .toLocaleString('en-GB') : '';
                                let liClass = (index === lastIndex) ? '' : 'fw-normal';
                                scanHtml += `
                                    <li class="step-item">
                                        <div class="h4 ${liClass} m-0">${item.instructions}</div>
                                        <div class="h4 ${liClass} m-0 text-secondary">${formattedScanDate} | <span class="small">${item.status_location || ''}</span></div>
                                    </li>
                                `;
                            });
                            scanHtml += '</ul>';
                            $("#info-content").html(scanHtml);
                        @else
                            // ----- Handle Old B2C JSON Format -----
                            if (!res.ShipmentData || res.ShipmentData.length === 0) {
                                $("#tracking-list").html(
                                    "<li class='text-danger'>No tracking details available.</li>");
                                $("#info-content").html(
                                    "<div class='text-danger'>No shipment details available.</div>");
                                return;
                            }

                            let shipment = res.ShipmentData[0].Shipment;
                            let currentStatus = shipment.Status.Status;
                            let statusLocation = shipment.Status.StatusLocation || '';
                            let statusDate = shipment.Status.StatusDateTime || shipment.Status
                                .StatusDate || '';

                            let formattedDate = statusDate ? new Date(statusDate).toLocaleString(
                                'en-GB') : '';

                            $("#tracking-list li").each(function() {
                                let stepName = $(this).text().trim();
                                if (stepName.toLowerCase() === currentStatus.toLowerCase()) {
                                    $(this).addClass("active").html(`
                                        <div class="h4 m-0">${currentStatus}</div>
                                        <div class="text-secondary">${formattedDate} | <span class="small">${statusLocation}</span></div>
                                    `);
                                }
                            });

                            // Info Tab
                            let scans = shipment.Scans || [];
                            if (scans.length === 0) {
                                $("#info-content").html(
                                    "<div class='text-warning'>No scans available.</div>");
                            } else {
                                let scanHtml = '<ul class="steps steps-vertical">';

                                scans.forEach((scan, index) => {
                                    let scanDate = scan.ScanDetail.StatusDateTime || '';
                                    let formattedScanDate = scanDate ? new Date(scanDate)
                                        .toLocaleString('en-GB') : '';
                                    let liClass = (index === scans.length - 1) ? '' :
                                        'fw-normal';
                                    scanHtml += `
                                        <li class="step-item">
                                            <div class="h4 ${liClass} m-0">${scan.ScanDetail.Instructions}</div>
                                            <div class="h4 ${liClass} m-0 text-secondary">${formattedScanDate} | <span class="small">${scan.ScanDetail.ScannedLocation || ''}</span></div>
                                        </li>
                                    `;
                                });
                                scanHtml += '</ul>';
                                $("#info-content").html(scanHtml);
                            }
                        @endif
                    },
                    error: function() {
                        $("#tracking-list").html(
                            "<li class='text-danger'>Error loading tracking data.</li>");
                        $("#info-content").html(
                            "<div class='text-danger'>Error loading shipment info.</div>");
                    },
                    complete: function() {
                        $("#tracking-loader").hide();
                        $("#tracking-list").show();
                    }
                });
            }
            // Load data initially
            loadTrackingData();
        });
    </script>
@endsection