@extends('layouts.app')
@push('title', 'Edit Data Lahan')
@section('content')
    @push('other-css')
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
            integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />

        <!-- Leaflet Draw CSS -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css" />

        <style>
            #map-edit {
                height: 400px;
                width: 100%;
                z-index: 0;
            }
        </style>
    @endpush

    <div class="page-content">
        <div class="container-fluid">
            <!-- start page title -->
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                        <h4 class="mb-sm-0">Edit Data Lahan</h4>
                    </div>
                </div>
            </div>
            <!-- end page title -->

            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title mb-0">Edit Data Lahan</h4>
                        </div>
                        <div class="card-body">
                            <form id="edit-form"
                                action="{{ Auth::user()->role == 'admin' ? route('master_data.lahan.update', $land->id) : route('lahan.update', $land->id) }}"
                                method="POST" class="needs-validation" novalidate>
                                @csrf
                                @method('PUT')
                                <div class="modal-body">

                                    <div class="mb-3" id="modal-id" style="display: none;">
                                        <label for="id-field" class="form-label">ID</label>
                                        <input type="text" id="id-field" class="form-control" placeholder="ID"
                                            readonly />
                                    </div>

                                    <div class="mb-3">
                                        <label for="owner-edit-field" class="form-label">Pemilik Lahan</label>
                                        <input type="text" id="owner-edit-field" class="form-control" name="owner"
                                            value="{{ old('owner', $land->owner) }}"
                                            placeholder="Masukan Nama Pemilik Lahan" required />
                                        <div class="invalid-feedback">
                                            Masukan Nama Pemilik Lahan
                                        </div>
                                    </div>

                                    <div id="loading-edit" class="text-center" style="display: none">
                                        <div class="spinner-border text-primary" role="status">
                                            <span class="visually-hidden">Loading...</span>
                                        </div>
                                    </div>

                                    <div class="mb-3" id="address-edit-container">
                                        <label for="address-edit-field" class="form-label">Alamat</label>
                                        <textarea name="address" id="address-edit-field" rows="3" class="form-control" readonly
                                            placeholder="Masukan Alamat, cnth: Jl. Jend. Sudirman No. 12" required>{{ old('address', $land->address) }}</textarea>
                                        <div class="invalid-feedback">
                                            Masukan Alamat
                                        </div>
                                    </div>

                                    <div id="map-edit-container">
                                        <label for="map-edit" class="form-label">Lokasi</label>
                                        <div id="map-edit"></div>

                                        <div class="mt-3">
                                            <input type="hidden" name="polygon" id="polygon-edit" class="form-control"
                                                readonly>

                                            <input type="hidden" id="lat-db" data-lat={{ $landDetails[0]['lat'] }}>
                                            <input type="hidden" id="lng-db" data-lng={{ $landDetails[0]['lng'] }}>

                                            <input type="hidden" id="polygon-db"
                                                data-polygon="{{ json_encode($landDetails) }}">
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer" id="edit-footer">
                                    <div class="hstack gap-2 justify-content-end">
                                        <a href="{{ Auth::user()->role == 'admin' ? route('master_data.lahan.index') : route('lahan.index') }}"
                                            class="btn btn-light">Kembali</a>
                                        <button type="submit" class="btn btn-success" id="edit-btn">Update</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @push('other-js')
        <script src="{{ asset('assets/js/pages/customJs/master-data/lahan/update.js') }}"></script>

        <script src="{{ asset('assets/js/pages/form-validation.init.js') }}"></script>

        <!-- Make sure you put this AFTER Leaflet's CSS -->
        <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
            integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
    @endpush
@endsection