@extends('backoffice.template.app')
@section('script')
@if (session('success'))
<script>
    Swal.fire({
        icon: 'success',
        title: 'Sukses',
        text: "{{ session('success') }}",
    })

</script>
@endif
{{-- SCRIPT FOR HANDLE MODAL --}}
<script>
    function handleEdit(perizinan, url) {
        console.log(perizinan);
        console.log(url);
        $("#edit-nama").val(perizinan.nama);
        $("#edit-id").val(perizinan.id);
        $("#edit-kategori").val(perizinan.kategori_perizinan_id);
        $("#form-edit").attr('action', url);
    }

    function handleDelete(url) {
        console.log(url);
        $("#form-delete").attr('action', url);
    }

    function handleFix(url) {
        $('#form-fix').attr('action', url);
    }

</script>
@endsection
@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <nav style="--bs-breadcrumb-divider: url(&#34;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='%236c757d'/%3E%3C/svg%3E&#34;);"
        aria-label="breadcrumb" class="fs-5">
        <ol class="breadcrumb mb-0">
            <li class="breadcrumb-item"><a href="{{ route('backoffice.dokumen-perizinan') }}">Dokumen Perizinan</a></li>
            <li class="breadcrumb-item"><a class="text-primary">Form</a></li>
        </ol>
    </nav>
    <div>
        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal-create">Tambah</button>
    </div>
</div>
<div class="card">
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>#</th>
                <th class="w-50">Dokumen Perizinan</th>
                <th class="text-center">Kolom</th>
                <th class="text-center">Buat Template</th>
                <th style="width: 20px;" class="text-center">Action</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($forms as $i => $f)
            <tr>
                <td>{{ $i + 1 }}</td>
                <td>{{ $f->nama }}</td>
                <td class="d-flex text-nowrap justify-content-center" style="gap: 8px">
                    <a class="btn btn-info @if ($f->is_fixed) disabled @endif"
                        href="{{ route('backoffice.kolom', $f->id) }}">Buat Kolom</a>
                </td>
                <td class="text-center">
                    <a href="{{ route('backoffice.form.create-template', $f->id) }}"
                        class="btn btn-warning vertical-align-middle">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                            class="bi bi-file-earmark-plus-fill" viewBox="0 0 16 16">
                            <path
                                d="M9.293 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.707A1 1 0 0 0 13.707 4L10 .293A1 1 0 0 0 9.293 0zM9.5 3.5v-2l3 3h-2a1 1 0 0 1-1-1zM8.5 7v1.5H10a.5.5 0 0 1 0 1H8.5V11a.5.5 0 0 1-1 0V9.5H6a.5.5 0 0 1 0-1h1.5V7a.5.5 0 0 1 1 0z" />
                        </svg>
                        Buat
                    </a>
                </td>
                <td class="text-center">
                  <div class="dropdown">
                    <button class="btn btn-secondary dropdown-toggle" @if ($f->is_fixed) disabled @endif
                        type="button" data-bs-toggle="dropdown" aria-expanded="false">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                            class="bi bi-gear-fill" viewBox="0 0 16 16">
                            <path
                                d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z" />
                        </svg>
                    </button>
                    <ul class="dropdown-menu">
                        <li>
                            <div class="dropdown-item d-flex align-items-center text-primary" style="gap: 8px;"
                                data-bs-toggle="modal" data-bs-target="#modal-edit"
                                onclick="handleEdit({{ $f }}, '{{ route('backoffice.form.update', $f->id) }}')">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                    class="bi bi-pencil-square" viewBox="0 0 16 16">
                                    <path
                                        d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z" />
                                    <path fill-rule="evenodd"
                                        d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z" />
                                </svg>
                                Edit
                            </div>
                        </li>
                        <hr class="my-0">
                        <li>
                            <div class="dropdown-item d-flex align-items-center text-danger" style="gap: 8px;"
                                data-bs-toggle="modal" data-bs-target="#modal-delete"
                                onclick="handleDelete('{{ route('backoffice.form.delete', $f->id) }}')">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                    class="bi bi-trash3" viewBox="0 0 16 16">
                                    <path
                                        d="M6.5 1h3a.5.5 0 0 1 .5.5v1H6v-1a.5.5 0 0 1 .5-.5ZM11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3A1.5 1.5 0 0 0 5 1.5v1H2.506a.58.58 0 0 0-.01 0H1.5a.5.5 0 0 0 0 1h.538l.853 10.66A2 2 0 0 0 4.885 16h6.23a2 2 0 0 0 1.994-1.84l.853-10.66h.538a.5.5 0 0 0 0-1h-.995a.59.59 0 0 0-.01 0H11Zm1.958 1-.846 10.58a1 1 0 0 1-.997.92h-6.23a1 1 0 0 1-.997-.92L3.042 3.5h9.916Zm-7.487 1a.5.5 0 0 1 .528.47l.5 8.5a.5.5 0 0 1-.998.06L5 5.03a.5.5 0 0 1 .47-.53Zm5.058 0a.5.5 0 0 1 .47.53l-.5 8.5a.5.5 0 1 1-.998-.06l.5-8.5a.5.5 0 0 1 .528-.47ZM8 4.5a.5.5 0 0 1 .5.5v8.5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 .5-.5Z" />
                                </svg>
                                Delete
                            </div>
                        </li>
                    </ul>
                </div
                </td>
            </tr>
            @endforeach

        </tbody>
    </table>
</div>

{{-- MODAL CREATE --}}
<div class="modal fade" id="modal-create" tabindex="-1" aria-labelledby="modal-createLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="modal-createLabel">Form Dokumen {{ $perizinan->nama }}</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="form-create" action="{{ route('backoffice.form.store') }}" method="POST">
                    @csrf
                    <input type="number" name="perizinan_id" value="{{ $perizinan->id }}" hidden>
                    <div class="mb-3">
                        <label for="nama" class="form-label">Nama</label>
                        <input type="text" class="form-control" id="nama" name="nama" required>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary" form="form-create">Tambah</button>
            </div>
        </div>
    </div>
</div>
{{-- MODAL edit --}}
<div class="modal fade" id="modal-edit" tabindex="-1" aria-labelledby="modal-editLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="modal-editLabel">Form Dokumen {{ $perizinan->nama }}</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="form-edit" method="POST">
                    @csrf
                    @method('patch')
                    <div class="mb-3">
                    <input type="number" name="perizinan_id" value="{{ $perizinan->id }}" hidden>
                    <label for="edit-nama" class="form-label">Nama</label>
                        <input type="text" class="form-control" id="edit-nama" name="nama" required>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary" form="form-edit">Update</button>
            </div>
        </div>
    </div>
</div>
{{-- MODAL DELETE --}}
<div class="modal fade" id="modal-delete" tabindex="-1" aria-labelledby="modal-deleteLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="modal-deleteLabel">Form Dokumen {{ $perizinan->nama }}</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="form-delete" method="POST">
                    @csrf
                    @method('delete')
                    <p>Apa Anda Yakin Untuk Menghapus Data ini ?</p>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-danger" form="form-delete">Delete</button>
            </div>
        </div>
    </div>
</div>
{{-- MODAL IS FIXED --}}
<div class="modal fade" tabindex="-1" id="modal-fix">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Publish Dokumen</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form action="" method="post" id="form-fix">
                    @csrf
                    @method('patch')
                    <p>Apa Anda Yakin Untuk Membuat Dokumen Ini Menjadi Fix ?</p>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary" form="form-fix" name="is_fixed" value="1">Simpan</button>
            </div>
        </div>
    </div>
</div>
@endsection