@extends('layouts.admin.master')
@section('content')
    @php
        $page_title = 'Tambah Rute Baru';
        $page_attr = ['title' => $page_title, 'sub_title' => 'Form Input 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.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <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">
                                <option value=""></option>
                                @foreach($markers as $marker)
                                    <option
                                        value="{{ $marker['id'] }}"
                                        data-lat="{{ $marker['lat'] }}"
                                        data-lng="{{ $marker['lng'] }}">
                                        {{ $marker['title'] }}
                                    </option>
                                @endforeach
                            </select>
                            <small class="text-muted">Pilih marker sebagai titik awal rute</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">
                                <option value=""></option>
                                @foreach($markers as $marker)
                                    <option
                                        value="{{ $marker['id'] }}"
                                        data-lat="{{ $marker['lat'] }}"
                                        data-lng="{{ $marker['lng'] }}">
                                        {{ $marker['title'] }}
                                    </option>
                                @endforeach
                            </select>
                            <small class="text-muted">Pilih marker sebagai titik akhir rute</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">Mengemudi</option>
                                        <option value="walking">Berjalan Kaki</option>
                                        <option value="cycling">Bersepeda</option>
                                        <option value="truck">Truk</option>
                                        <option value="flight">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 }}">{{ $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 }}">{{ $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">
                            <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"></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">-</h5>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-2">
                                            <small class="text-muted">Durasi</small>
                                            <h5 id="durationText" class="mb-0">-</h5>
                                        </div>
                                    </div>
                                </div>
                                <hr class="my-2">
                                <div id="routeInstructions" class="small" style="max-height: 150px; overflow-y: auto;">
                                    <p class="text-muted mb-0">Pilih asal dan tujuan untuk melihat petunjuk rute</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="mt-4">
                    <button type="button" id="calculateBtn" class="btn btn-secondary">
                        <i class="fas fa-calculator me-1"></i> Hitung Rute
                    </button>
                    <button type="submit" id="saveBtn" class="btn btn-primary" disabled>
                        <i class="fas fa-save me-1"></i> Simpan Rute
                    </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="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <link rel="stylesheet" href="{{ asset('assets/templates/admin/plugins/select2/css/select2.min.css') }}" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="{{ asset('assets/templates/admin/plugins/leaflet/leaflet.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/templates/admin/css/leaflet/routing/planner.css') }}" />
@endsection
@section('javascript')
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <script src="{{ asset('assets/templates/admin/plugins/select2/js/select2.min.js') }}"></script>
    <script src="{{ asset('assets/templates/admin/plugins/leaflet/leaflet.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 = config('leaflet.map_center', [-2.5489, 118.0149]);
        $mapZoom = config('leaflet.map_zoom', 5);
        $mapBounds = config('leaflet.map_bounds', [[-11, 95], [6, 141]]);
        $markersJson = collect($markers)->map(fn($marker) => [
            'id' => $marker['id'],
            'title' => $marker['title'],
            'lat' => $marker['lat'],
            'lng' => $marker['lng'],
            'icon' => $marker['icon'] ?? null,
        ]);
    @endphp
    <script>
        const config = {
            map: {
                center: @json($mapCenter),
                zoom: @json($mapZoom),
                maxBounds: @json($mapBounds)
            },
            routes: {
                calculate: "{{ route('admin.leaflet.routing.calculate') }}",
                store: "{{ route('admin.leaflet.routing.store') }}",
                index: "{{ route('admin.leaflet.routing.index') }}"
            },
            markers: @json($markersJson)
        };
    </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>
@endsection