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

@section('content')
<section class="section">
    <div class="section-title">
        <h3>Wilayah dan Cabang</h3>
    </div>
    <p class="section-lead">
        Silahkan tambah, ubah atau hapus data wilayah dan cabang di sini.
    </p>
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4>Data Wilayah dan Cabang</h4>
                    <div class="card-header-action" style="justify-content: end; width: 30%">
                        <form id="fm-filter" action="{{ route('admin.arebran') }}" 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->area}}" {{ request()->query('application_status') == $item->area ? 'selected' : '' }}>{{$item->area}} - {{$item->zona}}</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> WILAYAH
                                        </button>
                                    </th>
                                    <th>STATUS</th>
                                    <th style="text-align:center">AKSI</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($data as $item)
                                <tr>
                                    <td>
                                        <i class="fas fa-map-marker"></i>
                                        {{ $item->area }}
                                    </td>
                                    <td>
                                        @if ($item->is_active == "Y")
                                        <div class="badge badge-success">Aktif</div>
                                        @else
                                        <div class="badge badge-danger">Tidak Aktif</div>
                                        @endif
                                    </td>
                                    <td>
                                        <div class="row justify-content-md-center">
                                            <button class="btn btn-primary" onclick="showEditModal('{{ $item->id }}', '{{ $item->area }}', '{{ $item->zona }}', '{{ $item->is_active }}')" title="Ubah Wilayah"><i class="fas fa-pencil-alt"></i></button>
                                            &nbsp;
                                            <a href="{{ route('admin.arebran.create', ['id' => $item->id]) }}" class="btn btn-success btn-action" data-toggle="tooltip" title="Tambah Detail"><i class="fas fa-plus"></i> CABANG</a>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="3">
                                        <div class="card">
                                            <div class="card-header">
                                                <h4 style="color: #DA251D;">CABANG {{ $item->name }}</h4>
                                                <div class="card-header-action">
                                                    <a data-collapse="#mycard-collapse-{{$item->id}}" class="btn btn-icon btn-info" href="#"><i class="fas fa-arrow-up"></i></a>
                                                </div>
                                            </div>
                                            <div class="collapse" id="mycard-collapse-{{$item->id}}" style="">
                                                <div class="card-body">
                                                    <hr>
                                                    <div class="col-4 mb-2">
                                                        <div class="row justify-content-md-right">
                                                            <a href="{{ route('admin.arebran.edit', $item->id) }}" class="btn btn-success" data-toggle="tooltip" title="Ubah Cabang"><i class="fas fa-pencil-alt"></i></a>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        @forelse ($item->detailBranch as $itemdetail)
                                                        <div class="col-4">
                                                            <i class="fas fa-map-marker" style="color: #DA251D;"></i>
                                                            {{ $itemdetail->branch }}
                                                        </div>
                                                        @empty
                                                        <div class="col-12 alert alert-danger">
                                                            <i class="fas fa-map-marker"></i> Data wilayah {{ $item->area }} belum memiliki cabang {{ $item->name }} saat ini.
                                                            <a href="{{ route('admin.arebran.create', ['id' => $item->id]) }}" class="btn btn-success btn-action" data-toggle="tooltip" title="Tambah"><i class="fas fa-plus"></i> CABANG</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, zona, is_active) {

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

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

            // Mengisi nilai pada input radio editZona dengan zona
            $('#editZona').val(zona);

            // Mengisi nilai pada input radio editIsActive dengan is_active
            $('#editStatus').val(is_active);

            // 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 Wilayah</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form action="{{ route('admin.arebran.storeheader') }}" 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 WILAYAH <span style="color: red;"> **</span></label>
                        <input type="text" class="form-control" name="area" value="{{ old('area') }}" placeholder="ex BANTEN" required>
                        <!-- error message -->
                        <div class="invalid-feedback alert alert-danger mt-2">
                            Masukan nama
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="editZona">ZONA WILAYAH <span style="color: red;"> **</span></label>
                        <select class="form-control" name="zona" required>
                            <option value="">Pilih Zona</option>
                            <option value="WIB">Waktu Indonesia Barat (WIB)</option>
                            <option value="WIT">Waktu Indonesia Tengah (WITA)</option>
                            <option value="WITA">Waktu Indonesia Timur (WIT)</option>
                        </select>
                    </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="arebran">
        <div class="modal-content">
            <form id="editForm" method="POST" action="{{ route('admin.arebran.updateheader') }}">
                @csrf
                @method('PUT')
                <div class="modal-header">
                    <h5 class="modal-title" id="editModalLabel">Ubah Wilayah</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 WILAYAH <span style="color: red;"> **</span></label>
                        <input type="text" class="form-control" id="editName" name="area" required>
                    </div>
                    <div class="form-group">
                        <label for="editZona">ZONA WILAYAH <span style="color: red;"> **</span></label>
                        <select class="form-control" name="zona" id="editZona" required>
                            <option value="">Pilih Zona</option>
                            <option value="WIB">Waktu Indonesia Barat (WIB)</option>
                            <option value="WIT">Waktu Indonesia Tengah (WITA)</option>
                            <option value="WITA">Waktu Indonesia Timur (WIT)</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="editStatus">STATUS WILAYAH <span style="color: red;"> **</span></label>
                        <select class="form-control" name="is_active" id="editStatus" required>
                            <option value="Y">Aktif</option>
                            <option value="N">Tidak Aktif</option>
                        </select>
                    </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>