@extends('layouts.admin.master')
@section('content')
    @php
        $can_insert = auth_can(h_prefix('insert'));
        $can_edit = auth_can(h_prefix('edit'));
        $can_update = auth_can(h_prefix('update'));
        $can_delete = auth_can(h_prefix('delete'));
    @endphp
    <div class="card">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h5 class="card-title">Data {{ $page_attr['title'] }}</h5>
                @if ($can_insert)
                    <div>
                        <a href="{{ route('admin.leaflet.markers.create') }}" class="btn btn-primary btn-sm">
                            <i class="fas fa-plus"></i> Tambah Marker
                        </a>
                        <button class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#modal-import">
                            <i class="fas fa-file-import"></i> Import
                        </button>
                    </div>
                @endif
            </div>
            <!-- Filter -->
            <div class="accordion mb-3" id="filterAccordion">
                <div class="accordion-item">
                    <h2 class="accordion-header">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#filterCollapse">
                            <i class="fas fa-filter me-2"></i> Filter
                        </button>
                    </h2>
                    <div id="filterCollapse" class="accordion-collapse collapse" data-bs-parent="#filterAccordion">
                        <div class="accordion-body">
                            <form id="FilterForm" class="row g-2">
                                <div class="col-md-4">
                                    <label for="filter_layer" class="form-label">Layer</label>
                                    <select class="form-select" id="filter_layer" name="filter_layer">
                                        <option value="">Semua</option>
                                        @foreach ($layers as $layer)
                                            <option value="{{ $layer->id }}">{{ $layer->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label for="filter_category" class="form-label">Kategori</label>
                                    <select class="form-select" id="filter_category" name="filter_category">
                                        <option value="">Semua</option>
                                        @foreach ($categories as $cat)
                                            <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label for="filter_status" class="form-label">Status</label>
                                    <select class="form-select" id="filter_status" name="filter_status">
                                        <option value="">Semua</option>
                                        <option value="1">Visible</option>
                                        <option value="0">Hidden</option>
                                    </select>
                                </div>
                                <div class="col-12">
                                    <button type="submit" class="btn btn-sm btn-primary">
                                        <i class="fas fa-sync-alt me-1"></i> Terapkan
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Table -->
            <table id="tbl_main" class="table table-striped table-hover w-100">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>Nama</th>
                        <th>Latitude</th>
                        <th>Longitude</th>
                        <th>Kategori</th>
                        <th>Layer</th>
                        <th>Status</th>
                        <th>Dibuat</th>
                        {!! $can_delete || $can_edit || $can_update ? '<th>Aksi</th>' : '' !!}
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
    <!-- Modal Import -->
    <div class="modal fade" id="modal-import" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Import Marker</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="form-import" action="{{ route('admin.leaflet.markers.import') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="import_file" class="form-label">File Excel</label>
                            <input type="file" class="form-control" id="import_file" name="file" accept=".xlsx,.xls" required>
                        </div>
                        <div class="mb-3">
                            <label for="import_layer" class="form-label">Layer</label>
                            <select class="form-select" id="import_layer" name="layer_id">
                                @foreach ($layers as $layer)
                                    <option value="{{ $layer->id }}">{{ $layer->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <a href="{{ route('admin.leaflet.markers.template') }}" class="text-primary">
                            <i class="fas fa-download me-1"></i> Download Template
                        </a>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-primary">Import</button>
                    </div>
                </form>
            </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="{{ asset('assets/templates/admin/plugins/select2/css/select2.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/templates/admin/plugins/select2-bootstrap5-theme/select2-bootstrap5.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/templates/admin/plugins/jstree/themes/default/style.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/templates/admin/plugins/fontawesome-free-6.7.2-web/css/all.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/templates/admin/css/leaflet/markers/index.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/dataTables.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('assets/templates/admin/plugins/fontawesome-free-6.7.2-web\js\all.min.js') }}"></script>
    <script src="{{ asset('assets/templates/admin/plugins/loading-overlay/loadingoverlay.min.js') }}"></script>
    <script src="{{ asset('assets/templates/admin/plugins/sweetalert2/sweetalert2.all.min.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
    <script>
        const routeEditTemplate = @json(route('admin.leaflet.markers.edit', '__ID__'));
        const routeUpdateTemplate = @json(route('admin.leaflet.markers.update', '__ID__'));
        const routeDatatable = "{{ route('admin.leaflet.markers.datatable') }}";
        const can_update = "{{ $can_update ? 'true' : 'false' }}" === "true";
        const can_edit = "{{ $can_edit ? 'true' : 'false' }}" === "true";
        const can_delete = "{{ $can_delete ? 'true' : 'false' }}" === "true";
    </script>
    <script src="{{ asset('assets/templates/admin/js/leaflet/markers/index.js') }}"></script>
@endsection