@extends('layouts.admin.master')
@section('content')
    @php
        $page_title = 'Edit Rute';
        $page_attr = ['title' => $page_title, 'sub_title' => 'Form Edit Rute', 'icon' => 'fas fa-route'];
    @endphp
    <div class="card">
        <div class="card-header">
            <h5 class="card-title mb-0">{{ $page_title }}</h5>
        </div>
        <div class="card-body">
            <form id="RouteForm" action="{{ route('admin.leaflet.routing.update', $route->id) }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                <div class="row">
                    <!-- Left Column - Form Inputs -->
                    <div class="col-lg-6">
                        <div class="form-group mb-3">
                            <label class="form-label" for="origin_id">Asal <span class="text-danger">*</span></label>
                            <select class="form-control select2" id="origin_id" name="origin_id" required
                                data-placeholder="Pilih titik asal" disabled>
                                @foreach($markers as $marker)
                                    <option value="{{ $marker->id }}"
                                        data-lat="{{ $marker->latitude }}"
                                        data-lng="{{ $marker->longitude }}"
                                        {{ $route->origin_id == $marker->id ? 'selected' : '' }}>
                                        {{ $marker->title }}
                                    </option>
                                @endforeach
                            </select>
                            <small class="text-muted">Titik awal rute tidak dapat diubah</small>
                        </div>
                        <div class="form-group mb-3">
                            <label class="form-label" for="destination_id">Tujuan <span class="text-danger">*</span></label>
                            <select class="form-control select2" id="destination_id" name="destination_id" required
                                data-placeholder="Pilih titik tujuan" disabled>
                                @foreach($markers as $marker)
                                    <option value="{{ $marker->id }}"
                                        data-lat="{{ $marker->latitude }}"
                                        data-lng="{{ $marker->longitude }}"
                                        {{ $route->destination_id == $marker->id ? 'selected' : '' }}>
                                        {{ $marker->title }}
                                    </option>
                                @endforeach
                            </select>
                            <small class="text-muted">Titik akhir rute tidak dapat diubah</small>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label class="form-label" for="profile">Jenis Rute <span class="text-danger">*</span></label>
                                    <select class="form-control" id="profile" name="profile" required>
                                        <option value="driving" {{ $route->profile == 'driving' ? 'selected' : '' }}>Mengemudi</option>
                                        <option value="walking" {{ $route->profile == 'walking' ? 'selected' : '' }}>Berjalan Kaki</option>
                                        <option value="cycling" {{ $route->profile == 'cycling' ? 'selected' : '' }}>Bersepeda</option>
                                        <option value="truck" {{ $route->profile == 'truck' ? 'selected' : '' }}>Truk</option>
                                        <option value="flight" {{ $route->profile == 'flight' ? 'selected' : '' }}>Penerbangan</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label class="form-label" for="driver_id">Driver</label>
                                    <select class="form-control select2" id="driver_id" name="driver_id"
                                        data-placeholder="Pilih driver (opsional)">
                                        <option value=""></option>
                                        @foreach($drivers as $driver)
                                            <option value="{{ $driver->id }}"
                                                {{ $route->driver_id == $driver->id ? 'selected' : '' }}>
                                                {{ $driver->nama }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="form-group mb-3">
                            <label class="form-label" for="vehicle_id">Kendaraan</label>
                            <select class="form-control select2" id="vehicle_id" name="vehicle_id"
                                data-placeholder="Pilih kendaraan (opsional)">
                                <option value=""></option>
                                @foreach($vehicles as $vehicle)
                                    <option value="{{ $vehicle->id }}"
                                        {{ $route->vehicle_id == $vehicle->id ? 'selected' : '' }}>
                                        {{ $vehicle->plate_number }} - {{ $vehicle->type }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-check form-switch mb-3">
                            <input class="form-check-input" type="checkbox" id="avoid_tolls" name="avoid_tolls" value="1"
                                {{ $route->avoid_tolls ? 'checked' : '' }}>
                            <label class="form-check-label" for="avoid_tolls">Hindari Tol</label>
                        </div>
                        <div class="form-group mb-3">
                            <label class="form-label" for="notes">Catatan</label>
                            <textarea class="form-control" id="notes" name="notes" rows="3"
                                placeholder="Catatan tambahan tentang rute ini">{{ $route->notes }}</textarea>
                        </div>
                    </div>
                    <!-- Right Column - Map and Route Info -->
                    <div class="col-lg-6">
                        <div class="card border-0 shadow-sm mb-3">
                            <div class="card-header bg-light">
                                <h6 class="card-title mb-0">Peta Rute</h6>
                            </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">Informasi Rute</h6>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-2">
                                            <small class="text-muted">Jarak</small>
                                            <h5 id="distanceText" class="mb-0">{{ $route->distance_text }}</h5>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-2">
                                            <small class="text-muted">Durasi</small>
                                            <h5 id="durationText" class="mb-0">{{ $route->duration_text }}</h5>
                                        </div>
                                    </div>
                                </div>
                                <hr class="my-2">
                                <div id="routeInstructions" class="small" style="max-height: 150px; overflow-y: auto;">
                                    @if($route->metadata && isset($route->metadata['instructions']))
                                        <ol class="mb-0">
                                            @foreach($route->metadata['instructions'] as $instruction)
                                                <li>{{ $instruction }}</li>
                                            @endforeach
                                        </ol>
                                    @else
                                        <p class="text-muted mb-0">Tidak ada petunjuk rute yang tersedia</p>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="mt-4">
                    <button type="button" id="recalculateBtn" class="btn btn-warning">
                        <i class="fas fa-redo me-1"></i> Hitung Ulang
                    </button>
                    <button type="submit" id="saveBtn" class="btn btn-primary">
                        <i class="fas fa-save me-1"></i> Simpan Perubahan
                    </button>
                    <a href="{{ route('admin.leaflet.routing.index') }}" class="btn btn-light">
                        <i class="fas fa-times me-1"></i> Batal
                    </a>
                </div>
            </form>
        </div>
    </div>
@endsection

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

@section('javascript')
    <script src="{{ asset('assets/templates/admin/plugins/select2/js/select2.full.min.js') }}"></script>
    <script src="{{ asset('assets/templates/admin/plugins/leaflet/leaflet.min.js') }}"></script>
    <script src="{{ asset('assets/templates/admin/plugins/leaflet/polyline.encoded.js') }}"></script>
    <script src="{{ asset('assets/templates/admin/plugins/sweetalert2/sweetalert2.all.min.js') }}"></script>
    @php
        $mapCenter = $route->metadata['spatial']['centroid'] ?? config('leaflet.map_center', [-2.5489, 118.0149]);
        $mapZoom = 12;
        $mapBounds = config('leaflet.map_bounds', [[-11, 95], [6, 141]]);
        $markersJson = $markers->map(fn($marker) => [
            'id' => $marker->id,
            'title' => $marker->title,
            'lat' => $marker->latitude,
            'lng' => $marker->longitude,
            'icon' => $marker->icon_url
        ]);
    @endphp
    <script>
        const config = {
            map: {
                center: @json($mapCenter),
                zoom: @json($mapZoom),
                maxBounds: @json($mapBounds)
            },
            routes: {
                calculate: "{{ route('admin.leaflet.routing.calculate') }}",
                update: "{{ route('admin.leaflet.routing.update', $route->id) }}",
                index: "{{ route('admin.leaflet.routing.index') }}"
            },
            markers: @json($markersJson),
            routeData: @json([
                'origin_id' => $route->origin_id,
                'destination_id' => $route->destination_id,
                'polyline' => $route->polyline,
                'distance' => $route->distance,
                'duration' => $route->duration,
                'profile' => $route->profile,
                'metadata' => $route->metadata,
                'avoid_tolls' => $route->avoid_tolls
            ])
        };
    </script>
    <script src="{{ asset('assets/templates/admin/js/leaflet/routing/util.js') }}"></script>
    <script src="{{ asset('assets/templates/admin/js/leaflet/routing/planner.js') }}"></script>
    <script src="{{ asset('assets/templates/admin/js/leaflet/routing/editor.js') }}"></script>
@endsection