@extends('layouts.admin')
@section('content')
    <section class="dashboard-sec">
        <div class="dashboard-wrapper">
            <div class="dashboard-content-wrapper p-5">
                <section class="section">
                    <div class="section-body">
                        <div class="row">
                            <div class="col-12 col-md-12 col-lg-6">
                                <div class="card">
                                    <div class='ajax-response'></div>
                                    {{-- <x-alert /> --}}
                                    <div class="card-header">
                                        <h4> Hosting Instructions</h4>
                                    </div>
                                    <div class="card-body">
                                        <form
                                            action="{{ route('admin.hosting.instructions.create', ['type' => 'hosting_instructions']) }}"
                                            id="hosting_instructions_form" method='post' enctype="multipart/form-data">
                                            @csrf

                                            <div class="form-row form-cstm">
                                                <div class="form-group col-md-12">
                                                    <label> Hosting Instruction <span
                                                            class="required-field">*</span></label>
                                                    <div class="formfield">
                                                        <label for='hosting_instructions'
                                                            class='form-control'>{{ @$hosting_instructions['file_name'] ?? 'No file selected' }}</label>
                                                        <input type="file" id='hosting_instructions'
                                                            accept="application/pdf"
                                                            class="form-control @error('hosting_instructions') is-invalid @enderror d-none"
                                                            placeholder="Hosting Instructions"
                                                            name="hosting_instructions" />
                                                        @error('hosting_instructions')
                                                            <span class="invalid-feedback" role="alert">
                                                                <strong>{{ $message }}</strong>
                                                            </span>
                                                        @enderror
                                                    </div>
                                                    <div
                                                        class='show-hosting-pdf @if (!@$hosting_instructions['file_path']) d-none @endif'>
                                                        <embed
                                                            src="@if (@$hosting_instructions['file_path']) {{ Storage::url($hosting_instructions['file_path']) }} @endif"
                                                            type="">
                                                    </div>
                                                </div>
                                            </div>
                                            <button class="btn btn-primary mr-1" type="submit"
                                                id="hosting_instructions_submit">UPLOAD</button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
            </div>
    </section>
    </div>
    </section>
@endsection
@include('validation')
@push('scripts')
    <script>
        $(document).on('change', '#hosting_instructions', function(event) {
            let inputElement = jQuery(this);
            var file = event.target.files[0]; // Get the selected file

            //PREVIEW ELEMENT
            let preveiwElement = $(document).find('.show-hosting-pdf');
            if (file) {
                if(file.type !== 'application/pdf'){
                    iziToast.error({
                                title: 'Error',
                                message: 'Only pdf file is required',
                                position: 'topRight'
                            });
                    return false;
                }
            
                var fileReader = new FileReader();
                fileReader.onload = function(e) {
                    var pdfDataUrl = e.target.result; // PDF file data URL

                    preveiwElement.find('embed').attr('src', pdfDataUrl); // Set the iframe src
                    preveiwElement.removeClass('d-none');

                    // preveiwElement.next().removeClass('d-none');
                    preveiwElement.show(); // Show the iframe

                };
                fileReader.readAsDataURL(file); // Read the file as a data URL
            } else {
                preveiwElement.addClass('d-none');
                preveiwElement.hide(); // Hide iframe if invalid file
                // preveiwElement.next().addClass('d-none');
            }
        });
        jQuery(document).ready(function() {
            jQuery('#hosting_instructions_submit').click(function(e) {
                e.preventDefault();
                let url = jQuery('#hosting_instructions_form').attr('action');

                let fileInput = jQuery('#hosting_instructions')[0].files[0];
                var formData = new FormData();
                formData.append('file', fileInput)

                if (fileInput) {
                    // var fileType = fileInput.type;
                    // var fileSize = fileInput.size;
                    // var validTypes = ['application/pdf'];

                    // const rules = {
                    //     hosting_instructions : {
                    //         required : true , 
                    //         filesize : 1*1024*1024 , 
                    //         accept : 'pdf'
                    //     }
                    // }
                    // const messages = {
                    //     hosting_instructions : {
                    //         required : 'This field is required',
                    //         filesize : `File should not be greater than 10 MB`,
                    //         accept : 'Only pdf file is required'
                    //     }
                    // }
                    
                    // jQuery('#hosting_instructions_form').validate({
                    //     rules : rules ,
                    //     messages : messages
                    // })

                    let response = ajaxCall(url, 'post', formData);
                    response.then((response) => {
                        if (response.status === true) {
                            iziToast.success({
                                title: 'Success',
                                message: response.message,
                                position: 'topRight'
                            });
                        } else {
                            iziToast.error({
                                title: 'Error',
                                message: response.message,
                                position: 'topRight'
                            });
                        }
                    });
                }
            })
        });
    </script>
@endpush