{{-- edit.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">Edit Heatmap: {{ $heatmap->name }}</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.update', $heatmap->id) }}" method="POST">
                @csrf
                @method('PUT')
                <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"
                                value="{{ old('name', $heatmap->name) }}" 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 }}"
                                        {{ $heatmap->layer_id == $layer->id ? 'selected' : '' }}>
                                        {{ $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">
                                @php
                                    $options = is_array($heatmap->options) ? $heatmap->options : json_decode($heatmap->options, true);
                                @endphp
                                <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="{{ $options['radius'] ?? 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="{{ $options['blur'] ?? 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" {{ ($options['gradient'] ?? 'default') == 'default' ? 'selected' : '' }}>Default (Merah-Kuning)</option>
                                        <option value="blue" {{ ($options['gradient'] ?? '') == 'blue' ? 'selected' : '' }}>Biru</option>
                                        <option value="green" {{ ($options['gradient'] ?? '') == 'green' ? 'selected' : '' }}>Hijau</option>
                                        <option value="purple" {{ ($options['gradient'] ?? '') == 'purple' ? 'selected' : '' }}>Ungu</option>
                                        <option value="custom" {{ isset($options['gradient_colors']) ? 'selected' : '' }}>Custom</option>
                                    </select>
                                </div>
                                <div id="custom-gradient-container" class="{{ isset($options['gradient_colors']) ? '' : 'd-none' }}">
                                    <div class="form-group mb-3">
                                        <label class="form-label">Custom Gradient</label>
                                        @if(isset($options['gradient_colors']))
                                            @foreach($options['gradient_colors'] as $color)
                                                <input type="text" class="form-control colorpicker mt-2"
                                                    name="options[gradient_colors][]" value="{{ $color }}">
                                            @endforeach
                                        @else
                                            <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">
                                        @endif
                                        <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 Edit 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="edit-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> Update 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="{{ asset('assets/templates/admin/plugins/select2/css/select2.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/templates/admin/plugins/leaflet/leaflet.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/templates/admin/plugins/colorpicker/bootstrap-colorpicker.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/templates/admin/css/leaflet/heatmaps/edit.css') }}">
@endsection

@section('javascript')
    <script src="{{ asset('assets/templates/admin/plugins/select2/js/select2.full.min.js') }}"></script>
    <script src="{{ asset('assets/templates/admin/plugins/leaflet/leaflet.min.js') }}"></script>
    <script src="{{ asset('assets/templates/admin/plugins/colorpicker/bootstrap-colorpicker.min.js') }}"></script>
    <script src="{{ asset('assets/templates/admin/plugins/sweet-alert/sweetalert2.all.js') }}"></script>
    <script src="{{ asset('assets/templates/admin/plugins/auto-numeric/autoNumeric.min.js') }}"></script>

    <script>
        const map_center = @json(config('leaflet.map_center', [-2.5489, 118.0149]));
        const map_zoom = @json(config('leaflet.map_zoom', 5));
        const max_points = 1000;
        const route_update = "{{ route('admin.leaflet.heatmaps.update', $heatmap->id) }}";
        const route_index = "{{ route('admin.leaflet.heatmaps.index') }}";

        // Load existing points
        const initialPoints = @json($heatmap->points ?? []);
    </script>

    <script src="{{ asset('assets/templates/admin/js/leaflet/heatmaps/heatmap-config.js') }}"></script>
    <script src="{{ asset('assets/templates/admin/js/leaflet/heatmaps/edit.js') }}"></script>
@endsection