@extends('master')
@section('title', 'RTLH')
@section('header-konten')
    <div class="page-header page-header-light shadow">
        <div class="page-header-content d-lg-flex">
            <div class="d-flex">
                <h4 class="page-title mb-0">
                    Halaman - <span class="fw-normal">RTLH</span>
                </h4>

                <a href="#page_header"
                    class="btn btn-light align-self-center collapsed d-lg-none border-transparent rounded-pill p-0 ms-auto"
                    data-bs-toggle="collapse">
                    <i class="ph-caret-down collapsible-indicator ph-sm m-1"></i>
                </a>
            </div>
        </div>

        <div class="page-header-content d-lg-flex border-top">
            <div class="d-flex">
                <div class="breadcrumb py-2">
                    <a href="/" class="breadcrumb-item"><i class="ph-house"></i></a>
                    <span class="breadcrumb-item active">RTLH</span>
                </div>

                <a href="#breadcrumb_elements"
                    class="btn btn-light align-self-center collapsed d-lg-none border-transparent rounded-pill p-0 ms-auto"
                    data-bs-toggle="collapse">
                    <i class="ph-caret-down collapsible-indicator ph-sm m-1"></i>
                </a>
            </div>
        </div>
    </div>
@endsection

@section('konten')
    <div class="card">
        <div class="card-header d-sm-flex">
            <h5 class="mb-0">RTLH</h5>
            @php
                $tambah = explode(',', Auth::user()->role->tambah);
            @endphp
            @if (in_array('21', $tambah))
                <div class="mt-2 mt-sm-0 ms-auto">
                    <button href="#" class="btn btn-primary" data-bs-toggle="modal"
                        data-bs-target="#modal_form_tambah"><i class="ph-plus"></i>&nbsp;Tambah RTLH
                    </button>
                </div>
            @endif
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table datatable-basic table-bordered table-striped table-hover">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Nama</th>
                            <th>Kecamatan</th>
                            <th>Desa</th>
                            <th>Dusun</th>
                            <th>Alamat</th>
                            <th>X</th>
                            <th>Y</th>
                            <th>Keterangan</th>
                            <th>Ukuran</th>
                            @php
                                $ubah = explode(',', Auth::user()->role->ubah);
                                $hapus = explode(',', Auth::user()->role->hapus);
                            @endphp
                            @if (in_array('21', $ubah) | in_array('21', $hapus))
                                <th class="text-center">Aksi</th>
                            @endif
                        </tr>
                    </thead>
                    <tbody>
                        @php
                            $i = 1;
                        @endphp
                        @foreach ($data as $dt)
                            <tr>
                                <td>{{ $i }}</td>
                                <td>{{ $dt->nama }}</td>
                                <td>{{ $dt->kecamatan->nama_kecamatan ?? '' }}</td>
                                <td>{{ $dt->desa->nama_desa ?? '' }}</td>
                                <td>{{ $dt->dusun }}</td>
                                <td>{{ $dt->alamat }}</td>
                                <td>{{ $dt->x }}</td>
                                <td>{{ $dt->y }}</td>
                                <td>{{ $dt->keterangan }}</td>
                                <td>{{ $dt->ukuran }}</td>
                                @if (in_array('21', $ubah) | in_array('21', $hapus))
                                    <td class="text-center">
                                        <div class="d-inline-flex">
                                            <div class="dropdown">
                                                <a href="#" class="text-body" data-bs-toggle="dropdown">
                                                    <i class="ph-list"></i>
                                                </a>

                                                <div class="dropdown-menu dropdown-menu-end">
                                                    @php
                                                        $uk = substr($dt->ukuran, 0, 1);
                                                        $ukuran = substr($dt->ukuran, 1, 3);
                                                    @endphp
                                                    {{-- @dd($uk); --}}
                                                    @if (in_array('21', $ubah))
                                                        <button
                                                            onclick="edit({{ $dt->id_rtlh }}, '{{ $dt->nama }}', {{ $dt->id_kecamatan }}, {{ $dt->id_desa }}, '{{ $dt->dusun }}', '{{ $dt->alamat }}', '{{ $dt->x }}', '{{ $dt->y }}', '{{ $dt->keterangan }}', '{{ $uk }}', '{{ $ukuran }}')"
                                                            class="dropdown-item">
                                                            <i class="ph-note-pencil me-2"></i>
                                                            Edit
                                                        </button>
                                                    @endif
                                                    @if (in_array('21', $hapus))
                                                        <button
                                                            onclick="hapus({{ $dt->id_rtlh }}, '{{ $dt->alamat }}')"
                                                            class="dropdown-item">
                                                            <i class="ph-trash me-2"></i>
                                                            Hapus
                                                        </button>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                @endif
                            </tr>
                            @php
                                $i++;
                            @endphp
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('modal')
    @php
        $tambah = explode(',', Auth::user()->role->tambah);
        $ubah = explode(',', Auth::user()->role->ubah);
        $hapus = explode(',', Auth::user()->role->hapus);
    @endphp
    @if (in_array('21', $tambah))
        <div id="modal_form_tambah" class="modal fade" tabindex="-1">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Form Tambah RTLH</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>

                    <form action="{{ url('rtlh') }}" method="POST" class="form-horizontal"
                        enctype="multipart/form-data">
                        @csrf
                        <div class="modal-body">
                            <div class="row mb-3">
                                <label class="col-form-label col-sm-3">Nama</label>
                                <div class="col-sm-9">
                                    <input type="text" id="nama" name="nama" placeholder="" class="form-control"
                                        required>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <label class="col-form-label col-sm-3">Kecamatan</label>
                                <div class="col-sm-9">
                                    <select data-placeholder="Pilih Kecamatan..." class="form-control select"
                                        data-dropdown-parent="#modal_form_tambah" id="kecamatan" name="kecamatan">
                                        <option></option>
                                        @foreach ($kecamatan as $kec)
                                            <option value="{{ $kec->id_kecamatan }}">
                                                {{ $kec->nama_kecamatan }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <label class="col-form-label col-sm-3">Desa</label>
                                <div class="col-sm-9">
                                    <select data-placeholder="Pilih Desa..." class="form-control select"
                                        data-dropdown-parent="#modal_form_tambah" id="desa" name="desa">
                                        {{-- <option></option>
                                        @foreach ($desa as $ds)
                                            <option value="{{ $ds->id_desa }}">
                                                {{ $ds->nama_desa }}</option>
                                        @endforeach --}}
                                    </select>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <label class="col-form-label col-sm-3">Dusun</label>
                                <div class="col-sm-9">
                                    <input type="text" id="dusun" name="dusun" placeholder="" class="form-control"
                                        required>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <label class="col-form-label col-sm-3">Alamat</label>
                                <div class="col-sm-9">
                                    <input type="text" id="alamat" name="alamat" placeholder=""
                                        class="form-control" required>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <label class="col-form-label col-sm-3">X</label>
                                <div class="col-sm-9">
                                    <input type="text" id="x" name="x" placeholder=""
                                        class="form-control" required>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <label class="col-form-label col-sm-3">Y</label>
                                <div class="col-sm-9">
                                    <input type="text" id="y" name="y" placeholder=""
                                        class="form-control" required>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <label class="col-form-label col-sm-3">Keterangan</label>
                                <div class="col-sm-9">
                                    <textarea id="keterangan" name="keterangan" placeholder="" class="form-control" required>
                                    </textarea>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <label class="col-form-label col-sm-3">Ukuran</label>
                                <div class="col-sm-9">
                                    <div class="input-group">
                                        <select id="uk" name="uk" data-placeholder="Pilih..."
                                            class="form-select w-auto flex-grow-0">
                                            <option>Pilih...</option>
                                            <option value=">"> > </option>
                                            <option value="<"> < </option>
                                        </select>
                                        <input type="number" id="ukuran" name="ukuran" class="form-control"
                                            placeholder="28">
                                        <span class="input-group-text">m<sup>2</sup></span>
                                    </div>
                                </div>
                            </div>

                            <div class="modal-footer">
                                <button type="button" class="btn btn-link" data-bs-dismiss="modal">Tutup</button>
                                <button type="submit" class="btn btn-primary">Simpan</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    @endif

    @if (in_array('21', $ubah))
        <div id="modal_form_update" class="modal fade" tabindex="-1">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Masukkan Data RTLH Baru</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>

                    <form action="{{ url('rtlh/update') }}" method="POST" class="form-horizontal">
                        @csrf
                        <input type="hidden" id="idrtlh" name="id_rtlh">
                        <div class="modal-body">
                            <div class="row mb-3">
                                <label class="col-form-label col-sm-3">Nama</label>
                                <div class="col-sm-9">
                                    <input type="text" id="nama_ubah" name="nama" placeholder=""
                                        class="form-control" required>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <label class="col-form-label col-sm-3">Kecamatan</label>
                                <div class="col-sm-9">
                                    <select data-placeholder="Pilih Kecamatan..." class="form-control select"
                                        data-dropdown-parent="#modal_form_update" id="kecamatan_ubah" name="kecamatan">
                                        <option></option>
                                        @foreach ($kecamatan as $kec)
                                            <option value="{{ $kec->id_kecamatan }}">
                                                {{ $kec->nama_kecamatan }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <label class="col-form-label col-sm-3">Desa</label>
                                <div class="col-sm-9">
                                    <select data-placeholder="Pilih Desa..." class="form-control select"
                                        data-dropdown-parent="#modal_form_update" id="desa_ubah" name="desa">
                                        {{-- <option></option>
                                        @foreach ($desa as $ds)
                                            <option value="{{ $ds->id_desa }}">
                                                {{ $ds->nama_desa }}</option>
                                        @endforeach --}}
                                    </select>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <label class="col-form-label col-sm-3">Dusun</label>
                                <div class="col-sm-9">
                                    <input type="text" id="dusun_ubah" name="dusun" placeholder=""
                                        class="form-control" required>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <label class="col-form-label col-sm-3">Alamat</label>
                                <div class="col-sm-9">
                                    <input type="text" id="alamat_ubah" name="alamat" placeholder=""
                                        class="form-control" required>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <label class="col-form-label col-sm-3">X</label>
                                <div class="col-sm-9">
                                    <input type="text" id="x_ubah" name="x" placeholder=""
                                        class="form-control" required>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <label class="col-form-label col-sm-3">Y</label>
                                <div class="col-sm-9">
                                    <input type="text" id="y_ubah" name="y" placeholder=""
                                        class="form-control" required>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <label class="col-form-label col-sm-3">Keterangan</label>
                                <div class="col-sm-9">
                                    <textarea id="keterangan_ubah" name="keterangan" placeholder="" class="form-control" required>
                                    </textarea>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <label class="col-form-label col-sm-3">Ukuran</label>
                                <div class="col-sm-9">
                                    <div class="input-group">
                                        <select id="uk_ubah" name="uk" data-placeholder="Pilih..."
                                            class="form-select w-auto flex-grow-0">
                                            <option>Pilih...</option>
                                            <option value=">"> > </option>
                                            <option value="<"> < </option>
                                        </select>
                                        <input type="number" id="ukuran_ubah" name="ukuran" class="form-control"
                                            placeholder="28">
                                        <span class="input-group-text">m<sup>2</sup></span>
                                    </div>
                                </div>
                            </div>

                            <div class="modal-footer">
                                <button type="button" class="btn btn-link" data-bs-dismiss="modal">Tutup</button>
                                <button type="submit" class="btn btn-primary">Simpan</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    @endif
    @if (in_array('21', $hapus))
        <div id="modal_form_hapus" class="modal fade" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header bg-danger text-white border-0">
                        <h6 class="modal-title">Hapus RTLH</h6>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                    </div>

                    <div class="modal-body">
                        <h6 class="fw-semibold">
                            Apakah anda yakin untuk menghapus RTLH beralamatkan <strong><span
                                    id="namadelete"></strong></span>?
                        </h6>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-link" data-bs-dismiss="modal">Batal</button>
                        <form id="form_hapus">
                            <button type="submit" class="btn btn-danger">Iya</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    @endif
@endsection

@section('script')
    <script>
        $(document).ready(function() {
            $('#kecamatan').on('change', function() {
                var id = $(this).val();
                if (id) {
                    $.ajax({
                        url: '/rtlh/getDesa/' + id,
                        type: 'GET',
                        dataType: 'json',
                        success: function(data) {
                            $('#desa').empty();
                            $('#desa').append('<option></option>');
                            $.each(data, function(key, value) {
                                $('#desa').append('<option value="' + value.id_desa +
                                    '">' + value.nama_desa + '</option>');
                            });
                        }
                    });
                } else {
                    $('#desa').empty();
                    $('#desa').append('<option></option>');
                }
            });
        });
    </script>

    <script>
        $(document).ready(function() {
            $('#kecamatan_ubah').on('change', function() {
                var id = $(this).val();
                if (id) {
                    $.ajax({
                        url: '/rtlh/getDesa/' + id,
                        type: 'GET',
                        dataType: 'json',
                        success: function(data) {
                            $('#desa_ubah').empty();
                            $('#desa_ubah').append('<option></option>');
                            $.each(data, function(key, value) {
                                $('#desa_ubah').append('<option value="' + value
                                    .id_desa +
                                    '">' + value.nama_desa + '</option>');
                            });
                        }
                    });
                } else {
                    $('#desa_ubah').empty();
                    $('#desa_ubah').append('<option></option>');
                }
            });
        });
    </script>
    <script>
        function edit(id_rtlh, nama, id_kecamatan, id_desa, dusun, alamat, x, y, keterangan, uk, ukuran) {
            $('#idrtlh').val(id_rtlh);
            $('#nama_ubah').val(nama);
            $('#kecamatan_ubah').val(id_kecamatan).change();
            $('#desa_ubah').val(id_desa).change();
            $('#dusun_ubah').val(dusun);
            $('#alamat_ubah').val(alamat);
            $('#x_ubah').val(x);
            $('#y_ubah').val(y);
            $('#keterangan_ubah').val(keterangan);
            $('#uk_ubah').val(uk).change();
            $('#ukuran_ubah').val(ukuran);
            $('#modal_form_update').modal('show');
        }
    </script>

    <script>
        function hapus(id_rtlh, alamat) {
            $('#form_hapus').attr('action', {!! json_encode(url('/rtlh/hapus/')) !!} + '/' + id_rtlh);
            $('#namadelete').text(alamat);
            $('#modal_form_hapus').modal('show');
        }
    </script>

    @include('my_components.alertToast')
@endsection