@extends('backoffice.template.app')
@section('script')
<script>
    $(document).ready(function () {
        $('#table_id').DataTable();
    });

    function handleLightbox(path) {
        $('#image').attr('src', path);
    }

    $(document).ready(function () {
        $('.dropify').dropify({
            tpl: {
                message: '<div class="dropify-message"><span class="file-icon" /></div>',
            }
        });
    });


</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.pengajuan-dokumen') }}">Pengajuan Dokumen</a></li>
            <li class="breadcrumb-item"><a
                    href="{{ route('backoffice.pengajuan-dokumen.list-form', $perizinan->id) }}">{{ $perizinan->nama }}</a>
            </li>
            <li class="breadcrumb-item"><a
                    href="{{ route('backoffice.pengajuan-dokumen.list-pengajuan-form', $form->id) }}">{{ $form->nama }}</a>
            </li>
            <li class="breadcrumb-item"><a class="text-primary "><b>{{ $user_has_forms->user->nama }}</b></a></li>
        </ol>
    </nav>
</div>
<div class="row">
    <div class="col-lg-7">
        <div class="card">
            <div class="card-header border-bottom d-flex justify-content-between">
                <h4 class=" mb-0">Data Pengajuan Dokumen</h4>
                <div class="status">
                    @switch($user_has_forms->status)
                    @case('baru')
                    <span class="badge fs-6 rounded-pill bg-info w-100">Baru</span>
                    @break

                    @case('diproses')
                    <span class="badge fs-6 rounded-pill bg-primary w-100">Diproses</span>
                    @break

                    @case('disetujui')
                    <span class="badge fs-6 rounded-pill bg-success">Tanda Tangan</span>
                    @break

                    @case('revisi')
                    <span class="badge fs-6 rounded-pill bg-warning">
                        Revisi
                    </span>
                    @break

                    @case('ditolak')
                    <span class="badge fs-6 rounded-pill bg-danger">Ditolak</span>
                    @break
                    @endswitch
                </div>
            </div>
            <div class="card-body mt-4">
                <table class="table table-striped">
                    <tbody>
                        @foreach ($kolom_values as $kv)
                        @switch($kv->kolom->tipe)
                        @case('checkbox')
                        <tr>
                            <td class="align-baseline">
                                {{ $kv->kolom->nama }}
                            </td>
                            <td class="align-baseline">:</td>
                            <td>
                                <ul>
                                    @foreach ($kv->option_values as $option_value)
                                    <li>
                                        @if ($option_value->option->lampiran)
                                        <span data-bs-target="#modal-lightbox" data-bs-toggle="modal"
                                            onclick="handleLightbox('{{ asset('storage/' . $option_value->value) }}' )"
                                            class="text-primary" style="cursor: pointer;">
                                            {{ $option_value->option->nama }}
                                        </span>
                                        @else
                                        {{ $option_value->value }}
                                        @endif
                                    </li>
                                    @endforeach
                                </ul>
                            </td>
                        </tr>
                        @break

                        @case('image')
                        @case('file')
                        <tr>
                            <td class="text-nowrap">{{ $kv->kolom->nama }}</td>
                            <td>:</td>
                            <td class="w-100">
                                <a class="btn btn-primary d-flex" style="width: fit-content"
                                    href="{{ asset('storage/' . $kv->value) }}">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                        class="bi bi-eye-fill" viewBox="0 0 16 16">
                                        <path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z" />
                                        <path
                                            d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z" />
                                    </svg>
                                </a>
                            </td>
                        </tr>
                        @break

                        @default
                        <tr>
                            <td class="text-nowrap">{{ $kv->kolom->nama }}</td>
                            <td>:</td>
                            <td class="w-100">{{ $kv->value }}</td>
                        </tr>
                        @endswitch
                        @endforeach

                    </tbody>
                </table>

            </div>
            @if ($user_has_forms->status == 'diproses')

            <div class="card-footer text-end">
                <button type="button" class="btn btn-danger" data-bs-toggle="modal"
                    data-bs-target="#modal-ditolak">Tolak</button>
                <button type="button" class="btn btn-warning" data-bs-toggle="modal"
                    data-bs-target="#modal-revisi">Revisi</button>
                <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                    data-bs-target="#modal-setujui">Setujui</button>
                <a class="btn btn-success" href="{{ route('dokumen.print', $user_has_forms->id) }}">Lihat Dokumen</a>
            </div>

            @elseif ($user_has_forms->status == 'disetujui')
            <div class="card-footer text-end">
              <form action="{{route('dokumen.ttd',$user_has_forms->id )}}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PATCH')
                <input type="file" class="dropify" name="ttd_dokumen" required/>
                <a class="btn btn-primary mt-3" href="{{ route('dokumen.print', $user_has_forms->id) }}" download>Unduh dokumen </a>
                <button type="submit" class="btn btn-success  mt-3" >Unggah dokumen </button>
              </form>
            </div>

            @elseif ($user_has_forms->status == 'selesai')
            <div class="card-footer text-end">
              <a class="btn btn-primary mt-3" href="{{ asset( 'storage/' .$user_has_forms->dokumen )}}" >Lihat dokumen </a>
            </div>
            @endif
        </div>
    </div>
    @if ($user_has_forms->status == 'revisi')
    <div class="col-lg-4">
        <div class="alert alert-warning" role="alert">
            <h4 class="alert-heading">Pengajuan Dokumen Direvisi</h4>
            <p>{{ $user_has_forms->pesan }}</p>
        </div>
    </div>
    @elseif($user_has_forms->status == 'ditolak')
    <div class="col-lg-4">
        <div class="alert alert-danger" role="alert">
            <h4 class="alert-heading">Pengajuan Dokumen Ditolak</h4>
            <p>{{ $user_has_forms->pesan }}</p>
        </div>
    </div>
    @endif
    <div class="modal fade" id="modal-ditolak" tabindex="-1" aria-labelledby="modal-revisiLabel" 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-revisiLabel">Tolak Dokumen</h1>
                    <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-tolak">
                        @csrf
                        @method('patch')
                        <label for="" class="form-label">Alasan Ditolak</label>
                        <textarea class="form-control" name="pesan" id="" cols="30" rows="10" required></textarea>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" name="status" value="ditolak" form="form-tolak"
                        class="btn btn-danger">Tolak</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="modal-setujui" tabindex="-1" aria-labelledby="modal-revisiLabel" 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-revisiLabel">Setujui Dokumen</h1>
                    <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-disetujui">
                        @method('patch')
                        @csrf
                        Apa Anda Yakin Untuk Menyetujui Dokumen Ini ?
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" name="status" value="disetujui" form="form-disetujui"
                        class="btn btn-primary">Setujui</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="modal-revisi" tabindex="-1" aria-labelledby="modal-revisiLabel" 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-revisiLabel">Pesan Revisi</h1>
                    <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-revisi">
                        @csrf
                        @method('patch')
                        <label for="" class="form-label">Pesan Revisi</label>
                        <textarea class="form-control" name="pesan" id="" cols="30" rows="10" required></textarea>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" form="form-revisi" class="btn btn-warning" name="status" value="revisi">Ajukan
                        Revisi</button>
                </div>
            </div>
        </div>
    </div>

</div>
{{-- MODAL LIGHTBOX --}}
<div class="modal fade" id="modal-lightbox" tabindex="-1" aria-labelledby="exampleModalLabel" 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="exampleModalLabel"></h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <img src="" id="image" alt="" width="100%">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
@endsection