@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">Edit Shape</h5>
            <a href="{{ route('admin.leaflet.shapes.index') }}" class="btn btn-sm btn-secondary">
                <i class="fas fa-arrow-left me-1"></i> Kembali
            </a>
        </div>
        <div class="card-body">
            <form id="ShapeForm" action="{{ route('admin.leaflet.shapes.update', $shape->id) }}" method="POST">
                @csrf
                @method('PUT')
                <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', $shape->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', $shape->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', $shape->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', $shape->is_visible) ? '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">Edit 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="{{ json_encode($shape->getCenterPoint()) }}"
                                     data-zoom="14"
                                     data-shape="{{ json_encode($shape->toGeoJson()) }}"
                                     data-draw="true"
                                     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>
                        </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" name="manual-coordinates">
                                    {{ old('manual-coordinates', $shape->formattedCoordinates()) }}
                                </textarea>
                                <div class="form-text">
                                    Pisahkan titik koordinat per baris dengan format <strong>latitude,longitude</strong>. 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=".zip,.shp" hidden>
                                    </label>
                                </div>
                                <div class="form-text mt-2 small">
                                    Format file: .zip atau .shp<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', $shape->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', $shape->style['weight'] ?? 3) }}">
                        </div>
                    </div>
                    <input type="hidden" id="coordinates" name="coordinates" value="{{ old('coordinates', json_encode($shape->coordinates)) }}" required>
                    <input type="hidden" name="style" id="style" value='{{ json_encode($shape->style) }}'>
                    <input type="hidden" id="location" name="location" value="{{ old('location', $shape->location ? $shape->location->latitude.','.$shape->location->longitude : '1.3251,124.8396') }}">
                    <div class="col-12 text-end">
                        <button type="submit" class="btn btn-primary">Update 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/edit.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/edit.js') }}"></script>
@endsection