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

@section('content')
<section class="section">
    <div class="section-title">
        <h3>Struktur Organisasi</h3>
    </div>
    <p class="section-lead">
        Silahkan tambah, ubah atau hapus data struktur organisasi di sini.
    </p>
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4>Data Struktur Organisasi</h4>
                    <div class="card-header-action">
                        <!-- <a href="" class="btn btn-success"><i class="fas fa-plus"></i> DETAIL</a> -->
                    </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">
                                        @if ($check != 0)
                                        <button type="button" title="Tambah" class="btn btn-light createNotif" data-toggle="modal" data-target="#createNotif" style="z-index: 10;">
                                            <i class="fas fa-plus"></i> STRUKTUR
                                        </button>
                                        @else
                                        <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> STRUKTUR
                                        </button>
                                        @endif
                                    </th>
                                    <th>STATUS</th>
                                    <th style="text-align:center">AKSI</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($data as $item)
                                <tr>
                                    <td>
                                        <i class="fas fa-user"></i>
                                        {{ $item->name }}
                                    </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->name }}', '{{ $item->is_active }}')" title="Ubah Struktur"><i class="fas fa-pencil-alt"></i></button>
                                            &nbsp;
                                            <a href="{{ route('admin.structure.create', ['id' => $item->id]) }}" class="btn btn-success btn-action" data-toggle="tooltip" title="Tambah Detail"><i class="fas fa-plus"></i> DETAIL</a>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="3">
                                        <div class="card">
                                            <div class="card-header">
                                                <h4 style="color: #DA251D;">Detail {{ $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 show" id="mycard-collapse-{{$item->id}}" style="">
                                                <div class="card-body">

                                                    <table class="table table-borderless">
                                                        <tbody>
                                                            <hr>
                                                            @forelse ($item->detailStructure as $itemdetail)
                                                            <tr>
                                                                <td>
                                                                    <div class="row">
                                                                        <div class="col-8">
                                                                            <i class="fas fa-book"></i>
                                                                            {{ $itemdetail->field }}
                                                                        </div>
                                                                        <div class="col-4">
                                                                            <div class="row justify-content-md-right">
                                                                                <a href="{{ route('admin.structure.edit', $itemdetail->id) }}" class="btn btn-success" data-toggle="tooltip" title="Ubah"><i class="fas fa-pencil-alt"></i></a>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td>
                                                                    @forelse ($itemdetail->subdetailStructure as $itemsubdetail)
                                                                    <div class="row">
                                                                        <div class="col-12">
                                                                            @php
                                                                            $position = App\Models\Position::where('id', $itemsubdetail->position_id)->first();
                                                                            @endphp
                                                                            <i class="fas fa-user"></i> {{ $position->name }}
                                                                            <br>
                                                                            {{ $itemsubdetail->name }}
                                                                            <hr>
                                                                        </div>
                                                                    </div>
                                                                    @empty
                                                                    <div class="alert alert-danger">
                                                                        Data master struktur detail {{ $item->name }} belum tersedia.
                                                                        <a href="{{ route('admin.structure.create', ['id' => $item->id]) }}" class="btn btn-success btn-action" data-toggle="tooltip" title="Tambah"><i class="fas fa-plus"></i> DETAIL</a>
                                                                    </div>
                                                                    @endforelse
                                                                </td>
                                                            </tr>
                                                            @empty
                                                            <div class="alert alert-danger">
                                                                Data master struktur detail {{ $item->name }} belum tersedia.
                                                                <a href="{{ route('admin.structure.create', ['id' => $item->id]) }}" class="btn btn-success btn-action" data-toggle="tooltip" title="Tambah"><i class="fas fa-plus"></i> DETAIL</a>
                                                            </div>
                                                            @endforelse
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                @empty
                                <div class="alert alert-danger">
                                    Data struktur organisasi 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');
        });

        document.querySelector('.createNotif').addEventListener('click', function() {
            $('#createNotif').modal('show');
        });

        function showEditModal(id, name, 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 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 Header</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form action="{{ route('admin.structure.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 STRUKTUR <span style="color: red;"> **</span></label>
                        <input type="text" class="form-control" name="name" value="{{ old('name') }}" placeholder="Masukkan nama" required>
                        <!-- error message untuk name -->
                        <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="structure">
        <div class="modal-content">
            <form id="editForm" method="POST" action="{{ route('admin.structure.updateheader') }}">
                @csrf
                @method('PUT')
                <div class="modal-header">
                    <h5 class="modal-title" id="editModalLabel">Ubah Header</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 STRUKTUR <span style="color: red;"> **</span></label>
                        <input type="text" class="form-control" id="editName" name="name" required>
                    </div>
                    <div class="form-group">
                        <label for="editStatus">STATUS STRUKTUR <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>