@extends('master')
@section('title', 'Perumahan')
@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">Perumahan</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">Perumahan</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">Perumahan</h5>
            @php
                $tambah = explode(',', Auth::user()->role->tambah);
            @endphp
            @if (in_array('22', $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 Perumahan
                    </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 Perumahan</th>
                            <th>Nama Pengembang</th>
                            <th>Kecamatan</th>
                            <th>Desa</th>
                            <th>Alamat</th>
                            @php
                                $baca = explode(',', Auth::user()->role->baca);
                                $ubah = explode(',', Auth::user()->role->ubah);
                                $hapus = explode(',', Auth::user()->role->hapus);
                            @endphp
                            @if (in_array('23', $baca) | in_array('22', $ubah) | in_array('22', $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->perumahan }}</td>
                                <td>{{ $dt->pengembang->nama_pengembang ?? '' }}</td>
                                <td>{{ $dt->kecamatan->nama_kecamatan ?? '' }}</td>
                                <td>{{ $dt->desa->nama_desa ?? '' }}</td>
                                <td>{{ $dt->alamat_perumahan }}</td>
                                @if (in_array('23', $baca) | in_array('22', $ubah) | in_array('22', $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">
                                                    @if (in_array('23', $baca))
                                                        <a href="{{ url('perumahan/detail/' . $dt->id_perumahan) }}"
                                                            class="dropdown-item">
                                                            <i class="ph-eye me-2"></i>
                                                            Detail
                                                        </a>
                                                    @endif
                                                    @if (in_array('22', $ubah))
                                                        <button onclick="edit({{ $dt->id_perumahan }})"
                                                            class="dropdown-item">
                                                            <i class="ph-note-pencil me-2"></i>
                                                            Edit
                                                        </button>
                                                    @endif
                                                    @if (in_array('22', $hapus))
                                                        <button
                                                            onclick="hapus({{ $dt->id_perumahan }}, '{{ $dt->perumahan }}')"
                                                            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('22', $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">Masukkan Data Perumahan</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>

                    <form action="{{ url('perumahan') }}" 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 Perumahan</label>
                                <div class="col-sm-9">
                                    <input type="text" id="perumahan" name="perumahan" placeholder=""
                                        class="form-control" required>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <label class="col-form-label col-sm-3">Nama Pengembang</label>
                                <div class="col-sm-9">
                                    <select data-placeholder="Pilih Pengembang..." class="form-control select"
                                        data-dropdown-parent="#modal_form_tambah" id="id_pengembang" name="id_pengembang">
                                        <option></option>
                                        @foreach ($pengembang as $p)
                                            <option value="{{ $p->id_pengembang }}">
                                                {{ $p->nama_pengembang }}</option>
                                        @endforeach
                                    </select>
                                </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="id_kecamatan" name="id_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="id_desa" name="id_desa">
                                    </select>
                                </div>
                            </div>

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

                            <div class="row mb-3">
                                <label class="col-form-label col-sm-3">Telepon Perumahan</label>
                                <div class="col-sm-9">
                                    <input type="number" id="telepon" name="telepon" placeholder="081709614862"
                                        minlength="10" maxlength="13" min="0" class="form-control" required>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <label class="col-form-label col-sm-3">Tahun Berdiri</label>
                                <div class="col-sm-9">
                                    <input type="number" id="tahun_berdiri" name="tahun_berdiri" placeholder="20XX"
                                        class="form-control" required>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <label class="col-form-label col-sm-3">Koordinat X</label>
                                <div class="col-sm-9">
                                    <input type="number" id="koordinat_x" name="koordinat_x" step="any"
                                        class="form-control" placeholder="112.566467558" required>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <label class="col-form-label col-sm-3">Koordinat Y</label>
                                <div class="col-sm-9">
                                    <input type="number" id="koordinat_y" name="koordinat_y" step="any"
                                        class="form-control" placeholder="-7.92357731746" required>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <label class="col-form-label col-sm-3">Zoom Peta</label>
                                <div class="col-sm-9">
                                    <input type="number" id="zoom_peta" name="zoom_peta" step="any"
                                        class="form-control" placeholder="17" required>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <label class="col-form-label col-sm-3">Foto Perumahan</label>
                                <div class="col-sm-9">
                                    <input type="file" id="gambar" name="gambar" class="form-control"
                                        accept="image/*" placeholder="" required>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <label class="col-form-label col-sm-3"></label>
                                <div class="col-sm-9">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="izin" name="izin"
                                            value="1">
                                        <label class="form-check-label" for="flexCheckDefault">
                                            Berizin
                                        </label>
                                    </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('22', $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">Edit Data Perumahan</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>

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

                            <div class="row mb-3">
                                <label class="col-form-label col-sm-3">Nama Pengembang</label>
                                <div class="col-sm-9">
                                    <select data-placeholder="Pilih Pengembang..." class="form-control select"
                                        data-dropdown-parent="#modal_form_update" id="id_pengembang_ubah"
                                        name="id_pengembang">
                                        <option></option>
                                        @foreach ($pengembang as $p)
                                            <option value="{{ $p->id_pengembang }}">
                                                {{ $p->nama_pengembang }}</option>
                                        @endforeach
                                    </select>
                                </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"
                                        id="id_kecamatan_ubah" data-dropdown-parent="#modal_form_update"
                                        name="id_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" id="desa_ubah">
                                    <select data-placeholder="Pilih Desa..." class="form-control select"
                                        data-dropdown-parent="#desa_ubah" id="id_desa_ubah" name="id_desa">
                                    </select>
                                </div>
                            </div>

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

                            <div class="row mb-3">
                                <label class="col-form-label col-sm-3">Telepon Perumahan</label>
                                <div class="col-sm-9">
                                    <input type="number" id="telepon_ubah" name="telepon" placeholder="081709614862"
                                        minlength="10" maxlength="13" min="0" class="form-control" required>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <label class="col-form-label col-sm-3">Tahun Berdiri</label>
                                <div class="col-sm-9">
                                    <input type="number" id="tahun_berdiri_ubah" name="tahun_berdiri"
                                        placeholder="20XX" class="form-control" required>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <label class="col-form-label col-sm-3">Koordinat X</label>
                                <div class="col-sm-9">
                                    <input type="number" id="koordinat_x_ubah" name="koordinat_x" step="any"
                                        class="form-control" placeholder="112.566467558" required>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <label class="col-form-label col-sm-3">Koordinat Y</label>
                                <div class="col-sm-9">
                                    <input type="number" id="koordinat_y_ubah" name="koordinat_y" step="any"
                                        class="form-control" placeholder="-7.92357731746" required>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <label class="col-form-label col-sm-3">Zoom Peta</label>
                                <div class="col-sm-9">
                                    <input type="number" id="zoom_peta_ubah" name="zoom_peta" step="any"
                                        class="form-control" placeholder="17" required>
                                </div>
                            </div>

                            {{-- <div class="row mb-3">
                                <label class="col-form-label col-sm-3">Foto Perumahan</label>
                                <div class="col-sm-9">
                                    <input type="file" id="gambar_ubah" name="gambar" class="form-control"
                                        accept="image/*" placeholder="" required>
                                </div>
                            </div> --}}

                            <div class="row mb-3">
                                <label class="col-form-label col-sm-3"></label>
                                <div class="col-sm-9">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="izin_ubah" name="izin"
                                            value="1">
                                        <label class="form-check-label" for="flexCheckDefault">
                                            Berizin
                                        </label>
                                    </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('22', $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 Perumahan</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 Perumahan <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">
                            <input type="hidden" id="perumahan_lama" name="perumahan">
                            <button type="submit" class="btn btn-danger">Iya</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    @endif
@endsection

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

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

        function edit(id) {
            $.get({!! json_encode(url('/')) !!} + "/perumahan/showdata/" + id, function(data) {
                $('#id_perumahan').val(data.id_perumahan);
                $('#id_kecamatan_ubah').select2("val", data.id_kecamatan);
                setTimeout(function() {
                    $('#id_desa_ubah').select2("val", data.id_desa);
                }, 3000);
                $('#id_pengembang_ubah').select2("val", data.id_pengembang);
                $('#perumahan_ubah').val(data.perumahan);
                $('#telepon_ubah').val(data.telepon);
                $('#tahun_berdiri_ubah').val(data.tahun_berdiri);
                $('#koordinat_x_ubah').val(data.koordinat_x);
                $('#koordinat_y_ubah').val(data.koordinat_y);
                $('#zoom_peta_ubah').val(data.zoom_peta);
                // $('#gambar_ubah').val(data.gambar);
                $('#alamat_perumahan_ubah').val(data.alamat_perumahan);
                if(data.izin == 1) {
                    $('#izin_ubah').prop('checked', true);
                } else {
                    $('#izin_ubah').prop('checked', false);
                }
            });
            $('#modal_form_update').modal('show');
        }

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

    @include('my_components.alertToast')
@endsection