@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'));
        $can_toggle = auth_can(h_prefix('toggle-visibility'));
    @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 Layer</h6>
                </div>
                @if ($can_insert)
                    <div>
                        <a href="{{ route('admin.leaflet.layers.create') }}" class="btn btn-rounded btn-primary btn-sm">
                            <i class="fas fa-plus"></i> Tambah Layer
                        </a>
                    </div>
                @endif
            </div>
            <hr class="mt-1 mb-0" />
            <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 Data
                        </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">
                                        <label for="filter_type">Jenis Layer</label>
                                        <select class="form-control" id="filter_type" name="filter_type">
                                            <option value="">Semua</option>
                                            @foreach(['tile', 'geojson', 'wms', 'wmts', 'vector', 'overlay', 'group', 'heatmap'] as $type)
                                                <option value="{{ $type }}">{{ ucfirst($type) }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-4">
                                        <label for="filter_source">Sumber</label>
                                        <select class="form-control" id="filter_source" name="filter_source">
                                            <option value="">Semua</option>
                                            <option value="internal">Internal</option>
                                            <option value="external">External</option>
                                            <option value="user_upload">User Upload</option>
                                        </select>
                                    </div>
                                    <div class="col-md-4">
                                        <label for="filter_visible">Status</label>
                                        <select class="form-control" id="filter_visible" name="filter_visible">
                                            <option value="">Semua</option>
                                            <option value="1">Aktif</option>
                                            <option value="0">Nonaktif</option>
                                        </select>
                                    </div>
                                </div>
                            </form>
                            <button type="submit" form="FilterForm" class="btn btn-rounded btn-sm btn-secondary mt-2">
                                <i class="fas fa-sync-alt me-1"></i> Terapkan Filter
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <table class="table table-striped table-hover w-100" id="tbl_main">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>Nama</th>
                        <th>Slug</th>
                        <th>Jenis</th>
                        <th>Sumber</th>
                        <th>Parent</th>
                        <th>Base Layer</th>
                        <th>Status</th>
                        <th>Refresh</th>
                        {!! $can_delete || $can_update ? '<th>Aksi</th>' : '' !!}
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </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/sweetalert2/sweetalert2.min.css') }}">
@endsection

@section('javascript')
    <script src="{{ asset('assets/templates/admin/plugins/datatable/js/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/sweetalert2/sweetalert2.all.min.js') }}"></script>
    <script>
        const can_update = {{ $can_update ? 'true' : 'false' }};
        const can_delete = {{ $can_delete ? 'true' : 'false' }};
        const can_toggle = {{ $can_toggle ? 'true' : 'false' }};
        const table_html = $('#tbl_main');

        // Routes
        const route_index = "{{ route('admin.leaflet.layers.index') }}";
        const route_datatable = "{{ route('admin.leaflet.layers.datatable') }}";
        const route_create = "{{ route('admin.leaflet.layers.create') }}";
        const route_edit = "{{ route('admin.leaflet.layers.edit', ['layer' => ':id']) }}";
        const route_delete = "{{ route('admin.leaflet.layers.destroy', ['layer' => ':id']) }}";
        const route_toggle = "{{ route('admin.leaflet.layers.toggle-visibility', ['id' => ':id']) }}";
        const route_refresh = "{{ route('admin.leaflet.layers.refresh', ['layer' => ':id']) }}";
    </script>
    <script src="{{ asset('assets/templates/admin/js/leaflet/layers/index.js') }}"></script>
@endsection