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

<!-- Insert Warga 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 Warga RT {{$dasawisma->rt->rt_nomor}} RW
                    {{$dasawisma->rw->rw_nomor}}
                    {{$dasawisma->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('dasawisma.warga.store')}}" method="post">
                    @csrf
                    <input id="dasawisma_id" type="hidden" class="form-control" name="dasawisma_id"
                        value="{{$dasawisma->daswis_id}}" required>
                    <div class="form-group">
                        <label for="warga_ketua">Nama Pemilik Rumah :</label>
                        <input id="warga_ketua" type="text"
                            class="form-control @error('warga_ketua') is-invalid @enderror"
                            placeholder="Nama Pemilik Rumah" name="warga_ketua" value="{{old('warga_ketua')}}" required>
                        @error('warga_ketua') <div class="invalid-feedback">{{$message}}</div> @enderror
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="warga_latitude">Latitude:</label>
                                <input id="warga_latitude" type="text"
                                    class="form-control @error('warga_latitude') is-invalid @enderror"
                                    placeholder="Latitude Rumah Warga" name="warga_latitude"
                                    value="{{old('warga_latitude')}}" required>
                                @error('warga_latitude') <div class="invalid-feedback">{{$message}}</div> @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="warga_longitude">Longitude:</label>
                                <input id="warga_longitude" type="text"
                                    class="form-control @error('warga_longitude') is-invalid @enderror"
                                    placeholder="Longitude Rumah Warga" name="warga_longitude"
                                    value="{{old('warga_longitude')}}" required>
                                @error('warga_longitude') <div class="invalid-feedback">{{$message}}</div> @enderror
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="warga_status">Keterangan Rumah Warga:</label>
                        <select id="warga_status" name="warga_status"
                            class="form-control select2Add @error('warga_status') is-invalid @enderror"
                            value="{{old('warga_status')}}" data-placeholder="Pilih Keterangan Rumah Warga"
                            style="display: block !important; width: 100% !important;" required>
                            <option value=""></option>
                            <option value="Rumah">Rumah</option>
                            <option value="Kontrakan">Kontrakan</option>
                            <option value="Toko">Toko</option>
                            <option value="Kosong">Kosong</option>
                        </select>
                        @error('warga_status') <div class="invalid-feedback">{{$message}}</div> @enderror
                    </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('/dasawisma/home')}}"><i
                                    class="fas fa-home mr-1"></i>
                                Home</a>
                        </li>
                        <li class="breadcrumb-item active">Data Warga</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">Warga di <b>RT {{$dasawisma->rt->rt_nomor}}/RW
                            {{$dasawisma->rw->rw_nomor}}
                            {{$dasawisma->lurah->lurah_nama}}</b></p>

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

                    {{-- <p class="content-heading text-dark mt-1 mb-5 px-2" style="border-left: 10px double #343A40;">Daftar Warga <b>RT {{$dasawisma->rt->rt_nomor}}/RW {{$dasawisma->rw->rw_nomor}} {{$dasawisma->lurah->lurah_nama}}</b></p> --}}
                    {{-- <div class="heading-line mb-4" style="width: 200px; height: 2px; background: #343A40;"></div> --}}
                    <button type="button" class="btn btn-primary mb-4 btn-sm" data-toggle="modal"
                        data-target="#addModal"><i class="fas fa-plus mr-2"></i>Tambah warga</button>

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

                    <div class="row" id="list-warga">
                        @foreach($warga as $item)
                        <div class="col-xl-3 col-12 list-group-spacing mb-3">
                            <div class="col-12 list-group-content px-3 py-2">
                                <div class="list-group-description p-3">
                                    <a href="{{route('dasawisma.warga.edit', $item->warga_id)}}" class="warga-list list-group-item-action mb-2">
                                        <p class="list-heading font-weight-bold mb-1">{{$item->warga_ketua}}</p>
                                        <p class="text-muted text-sm">{{\Carbon\Carbon::parse($item->updated_at)->diffForHumans()}}</p> 
                                        
                                        <p class="list-heading text-sm font-weight-bold mt-4"><i class="fas fa-building mr-1"></i> Tipe Bangunan</p>
                                        <p class="badge badge-info">{{$item->warga_status}}</p>

                                        <p class="list-heading text-sm font-weight-bold"><i class="fas fa-map-marker-alt mr-1"></i> Lat/Long</p>
                                        <p class="text-sm mb-4">({{$item->warga_latitude}})/({{$item->warga_longitude}})</p>
                                    </a>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                    {{ $warga->links() }}
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

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