@extends('user.app.layout')

@section('content')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css" />


    <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-content1">
                <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-6 col-md-7 col-12">
                            <div class="row">
                                {{-- Name --}}
                                <div class="col-lg-6" id="form-group-name">
                                    <div class="form-group">
                                        <label for="name">Name *</label>
                                        <input type="text" id="name" name="name" class="form-control"
                                            placeholder="Enter Name">
                                    </div>
                                </div>

                                {{-- Email --}}
                                <div class="col-lg-6" id="form-group-email">
                                    <div class="form-group">
                                        <label for="email">Email *</label>
                                        <input type="text" id="email" name="email" class="form-control"
                                            placeholder="Enter Email">
                                    </div>
                                </div>

                                {{-- Mobile Number --}}
                                <div class="col-lg-6" id="form-group-mobile_number">
                                    <div class="form-group">
                                        <label for="mobile_number">Mobile Number *</label>
                                        <input type="text" id="mobile_number" name="mobile_number" class="form-control"
                                            placeholder="Enter Mobile Number">
                                    </div>
                                </div>

                                {{-- Business Name --}}
                                <div class="col-lg-6" id="form-group-business_name">
                                    <div class="form-group">
                                        <label for="business_name">Business Name *</label>
                                        <input type="text" id="business_name" name="business_name" class="form-control"
                                            placeholder="Enter Business Name">
                                    </div>
                                </div>

                                {{-- Business Address --}}
                                <div class="col-lg-12" id="form-group-business_address">
                                    <div class="form-group">
                                        <label for="business_address">Business Address *</label>
                                        <input type="text" id="business_address" name="business_address"
                                            class="form-control" placeholder="Enter Business Address">
                                    </div>
                                </div>

                                {{-- Audience Photo File --}}
                                <div class="col-lg-6" id="form-group-audience_photo_file">
                                    <div class="form-group">
                                        <label for="audience_photo_file">Audience Photo File</label>
                                        <input type="file" id="audience_photo_file" name="audience_photo_file"
                                            class="form-control-file">

                                    </div>
                                </div>

                                {{-- Business Logo File --}}
                                <div class="col-lg-6" id="form-group-business_logo_file">
                                    <div class="form-group">
                                        <label for="business_logo_file">Business Logo File</label>
                                        <input type="file" id="business_logo_file" name="business_logo_file"
                                            class="form-control-file">

                                    </div>
                                </div>

                                <input type="hidden" id="template_id" name="template_id"
                                    value="{{ 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 class="col-lg-6 col-md-5 col-12">
                            <div class="template_view_img">
                                <img id="preview"
                                    src="{{ asset('storage/Images/template') . '/' . $template->template_file }}"
                                    alt="image">
                            </div>
                            <div class="row">
                                <div class="col-lg-12 col-sm-12 text-center">
                                    <a id="downloadPoster" href="javascript:void(0)" download class="btn btn-success m-1"
                                        disabled>
                                        Download
                                    </a>

                                    <a id="previewPoster" data-fancybox="gallery" href="javascript:void(0)"
                                        class="btn btn-primary m-1" disabled>
                                        <i class="fas fa-eye"></i> Preview
                                    </a>


                                </div>
                            </div>
                        </div>
                    </div>




                </div>
            </div>
        </section>
    </div>
@endsection

@section('js')
    <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.js"></script>

    <script>
        function setFields() {
            let template_id = $('#template_id').val();

            $.ajax({
                url: "{{ route('setFields') }}",
                type: 'POST',
                data: {
                    'template_id': template_id,
                    '_token': "{{ csrf_token() }}"
                },
                dataType: "json",
                success: function(response) {
                    if (response.status === 1) {
                        // All possible field names
                        const allFieldNames = [
                            'name',
                            'email',
                            'mobile_number',
                            'business_name',
                            'business_address',
                            'audience_photo_file',
                            'business_logo_file'
                        ];

                        // Hide all fields using CSS display
                        allFieldNames.forEach(field => {
                            $('#form-group-' + field).css('display', 'none');
                        });

                        // Show active fields using CSS display
                        response.fields.forEach(field => {
                            if (field.field_status === 'active') {
                                $('#form-group-' + field.field_name).css('display', 'block');
                            }
                        });
                    } else {
                        console.error("Failed to load fields:", response.msg);
                    }
                },
                error: function(xhr, status, error) {
                    console.error("AJAX Error:", error);
                }
            });
        }


        $(document).ready(function() {
            setFields();

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



            $('#templateForm').validate({
                ignore: ".ignore",
                rules: {},
                messages: {},
                submitHandler: function(form) {

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

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

                    $.ajax({
                        url: "{{ route('AddUpdateTestTemplate') }}",
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        dataType: "json",
                        success: function(response) {
                            $("#templateFormSubmit").attr('disabled', false);

                            if (response.status === 'success') {
                                $.notify('Poster Generated Successfully', "success");

                                let imageUrl =
                                    "{{ asset('storage/Images/TestPoster/poster') }}/" +
                                    response.finalPoster;

                                // Update image preview
                                $('#preview').attr('src', imageUrl);

                                // Update and enable buttons
                                $('#downloadPoster').attr('href', imageUrl).removeAttr(
                                    'disabled');
                                $('#previewPoster').attr('href', imageUrl).removeAttr(
                                    'disabled');

                            } 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