@extends('layouts.dbs')
@section('step', 2)
@section('max-steps', 2)
@section('dbs-title', 'Submit current DBS details')
@section('dbs-header', 'Submit current DBS')
@section('back-button-form-post')
    {{route('dbs.form.upload-certificate.store',['back' => 1])}}
@stop
@section('dbs-form-content')

        <form 
            x-data="{
                fileSelected: false,
                submitForm(){
                    const fileInput = document.querySelector('input[type=\'file\']');
                    const file = fileInput.files[0];

                    const maxSize = 30 * 1024 * 1024;
                    
                    if (file && file.size > maxSize) {
                        alert('File size exceeds 30MB limit.');
                        return false; 
                    }

                    const allowedExtensions = ['jpeg', 'jpg', 'png'];
                    const fileExtension = file.name.split('.').pop().toLowerCase();

                    
                    if (!allowedExtensions.includes(fileExtension)) {
                        alert('Invalid file format. Allowed formats are: JPEG, JPG, PNG.');
                        return false;
                    }

                    // If file size is within limit, allow form submission
                    this.fileSelected = true;
                    return true;
                }
            }"
            enctype="multipart/form-data"
            action="{{route('dbs.form.upload-certificate.store')}}"
            method="post" id="reference-form" accept-charset="UTF-8">
            @csrf

            <h4 class="mt-8 text-3xl font-bold sm:font-extrabold text-blue-900">Scan of certificate</h4>
            <p class="mt-8 mb-2">
                Please upload a scan or photo of the DBS certificate
            </p>
            
            <div class="flex flex-col outline-dashed outline-2 outline-offset-2 outline-gray-400 rounded items-center relative p-5" x-show="!fileSelected">
                @svg('img/icons/cloud-upload')
                <input type="file" name="certificate" id="cert" class="absolute w-full h-full opacity-0" x-on:change="submitForm">
                <span class="text-sm"><strong>Click to upload</strong> or drag and drop</span>
                <span class="text-xs font-semibold mt-3">Max. File Size: 30MB</span>
                <button 
                    class="text-white flex gap-2 bg-primary-800 w-full sm:w-auto hover:bg-primary-600 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mt-3 items-center">
                    @svg('img/icons/search')
                    Browse File
                </button>
            </div>

            <div class="flex flex-col outline-dashed outline-2 outline-offset-2 outline-gray-400 rounded items-center relative p-5" x-show="fileSelected">
                @svg('img/icons/attached')
                
                <span class="text-sm"><strong>Certificate</strong> has been attached</span>
                <span class="text-xs font-semibold mt-3">Click on Submit DBS to proceed</span>
            </div>

            <x-inputs.error name="certificate"/>

            <button 
                type="submit" 
                class="text-white flex gap-2 bg-primary-600 w-full sm:w-auto hover:bg-primary-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mt-10 items-center"
            >
                Submit DBS @svg('img/icons/reference')
            </button>
        </form>

@endsection