@extends('user.app.layout')

@section('content')
    <div class="main-content">
        <section class="table-section">
            <div class="template-header">
                <div class="template-left"><a href="{{ route('template') }}"><span class="me-3"><img
                                src="../assets/images/vuesax-linear-arrow-left.svg" alt="image"></span></a>Templates</div>
                <div class="template-right"><a href="{{ route('template') }}"><span class="me-3"><img
                                src="../assets/images/d3.svg" alt="image"></span>Templates</a><span
                        class="me-3 ms-3"><img src="../assets/images/arrow-left (1).svg" alt="image"></span>Media</div>
            </div>
            <div class="template-content">
                <div class="template-small-content">
                    {{ Form::open(['url' => '#', 'name' => 'templateForm', 'id' => 'templateForm', 'enctype' => 'multipart/form-data', 'class' => 'pt-0']) }}
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="form-group">
                                <label for="template_name">Template Name *</label>
                                <input type="text" id="template_name" name="template_name" class="form-control"
                                    value="{{ isset($template->template_name) ? $template->template_name : '' }}"
                                    placeholder="Enter Template Name">
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="form-group">
                                <label for="template_file">Please Select Media Type</label>
                                <div class="file image-upload-wrap" id="image_upload_wrap"
                                    style="background-image: url('{{ isset($template->template_file) ? asset('storage/Images/template/' . $template->template_file) : '' }}');
                                           background-size: cover;
                                           background-position: center;">
                                    <div class="file__input" id="file__input">
                                        <input class="file__input--file file-upload-input" id="template_file"
                                            name="template_file" type="file" accept="image/*" />
                                        <div class="drag-text">
                                            <img src="../assets/images/Group 27535 (1).svg" alt="img">
                                            <p>Drop Files Here Or Browse Files</p>
                                        </div>
                                    </div>
                                    <!-- Hidden Input to Store File Name -->
                                    <input type="hidden" name="template_file_name" id="template_file_name"
                                        value="{{ isset($template->template_file) ? $template->template_file : '' }}">
                                    <!-- Display the File Name -->
                                    <p id="file_name_display" style="margin-top: 10px; color: #555;">
                                        {{ isset($template->template_file) ? $template->template_file : '' }}
                                    </p>
                                </div>
                            </div>
                        </div>

                        <input type="hidden" id="template_id" name="template_id"
                            value="{{ isset($template->id) ? Crypt::encrypt($template->id) : '' }}">
                    </div>
                    <div class="row">
                        <div class="col-lg-12 col-sm-12 text-center">
                            <button type="submit" id="templateFormSubmit"
                                class="btn btn-blue-button btn-padding">Submit</button>
                        </div>
                    </div>
                    {{ Form::close() }}
                </div>
            </div>
        </section>
    </div>
@endsection

@section('js')
    <script>
        document.getElementById('template_file').addEventListener('change', function(e) {
            const fileInput = e.target;
            const fileNameDisplay = document.getElementById('file_name_display');
            const hiddenFileName = document.getElementById('template_file_name');
            const imageUploadWrap = document.getElementById('image_upload_wrap');

            if (fileInput.files && fileInput.files[0]) {
                const file = fileInput.files[0];

                if (!file.type.startsWith('image/')) {
                    $.notify('Please upload a valid image file.', "error");
                    fileInput.value = '';
                    return;
                }

                const maxSize = 5 * 1024 * 1024;
                if (file.size > maxSize) {
                    $.notify('File size exceeds the maximum limit of 5MB.', "error");
                    fileInput.value = '';
                    return;
                }

                const fileName = file.name;
                fileNameDisplay.textContent = `Selected File: ${fileName}`;
                hiddenFileName.value = fileName;

                const reader = new FileReader();
                reader.onload = function(e) {
                    imageUploadWrap.style.backgroundImage = `url('${e.target.result}')`;
                    imageUploadWrap.style.backgroundSize = 'cover';
                    imageUploadWrap.style.backgroundPosition = 'center';
                };
                reader.readAsDataURL(file);
            } else {
                fileNameDisplay.textContent = '';
                hiddenFileName.value = '';
                imageUploadWrap.style.backgroundImage = 'none';
            }
        });


        $(document).ready(function() {
            $.validator.addMethod("notOnlySpaces", function(value, element) {
                return $.trim(value).length > 0;
            }, "This field cannot be just spaces.");

            $('#templateForm').validate({
                ignore: ".ignore",
                rules: {
                    template_name: {
                        required: true,
                        maxlength: 50,
                        notOnlySpaces: true,
                    },
                    template_file: {
                        required: {
                            depends: function() {
                                return $('#template_file_name').val() == '';
                            }
                        }
                    },
                },
                messages: {},
                submitHandler: function(form) {

                    $("#templateFormSubmit").attr('disabled', true);

                    var formData = new FormData($("#templateForm")[0]);

                    $.ajax({
                        url: "{{ route('AddUpdateTemplate') }}",
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        dataType: "json",
                        success: function(response) {
                            $("#templateFormSubmit").attr('disabled', false);
                            if (response.status === 'success') {
                                $.notify(response.message, "success");
                                setTimeout(function() {
                                    window.location.href =
                                        "{{ route('templateFieldSet', ':template_id') }}"
                                        .replace(':template_id', response
                                            .template_id);
                                }, 1000);
                            } else {
                                $.notify(response.message, "error");
                            }
                        },
                        error: function(jqXHR) {
                            $("#templateFormSubmit").attr('disabled', false);
                            if (jqXHR.status === 422) {
                                const errors = jqXHR.responseJSON.errors;
                                for (const [field, messages] of Object.entries(errors)) {
                                    $.notify(messages[0],
                                        "error");
                                }
                            } else {
                                $.notify(jqXHR.responseJSON.message || "An error occurred.",
                                    "error");
                            }
                        }
                    });
                }
            });
        });
    </script>
@endsection