@extends('layouts.main')

@section('content')
<div class="pagetitle">
    <h1>Peta Rute Order #{{ $order->order_number }}</h1>
    <nav>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="/">Home</a></li>
            <li class="breadcrumb-item"><a href="{{ route('orders.index') }}">Orders</a></li>
            <li class="breadcrumb-item"><a href="{{ route('orders.show', $order->id) }}">{{ $order->order_number }}</a></li>
            <li class="breadcrumb-item active">Peta Rute</li>
        </ol>
    </nav>
</div>

<section class="section">
    <div class="row">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h5 class="card-title mb-0">Rute Perjalanan</h5>
                        <a href="https://www.google.com/maps/dir/?api=1&origin={{ $order->lat_start }},{{ $order->lon_start }}&destination={{ $order->client_lat }},{{ $order->client_lng }}&travelmode=driving" 
                           target="_blank" 
                           class="btn btn-success btn-sm">
                            <i class="bi bi-google"></i> Buka di Google Maps
                        </a>
                    </div>
                    
                    <!-- Map Container -->
                    <div id="map" style="height: 600px; width: 100%; border-radius: 8px;"></div>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Informasi Lokasi</h5>
                    
                    <div class="mb-3">
                        <h6><i class="bi bi-geo-alt-fill text-success"></i> Lokasi Teknisi</h6>
                        <p class="mb-1 small">
                            @if($order->assignedTeknisi)
                                <strong>{{ $order->assignedTeknisi->name }}</strong><br>
                            @endif
                            Lat: {{ $order->lat_start }}<br>
                            Lng: {{ $order->lon_start }}
                        </p>
                    </div>

                    <div class="mb-3">
                        <h6><i class="bi bi-geo-alt-fill text-danger"></i> Lokasi Customer</h6>
                        <p class="mb-1 small">
                            <strong>{{ $order->client_name }}</strong><br>
                            {{ $order->client_address }}<br>
                            Lat: {{ $order->client_lat }}<br>
                            Lng: {{ $order->client_lng }}
                        </p>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Informasi Rute</h5>
                    
                    @if($teknisiPath && $teknisiPath->count() > 0)
                        <div class="alert alert-warning mb-3">
                            <h6 class="alert-heading">
                                <i class="bi bi-person-walking"></i> Tracking Teknisi Aktif
                            </h6>
                            <hr>
                            <p class="mb-1 small"><strong>Total Point Tracking:</strong> {{ $teknisiPath->count() }} lokasi</p>
                            <p class="mb-1 small"><strong>Waktu Mulai:</strong> {{ $teknisiPath->first()['timestamp'] }}</p>
                            <p class="mb-0 small"><strong>Update Terakhir:</strong> {{ $teknisiPath->last()['timestamp'] }}</p>
                        </div>
                    @else
                        <div class="alert alert-info mb-3">
                            <p class="mb-0 small"><i class="bi bi-info-circle"></i> Belum ada data tracking perjalanan teknisi untuk order ini.</p>
                        </div>
                    @endif

                    <h6 class="mb-2">Alternatif Rute</h6>
                    <div id="routeAlternatives">
                        <div class="text-center py-3">
                            <div class="spinner-border text-primary" role="status">
                                <span class="visually-hidden">Loading...</span>
                            </div>
                            <p class="mt-2 text-muted small">Memuat rute...</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@push('styles')
<style>
.route-card {
    padding: 15px;
    margin-bottom: 12px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    transition: all 0.3s ease;
    background-color: white;
}

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

.route-card.active {
    background-color: #f0f9ff;
    border-color: #22c55e;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.2);
}

.route-card.active h6 {
    color: #16a34a;
}

#routeAlternatives {
    max-height: 500px;
    overflow-y: auto;
}

#routeAlternatives::-webkit-scrollbar {
    width: 6px;
}

#routeAlternatives::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

#routeAlternatives::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

#routeAlternatives::-webkit-scrollbar-thumb:hover {
    background: #555;
}
</style>
@endpush

@push('scripts')
<!-- Set route configuration -->
<script>
window.orderRouteConfig = {
    startLat: {{ $order->lat_start }},
    startLng: {{ $order->lon_start }},
    endLat: {{ $order->client_lat }},
    endLng: {{ $order->client_lng }},
    teknisiPath: @json($teknisiPath)
};
console.log('Order Route Config:', window.orderRouteConfig);
console.log('Teknisi Path Points:', window.orderRouteConfig.teknisiPath.length);
</script>

<!-- Load Route Map Handler -->
<script src="{{ asset('js/order-route-map.js') }}"></script>

<!-- Load Google Maps API -->
<script>
(function() {
    console.log('Loading Google Maps API...');
    const script = document.createElement('script');
    script.src = 'https://maps.googleapis.com/maps/api/js?key={{ config("google.maps.api_key") }}&libraries=places,geometry&callback=initRouteMapCallback';
    script.async = true;
    script.defer = true;
    script.onerror = function() {
        console.error('Failed to load Google Maps API');
        document.getElementById('routeAlternatives').innerHTML = 
            '<div class="alert alert-danger"><i class="bi bi-exclamation-triangle"></i> Gagal memuat Google Maps API</div>';
    };
    document.head.appendChild(script);
})();
</script>
@endpush