@extends('layouts.dashboard')
@section('title', 'Data PJU | 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 PJU 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.pju.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="pju_latitude">Latitude:</label>
                                <input id="pju_latitude" type="text"
                                    class="form-control @error('pju_latitude') is-invalid @enderror"
                                    placeholder="Latitude PJU" name="pju_latitude" value="{{old('pju_latitude')}}"
                                    required>
                                @error('pju_latitude') <div class="invalid-feedback">{{$message}}</div> @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="pju_longitude">Longitude:</label>
                                <input id="pju_longitude" type="text"
                                    class="form-control @error('pju_longitude') is-invalid @enderror"
                                    placeholder="Longitude PJU" name="pju_longitude" value="{{old('pju_longitude')}}"
                                    required>
                                @error('pju_longitude') <div class="invalid-feedback">{{$message}}</div> @enderror
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="pju_type">Tipe PJU:</label>
                        <select id="pju_type" name="pju_type"
                            class="form-control select2Add @error('pju_type') is-invalid @enderror"
                            value="{{old('pju_type')}}" data-placeholder="Pilih Tipe PJU"
                            style="display: block !important; width: 100% !important;" required>
                            <option value=""></option>
                            <option value="1">Lampu Satu</option>
                            <option value="2">Lampu Dua</option>
                        </select>
                        @error('pju_type') <div class="invalid-feedback">{{$message}}</div> @enderror
                    </div>
                    <div class="form-group">
                        <label for="pju_status">Keterangan PJU:</label>
                        <select id="pju_status" name="pju_status"
                            class="form-control select2Add @error('pju_status') is-invalid @enderror"
                            value="{{old('pju_status')}}" data-placeholder="Pilih Keterangan PJU"
                            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('pju_status') <div class="invalid-feedback">{{$message}}</div> @enderror
                    </div>

                    <div class="form-group">
                        <label for="upload_photo">Foto Penerangan Lampu Jalan:</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="pju_foto" class="dropzone" required>
                            @error('pju_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">PJU</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">PJU 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 Penerangan Lampu Jalan</button>

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

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

                    <div class="row" id="list-pju">
                        @foreach($pju as $item)
                        <a href="{{route('rt.pju.edit', $item->pju_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/pju/'.$item->pju_foto)}}" alt="{{$item->pju_status}}">
                                <div class="list-group-description p-3">
                                    <a href="{{route('rt.pju.edit', $item->pju_id)}}" class="pju-list list-group-item-action mb-2">
                                        <h6 class="list-heading text-dark"><b>
                                                @if($item->pju_type == 1)
                                                PJU Satu Lampu
                                                @elseif($item->pju_type == 2)
                                                PJU Dua Lampu
                                                @endif
                                            </b></h6>
                                        <p class="list-heading text-dark">Lat({{$item->pju_latitude}}),
                                            Long({{$item->pju_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->pju_status == 'Available')
                                        <p class="badge badge-success  mt-3">{{$item->pju_status}}</p>
                                        @elseif($item->pju_status == 'Planning')
                                        <p class="badge badge-warning  mt-3">{{$item->pju_status}}</p>
                                        @elseif($item->pju_status == 'Repairing')
                                        <p class="badge badge-danger  mt-3">{{$item->pju_status}}</p>
                                        @endif
                                    </a>
                                </div>
                            </div>
                        </div>
                        </a>
                        @endforeach
                    </div>
                    {{ $pju->links() }}
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

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