@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_export = auth_can(h_prefix('export'));
    @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">Data {{ $page_attr['title'] }}</h6>
                </div>
                <div>
                    @if ($can_insert)
                        <a href="{{ route('admin.leaflet.heatmaps.create') }}" class="btn btn-primary btn-sm">
                            <i class="fas fa-plus"></i> Tambah
                        </a>
                    @endif
                    @if ($can_export)
                        <button type="button" class="btn btn-rounded btn-success btn-sm" id="btn_export_all">
                            <i class="fas fa-file-export"></i> Export All
                        </button>
                    @endif
                </div>
            </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"></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">
                                        <div class="form-group">
                                            <label for="filter_layer_id">Layer</label>
                                            <select class="form-control select2" id="filter_layer_id" name="filter_layer_id">
                                                <option value="">Semua Layer</option>
                                                @foreach ($layers as $layer)
                                                    <option value="{{ $layer->id }}">{{ $layer->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="filter_points_count">Jumlah Titik</label>
                                            <select class="form-control select2" id="filter_points_count" name="filter_points_count">
                                                <option value="">Semua</option>
                                                <option value="1-100">1-100</option>
                                                <option value="101-500">101-500</option>
                                                <option value="501-1000">501-1000</option>
                                                <option value="1001-5000">1001-5000</option>
                                                <option value="5001-10000">5001-10000</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="filter_created_at">Tanggal Dibuat</label>
                                            <input type="text" class="form-control date-range-picker"
                                                   id="filter_created_at" name="filter_created_at">
                                        </div>
                                    </div>
                                </div>
                            </form>
                            <div style="clear: both"></div>
                            <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>
                            <button type="reset" form="FilterForm" class="btn btn-rounded btn-sm btn-outline-secondary mt-2 ms-1">
                                <i class="fas fa-times me-1"></i> Reset
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="table-responsive">
                <table class="table table-striped table-hover w-100" id="tbl_main">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Nama Heatmap</th>
                            <th>Layer</th>
                            <th>Jumlah Titik</th>
                            <th>Radius / Blur</th>
                            <th>Dibuat Oleh</th>
                            <th>Tanggal Dibuat</th>
                            {!! $can_delete || $can_update || $can_export ? '<th>Aksi</th>' : '' !!}
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Preview Modal -->
    <div class="modal fade" id="modal-preview">
        <div class="modal-dialog modal-dialog-centered modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Preview Heatmap</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-9">
                            <div id="preview-map-container" style="height: 600px; width: 100%;">
                                <div id="preview-map" style="height: 100%; width: 100%;"></div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card">
                                <div class="card-header">
                                    <h6 class="card-title">Heatmap Configuration</h6>
                                </div>
                                <div class="card-body">
                                    <form id="preview-config-form">
                                        <div class="form-group mb-3">
                                            <label for="preview-radius" class="form-label">Radius</label>
                                            <input type="range" class="form-range" min="1" max="100"
                                                   id="preview-radius" name="radius" value="25">
                                            <div class="d-flex justify-content-between">
                                                <small>1</small>
                                                <small>100</small>
                                            </div>
                                        </div>
                                        <div class="form-group mb-3">
                                            <label for="preview-blur" class="form-label">Blur</label>
                                            <input type="range" class="form-range" min="1" max="100"
                                                   id="preview-blur" name="blur" value="15">
                                            <div class="d-flex justify-content-between">
                                                <small>1</small>
                                                <small>100</small>
                                            </div>
                                        </div>
                                        <div class="form-group mb-3">
                                            <label for="preview-max-zoom" class="form-label">Max Zoom</label>
                                            <input type="range" class="form-range" min="1" max="20"
                                                   id="preview-max-zoom" name="maxZoom" value="18">
                                            <div class="d-flex justify-content-between">
                                                <small>1</small>
                                                <small>20</small>
                                            </div>
                                        </div>
                                        <div class="form-group mb-3">
                                            <label for="preview-min-opacity" class="form-label">Min Opacity</label>
                                            <input type="range" class="form-range" min="0" max="1" step="0.01"
                                                   id="preview-min-opacity" name="minOpacity" value="0.05">
                                            <div class="d-flex justify-content-between">
                                                <small>0</small>
                                                <small>1</small>
                                            </div>
                                        </div>
                                        <button type="button" class="btn btn-sm btn-primary w-100"
                                                id="btn-apply-config">
                                            <i class="fas fa-sync-alt me-1"></i> Apply Config
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                </div>
            </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/daterangepicker/daterangepicker.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/templates/admin/plugins/leaflet/leaflet.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/templates/admin/css/leaflet/heatmaps/index.css') }}" />
@endsection

@section('javascript')
    <script src="{{ asset('assets/templates/admin/plugins/leaflet/leaflet.js') }}"></script>
    <script src="https://unpkg.com/heatmap.js@2.0.5/build/heatmap.min.js"></script>
    <script src="https://unpkg.com/heatmap.js@2.0.5/plugins/leaflet-heatmap/leaflet-heatmap.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <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/select2/js/select2.min.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/min/moment.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <script src="{{ asset('assets/templates/admin/plugins/sweetalert2/sweetalert2.all.min.js') }}"></script>
    <script>
        const can_update = @json($can_update);
        const can_delete = @json($can_delete);
        const can_export = @json($can_export);
        const table_api = "{{ route('admin.leaflet.heatmaps.datatable') }}";
        const export_api = "{{ route('admin.leaflet.heatmaps.exportGeoJSON', ':id') }}";
        const preview_api = "{{ route('admin.leaflet.heatmaps.intensity-data', ':id') }}";
        const edit_url = "{{ route('admin.leaflet.heatmaps.edit', ':id') }}";
        const delete_api = "{{ route('admin.leaflet.heatmaps.destroy', ':id') }}";
        // const export_all_api = "{{ route('admin.leaflet.heatmaps.exportAll') }}";
        const default_map_center = @json(config('leaflet.map_center', [-2.5489, 118.0149]));
        const default_map_zoom = @json(config('leaflet.map_zoom', 5));
    </script>
    <script src="{{ asset('assets/templates/admin/js/leaflet/heatmaps/index.js') }}"></script>
    <script src="{{ asset('assets/templates/admin/js/leaflet/heatmaps/heatmap-config.js') }}"></script>
@endsection