@extends('layouts.panel.app', ['title' => 'Data Wilayah Indonesia'])

@section('content')
<section class="section">
    <div class="section-title">
        <h3>Master Wilayah Indonesia</h3>
    </div>
    <p class="section-lead">
        Silahkan tambah, ubah atau hapus data wilayah Indonesia di sini.
    </p>
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4>Data Wilayah Indonesia</h4>
                    <div class="card-header-action" style="justify-content: end; width: 30%">
                        <form id="fm-filter" action="{{ route('admin.regional') }}" method="GET" class="needs-validation" onkeypress="return event.keyCode != 13;">
                            @csrf
                            @method('GET')
                            <div class="row">
                                <div class="col-lg-8">
                                    <select class="form-control select2 m-1 form-control-lg" name="application_status" placeholder="Pilih Semua">
                                        <option value="">Lihat semua</option>
                                        @foreach ($filter as $item)
                                        <option value="{{$item->name}}" {{ request()->query('application_status') == $item->name ? 'selected' : '' }}>{{$item->name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-lg-4">
                                    <button type="submit" style="width: 100px" class="btn btn-info btn-action m-1" data-toggle="tooltip" title="Tekan Enter">Filter</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-striped mb-0">
                            <thead>
                                <tr>
                                    <th style="text-align:left">
                                        <button type="button" title="Tambah" class="btn btn-primary createModal" data-toggle="modal" data-target="#createModal" style="z-index: 10;">
                                            <i class="fas fa-plus"></i> PROVINSI
                                        </button>
                                    </th>
                                    <th style="text-align:center">AKSI</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($data as $item)
                                <tr>
                                    <td>
                                        <i class="fas fa-map-marker"></i>
                                        PROVINSI {{ $item->name }}
                                    </td>
                                    <td>
                                        <div class="row justify-content-md-center">
                                            <button class="btn btn-primary" onclick="showEditModal('{{ $item->id }}', '{{ $item->name }}')" title="Ubah Provinsi"><i class="fas fa-pencil-alt"></i></button>
                                            &nbsp;
                                            <!-- <a href="{{ route('admin.regional.create', ['id' => $item->id]) }}" class="btn btn-success btn-action" data-toggle="tooltip" title="Tambah Detail"><i class="fas fa-plus"></i> KABUPATEN / KOTA</a> -->
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="3">
                                        <div class="card mb-3">
                                            <div class="card-header" style="background-color: #DA251D;">
                                                <h4 style="color: white;">KABUPATEN / KOTA {{ $item->name }}</h4>
                                                <div class="card-header-action">
                                                    <a data-toggle="collapse" href="#mycard-collapse-{{$item->id}}" class="btn btn-icon btn-dark" aria-expanded="true">
                                                        <i class="fas fa-arrow-down"></i>
                                                    </a>
                                                </div>
                                            </div>
                                            <div class="collapse" id="mycard-collapse-{{$item->id}}">
                                                <div class="card-body">
                                                    <div class="row">
                                                        @forelse ($item->detailRegency as $itemdetail)
                                                        <div class="col-md-6 mb-3">
                                                            <div class="card">
                                                                <div class="card-header" style="background-color: #47c363;">
                                                                    <h4 style="color: white;">KECAMATAN DI {{ $itemdetail->name }}</h4>
                                                                    <div class="card-header-action">
                                                                        <a data-toggle="collapse" href="#mycard-collapse-district-{{$itemdetail->id}}" class="btn btn-icon btn-light" aria-expanded="true">
                                                                            <i class="fas fa-arrow-down"></i>
                                                                        </a>
                                                                    </div>
                                                                </div>
                                                                <div class="collapse" id="mycard-collapse-district-{{$itemdetail->id}}">
                                                                    <div class="card-body">
                                                                        <div class="row">
                                                                            @forelse ($itemdetail->detailDistricts as $itemdetaildistrict)
                                                                            <div class="col-md-6 mb-3">
                                                                                <div class="card">
                                                                                    <div class="card-body">
                                                                                        <h6 class="card-title" style="color: #DA251D;">{{ $itemdetaildistrict->name }}</h6>
                                                                                        <p class="card-text">
                                                                                            @forelse ($itemdetaildistrict->detailVillages as $itemdetailvillage)
                                                                                            <i class="fas fa-map-marker" style="color: #DA251D;"></i> {{ $itemdetailvillage->name }}
                                                                                            <br>
                                                                                            @empty
                                                                                        <p class="card-text" style="color: #DA251D;">Data desa / kelurahan {{ $itemdetaildistrict->name }} belum tersedia.</p>
                                                                                        @endforelse
                                                                                        </p>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                            @empty
                                                                            <div class="col-12 alert alert-danger">
                                                                                <i class="fas fa-map-marker"></i> Data kabupaten / kota {{ $itemdetail->name }} belum memiliki kecamatan saat ini.
                                                                                <!-- <a href="{{ route('admin.regional.create', ['id' => $item->id]) }}" class="btn btn-success btn-action" data-toggle="tooltip" title="Tambah"><i class="fas fa-plus"></i> KECAMATAN</a> -->
                                                                            </div>
                                                                            @endforelse
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        @empty
                                                        <div class="col-12 alert alert-danger">
                                                            <i class="fas fa-map-marker"></i> Data provinsi {{ $item->name }} belum memiliki kabupaten / kota {{ $item->name }} saat ini.
                                                            <a href="{{ route('admin.regional.create', ['id' => $item->id]) }}" class="btn btn-success btn-action" data-toggle="tooltip" title="Tambah"><i class="fas fa-plus"></i> KABUPATEN / KOTA</a>
                                                        </div>
                                                        @endforelse
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                @empty
                                <div class="alert alert-danger">
                                    Data wilayah belum tersedia.
                                </div>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="d-felx justify-content-center">
                    <div class="card-footer text-right">
                        {{ $data->links('vendor.pagination.bootstrap-5') }}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.querySelector('.createModal').addEventListener('click', function() {
            $('#createModal').modal('show');
        });

        function showEditModal(id, name) {

            // Mengisi nilai pada input text editName dengan name
            $('#editName').val(name);

            // Mengisi nilai pada input hidden editId dengan id
            $('#editId').val(id);

            // Menampilkan modal
            $('#editModal').modal('show');
        }
    </script>

</section>
@endsection

<!-- Notif -->
<div class="modal fade" id="createNotif" tabindex="-1" aria-labelledby="createNotifLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="createNotifLabel">Informasi</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- Isi konten di sini -->
                <div class="alert alert-danger">
                    Ubah struktur sebelumnya menjadi tidak aktif terlebih dahulu untuk menambah struktur baru.
                </div>
            </div>
            <div class="modal-footer">
                <div class="form-group">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Oke</button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="createModal" tabindex="-1" aria-labelledby="createModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="createModalLabel">Tambah Provinsi</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form action="{{ route('admin.regional.storeprovinces') }}" method="POST">
                @csrf
                <div class="modal-body">

                    <div class="alert alert-info alert-has-icon">
                        @php
                        $label = \App\Models\Label::where(['code' => 'info-master' ])->first()
                        @endphp
                        <div class="alert-icon"><i class="far fa-lightbulb"></i></div>
                        <div class="alert-body">
                            <div class="alert-title"><strong> {!!html_entity_decode($label->title)!!}</strong></div>
                            {!!html_entity_decode($label->desc)!!}
                        </div>
                    </div>
                    <label class="font-weight-bold">Note : <span style="color: red;"> **</span> ) wajib diisi </label>
                    <hr>

                    <!-- Isi konten di sini -->
                    <div class="form-group">
                        <label class="font-weight-bold">NAMA PROVINSI <span style="color: red;"> **</span></label>
                        <input type="text" class="form-control" name="name" value="{{ old('name') }}" placeholder="ex BANTEN" required>
                        <!-- error message -->
                        <div class="invalid-feedback alert alert-danger mt-2">
                            Masukan nama
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="form-group">
                        <button type="submit" class="btn btn-primary">Simpan</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Edit -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog" role="regional">
        <div class="modal-content">
            <form id="editForm" method="POST" action="{{ route('admin.regional.updateprovinces') }}">
                @csrf
                @method('PUT')
                <div class="modal-header">
                    <h5 class="modal-title" id="editModalLabel">Ubah Provinsi</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-info alert-has-icon">
                        @php
                        $label = \App\Models\Label::where(['code' => 'info-master' ])->first()
                        @endphp
                        <div class="alert-icon"><i class="far fa-lightbulb"></i></div>
                        <div class="alert-body">
                            <div class="alert-title"><strong> {!!html_entity_decode($label->title)!!}</strong></div>
                            {!!html_entity_decode($label->desc)!!}
                        </div>
                    </div>
                    <label class="font-weight-bold">Note : <span style="color: red;"> **</span> ) wajib diisi </label>
                    <hr>

                    <div class="form-group">
                        <label for="editName">NAMA PROVINSI <span style="color: red;"> **</span></label>
                        <input type="text" class="form-control" id="editName" name="name" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <input type="hidden" name="id" id="editId">
                    <button type="submit" class="btn btn-primary">Ubah</button>
                </div>
            </form>
        </div>
    </div>
</div>