@extends('master')
@section('title', 'Rumah Bencana')
@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">Rumah Bencana</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">Rumah Bencana</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">Rumah Bencana</h5>
            @can('canCreate')
                <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 Rumah Bencana</button>
                </div>
            @endcan
        </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>Alamat</th>
                            <th>Desa</th>
                            <th>Kecamatan</th>
                            <th>Tahun</th>
                            <th class="text-center">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @php
                            $i = 1;
                        @endphp
                        @foreach ($data as $dt)
                            <tr>
                                <td>{{ $i }}</td>
                                <td>{{ $dt->nama }}</td>
                                <td>{{ $dt->alamat }}</td>
                                <td>{{ $dt->Todesa->nama_desa }}</td>
                                <td>{{ $dt->Tokecamatan->nama_kecamatan }}</td>
                                <td>{{ $dt->tahun }}</td>
                                <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">
                                                @can('canEdit')
                                                <button onclick="edit({{ $dt->id }})"
                                                    class="dropdown-item">
                                                    <i class="ph-note-pencil me-2"></i>
                                                    Edit
                                                </button>
                                                @endcan

                                                @can('canDelete')
                                                <a href="#" onclick="hapus({{ $dt->id }})" class="dropdown-item">
                                                    <i class="ph-trash me-2"></i>
                                                    Hapus
                                                </a>
                                                @endcan
                                            </div>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            @php
                                $i++;
                            @endphp
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

    </div>
@endsection

@section('modal')
    <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">Tambah Data Rumah Bencana</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <form action="{{ route('tambahBencana') }}" 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 <span style="color: red;">*</span></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">Alamat <span style="color: red;">*</span></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">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" required>
                                    <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" required>
                                </select>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <label class="col-form-label col-sm-3">Tahun <span style="color: red;">*</span></label>
                            <div class="col-sm-9"> <input type="number" maxlength="5" id="tahun" name="tahun" placeholder="" class="form-control" required>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <label class="col-form-label col-sm-3">Lat <span style="color: red;">*</span></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">Long <span style="color: red;">*</span></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">Foto <span style="color: red;">*</span></label>
                            <div class="col-sm-9">
                                <input type="file" id="gambar" name="gambar" class="form-control" accept="image/*" placeholder="" required>
                            </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>

    <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 Rumah Bencana Baru</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <form action="{{ route('updateBencana') }}" method="POST" class="form-horizontal" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" id="id_bencana" name="id_bencana">
                    <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">
                            </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">
                            </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="id_kecamatan_ubah" name="id_kecamatan" required>
                                    <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" required>
                                </select>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <label class="col-form-label col-sm-3">Tahun <span style="color: red;">*</span></label>
                            <div class="col-sm-9"> <input type="number" maxlength="5" id="tahun_ubah" name="tahun" placeholder="" class="form-control" required>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <label class="col-form-label col-sm-3">Lat <span style="color: red;">*</span></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">Long <span style="color: red;">*</span></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">Foto </label>
                            <div class="col-sm-9">
                                <input type="file" name="gambar" class="form-control" accept="image/*" placeholder="">
                            </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>
@endsection

@section('script')
    <script>
        $(document).ready(function() {
            @if (session('success'))
                swal.fire({
                    text: "{{ session('success') }}",
                    icon: 'success',
                    toast: true,
                    showConfirmButton: false,
                    position: 'top-end'
                });
            @endif

            $('#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('/')) !!} + "/bencana/showdata/" + id, function(data) {
                $('#id_bencana').val(data.id);
                $('#nama_ubah').val(data.nama);
                $('#alamat_ubah').val(data.alamat);
                $('#id_kecamatan_ubah').select2("val", data.id_kec);
                setTimeout(function() {
                    $('#id_desa_ubah').select2("val", data.id_desa);
                }, 800);
                $('#tahun_ubah').val(data.tahun);
                $('#x_ubah').val(data.x);
                $('#y_ubah').val(data.y);
            });
            $('#modal_form_update').modal('show');
        }

        const hapus = (id) => {
            // href="{{ url('bencana/hapus/' . $dt->id) }}"
            let url_hps = "{{ url('bencana/hapus/') }}/"+id;
            swal.fire({
                title: 'Are you sure?',
                text: "You won't be able to revert this!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Yes, delete it!',
                cancelButtonText: 'No, cancel!',
                buttonsStyling: false,
                customClass: {
                    confirmButton: 'btn btn-success',
                    cancelButton: 'btn btn-danger'
                }
            }).then(function(result) {
                if(result.value) {
                    // swal.fire({
                    //     title: 'Deleted!',
                    //     text: "Your file has been deleted.",
                    //     icon: 'success',
                    //     customClass: {
                    //         confirmButton: 'btn btn-primary',
                    //         cancelButton: 'btn btn-danger'
                    //     }
                    // });
                    window.location.href = url_hps;
                }
                else if(result.dismiss === swal.DismissReason.cancel) {
                    swal.fire({
                        title: 'Cancelled',
                        text: "Penghapusan Dibatalkan",
                        icon: 'error',
                        customClass: {
                            confirmButton: 'btn btn-primary',
                            cancelButton: 'btn btn-danger'
                        }
                    }
                    );
                }
            });
        }
    </script>
@endsection