@extends('layouts.master')

@section('content')
<div class="container-xxl py-3">
    <div class="row justify-content-center">
        <div class="col-md-5">
            <div class="text-center">
                <p class="mb-0">Formulir {{ request()->routeIs('cctvs.edit') ? 'Ubah' : 'Tambah' }} </p>
                <h3 class="fw-bolder">CCTV</h3>
            </div>
            <form method="POST" action="{{ (request()->routeIs('cctvs.edit') ? route('cctvs.update', $cctv) : route('cctvs.store')) }}">
                @csrf
                @method((request()->routeIs('cctvs.edit') ? 'PUT' : 'POST'))
                <div class="card shadow mb-2">
                    <div class="card-body">
                        <div class="form-floating mb-3">
                            <input id="name" type="name" class="form-control @error('name') is-invalid @enderror" name="name" value="{{ old('name', ($cctv->name ?? null)) }}" required placeholder="Nama CCTV"/>
                            <label for="name">Nama CCTV</label>
                            @error('name')
                            <div class="invalid-feedback" role="alert">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="form-floating mb-3">
                            <textarea id="url" class="form-control @error('url') is-invalid @enderror" name="url" placeholder="URL Video Stream" style="height: 100px">{{ old('url', ($cctv->url ?? null)) }}</textarea>
                            <label for="url">URL Video Stream</label>
                            @error('url')
                            <div class="invalid-feedback" role="alert">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-floating mb-3">
                                    <input readonly id="lat" type="text" class="form-control @error('lat') is-invalid @enderror" name="lat" value="{{ old('lat', ($cctv->lat ?? null)) }}" required placeholder="Latitude"/>
                                    <label for="lat">Latitude</label>
                                    @error('lat')
                                    <div class="invalid-feedback" role="alert">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-floating mb-3">
                                    <input readonly id="lng" type="text" class="form-control @error('lng') is-invalid @enderror" name="lng" value="{{ old('lng', ($cctv->lng ?? null)) }}" required placeholder="Longitude"/>
                                    <label for="lng">Longitude</label>
                                    @error('lng')
                                    <div class="invalid-feedback" role="alert">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        <div id="map" class="w-100" style="height:300px;"></div>
                    </div>
                </div>
                <div class="d-flex justify-content-between">
                    <a href="{{ route('cctvs.index') }}" class="btn btn-light"><i class="fa-solid fa-fw fa-arrow-left"></i> Kembali</a>
                    <button type="submit" class="btn btn-primary"><i class="fa-regular fa-fw fa-save"></i> Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('css')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.css" integrity="sha512-h9FcoyWjHcOcmEVkxOfTLnmZFWIH0iZhZT1H2TbOq55xssQGEJHEaIm+PgoUaZbRvQTNTluNOEfb1ZRy6D3BOw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
@endpush

@push('js')
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js" integrity="sha512-puJW3E/qXDqYp9IfhAI54BJEaWIfloJ7JWs7OeD5i6ruC9JZL1gERT1wjtwXFlh7CjE7ZJ+/vcRZRkIYIb6p4g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> 
<script>
$(()=>{
    'use strict';

    let latLng = new L.LatLng(
        `{{ old('lat',($cctv->lat ?? settings('map.center.latitude'))) }}`, 
        `{{ old('lng',($cctv->lng ?? settings('map.center.longitude'))) }}`
    );

    const   $inputLat   = $(`[name="lat"]`), 
            $inputLng   = $(`[name="lng"]`),
            map         = L.map('map', {
                            center: latLng,
                            zoom: 15
                        }),
            baseMap = L.tileLayer('https://tile.jawg.io/jawg-light/{z}/{x}/{y}{r}.png?access-token={accessToken}', {
                attribution: '',
                accessToken: 'GhJ3i9TeSKFbfMoRrh0XXkHRlhALG9PVqpkggJEmeAFq6QBHz2z47dmZ9pQre0j4'
            }).addTo(map),
            marker  = L.marker(latLng, {draggable: true}).addTo(map);

    marker.on('dragend', function (e) {
        $inputLat.val(marker.getLatLng().lat);
        $inputLng.val(marker.getLatLng().lng);
    });
});
</script>
@endpush