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

<!-- Insert Aspal Modal -->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Tambah Aspal RT {{$rt->rt_nomor}} RW
                    {{$rt->rw->rw_nomor}}
                    {{$rt->rw->lurah->lurah_nama}}
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form action="{{route('rt.aspal.store')}}" method="post" enctype="multipart/form-data">
                    @csrf
                    <input id="rt_id" type="hidden" class="form-control" name="rt_id" value="{{$rt->rt_id}}" required>
                    <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="{{old('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="{{old('aspal_longitude')}}" required>
                                @error('aspal_longitude') <div class="invalid-feedback">{{$message}}</div> @enderror
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="aspal_status">Keterangan Aspal:</label>
                        <select id="aspal_status" name="aspal_status"
                            class="form-control select2Add @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 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>
</div>

<!-- 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>
                    </ol>
                </nav>
            </div>
        </div>
    </div>

    <div class="content-body mt-3">
        <div class="col-md-12 single-content-spacing">
            <div class="col-md-12 single-content">
                <div class="single-description">
                    @if(session('status'))
                    <div class="alert alert-success"><i class="fas fa-check mr-2"></i>{{session('status')}}</div>
                    @endif
                    <p class="single-heading mt-3 mb-3">Aspal di <b>RT {{$rt->rt_nomor}}/RW {{$rt->rw->rw_nomor}}
                            {{$rt->rw->lurah->lurah_nama}}</b></p>

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

                    <button type="button" class="btn btn-primary mb-3 btn-sm" data-toggle="modal"
                        data-target="#addModal"><i class="fas fa-plus mr-2"></i>Tambah Aspal</button>

                    <p class="content-heading mt-3 mb-4">List Aspal :</b></p>

                    @if($rt->aspal->count() == 0)
                    <div class="alert alert-data-null"><i class="fas fa-info-circle mr-2"></i>Belum Ada Aspal di RT
                        {{$rt->rt_nomor}} RW
                        {{$rt->rw->rw_nomor}}
                        {{$rt->rw->lurah->lurah_nama}}</div>
                    @endif

                    <div class="row" id="list-aspal">
                        @foreach($aspal as $item)
                        <a href="{{route('rt.aspal.edit', $item->aspal_id)}}">
                            <div class="col-xl-3 col-12 list-group-spacing mb-3">
                                <div class="col-12 list-group-content px-3 py-2">
                                    <img src="{{asset('storage/images/aspal/'.$item->aspal_foto)}}"
                                        alt="{{$item->aspal_status}}">
                                    <div class="list-group-description p-3">
                                        <a href="{{route('rt.aspal.edit', $item->aspal_id)}}" class="aspal-list list-group-item-action mb-2">
                                            <p class="list-heading text-dark">Lat({{$item->aspal_latitude}}),
                                                Long({{$item->aspal_longitude}})</p>
                                            <small class="text-muted"><i
                                                    class="far fa-calendar-alt mr-2"></i>{{\Carbon\Carbon::parse($item->updated_at)->diffForHumans()}}</small><br>
                                            @if($item->aspal_status == 'Available')
                                            <p class="badge badge-success  mt-3">{{$item->aspal_status}}</p>
                                            @elseif($item->aspal_status == 'Planning')
                                            <p class="badge badge-warning  mt-3">{{$item->aspal_status}}</p>
                                            @elseif($item->aspal_status == 'Repairing')
                                            <p class="badge badge-danger  mt-3">{{$item->aspal_status}}</p>
                                            @endif
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </a>
                        @endforeach
                    </div>
                    {{ $aspal->links() }}
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

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