@extends('pwa.template.app.main')
@section('script')
<script>
    $(document).ready(function () {
        $('.dropify').dropify({
            tpl: {
                message: '<div class="dropify-message"><span class="file-icon" /></div>',
            }
        });
    });

    function handleLampiran(option, lampiran_path) {
        console.log(option);

        // console.log($(`#lampiran-${option.id}`).children().length);
        if ($(`#lampiran-${option.id}`).children().length > 0) {
            $(`#lampiran-${option.id}`).children().remove()
        } else {
            $(`#lampiran-${option.id}`).html(
                `<input type="file" class="dropify" name="${option.id}" data-default-file="${lampiran_path}" />`
            );
            $('.dropify').dropify({
                tpl: {
                    message: '<div class="dropify-message"><span class="file-icon" /></div>',
                }
            });
        }
    }

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

</script>
@endsection
@section('app-content')
<div class="container pt-3 pb-5">
    <div class="card mb-3">
        <div class="card-header bg-white d-flex align-items-center justify-content-between">
            <h5 class="mb-0 py-3">{{ $form->nama }}</h5>
            <div class="status">
                @switch($userhasforms->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 admin</span>
                @break

                @case('disetujui')
                <span class="badge fs-6 rounded-pill bg-success">Menunggu tanda tangan admin</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

                @case('selesai')
                <span class="badge fs-6 rounded-pill bg-success">Sudah disetujui admin</span>
                @break
                @endswitch
            </div>
        </div>
        <div class="card-body">
            <table class="table table-striped border">
                <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 class="ps-0">
                                @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 text-primary" data-bs-target="#modal-lightbox" data-bs-toggle="modal"
                            onclick="handleLightbox('{{ asset('storage/' . $kv->value) }}' )" style="cursor: pointer;">
                            {{ $kv->kolom->nama }}</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>

            {{-- <button class="btn btn-danger w-100 mt-2">Print PDF</button> --}}
        </div>
        @if ($userhasforms->status == 'selesai')
        <div class="card-footer bg-white border-top-0">
            <a class="btn btn-danger w-100" href="{{asset('storage/' . $userhasforms->dokumen)}}">Print PDF</a>
        </div>
        @endif
    </div>
    @if ($userhasforms->status == 'revisi')
    <div class="alert alert-danger" role="alert">
        <div class="d-flex">
            <i class="bi bi-exclamation-circle-fill"></i>
            <h5 class="alert-heading ms-2">Revisi Dokumen</h5>
        </div>
        <hr>
        <p class="mb-0">{{ $userhasforms->pesan }}</p>
    </div>
    <div class="card">
        <div class="card-body">
            <form method="POST" enctype="multipart/form-data" action="{{ route('dokumen.update', $userhasforms->id) }}">
                {{-- 'text', 'longtext', 'number', 'date', 'datetime', 'radiobutton', 'checkbox', , 'file', 'image' --}}
                @csrf
                @method('patch')
                @foreach ($koloms as $k)
                @switch($k->tipe)
                @case('radiobutton')
                <div class="mb-3">
                    <label for="exampleInputEmail1" class="form-label">{{ $k->nama }}</label>
                    @foreach ($k->options as $id => $option)
                    <div class="form-check">
                        <input class="form-check-input" type="radio" id="radio-{{ $id }}" name="{{ $k->nama }}"
                            value="{{ $option->nama }}" required @if ($k->kolom_value_thisUser()->value ==
                        $option->nama) checked @endif>
                        <label class="form-check-label" for="radio-{{ $id }}">
                            {{ $option->nama }}
                        </label>
                    </div>
                    @endforeach
                </div>
                @break

                @case('select')
                <div class="mb-3">
                    <label for="exampleInputEmail1" class="form-label">{{ $k->nama }}</label>
                    <select class="form-select" aria-label="Default select example" name="{{ $k->nama }}">
                        <option selected>Open this select menu</option>
                        @foreach ($k->options as $option)
                        <option value="{{ $option->nama }}" @if ($k->kolom_value_thisUser()->value == $option->nama)
                            selected @endif>
                            {{ $option->nama }}</option>
                        @endforeach
                    </select>
                </div>
                @break

                @case('checkbox')
                <div class="mb-3">
                    <label for="exampleInputEmail1" class="form-label">{{ $k->nama }}</label>
                    @foreach ($k->options as $id => $option)
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="checkbox-{{ $option->id }}"
                            name="{{ $k->nama }}[]" value="{{ $option->id }}" @if ($option->option_value_thisUser() !=
                        null) checked @endif
                        @if ($option->lampiran) onclick="handleLampiran({{ $option }},
                        '{{ $option->option_value_thisUser() != null ? asset('storage/' . $option->option_value_thisUser()->value) : null }}')"
                        @endif>
                        <label class="form-check-label" for="checkbox-{{ $option->id }}">
                            {{ $option->nama }}
                        </label>
                        {{ $option->option_value_thisUser()->value ?? ' ' }}
                    </div>
                    @if ($option->lampiran)
                    <div id="lampiran-{{ $option->id }}">
                        @if (isset($option->option_value_thisUser()->value))
                        <input type="file" class="dropify" name="{{ $option->id }}"
                            data-default-file="{{ asset('storage/' . $option->option_value_thisUser()->value) }}" />
                        @endif
                    </div>
                    @endif
                    @endforeach
                </div>
                @break

                @case('image')
                @case('file')
                <div class="mb-3">
                    <label for="" class="form-label">{{ $k->nama }}</label>
                    <input type="file" class="dropify" name="{{ $k->nama }}"
                        data-default-file="{{ asset('storage/' . $k->kolom_value_thisUser()->value) }}">
                </div>
                @break

                @default
                <div class="mb-3">
                    <label for="exampleInputEmail1" class="form-label">{{ $k->nama }}</label>
                    <input type="{{ $k->tipe }}" class="form-control" id="exampleInputEmail1"
                        aria-describedby="emailHelp" name="{{ $k->nama }}" required
                        value="{{ $k->kolom_value_thisUser()->value }}">
                </div>
                @endswitch
                @endforeach
                <button type="submit" class="btn btn-primary w-100 mt-3">Perbarui Dokumen</button>
            </form>
        </div>
    </div>
    @elseif($userhasforms->status == 'ditolak')
    <div class="alert alert-danger" role="alert">
        <div class="d-flex">
            <i class="bi bi-exclamation-circle-fill"></i>
            <h5 class="alert-heading ms-2">Dokumen Ditolak</h5>
        </div>
        <hr>
        <p class="mb-0">{{ $userhasforms->pesan }}</p>
    </div>
    @endif
</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