@extends('layouts.dashboard')
@section('title', 'Data Saluran Terbuka | 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 Saluran Terbuka 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.saluranterbuka.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="saluran_terbuka_latitude">Latitude:</label>
                                <input id="saluran_terbuka_latitude" type="text"
                                    class="form-control @error('saluran_terbuka_latitude') is-invalid @enderror"
                                    placeholder="Latitude Saluran Terbuka" name="saluran_terbuka_latitude"
                                    value="{{old('saluran_terbuka_latitude')}}"
                                    oninvalid="this.setCustomValidity('Masukkan latitude disini')"
                                    oninput="this.setCustomValidity('')" required>
                                @error('saluran_terbuka_latitude') <div class="invalid-feedback">{{$message}}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="saluran_terbuka_longitude">Longitude:</label>
                                <input id="saluran_terbuka_longitude" type="text"
                                    class="form-control @error('saluran_terbuka_longitude') is-invalid @enderror"
                                    placeholder="Longitude Saluran Terbuka" name="saluran_terbuka_longitude"
                                    value="{{old('saluran_terbuka_longitude')}}"
                                    oninvalid="this.setCustomValidity('Masukkan longitude disini')"
                                    oninput="this.setCustomValidity('')" required>
                                @error('saluran_terbuka_longitude') <div class="invalid-feedback">{{$message}}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="saluran_terbuka_status">Keterangan Saluran Terbuka:</label>
                        <select id="saluran_terbuka_status" name="saluran_terbuka_status"
                            class="form-control select2Add @error('saluran_terbuka_status') is-invalid @enderror"
                            value="{{old('saluran_terbuka_status')}}"
                            oninvalid="this.setCustomValidity('Masukkan Keterangan Saluran Terbuka disini')"
                            oninput="this.setCustomValidity('')" data-placeholder="Pilih Keterangan Saluran Terbuka"
                            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('saluran_terbuka_status') <div class="invalid-feedback">{{$message}}</div> @enderror
                    </div>
                    <div class="form-group">
                        <label for="upload_photo">Foto Saluran Terbuka:</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="saluran_terbuka_foto"
                                class="dropzone" required>
                            @error('saluran_terbuka_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">Saluran Terbuka</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">Saluran Terbuka 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 Saluran Terbuka</button>

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

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

                    <div class="row" id="list-saluran_terbuka">
                        @foreach($saluranTerbuka as $item)
                        <a href="{{route('rt.saluranterbuka.edit', $item->saluran_terbuka_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/saluranTerbuka/'.$item->saluran_terbuka_foto)}}"
                                        alt="{{$item->saluran_terbuka_status}}">
                                    <div class="list-group-description p-3">
                                        <a href="{{route('rt.saluranterbuka.edit', $item->saluran_terbuka_id)}}"
                                            class="saluran-terbuka-list list-group-item-action mb-2">
                                            <p class="list-heading text-dark">Lat({{$item->saluran_terbuka_latitude}}),
                                                Long({{$item->saluran_terbuka_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->saluran_terbuka_status == 'Available')
                                            <p class="badge badge-success mt-3">{{$item->saluran_terbuka_status}}</p>
                                            @elseif($item->saluran_terbuka_status == 'Planning')
                                            <p class="badge badge-warning mt-3">{{$item->saluran_terbuka_status}}</p>
                                            @elseif($item->saluran_terbuka_status == 'Repairing')
                                            <p class="badge badge-danger mt-3">{{$item->saluran_terbuka_status}}</p>
                                            @endif
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </a>
                        @endforeach
                    </div>
                    {{ $saluranTerbuka->links() }}
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

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