@extends('layouts.admin.master')
@section('content')
@php
    $is_update_mode = request()->has('update');
    $page_title = $is_update_mode ? 'Ajukan Update Marker' : 'Edit Marker';
    $submit_url = $is_update_mode ?
        route('admin.leaflet.markers.update-request', $marker->id) :
        route('admin.leaflet.markers.update', $marker->id);
    $submit_btn_text = $is_update_mode ? 'Ajukan Update' : 'Simpan Perubahan';
    $submit_btn_icon = $is_update_mode ? 'paper-plane' : 'save';
    $submit_btn_color = $is_update_mode ? 'warning' : 'primary';
@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_title }}</h6>
                @if($is_update_mode)
                <small class="text-muted">Mode permintaan perubahan - koordinat terkunci</small>
                @endif
            </div>
            <a href="{{ route('admin.leaflet.markers.index') }}" class="btn btn-danger btn-sm">
                <i class="fas fa-chevron-left me-1"></i> Kembali
            </a>
        </div>
        <hr>
        <form id="MainForm" method="POST" action="{{ $submit_url }}" enctype="multipart/form-data">
            @csrf
            @method('PUT')
            <div class="row">
                <!-- Left Column: Form Inputs -->
                <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
                            value="{{ old('title', $marker->title) }}"
                            placeholder="Contoh: Taman Kota Bandung">
                    </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">{{ old('description', $marker->description) }}</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">{{ old('popup_content', $marker->popup_content) }}</textarea>
                    </div>
                </div>
                <!-- Right Column: Map & Relations -->
                <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"
                                    value="{{ old('latitude', $marker->latitude) }}"
                                    {{ $is_update_mode ? 'readonly' : '' }} required>
                            </div>
                            <div class="col-md-6">
                                <input type="text" class="form-control" id="longitude" name="longitude"
                                    value="{{ old('longitude', $marker->longitude) }}"
                                    {{ $is_update_mode ? 'readonly' : '' }} required>
                            </div>
                        </div>
                        @if($is_update_mode)
                        <small class="text-danger">Koordinat tidak dapat diubah dalam mode ini. Hubungi admin untuk perubahan lokasi.</small>
                        @endif
                    </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>
                            <option value="">- Pilih Layer -</option>
                            @foreach($layers as $layer)
                            <option value="{{ $layer->id }}"
                                {{ old('layer_id', $marker->layer_id) == $layer->id ? 'selected' : '' }}>
                                {{ $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 $category)
                            <option value="{{ $category->id }}"
                                {{ old('category_id', $marker->category_id) == $category->id ? 'selected' : '' }}>
                                {{ $category->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"
                            {{ old('is_visible', $marker->is_visible) ? 'checked' : '' }}>
                        <label class="form-check-label" for="is_visible">Tampilkan di Peta</label>
                    </div>
                </div>
            </div>
            <!-- Map Section -->
            <div class="mb-3">
                <label class="form-label">Lokasi Marker <span class="text-danger">*</span></label>
                <div id="map" style="height: 400px; border-radius: 8px; border: 1px solid #dee2e6;"></div>
                <small class="text-muted">
                    @if($is_update_mode)
                    Klik <a href="{{ route('admin.leaflet.markers.edit', $marker->id) }}">Edit</a> untuk mengubah lokasi
                    @else
                    Klik pada peta untuk mengubah koordinat
                    @endif
                </small>
            </div>
            <!-- Form Footer -->
            <div class="d-flex justify-content-between mt-4">
                <a href="{{ route('admin.leaflet.markers.index') }}" class="btn btn-secondary">
                    <i class="fas fa-times me-1"></i> Batal
                </a>
                <button type="submit" class="btn btn-{{ $submit_btn_color }}">
                    <i class="fas fa-{{ $submit_btn_icon }} me-1"></i> {{ $submit_btn_text }}
                </button>
            </div>
        </form>
    </div>
</div>
@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");
        }
        .form-control[readonly] {
            background-color: #f8f9fa;
        }
    </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>
        window.MARKER_CONFIG = {
            lat: {{ $marker->latitude ?? 'null' }},
            lng: {{ $marker->longitude ?? 'null' }},
            isUpdate: {{ $is_update_mode ? 'true' : 'false' }},
            csrf: '{{ csrf_token() }}',
            redirectUrl: "{{ route('admin.leaflet.markers.index') }}"
        };
    </script>    
    <script src="{{ asset('assets/templates/admin/js/leaflet/markers/edit.js') }}"></script>
@endsection