@extends('layouts.admin.master')
@section('content')
    <div class="card">
        <div class="card-header d-md-flex flex-row justify-content-between">
            <h3 class="card-title">Tambah Layer Baru</h3>
            <a href="{{ route('admin.leaflet.layers.index') }}" class="btn btn-sm btn-primary">
                <i class="fas fa-arrow-left me-1"></i> Kembali ke Daftar Layer
            </a>
        </div>
        <div class="card-body">
            <form action="javascript:void(0)" id="MainForm" name="MainForm" method="POST" enctype="multipart/form-data">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="form-group">
                            <label class="form-label" for="name">Nama Layer <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="name" name="name" required
                                placeholder="Contoh: Peta Dasar Jakarta">
                        </div>
                        <div class="form-group">
                            <label class="form-label" for="slug">Slug <small>(Auto-generate)</small></label>
                            <input type="text" class="form-control" id="slug" name="slug" readonly>
                        </div>
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="form-label" for="type">Jenis Layer <span class="text-danger">*</span></label>
                                    <select class="form-control select2" id="type" name="type" required>
                                        @foreach(['tile', 'geojson', 'wms', 'wmts', 'vector', 'overlay', 'group', 'heatmap'] as $type)
                                            <option value="{{ $type }}">{{ ucfirst($type) }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="form-label" for="source">Sumber <span class="text-danger">*</span></label>
                                    <select class="form-control select2" id="source" name="source" required>
                                        <option value="internal">Internal</option>
                                        <option value="external">External</option>
                                        <option value="user_upload">User Upload</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="form-label" for="url">URL Layer <span id="url_required" class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="url" name="url"
                                placeholder="Contoh: https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png">
                            <small class="text-muted">Untuk jenis <strong>group</strong>, URL tidak diperlukan.</small>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="row">
                            <div class="col-sm-4">
                                <div class="form-group">
                                    <label class="form-label" for="min_zoom">Min Zoom</label>
                                    <input type="number" class="form-control" id="min_zoom" name="min_zoom"
                                        min="0" max="22" value="0">
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="form-group">
                                    <label class="form-label" for="max_zoom">Max Zoom</label>
                                    <input type="number" class="form-control" id="max_zoom" name="max_zoom"
                                        min="0" max="22" value="22">
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="form-group">
                                    <label class="form-label" for="opacity">Opacity</label>
                                    <input type="number" step="0.1" class="form-control" id="opacity"
                                        name="opacity" min="0" max="1" value="1">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="form-label" for="parent_id">Parent Layer</label>
                            <select class="form-control select2" id="parent_id" name="parent_id">
                                <option value="">Tidak Ada</option>
                                @foreach($parent_layers as $layer)
                                    <option value="{{ $layer->id }}">{{ $layer->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label class="form-label" for="attribution">Attribution</label>
                            <input type="text" class="form-control" id="attribution" name="attribution"
                                placeholder="Contoh: © OpenStreetMap contributors">
                        </div>
                        <div class="form-check form-switch mb-3">
                            <input class="form-check-input" type="checkbox" id="is_base_layer" name="is_base_layer" value="1">
                            <label class="form-check-label" for="is_base_layer">Jadikan Base Layer</label>
                        </div>
                        <div class="form-check form-switch mb-3">
                            <input class="form-check-input" type="checkbox" id="visible" name="visible" value="1" checked>
                            <label class="form-check-label" for="visible">Tampilkan Layer</label>
                        </div>
                    </div>
                </div>
                <div class="form-group mb-0 text-end">
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save me-1"></i> Simpan
                    </button>
                </div>
            </form>
        </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/select2-bootstrap5-theme/select2-bootstrap5.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/templates/admin/css/leaflet/layers/create.css') }}">
@endsection

@section('javascript')
    <script src="{{ asset('assets/templates/admin/plugins/loading-overlay/loadingoverlay.min.js') }}"></script>
    <script src="{{ asset('assets/templates/admin/plugins/select2/js/select2.min.js') }}"></script>
    <script src="{{ asset('assets/templates/admin/plugins/sweetalert2/sweetalert2.all.min.js') }}"></script>
    <script>
        const route_store = "{{ route('admin.leaflet.layers.store') }}";
        const route_index = "{{ route('admin.leaflet.layers.index') }}";
    </script>
    <script src="{{ asset('assets/templates/admin/js/leaflet/layers/create.js') }}"></script>
@endsection