@extends('layouts.app')
@section('title', 'Shipment Details')

@section('css')
    <link href="{{ asset('assets/libs/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" type="text/css" />
    <style>
        .badge-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            display: inline-block;
            margin-right: 5px;
        }
        .status-timeline .step {
            position: relative;
            min-height: 70px;
        }
        .status-timeline .step .step-icon {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: #ddd;
            position: absolute;
            left: 0;
        }
        .status-timeline .step.active .step-icon {
            background-color: #0d6efd;
        }
        .status-timeline .step .step-content {
            padding-left: 40px;
        }
        .status-timeline .step:not(:last-child):before {
            content: '';
            position: absolute;
            left: 10px;
            top: 25px;
            height: 45px;
            width: 2px;
            background-color: #ddd;
        }
        .status-timeline .step.active:not(:last-child):before {
            background-color: #0d6efd;
        }
    </style>
@endsection

@section('content')
<div class="content-wrapper">
    <div class="row">
        <div class="col-md-12 grid-margin stretch-card">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h4 class="card-title">Shipment Details</h4>
                        <div>
                            @can('shipments-update')
                                <a href="{{ route('shipments.edit', $shipment->id) }}" class="btn btn-warning btn-sm">
                                    <i class="mdi mdi-pencil"></i> Edit
                                </a>
                            @endcan
                            <a href="{{ route('shipments.index') }}" class="btn btn-primary btn-sm">
                                <i class="mdi mdi-arrow-left"></i> Back to List
                            </a>
                        </div>
                    </div>

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

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

                    <div class="row">
                        <div class="col-md-6">
                            <div class="card mb-4">
                                <div class="card-header bg-light">
                                    <h5 class="mb-0">{{ __('shipment_page.shipment_information') }}</h5>
                                </div>
                                <div class="card-body">
                                    <table class="table table-borderless">
                                        <tbody>
                                            <tr>
                                                <th width="30%">{{ __('common.resi_number') }}</th>
                                                <td>{{ $shipment->resi_number }}</td>
                                            </tr>
                                            <tr>
                                                <th>{{ __('shipment_page.customer') }}:</th>
                                                <td>{{ $shipment->customer->full_name }}</td>
                                            </tr>
                                            <tr>
                                                <th>{{ __('common.company') }}</th>
                                                <td>{{ $shipment->customer->company_name }}</td>
                                            </tr>
                                            <tr>
                                                <th>{{ __('common.whatsapp') }}</th>
                                                <td>
                                                    {{ $shipment->customer->whatsapp }}
                                                    @if($shipment->customer->whatsapp)
                                                        <span class="badge badge-success badge-pill ml-2">
                                                            <i class="mdi mdi-whatsapp"></i> {{ __('common.available') }}
                                                        </span>
                                                    @else
                                                        <span class="badge badge-warning badge-pill ml-2">
                                                            <i class="mdi mdi-alert"></i> Not {{ __('common.available') }}
                                                        </span>
                                                    @endif
                                                </td>
                                            </tr>
                                            <tr>
                                                <th>Status:</th>
                                                <td>
                                                    @php
                                                        $statusColors = [
                                                            'draft' => 'secondary',
                                                            'booked' => 'info',
                                                            'loaded' => 'primary',
                                                            'in_transit' => 'warning',
                                                            'delivered' => 'success'
                                                        ];
                                                        $color = $statusColors[$shipment->status] ?? 'secondary';
                                                    @endphp
                                                    <span class="badge badge-{{ $color }}">
                                                        {{ ucfirst(str_replace('_', ' ', $shipment->status)) }}
                                                    </span>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                            <div class="card mb-4">
                                <div class="card-header bg-light">
                                    <h5 class="mb-0">Tracking Timeline</h5>
                                </div>
                                <div class="card-body">
                                    <div class="status-timeline">
                                        @php
                                            $statuses = ['draft', 'booked', 'loaded', 'in_transit', 'delivered'];
                                            $currentStatusIndex = array_search($shipment->status, $statuses);
                                        @endphp

                                        @foreach($statuses as $index => $status)
                                            <div class="step {{ $index <= $currentStatusIndex ? 'active' : '' }}">
                                                <div class="step-icon"></div>
                                                <div class="step-content">
                                                    <h6 class="mb-1">{{ ucfirst(str_replace('_', ' ', $status)) }}</h6>
                                                    @if($index == 0 && $shipment->date_received)
                                                        <small>{{ date('d M Y', strtotime($shipment->date_received)) }}</small>
                                                    @elseif($index == 2 && $shipment->date_loaded)
                                                        <small>{{ date('d M Y', strtotime($shipment->date_loaded)) }}</small>
                                                    @elseif($index == 3 && $shipment->date_departure)
                                                        <small>{{ date('d M Y', strtotime($shipment->date_departure)) }}</small>
                                                    @elseif($index == 4 && $status == $shipment->status)
                                                        <small>{{ date('d M Y') }}</small>
                                                    @endif
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>

                                    @can('shipments-update')
                                        <div class="mt-4">
                                            <form action="{{ route('shipments.updateTracking', $shipment->id) }}" method="POST" class="d-flex align-items-center">
                                                @csrf
                                                @method('PATCH')
                                                <div class="form-group mr-3 mb-0 flex-grow-1">
                                                    <select name="status" class="form-control" @if($shipment->status == 'Delivered') readonly @endif>
                                                        <option value="" disabled>Pilih Status</option>
                                                        <option value="In Warehouse" @if($shipment->status == "In Warehouse") selected @endif>In Warehouse</option>
                                                        <option value="Loading" @if($shipment->status == "Loading") selected @endif>Loading</option>
                                                        <option value="Delay" @if($shipment->status == "Delay") selected @endif>Delay</option>
                                                        <option value="Delivered" @if($shipment->status == "Delivered") selected @endif>Delivered</option>
                                                    </select>
                                                </div>
                                                <button type="submit" class="btn btn-primary">Update Status</button>
                                            </form>
                                        </div>
                                    @endcan
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="card mb-4">
                                <div class="card-header bg-light">
                                    <h5 class="mb-0">Dates & Shipping Details</h5>
                                </div>
                                <div class="card-body">
                                    <table class="table table-borderless">
                                        <tbody>
                                            <tr>
                                                <th width="30%">{{ __('common.date_received') }}</th>
                                                <td>{{ date('d M Y', strtotime($shipment->date_received)) }}</td>
                                            </tr>
                                            <tr>
                                                <th>{{ __('common.date_loaded') }}</th>
                                                <td>{{ isset($shipment->date_loaded) ? date('d M Y', strtotime($shipment->date_loaded)) : '-' }}</td>
                                            </tr>
                                            <tr>
                                                <th>{{ __('common.date_departure') }}</th>
                                                <td>{{ isset($shipment->date_departure) ? date('d M Y', strtotime($shipment->date_departure)) : '-' }}</td>
                                            </tr>
                                            <tr>
                                                <th>Est. Arrival:</th>
                                                <td>{{ isset($shipment->estimated_arrival) ? date('d M Y', strtotime($shipment->estimated_arrival)) : '-' }}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                            <div class="card mb-4">
                                <div class="card-header bg-light">
                                    <h5 class="mb-0">Cost Information</h5>
                                </div>
                                <div class="card-body">
                                    <table class="table table-borderless">
                                        <tbody>
                                            <tr>
                                                <th width="30%">{{ __('shipment_page.total_volume_cbm') }}:</th>
                                                <td>{{ rtrim(rtrim(number_format($shipment->volume_cbm, 4, ',', '.'), '0'), ',') }} CBM</td>
                                            </tr>
                                            <tr>
                                                <th>{{ __('shipment_page.total_weight_kg') }}:</th>
                                                <td>{{ $shipment->weight_kg == floor($shipment->weight_kg) ? number_format($shipment->weight_kg, 0, ',', '.') : rtrim(rtrim(number_format($shipment->weight_kg, 2, ',', '.'), '0'), ',') }} KG</td>
                                            </tr>
                                            <tr>
                                                <th>{{ __('common.price_per_cbm') }}</th>
                                                <td>Rp {{ $shipment->price_per_cbm == floor($shipment->price_per_cbm) ? number_format($shipment->price_per_cbm, 0, ',', '.') : rtrim(rtrim(number_format($shipment->price_per_cbm, 2, ',', '.'), '0'), '.') }}</td>
                                            </tr>
                                            <tr>
                                                <th>{{ __('common.price_per_kg') }}</th>
                                                <td>Rp {{ $shipment->price_per_kg == floor($shipment->price_per_kg) ? number_format($shipment->price_per_kg, 0, ',', '.') : rtrim(rtrim(number_format($shipment->price_per_kg, 2, ',', '.'), '0'), '.') }}</td>
                                            </tr>
                                            <tr>
                                                <th>{{ __('common.discount') }}</th>
                                                <td>{{ $shipment->discount_amount == floor($shipment->discount_amount) ? number_format($shipment->discount_amount, 0) : rtrim(rtrim(number_format($shipment->discount_amount, 2), '0'), '.') }}</td>
                                            </tr>
                                            <tr>
                                                <th>{{ __('common.total_charge') }}</th>
                                                <td class="font-weight-bold text-primary">IDR {{ $shipment->total_charge == floor($shipment->total_charge) ? number_format($shipment->total_charge, 0, ',', '.') : rtrim(rtrim(number_format($shipment->total_charge, 2, ',', '.'), '0'), '.') }}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                            <div class="text-right mb-4">
                                @if($shipment->customer->whatsapp)
                                    <form action="{{ route('shipments.sendWhatsApp', $shipment->id) }}" method="POST" class="d-inline" id="whatsapp-form">
                                        @csrf
                                        <button type="button" class="btn btn-success" onclick="confirmSendWhatsApp()">
                                            <i class="mdi mdi-whatsapp"></i> Send WhatsApp Notification
                                        </button>
                                    </form>
                                @else
                                    <button type="button" class="btn btn-secondary" disabled title="Customer WhatsApp number not available">
                                        <i class="mdi mdi-whatsapp"></i> WhatsApp Not {{ __('common.available') }}
                                    </button>
                                @endif
                            </div>
                        </div>
                    </div>

                    <div class="card mt-2">
                        <div class="card-header bg-light">
                            <h5 class="mb-0">Shipment Items</h5>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>{{ __('shipment_page.description') }}</th>
                                            <th>Dimensions (cm)</th>
                                            <th>Volume</th>
                                            <th>Weight</th>
                                            <th>{{ __('shipment_page.quantity') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($shipment->items as $index => $item)
                                            <tr>
                                                <td>{{ $index + 1 }}</td>
                                                <td>{{ $item->description }}</td>
                                                <td>{{ $item->length_m }} × {{ $item->width_m }} × {{ $item->height_m }}</td>
                                                <td>{{ rtrim(rtrim(number_format($item->volume_cbm, 4), '0'), '.') }} CBM</td>
                                                <td>{{ $item->weight_kg == floor($item->weight_kg) ? number_format($item->weight_kg, 0) : rtrim(rtrim(number_format($item->weight_kg, 2), '0'), '.') }} KG</td>
                                                <td>{{ $item->quantity }}</td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('footer')
<script src="{{ asset('assets/libs/sweetalert2/sweetalert2.min.js') }}"></script>
<script>
    $(function() {
        // Check for flash message
        @if(session('success'))
            Swal.fire({
                title: 'Success!',
                text: "{{ session('success') }}",
                icon: 'success',
                confirmButtonColor: '#3085d6'
            });
        @endif

        @if(session('error'))
            Swal.fire({
                title: 'Error!',
                text: "{{ session('error') }}",
                icon: 'error',
                confirmButtonColor: '#3085d6'
            });
        @endif
    });

    function confirmSendWhatsApp() {
        Swal.fire({
            title: 'Send WhatsApp Notification?',
            text: 'This will send a shipment notification to {{ $shipment->customer->full_name }} ({{ $shipment->customer->whatsapp }})',
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '#28a745',
            cancelButtonColor: '#6c757d',
            confirmButtonText: '<i class="mdi mdi-whatsapp"></i> Yes, Send WhatsApp',
            cancelButtonText: '{{ __('buttons.cancel') }}'
        }).then((result) => {
            if (result.isConfirmed) {
                document.getElementById('whatsapp-form').submit();
            }
        });
    }
</script>
@endsection