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

<!-- Insert APAR 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 Cermin 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.cermin.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="cermin_latitude">Latitude:</label>
                                <input id="cermin_latitude" type="text"
                                    class="form-control @error('cermin_latitude') is-invalid @enderror"
                                    placeholder="Latitude Cermin" name="cermin_latitude"
                                    value="{{old('cermin_latitude')}}" required>
                                @error('cermin_latitude') <div class="invalid-feedback">{{$message}}</div> @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="cermin_longitude">Longitude:</label>
                                <input id="cermin_longitude" type="text"
                                    class="form-control @error('cermin_longitude') is-invalid @enderror"
                                    placeholder="Longitude Cermin" name="cermin_longitude"
                                    value="{{old('cermin_longitude')}}" required>
                                @error('cermin_longitude') <div class="invalid-feedback">{{$message}}</div> @enderror
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="cermin_status">Keterangan Cermin:</label>
                        <select id="cermin_status" name="cermin_status"
                            class="form-control select2Add @error('cermin_status') is-invalid @enderror"
                            value="{{old('cermin_status')}}" data-placeholder="Pilih Keterangan Cermin"
                            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('cermin_status') <div class="invalid-feedback">{{$message}}</div> @enderror
                    </div>
                    <div class="form-group">
                        <label for="upload_photo">Foto Cermin:</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="cermin_foto" class="dropzone" required>
                            @error('cermin_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">Cermin</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">Cermin 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 Cermin</button>

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

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

                    <div class="row" id="list-cermin">
                        @foreach($cermin as $item)
                        <a href="{{route('rt.cermin.edit', $item->cermin_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/cermin/'.$item->cermin_foto)}}"
                                    alt="{{$item->cermin_status}}">
                                <div class="list-group-description p-3">
                                    <a href="{{route('rt.cermin.edit', $item->cermin_id)}}" class="cermin-list list-group-item-action mb-2">
                                        <p class="list-heading text-dark">Lat({{$item->cermin_latitude}}),
                                            Long({{$item->cermin_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->cermin_status == 'Available')
                                        <p class="badge badge-success  mt-3">{{$item->cermin_status}}</p>
                                        @elseif($item->cermin_status == 'Planning')
                                        <p class="badge badge-warning  mt-3">{{$item->cermin_status}}</p>
                                        @elseif($item->cermin_status == 'Repairing')
                                        <p class="badge badge-danger  mt-3">{{$item->cermin_status}}</p>
                                        @endif
                                    </a>
                                </div>
                            </div>
                        </div>
                        </a>
                        @endforeach
                    </div>
                    {{ $cermin->links() }}
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

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