@extends('layouts.admin.master')
@section('content')
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="card-title mb-0">Tambah Shape Baru</h5>
            <a href="{{ route('admin.leaflet.shapes.index') }}" class="btn btn-sm btn-secondary">
                <i class="fas fa-arrow-left mr-1"></i> Kembali
            </a>
        </div>
        <div class="card-body">
            <form id="ShapeForm" action="{{ route('admin.leaflet.shapes.store') }}" method="POST">
                @csrf
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="name" class="form-label">Nama Shape <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('name') is-invalid @enderror" id="name" name="name"
                                value="{{ old('name') }}" required placeholder="Contoh: Area Parkir A">
                            @error('name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="layer_id" class="form-label">Layer</label>
                            <select class="form-select @error('layer_id') is-invalid @enderror" id="layer_id" name="layer_id">
                                <option value="">Pilih Layer</option>
                                @foreach ($layers as $layer)
                                    <option value="{{ $layer->id }}" {{ old('layer_id') == $layer->id ? 'selected' : '' }}>{{ $layer->name }}</option>
                                @endforeach
                            </select>
                            @error('layer_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="type" class="form-label">Tipe Shape <span class="text-danger">*</span></label>
                            <select class="form-select @error('type') is-invalid @enderror" id="type" name="type" required>
                                <option value="">Pilih Tipe</option>
                                @foreach (['polygon', 'rectangle', 'circlemarker', 'geojson'] as $type)
                                    <option value="{{ $type }}" {{ old('type') == $type ? 'selected' : '' }}>{{ ucfirst($type) }}</option>
                                @endforeach
                            </select>
                            @error('type')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3 form-check">
                            <input type="checkbox" class="form-check-input" id="is_visible" name="is_visible"
                                {{ old('is_visible', true) ? 'checked' : '' }}>
                            <label class="form-check-label" for="is_visible">Visible di Peta</label>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="mb-3 position-relative">
                            <label class="form-label">Gambar Shape <span class="text-danger">*</span></label>
                            <div class="position-relative" style="height: 500px; border-radius: 8px; border: 1px solid #ddd;">
                                <div id="map"
                                     class="leaflet-map"
                                     data-center="[1.3227, 124.8163]"
                                     data-zoom="12"
                                     style="height: 100%; width: 100%; border-radius: 8px;">
                                </div>
                                <div class="leaflet-sidebar right">
                                    <div class="tool-btn" id="btn-fullscreen" title="Layar Penuh">
                                        <i class="fas fa-expand"></i>
                                    </div>
                                    <div class="tool-btn" id="btn-zoom-in" title="Zoom In">
                                        <i class="fas fa-plus"></i>
                                    </div>
                                    <div class="tool-btn" id="btn-zoom-out" title="Zoom Out">
                                        <i class="fas fa-minus"></i>
                                    </div>
                                    <div class="tool-btn" id="btn-draw-polygon" title="Gambar Polygon">
                                        <i class="fas fa-draw-polygon"></i>
                                    </div>
                                    <div class="tool-btn" id="btn-draw-circle" title="Gambar Lingkaran">
                                        <i class="far fa-circle"></i>
                                    </div>
                                    <div class="tool-btn" id="btn-draw-rectangle" title="Gambar Kotak">
                                        <i class="fas fa-vector-square"></i>
                                    </div>
                                    <div class="tool-btn" id="btn-draw-edit" title="Edit">
                                        <i class="fas fa-edit"></i>
                                    </div>
                                    <div class="tool-btn" id="btn-draw-remove" title="Hapus">
                                        <i class="fas fa-remove"></i>
                                    </div>
                                </div>
                            </div>
                            <small class="text-muted">Gunakan toolbar di atas peta untuk menggambar shape.</small>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-10">
                            <div class="mb-4">
                                <label for="manual-coordinates" class="form-label fw-bold">Koordinat Manual Polygon</label>
                                <textarea class="form-control" id="manual-coordinates" rows="5"
                                         placeholder="Contoh:&#10;-1.3227,124.8163&#10;-1.3228,124.8165&#10;-1.3229,124.8167"></textarea>
                                <div class="form-text">
                                    Pisahkan titik koordinat per baris dengan format <strong>latitude,longitude</strong>.
                                    Gunakan titik desimal. Khusus untuk tipe <strong>polygon/polyline</strong>.
                                </div>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="mb-2">
                                <label class="form-label fw-bold d-block">Impor Shape</label>
                                <div class="d-grid gap-2">
                                    <label class="btn btn-outline-secondary btn-sm w-100">
                                        <i class="fas fa-upload me-2"></i> Impor Koordinat
                                        <input type="file" id="file-import-coords" accept=".txt,.csv" hidden>
                                    </label>
                                </div>
                                <div class="form-text mt-2 small">
                                    Format file: .txt atau .csv<br>Struktur: latitude,longitude per baris
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="color" class="form-label">Warna Border</label>
                            <input type="color" class="form-control form-control-color" id="color" name="style[color]"
                                value="{{ old('style.color', '#3388ff') }}" title="Pilih warna">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="weight" class="form-label">Ketebalan Garis</label>
                            <input type="range" class="form-range" id="weight" name="style[weight]"
                                min="1" max="10" value="{{ old('style.weight', 3) }}">
                        </div>
                    </div>
                    <input type="hidden" id="coordinates" name="coordinates" value="{{ old('coordinates') }}" required>
                    <input type="hidden" name="style" id="style" value='{"color":"#3388ff","weight":3,"fillOpacity":0.2}'>
                    <input type="hidden" id="location" name="location" value="{{ old('location') }}">
                    <input type="file" id="file-import-coords" accept=".zip,.shp" hidden>
                    <div class="col-12 text-end">
                        <button type="submit" class="btn btn-primary">Simpan Shape</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection
@section('stylesheet')
    <link rel="stylesheet" href="{{ asset('assets/templates/admin/plugins/leaflet/leaflet.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/templates/admin/plugins/leaflet-draw/leaflet.draw.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/templates/admin/plugins/fontawesome-free-6.7.2-web/css/all.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/templates/admin/css/leaflet/core-map.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/templates/admin/css/leaflet/shapes/shape-draw.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/templates/admin/css/leaflet/shapes/create.css') }}">
@endsection
@section('javascript')
    <script src="{{ asset('assets/templates/admin/plugins/leaflet/leaflet.js') }}"></script>
    <script src="{{ asset('assets/templates/admin/plugins/leaflet-draw/leaflet.draw.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/screenfull.js/5.1.0/screenfull.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/shpjs/4.0.2/shp.min.js"></script>
    <script src="{{ asset('assets/templates/admin/plugins/sweetalert2/sweetalert2.all.min.js') }}"></script>
    <script src="{{ asset('assets/templates/admin/js/leaflet/core-map.js') }}"></script>
    <script src="{{ asset('assets/templates/admin/js/leaflet/shapes/shape-draw.js') }}"></script>
    <script src="{{ asset('assets/templates/admin/js/leaflet/shapes/create.js') }}"></script>
@endsection