@extends('layouts.admin.master')
@section('content')
    @php
        $can_insert = auth_can(h_prefix('insert'));
        $can_update = auth_can(h_prefix('update'));
        $can_delete = auth_can(h_prefix('delete'));
        $profiles = ['driving', 'walking', 'cycling', 'truck', 'flight'];
    @endphp
    <div class="card mt-3">
        <div class="card-body">
            <div class="card-title d-md-flex flex-row justify-content-between">
                <div>
                    <h6 class="mt-2 text-uppercase">Manajemen Rute</h6>
                </div>
                @if ($can_insert)
                    <div>
                        <a href="{{ route(h_prefix('create')) }}" class="btn btn-rounded btn-primary btn-sm">
                            <i class="fas fa-plus"></i> Buat Rute Baru
                        </a>
                    </div>
                @endif
            </div>
            <hr class="mt-1 mb-0" />

            <!-- Filter Section -->
            <div class="accordion accordion-flush" id="accordionOption">
                <div class="accordion-item">
                    <h6 class="accordion-header" id="headingSix">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                            data-bs-target="#filterData" aria-expanded="false" aria-controls="filterData">
                            <i class="fas fa-filter me-2"></i>Filter Lanjutan
                        </button>
                    </h6>
                    <div id="filterData" class="accordion-collapse collapse" aria-labelledby="headingSix"
                        data-bs-parent="#accordionOption">
                        <div class="accordion-body">
                            <form action="javascript:void(0)" class="ml-md-3 mb-md-3" id="FilterForm">
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="filter_profile">Profil Rute</label>
                                            <select class="form-control" id="filter_profile" name="filter_profile">
                                                <option value="">Semua Profil</option>
                                                @foreach($profiles as $profile)
                                                    <option value="{{ $profile }}">
                                                        {{ match($profile) {
                                                            'driving' => 'Mengemudi',
                                                            'walking' => 'Berjalan Kaki',
                                                            'cycling' => 'Bersepeda',
                                                            'truck' => 'Truk',
                                                            'flight' => 'Penerbangan',
                                                            default => ucfirst($profile)
                                                        } }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="filter_optimized">Status Optimasi</label>
                                            <select class="form-control" id="filter_optimized" name="filter_optimized">
                                                <option value="">Semua Status</option>
                                                <option value="1">Terveroptimasi</option>
                                                <option value="0">Belum Dioptimasi</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="filter_tolls">Hindari Tol</label>
                                            <select class="form-control" id="filter_tolls" name="filter_tolls">
                                                <option value="">Semua</option>
                                                <option value="1">Ya</option>
                                                <option value="0">Tidak</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="row mt-2">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="filter_search">Pencarian</label>
                                            <input type="text" class="form-control" id="filter_search"
                                                name="filter_search" placeholder="Cari berdasarkan asal/tujuan/driver...">
                                        </div>
                                    </div>
                                </div>
                            </form>
                            <div style="clear: both"></div>
                            <button type="submit" form="FilterForm" class="btn btn-rounded btn-sm btn-secondary mt-2"
                                data-toggle="tooltip" title="Refresh Filter Table">
                                <i class="fas fa-sync-alt me-1"></i> Terapkan Filter
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Main Table -->
            <div class="table-responsive">
                <table class="table table-striped table-hover w-100" id="tbl_main">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Asal</th>
                            <th>Tujuan</th>
                            <th>Profil</th>
                            <th>Jarak</th>
                            <th>Durasi</th>
                            <th>Optimasi</th>
                            <th>Tol</th>
                            <th>Driver</th>
                            <th>Kendaraan</th>
                            <th>Dibuat</th>
                            {!! $can_delete || $can_update ? '<th>Aksi</th>' : '' !!}
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
@endsection
@section('stylesheet')
    <link rel="stylesheet" href="{{ asset('assets/templates/admin/plugins/datatable/css/dataTables.bootstrap5.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/css/leaflet/routing/datatable.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/templates/admin/css/leaflet/routing/editor.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/templates/admin/css/leaflet/routing/shared.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/templates/admin/plugins/sweetalert2/sweetalert2.min.css') }}" />
@endsection
@section('javascript')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables.net/2.1.1/jquery.dataTables.min.js"></script>
    <script src="{{ asset('assets/templates/admin/plugins/datatable/js/jquery.dataTables.min.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-loading-overlay/2.1.7/loadingoverlay.min.js"></script>
    <script src="{{ asset('assets/templates/admin/plugins/datatable/js/dataTables.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('assets/templates/admin/plugins/sweetalert2/sweetalert2.all.min.js') }}"></script>
    <script src="{{ asset('assets/templates/admin/js/leaflet/routing/datatable.js') }}"></script>
    <script src="{{ asset('assets/templates/admin/js/leaflet/routing/util.js') }}"></script>
    <script>
        const can_update = @json($can_update);
        const can_delete = @json($can_delete);
        const table_html = $('#tbl_main');
        const profiles = @json($profiles);
        // Route definitions matching modul_menu_routing.txt
        const routes = {
            datatable: "{{ route('admin.leaflet.routing.datatable') }}",
            show: "{{ route('admin.leaflet.routing.show', ':id') }}",
            edit: "{{ route('admin.leaflet.routing.edit', ':id') }}",
            delete: "{{ route('admin.leaflet.routing.destroy', ':id') }}",
            export: {
                gpx: "{{ route('admin.leaflet.routing.export', ['route' => ':id', 'type' => 'gpx']) }}",
                geojson: "{{ route('admin.leaflet.routing.export', ['route' => ':id', 'type' => 'geojson']) }}",
                kml: "{{ route('admin.leaflet.routing.export', ['route' => ':id', 'type' => 'kml']) }}"
            }
        };
        // Profile badge colors matching RouteRepository.php
        const profile_badges = {
            driving: 'primary',
            walking: 'success',
            cycling: 'info',
            truck: 'warning',
            flight: 'danger'
        };
    </script>
@endsection