@extends('layouts.dashboard')
@section('title','Update Aspal | Monitoring Kelurahan')

@section('dashboard_content')
<div class="container-fluid container-fluid-spacing">
    <div class="content-header">
        <div class="row">
            <div class="col-sm-6">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{url('/rt/home')}}"><i class="fas fa-home mr-1"></i>
                                Home</a>
                        </li>
                        <li class="breadcrumb-item active">Aspal</li>
                        <li class="breadcrumb-item active">Edit</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>

    <div class="content-body mt-3">
        <div class="col-md-8">
            <div class="col-12 mb-2">
                <a href="#" data-uri="{{route('rt.aspal.destroy', $aspal->aspal_id)}}" class="badge badge-danger"
                    data-toggle="modal" data-target="#confirmDeleteModal"><i class="fas fa-trash-alt"></i> Hapus
                    Data</a>
            </div>
            <form action="{{route('rt.aspal.update', $aspal->aspal_id)}}" method="post" enctype="multipart/form-data">
                @csrf
                @method('patch')
                <div class="form-group">
                    <label for="aspal_status">Keterangan Aspal:</label>
                    <select id="aspal_status" name="aspal_status"
                        class="form-control select2Edit @error('aspal_status') is-invalid @enderror"
                        value="{{old('aspal_status')}}" data-placeholder="Pilih Keterangan Aspal"
                        style="display: block !important; width: 100% !important;" required>
                        <option value=""></option>
                        <option value="Available">Tersedia</option>
                        <option value="Repairing">Dalam Perbaikan</option>
                        <option value="Planning">Direncanakan</option>
                    </select>
                    @error('aspal_status') <div class="invalid-feedback">{{$message}}</div> @enderror
                </div>

                <div id="mapRt" class="mb-3" style="height: 400px;"></div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="aspal_latitude">Latitude:</label>
                            <input id="aspal_latitude" type="text"
                                class="form-control @error('aspal_latitude') is-invalid @enderror"
                                placeholder="Latitude Aspal" name="aspal_latitude" value="{{$aspal->aspal_latitude}}"
                                required>
                            @error('aspal_latitude') <div class="invalid-feedback">{{$message}}</div> @enderror
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="aspal_longitude">Longitude:</label>
                            <input id="aspal_longitude" type="text"
                                class="form-control @error('aspal_longitude') is-invalid @enderror"
                                placeholder="Longitude Aspal" name="aspal_longitude" value="{{$aspal->aspal_longitude}}"
                                required>
                            @error('aspal_longitude') <div class="invalid-feedback">{{$message}}</div> @enderror
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label for="upload_photo">Foto Aspal:</label>
                    <div class="preview-zone hidden">
                        <div class="box box-solid">
                            <div class="box-header with-border">
                                <div><b>Preview</b></div>
                                <div class="box-tools pull-right">
                                    <button type="button" class="btn btn-danger btn-xs remove-preview">
                                        <i class="fa fa-times"></i> Hapus Foto
                                    </button>
                                </div>
                            </div>
                            <div class="box-body"></div>
                        </div>
                    </div>
                    <div class="dropzone-wrapper">
                        <div class="dropzone-desc">
                            <i class="fa fa-upload"></i>
                            <p>Choose an image file or drag it here.</p>
                        </div>
                        <input id="upload_photo" type="file" accept="image/*" name="aspal_foto" class="dropzone"
                            required>
                        @error('aspal_foto') <div class="invalid-feedback">{{$message}}</div> @enderror
                    </div>
                </div>

                <button type="submit" class="btn btn-primary float-right">Submit</button>
            </form>
        </div>
    </div>
</div>

@endsection
@section('jsExternalAdd')
@include('layouts.mapsJS.aspalJS')
@endsection