@extends('layouts.admin.master')
@section('content')
    {{ $layer->name }}
    <div class="card">
        <div class="card-header d-md-flex flex-row justify-content-between">
              <h3 class="card-title">Edit Layer: {{ $layer->name }}</h3>
            <div>
                <a href="{{ route('admin.leaflet.layers.index') }}" class="btn btn-sm btn-secondary">
                    <i class="fas fa-arrow-left me-1"></i> Kembali
                </a>
                <button class="btn btn-sm btn-info ms-1" onclick="refreshLayer('{{ $layer->id }}')">
                    <i class="fas fa-sync-alt me-1"></i> Refresh
                </button>
            </div>
        </div>
        <div class="card-body">
          <form action="javascript:void(0)" id="MainForm" name="MainForm" method="POST" enctype="multipart/form-data">
              @csrf
              <input type="hidden" name="id" value="{{ $layer->id }}">
                <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
                                value="{{ $layer->name }}">
                        </div>
                        <div class="form-group">
                            <label class="form-label" for="slug">Slug</label>
                            <input type="text" class="form-control" id="slug" name="slug" readonly
                                value="{{ $layer->slug }}">
                        </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 }}" {{ $layer->type == $type ? 'selected' : '' }}>
                                                {{ 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" {{ $layer->source == 'internal' ? 'selected' : '' }}>Internal</option>
                                        <option value="external" {{ $layer->source == 'external' ? 'selected' : '' }}>External</option>
                                        <option value="user_upload" {{ $layer->source == 'user_upload' ? 'selected' : '' }}>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"
                                value="{{ $layer->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="{{ $layer->min_zoom }}">
                                </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="{{ $layer->max_zoom }}">
                                </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="{{ $layer->opacity }}">
                                </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 $parent)
                                    <option value="{{ $parent->id }}"
                                        {{ $layer->parent_id == $parent->id ? 'selected' : '' }}
                                        {{ $parent->id == $layer->id ? 'disabled' : '' }}>
                                        {{ $parent->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"
                                value="{{ $layer->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"
                                {{ $layer->is_base_layer ? 'checked' : '' }}>
                            <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"
                                {{ $layer->visible ? '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 Perubahan
                    </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_update = "{{ route('admin.leaflet.layers.update', $layer->id) }}";
        const route_refresh = "{{ route('admin.leaflet.layers.refresh', $layer->id) }}";
        const route_index = "{{ route('admin.leaflet.layers.index') }}";
    </script>
    <script src="{{ asset('assets/templates/admin/js/leaflet/layers/edit.js') }}"></script>
@endsection