@extends('layouts.admin.master')
@section('content')
    @php
        $can_insert = auth_can(h_prefix('insert'));
    @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">{{ $page_attr['title'] }}</h6>
                </div>
            </div>
        </div>
    </div>
    @if ($can_insert)
        <div class="card">
            <div class="card-body">
                <form id="MainForm" method="POST" action="{{ route('admin.leaflet.markers.store') }}" enctype="multipart/form-data">
                    @csrf
                    <div class="row">
                        <!-- Kolom Kiri: Form Input -->
                        <div class="col-lg-6">
                            <div class="mb-3">
                                <label for="title" class="form-label">Judul Marker <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="title" name="title" required
                                    placeholder="Contoh: Taman Kota Tomohon">
                            </div>
                            <div class="mb-3">
                                <label for="description" class="form-label">Deskripsi</label>
                                <textarea class="form-control" id="description" name="description" rows="3"
                                    placeholder="Deskripsi singkat tentang marker"></textarea>
                            </div>
                            <div class="mb-3">
                                <label for="popup_content" class="form-label">Konten Popup</label>
                                <textarea class="form-control" id="popup_content" name="popup_content" rows="3"
                                    placeholder="Teks yang muncul saat marker diklik di peta"></textarea>
                            </div>
                        </div>
                        <!-- Kolom Kanan: Map & Koordinat -->
                        <div class="col-lg-6">
                            <div class="mb-3">
                                <label class="form-label">Koordinat <span class="text-danger">*</span></label>
                                <div class="row g-2">
                                    <div class="col-md-6">
                                        <input type="text" class="form-control" id="latitude" name="latitude"
                                            placeholder="Latitude" required readonly>
                                    </div>
                                    <div class="col-md-6">
                                        <input type="text" class="form-control" id="longitude" name="longitude"
                                            placeholder="Longitude" required readonly>
                                    </div>
                                </div>
                            </div>
                            <div class="mb-3">
                                <label for="layer_id" class="form-label">Layer <span class="text-danger">*</span></label>
                                <select class="form-select" id="layer_id" name="layer_id" required>
                                    @foreach ($layers as $layer)
                                        <option value="{{ $layer->id }}">{{ $layer->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="mb-3">
                                <label for="category_id" class="form-label">Kategori</label>
                                <select class="form-select" id="category_id" name="category_id">
                                    <option value="">- Pilih Kategori -</option>
                                    @foreach ($categories as $cat)
                                        <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="mb-3 form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="is_visible" name="is_visible" value="1" checked>
                                <label class="form-check-label" for="is_visible">Tampilkan di Peta</label>
                            </div>
                        </div>
                    </div>
                    <!-- Peta -->
                    <div class="mb-3">
                        <label class="form-label">Pilih Lokasi di Peta <span class="text-danger">*</span></label>
                        <div id="map" style="height: 400px; border-radius: 8px; border: 1px solid #dee2e6;"></div>
                        <small class="text-muted">Klik pada peta untuk mengatur koordinat</small>
                    </div>
                    <!-- Button Group -->
                    <div class="d-flex justify-content-between">
                        <!-- Tombol Kembali -->
                        <a href="{{ route('admin.leaflet.markers.index') }}" class="btn btn-danger">
                            <i class="fas fa-chevron-circle-left me-1"></i> Kembali
                        </a>
                        <!-- Tombol Simpan -->
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save me-1"></i> Simpan
                        </button>
                    </div>
                </form>
            </div>
        </div>
    @else
        <div class="alert alert-danger">Anda tidak memiliki izin untuk menambah data.</div>
    @endif
@endsection
@section('stylesheet')
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        #map {
            width: 100%;
            height: 400px;
        }
        .leaflet-control-layers-toggle {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5'/%3E%3C/svg%3E");
        }
    </style>
@endsection
@section('javascript')
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert2/11.10.3/sweetalert2.all.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-loading-overlay/2.1.7/loadingoverlay.min.js"></script>
    <script src="{{ asset('assets/templates/admin/js/leaflet/markers/create.js') }}"></script>
@endsection