@extends('layouts.admin.master')
@section('content')
    @php
        $page_title = 'Detail Rute';
        $page_attr = ['title' => $page_title, 'sub_title' => 'Informasi Lengkap Rute', 'icon' => 'fas fa-route'];

        // Format metadata untuk display
        $metadata = [];
        if ($route->metadata) {
            if (isset($route->metadata['waypoints'])) {
                $metadata['Waypoints'] = count($route->metadata['waypoints']);
            }
            if (isset($route->metadata['avoidance_zones'])) {
                $metadata['Zona yang Dihindari'] = count($route->metadata['avoidance_zones']);
            }
            if (isset($route->metadata['elevation_profile'])) {
                $metadata['Profil Elevasi'] = 'Tersedia';
            }
        }
    @endphp

    <div class="card">
        <div class="card-header">
            <div class="d-flex justify-content-between align-items-center">
                <h5 class="card-title mb-0">{{ $page_title }}</h5>
                <div>
                    <a href="{{ route('admin.leaflet.routing.edit', $route->id) }}" class="btn btn-warning btn-sm me-1"
                        data-bs-toggle="tooltip" title="Edit">
                        <i class="fas fa-edit"></i>
                    </a>
                    <a href="{{ route('admin.leaflet.routing.index') }}" class="btn btn-secondary btn-sm"
                        data-bs-toggle="tooltip" title="Kembali">
                        <i class="fas fa-arrow-left"></i>
                    </a>
                </div>
            </div>
        </div>
        <div class="card-body">
            <div class="row">
                <!-- Left Column - Route Information -->
                <div class="col-lg-5">
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped mb-4">
                            <tbody>
                                <tr>
                                    <td width="40%"><strong>ID Rute</strong></td>
                                    <td>{{ $route->uuid }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Asal</strong></td>
                                    <td>
                                        {{ $route->origin->title }}
                                        <button class="btn btn-sm btn-outline-primary py-0 px-1 ms-2 btn-zoom-marker"
                                            data-type="origin" title="Zoom ke Lokasi">
                                            <i class="fas fa-search-location"></i>
                                        </button>
                                    </td>
                                </tr>
                                <tr>
                                    <td><strong>Tujuan</strong></td>
                                    <td>
                                        {{ $route->destination->title }}
                                        <button class="btn btn-sm btn-outline-primary py-0 px-1 ms-2 btn-zoom-marker"
                                            data-type="destination" title="Zoom ke Lokasi">
                                            <i class="fas fa-search-location"></i>
                                        </button>
                                    </td>
                                </tr>
                                <tr>
                                    <td><strong>Jenis Rute</strong></td>
                                    <td>
                                        <span class="badge bg-{{ $route->profile == 'driving' ? 'primary' :
                                            ($route->profile == 'walking' ? 'success' :
                                            ($route->profile == 'cycling' ? 'info' :
                                            ($route->profile == 'truck' ? 'warning' : 'danger'))) }}">
                                            {{ $route->profile_text }}
                                        </span>
                                    </td>
                                </tr>
                                <tr>
                                    <td><strong>Jarak</strong></td>
                                    <td>{{ $route->distance_text }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Durasi</strong></td>
                                    <td>{{ $route->duration_text }}</td>
                                </tr>
                                @if($route->driver)
                                <tr>
                                    <td><strong>Driver</strong></td>
                                    <td>{{ $route->driver->nama }}</td>
                                </tr>
                                @endif
                                @if($route->vehicle)
                                <tr>
                                    <td><strong>Kendaraan</strong></td>
                                    <td>{{ $route->vehicle->plate_number }} ({{ $route->vehicle->type }})</td>
                                </tr>
                                @endif
                                <tr>
                                    <td><strong>Hindari Tol</strong></td>
                                    <td>{!! $route->avoid_tolls ? '<span class="badge bg-danger">Ya</span>' : '<span class="badge bg-secondary">Tidak</span>' !!}</td>
                                </tr>
                                <tr>
                                    <td><strong>Optimasi</strong></td>
                                    <td>{!! $route->is_optimized ? '<span class="badge bg-success">Ya</span>' : '<span class="badge bg-secondary">Tidak</span>' !!}</td>
                                </tr>
                                <tr>
                                    <td><strong>Dibuat Pada</strong></td>
                                    <td>{{ $route->created_at->translatedFormat('d F Y H:i') }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Diupdate Pada</strong></td>
                                    <td>{{ $route->updated_at->translatedFormat('d F Y H:i') }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <!-- Metadata Section -->
                    @if(!empty($metadata))
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-header bg-light">
                            <h6 class="card-title mb-0">Metadata Rute</h6>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-sm table-borderless mb-0">
                                    <tbody>
                                        @foreach($metadata as $key => $value)
                                        <tr>
                                            <td width="50%"><strong>{{ $key }}</strong></td>
                                            <td>{{ $value }}</td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    @endif

                    <!-- Export Options -->
                    <div class="card border-0 shadow-sm">
                        <div class="card-header bg-light">
                            <h6 class="card-title mb-0">Ekspor Rute</h6>
                        </div>
                        <div class="card-body">
                            <div class="d-flex flex-wrap gap-2">
                                <a href="{{ route('admin.leaflet.routing.export', [$route->id, 'geojson']) }}"
                                    class="btn btn-outline-primary btn-sm">
                                    <i class="fas fa-file-code me-1"></i> GeoJSON
                                </a>
                                <a href="{{ route('admin.leaflet.routing.export', [$route->id, 'gpx']) }}"
                                    class="btn btn-outline-success btn-sm">
                                    <i class="fas fa-route me-1"></i> GPX
                                </a>
                                <a href="{{ route('admin.leaflet.routing.export', [$route->id, 'kml']) }}"
                                    class="btn btn-outline-danger btn-sm">
                                    <i class="fas fa-map-marked-alt me-1"></i> KML
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Right Column - Map and Directions -->
                <div class="col-lg-7">
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-header bg-light">
                            <div class="d-flex justify-content-between align-items-center">
                                <h6 class="card-title mb-0">Peta Rute</h6>
                                <div>
                                    <button id="fitBoundsBtn" class="btn btn-sm btn-outline-secondary py-0 px-2"
                                        title="Zoom ke seluruh rute">
                                        <i class="fas fa-expand"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="card-body p-0">
                            <div id="routeMap" style="height: 300px; width: 100%;"></div>
                        </div>
                    </div>

                    <div class="card border-0 shadow-sm">
                        <div class="card-header bg-light">
                            <h6 class="card-title mb-0">Petunjuk Perjalanan</h6>
                        </div>
                        <div class="card-body">
                            <div id="directionsContainer" style="max-height: 300px; overflow-y: auto;">
                                @if($directions && count($directions) > 0)
                                    <ol class="list-group list-group-numbered">
                                        @foreach($directions as $direction)
                                            <li class="list-group-item direction-step"
                                                data-lat="{{ $direction['location']->latitude }}"
                                                data-lng="{{ $direction['location']->longitude }}">
                                                <div class="d-flex justify-content-between align-items-start">
                                                    <div>
                                                        {!! $direction['instruction'] !!}
                                                        <div class="text-muted small mt-1">
                                                            @if($direction['distance'])
                                                                <span class="me-2">
                                                                    <i class="fas fa-ruler me-1"></i>
                                                                    {{ formatDistance($direction['distance']) }}
                                                                </span>
                                                            @endif
                                                            @if($direction['duration'])
                                                                <span>
                                                                    <i class="far fa-clock me-1"></i>
                                                                    {{ formatDuration($direction['duration']) }}
                                                                </span>
                                                            @endif
                                                        </div>
                                                    </div>
                                                    <button class="btn btn-sm btn-outline-primary py-0 px-1 btn-zoom-direction"
                                                        title="Zoom ke lokasi">
                                                        <i class="fas fa-search-location"></i>
                                                    </button>
                                                </div>
                                            </li>
                                        @endforeach
                                    </ol>
                                @else
                                    <p class="text-muted mb-0">Tidak ada petunjuk perjalanan yang tersedia</p>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('stylesheet')
    <link rel="stylesheet" href="{{ asset('assets/templates/admin/plugins/leaflet/leaflet.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/templates/admin/css/leaflet/routing/viewer.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/templates/admin/css/leaflet/routing/shared.css') }}" />
@endsection

@section('javascript')
    <script src="{{ asset('assets/templates/admin/plugins/leaflet/leaflet.min.js') }}"></script>
    <script src="{{ asset('assets/templates/admin/plugins/leaflet/polyline.encoded.js') }}"></script>
    @php
        $mapCenter = $route->metadata['spatial']['centroid'] ?? [-2.5489, 118.0149];
        $mapZoom = 12;
        $mapBounds = config('leaflet.map_bounds', [[-11, 95], [6, 141]]);
    @endphp
    <script>
        const config = {
            map: {
                center: @json($mapCenter),
                zoom: @json($mapZoom),
                maxBounds: @json($mapBounds)
            },
            route: {
                polyline: @json($route->polyline),
                origin: {
                    id: @json($route->origin_id),
                    lat: @json($route->origin->location->latitude),
                    lng: @json($route->origin->location->longitude),
                    title: @json($route->origin->title)
                },
                destination: {
                    id: @json($route->destination_id),
                    lat: @json($route->destination->location->latitude),
                    lng: @json($route->destination->location->longitude),
                    title: @json($route->destination->title)
                },
                bounds: @json($route->bounds)
            }
        };
    </script>
    <script src="{{ asset('assets/templates/admin/js/leaflet/routing/util.js') }}"></script>
    <script src="{{ asset('assets/templates/admin/js/leaflet/routing/viewer.js') }}"></script>
@endsection