@extends('layouts.main')

@section('breadcrumbs')
    {{ Breadcrumbs::render(request()->route()->getName()) }}
@endsection

@section('content')
    <div class="grid gap-5 mx-auto w-full lg:gap-7.5">
        @include('lpj::component.detail-jaminan',['backLink' => 'authorization.index'])

        <div class="card">
            <form action="{{ route('authorization.update', $permohonan->id) }}" method="POST" id="authorizationForm" enctype="multipart/form-data">
                <input type="hidden" name="_method" value="PUT">
                @csrf
                <div class="card-body lg:py-7.5">
                    <div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
                        <label class="form-label max-w-56">
                            Catatan
                        </label>
                        <div class="flex flex-wrap items-baseline w-full">
                            <textarea class="textarea" rows="3" type="number" id="keterangan" name="keterangan"></textarea>
                            <em class="text-sm alert text-danger" id="keterangan-message"></em>
                        </div>
                    </div>
                    <div class="flex flex-wrap gap-2.5 items-baseline mt-2 lg:flex-nowrap" id="fileUploadSection">
                        <label class="form-label max-w-56">
                            Upload File Revisi
                        </label>
                        <div class="flex flex-wrap items-baseline w-full">
                            <input type="file" class="file-input" id="revisionFile" name="attachment">
                            <em class="hidden text-sm alert text-danger" id="file-message"></em>
                        </div>
                    </div>
                </div>
                <div class="flex justify-end card-footer">
                    <button type="submit" name="status" value="preregister" class="btn btn-success">
                        Approve
                    </button>
                    <button type="submit" name="status" value="revisi" id="revisi" class="ml-3 btn btn-warning">
                        Revisi
                    </button>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.getElementById('authorizationForm');
            const keterangan = document.getElementById('keterangan');
            const revisiBtn = document.getElementById('revisi');
            const keteranganMessage = document.getElementById('keterangan-message');

            const revisionFile = document.getElementById('revisionFile');
            const fileMessage = document.getElementById('file-message');


            form.addEventListener('submit', function(event) {
                if (event.submitter === revisiBtn && keterangan.text === '') {
                    event.preventDefault();
                    keteranganMessage.textContent = 'Catatan harus diisi.';
                } else {
                    keteranganMessage.textContent = '';
                }

                if (event.submitter === revisiBtn && !revisionFile.files.length) {
                    event.preventDefault();
                    fileMessage.textContent = 'File revisi harus diunggah.';
                    fileMessage.classList.remove('hidden');
                } else {
                    fileMessage.classList.add('hidden');
                }
            });

            // Add event listener for typing in keterangan textarea
            keterangan.addEventListener('input', function() {
                keteranganMessage.classList.add('hidden');
            });

            // Add event listener for file selection
            revisionFile.addEventListener('change', function() {
                fileMessage.classList.add('hidden');
            });
        });
    </script>
@endpush
