{{-- create.blade.php --}}
@extends('layouts.admin.master')
@section('content')
    <div class="card">
        <div class="card-body">
            <div class="card-title d-flex justify-content-between align-items-center">
                <h6 class="mt-2 text-uppercase">Tambah Heatmap Baru</h6>
                <div>
                    <a href="{{ route('admin.leaflet.heatmaps.index') }}" class="btn btn-secondary btn-sm">
                        <i class="fas fa-arrow-left me-1"></i> Kembali
                    </a>
                </div>
            </div>
            <hr class="mt-1 mb-3" />
            <form id="MainForm" action="{{ route('admin.leaflet.heatmaps.store') }}" method="POST">
                @csrf
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group mb-3">
                            <label for="name" class="form-label">Nama Heatmap <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="name" name="name"
                                placeholder="Contoh: Kepadatan Penduduk Jakarta" required>
                            <small class="text-muted">Nama deskriptif untuk heatmap</small>
                        </div>
                        <div class="form-group mb-3">
                            <label for="layer_id" class="form-label">Layer</label>
                            <select class="form-control select2" id="layer_id" name="layer_id">
                                <option value="">- Pilih Layer -</option>
                                @foreach($layers as $layer)
                                    <option value="{{ $layer->id }}">{{ $layer->name }}</option>
                                @endforeach
                            </select>
                            <small class="text-muted">Layer tempat heatmap ini ditampilkan</small>
                        </div>
                        <div class="card mb-3">
                            <div class="card-header">
                                <h6 class="card-title">Pengaturan Heatmap</h6>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group mb-3">
                                            <label for="radius" class="form-label">Radius (px)</label>
                                            <input type="number" class="form-control" id="radius"
                                                name="options[radius]" value="25" min="1" max="100">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group mb-3">
                                            <label for="blur" class="form-label">Blur (px)</label>
                                            <input type="number" class="form-control" id="blur"
                                                name="options[blur]" value="15" min="1" max="100">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group mb-3">
                                    <label for="gradient" class="form-label">Warna Gradient</label>
                                    <select class="form-control" id="gradient" name="options[gradient]">
                                        <option value="default">Default (Merah-Kuning)</option>
                                        <option value="blue">Biru</option>
                                        <option value="green">Hijau</option>
                                        <option value="purple">Ungu</option>
                                        <option value="custom">Custom</option>
                                    </select>
                                </div>
                                <div id="custom-gradient-container" class="d-none">
                                    <div class="form-group mb-3">
                                        <label class="form-label">Custom Gradient</label>
                                        <input type="text" class="form-control colorpicker"
                                            name="options[gradient_colors][]" value="#ff0000">
                                        <input type="text" class="form-control colorpicker mt-2"
                                            name="options[gradient_colors][]" value="#ffff00">
                                        <button type="button" class="btn btn-sm btn-outline-primary mt-2"
                                            id="add-gradient-color">
                                            <i class="fas fa-plus"></i> Tambah Warna
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card h-100">
                            <div class="card-header d-flex justify-content-between">
                                <h6 class="card-title">Peta Input Titik</h6>
                                <div>
                                    <button type="button" class="btn btn-sm btn-outline-success"
                                        id="btn-add-point">
                                        <i class="fas fa-plus"></i> Tambah Titik
                                    </button>
                                    <button type="button" class="btn btn-sm btn-outline-danger"
                                        id="btn-clear-points">
                                        <i class="fas fa-trash"></i> Hapus Semua
                                    </button>
                                </div>
                            </div>
                            <div class="card-body p-0">
                                <div id="input-map" style="height: 500px;"></div>
                            </div>
                            <div class="card-footer">
                                <small class="text-muted">
                                    Klik pada peta untuk menambahkan titik. Geser marker untuk menyesuaikan posisi.
                                </small>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card mt-3">
                    <div class="card-header">
                        <h6 class="card-title">Daftar Titik Heatmap</h6>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-striped table-hover" id="tbl-points">
                                <thead>
                                    <tr>
                                        <th width="5%">No</th>
                                        <th width="25%">Latitude</th>
                                        <th width="25%">Longitude</th>
                                        <th width="30%">Intensitas</th>
                                        <th width="15%">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody id="point-list">
                                    <!-- Points will be added dynamically -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="form-group mt-4 text-end">
                    <button type="submit" class="btn btn-primary" id="btn-save">
                        <i class="fas fa-save me-1"></i> Simpan Heatmap
                    </button>
                </div>
            </form>
        </div>
    </div>
    <!-- Point Input Modal -->
    <div class="modal fade" id="pointModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Titik Heatmap</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="form-group mb-3">
                        <label class="form-label">Latitude</label>
                        <input type="text" class="form-control" id="point-lat" readonly>
                    </div>
                    <div class="form-group mb-3">
                        <label class="form-label">Longitude</label>
                        <input type="text" class="form-control" id="point-lng" readonly>
                    </div>
                    <div class="form-group mb-3">
                        <label class="form-label">Intensitas (1-100)</label>
                        <input type="number" class="form-control" id="point-value" min="1" max="100" value="50">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="button" class="btn btn-primary" id="btn-save-point">Simpan Titik</button>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('stylesheet')
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr@1.8.2/dist/themes/classic.min.css"/>
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="{{ asset('assets/templates/admin/css/leaflet/heatmaps/create.css') }}">
@endsection
@section('javascript')
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr@1.8.2/dist/pickr.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="https://cdn.jsdelivr.net/npm/autonumeric@4.10.5/dist/autoNumeric.min.js"></script>
    <script>
        const map_center = @json(config('leaflet.map_center', [1.3286065, 124.8150435]));
        const map_zoom = @json(config('leaflet.map_zoom', 12));
        const max_points = 1000;
        const route_store = "{{ route('admin.leaflet.heatmaps.store') }}";
        const route_index = "{{ route('admin.leaflet.heatmaps.index') }}";
    </script>
    <script src="{{ asset('assets/templates/admin/js/leaflet/heatmaps/heatmap-config.js') }}"></script>
    <script src="{{ asset('assets/templates/admin/js/leaflet/heatmaps/create.js') }}"></script>
@endsection