/**
 * Jobus - Frontend AJAX Controller
 *
 * Handles all public-facing AJAX actions used across the Jobus plugin.
 * This script manages the following user interactions via AJAX:
 *
 * It ensures secure data transmission using nonce verification and utilizes
 * WordPress's built-in admin-ajax.php endpoint.
 *
 * @summary   Modular JS controller for handling public AJAX actions
 * @author    spider-themes
 * @since     1.0.0
 * @package   Jobus
 * @license   GPL-2.0+ https://www.gnu.org/licenses/gpl-2.0.html
 * @link      https://developer.wordpress.org/plugins/javascript/ajax/
 */

; (function ($) {
    'use strict';

    const JobusEmployerDashboard = {

        init: function () {
            this.Testimonials();
            this.CompanyWebsiteToggle();
            this.JobLogoUpload();
            this.ExternalApplicationUrlToggle();
        },


        /**
         * Manages the education section repeater in the candidate dashboard.
         * Handles adding, removing, validating, and auto-saving education items.
         *
         * @function Testimonials
         * @returns {void}
         */
        Testimonials: function () {
            const repeater = $('#company-testimonial-repeater');
            const addBtn = $('#add-company-testimonial');
            let index = repeater.children('.company-testimonial-item').length;

            // Handle image upload button click for testimonials
            repeater.on('click', '.testimonial-image-upload-btn', function (e) {
                e.preventDefault();
                const $btn = $(this);
                const dataIndex = $btn.data('index');
                const $fileInput = $(`#company-testimonial-${dataIndex}-file-input`);
                $fileInput.click();
            });

            // Handle file input change
            repeater.on('change', '.testimonial-file-input', function (e) {
                const file = this.files[0];
                if (!file) return;

                // Validate file type
                const validImageTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/webp'];
                if (!validImageTypes.includes(file.type)) {
                    alert('Please upload a valid image file (JPEG, PNG, GIF, or WebP)');
                    return;
                }

                // Read file as data URL
                const reader = new FileReader();
                reader.onload = function (event) {
                    const dataUrl = event.target.result;
                    const $container = $(this).closest('.dash-input-wrapper');
                    const $hiddenData = $container.find('.testimonial-image-data');
                    const $preview = $container.find('.testimonial-image-preview');

                    // Store base64 data URL
                    $hiddenData.val(dataUrl);
                    // Display preview
                    $preview.html('<img src="' + dataUrl + '" alt="Author Image" style="max-width:100px;max-height:100px;">');
                }.bind(this);
                reader.readAsDataURL(file);
            });

            addBtn.on('click', function (e) {
                e.preventDefault();
                const testimonialId = `company-testimonial-${index}`;
                const newItem = $(`
                    <div class="jbs-accordion-item company-testimonial-item">
                        <div class="jbs-accordion-header" id="company-testimonial-heading-${index}">
                            <button class="jbs-accordion-button jbs-collapsed" type="button"
                                    data-jbs-toggle="collapse"
                                    data-jbs-target="#${testimonialId}"
                                    data-jbs-parent="#company-testimonial-repeater"
                                    aria-expanded="false"
                                    aria-controls="${testimonialId}">
                                Testimonial #${index + 1}
                            </button>
                        </div>
                        <div id="${testimonialId}" class="jbs-accordion-collapse jbs-collapse"
                             aria-labelledby="company-testimonial-heading-${index}"
                             data-jbs-parent="#company-testimonial-repeater">
                            <div class="jbs-accordion-body">
                                <div class="jbs-row mb-3">
                                    <div class="jbs-col-lg-2">
                                        <div class="dash-input-wrapper jbs-mb-10">
                                            <label for="company-testimonial-${index}-author-name">Author Name</label>
                                        </div>
                                    </div>
                                    <div class="jbs-col-lg-10">
                                        <div class="dash-input-wrapper jbs-mb-10">
                                            <input type="text" name="company_testimonials[${index}][author_name]"
                                                   id="company-testimonial-${index}-author-name" class="jbs-form-control" value="">
                                        </div>
                                    </div>
                                </div>
                                <div class="jbs-row jbs-mb-3">
                                    <div class="jbs-col-lg-2">
                                        <div class="dash-input-wrapper jbs-mb-10">
                                            <label for="company-testimonial-${index}-location">Location</label>
                                        </div>
                                    </div>
                                    <div class="jbs-col-lg-10">
                                        <div class="dash-input-wrapper jbs-mb-10">
                                            <input type="text" name="company_testimonials[${index}][location]"
                                                   id="company-testimonial-${index}-location" class="jbs-form-control" value="">
                                        </div>
                                    </div>
                                </div>
                                <div class="jbs-row jbs-mb-3">
                                    <div class="jbs-col-lg-2">
                                        <div class="dash-input-wrapper jbs-mb-10">
                                            <label for="company-testimonial-${index}-review-content">Review</label>
                                        </div>
                                    </div>
                                    <div class="jbs-col-lg-10">
                                        <div class="dash-input-wrapper jbs-mb-10">
                                            <textarea name="company_testimonials[${index}][review_content]"
                                                      id="company-testimonial-${index}-review-content" class="jbs-form-control" rows="3"></textarea>
                                        </div>
                                    </div>
                                </div>
                                <div class="jbs-row jbs-mb-3">
                                    <div class="jbs-col-lg-2">
                                        <div class="dash-input-wrapper jbs-mb-10">
                                            <label for="company-testimonial-${index}-rating">Rating</label>
                                        </div>
                                    </div>
                                    <div class="jbs-col-lg-10">
                                        <div class="dash-input-wrapper jbs-mb-10">
                                            <select name="company_testimonials[${index}][rating]"
                                                    id="company-testimonial-${index}-rating" class="jbs-form-control">
                                                <option value="">--</option>
                                                <option value="1">1</option>
                                                <option value="2">2</option>
                                                <option value="3">3</option>
                                                <option value="4">4</option>
                                                <option value="5">5</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="jbs-row jbs-mb-3">
                                    <div class="jbs-col-lg-2">
                                        <div class="dash-input-wrapper jbs-mb-10">
                                            <label for="company-testimonial-${index}-image">Author Image</label>
                                        </div>
                                    </div>
                                    <div class="jbs-col-lg-10">
                                        <div class="dash-input-wrapper jbs-mb-10">
                                            <!-- Hidden field for image data URL -->
                                            <input type="hidden" name="company_testimonials[${index}][image]"
                                                   id="company-testimonial-${index}-image" class="testimonial-image-data" value="">
                                            <!-- Hidden file input -->
                                            <input type="file" id="company-testimonial-${index}-file-input"
                                                   class="testimonial-file-input" accept="image/jpeg,image/jpg,image/png,image/gif,image/webp"
                                                   style="display: none;">
                                            <!-- Upload button -->
                                            <button type="button" class="jbs-btn jbs-btn-secondary testimonial-image-upload-btn" data-index="${index}">
                                                Upload Image
                                            </button>
                                            <!-- Preview area (always present) -->
                                            <div class="testimonial-image-preview jbs-mt-2 jbs-mb-2" id="testimonial-image-preview-${index}"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="jbs-text-end">
                                    <button type="button" class="jbs-btn jbs-btn-danger jbs-btn-sm remove-company-testimonial jbs-mt-2 jbs-mb-2" title="Remove Item">
                                        <i class="bi bi-x"></i> Remove
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                `);
                repeater.append(newItem);
                index++;
            });

            repeater.on('click', '.remove-company-testimonial', function () {
                $(this).closest('.company-testimonial-item').remove();
                // Re-index all fields
                repeater.children('.company-testimonial-item').each(function (i, el) {
                    const testimonialId = `company-testimonial-${i}`;
                    const $el = $(el);
                    $el.find('.jbs-accordion-header').attr('id', `company-testimonial-heading-${i}`);
                    $el.find('.jbs-accordion-button')
                        .attr('data-jbs-target', `#${testimonialId}`)
                        .attr('aria-controls', testimonialId)
                        .text(`Testimonial #${i + 1}`);
                    $el.find('.jbs-accordion-collapse')
                        .attr('id', testimonialId)
                        .attr('aria-labelledby', `company-testimonial-heading-${i}`);
                    $el.find('input[name^="company_testimonials"]').each(function () {
                        let name = $(this).attr('name');
                        let id = $(this).attr('id');
                        if (name) {
                            name = name.replace(/company_testimonials\[\d+]/, `company_testimonials[${i}]`);
                            $(this).attr('name', name);
                        }
                        if (id) {
                            id = id.replace(/company-testimonial-\d+(-[a-z-]+)/, `company-testimonial-${i}$1`);
                            $(this).attr('id', id);
                        }
                    });
                    $el.find('textarea[name^="company_testimonials"]').each(function () {
                        let name = $(this).attr('name');
                        let id = $(this).attr('id');
                        if (name) {
                            name = name.replace(/company_testimonials\[\d+]/, `company_testimonials[${i}]`);
                            $(this).attr('name', name);
                        }
                        if (id) {
                            id = id.replace(/company-testimonial-\d+(-[a-z-]+)/, `company-testimonial-${i}$1`);
                            $(this).attr('id', id);
                        }
                    });
                    $el.find('select[name^="company_testimonials"]').each(function () {
                        let name = $(this).attr('name');
                        let id = $(this).attr('id');
                        if (name) {
                            name = name.replace(/company_testimonials\[\d+]/, `company_testimonials[${i}]`);
                            $(this).attr('name', name);
                        }
                        if (id) {
                            id = id.replace(/company-testimonial-\d+(-[a-z-]+)/, `company-testimonial-${i}$1`);
                            $(this).attr('id', id);
                        }
                    });
                    $el.find('label[for^="company-testimonial-"]').each(function () {
                        let htmlFor = $(this).attr('for');
                        if (htmlFor) {
                            htmlFor = htmlFor.replace(/company-testimonial-\d+(-[a-z-]+)/, `company-testimonial-${i}$1`);
                            $(this).attr('for', htmlFor);
                        }
                    });
                });
                index = repeater.children('.company-testimonial-item').length;
            });
        },


        /**
         * Handles toggling the company website fields based on radio selection.
         */
        CompanyWebsiteToggle: function () {
            const $select = $('#is_company_website');
            const $fields = $('#company-website-fields');
            $select.on('change', function () {
                if ($(this).val() === 'custom') {
                    $fields.show();
                } else {
                    $fields.hide();
                }
            });
            // Initial state (in case of dynamic content)
            if ($select.val() === 'custom') {
                $fields.show();
            } else {
                $fields.hide();
            }
        },

        /**
         * Handles job company logo upload using WordPress media uploader.
         * Allows users to upload, preview, and remove company logos.
         */
        JobLogoUpload: function () {
            let mediaUploader;

            // Upload button click
            $('#upload_logo_button').on('click', function (e) {
                e.preventDefault();

                // If the uploader object has already been created, reopen the dialog
                if (mediaUploader) {
                    mediaUploader.open();
                    return;
                }

                // Extend the wp.media object
                mediaUploader = wp.media({
                    title: 'Choose Company Logo',
                    button: {
                        text: 'Use this logo'
                    },
                    multiple: false,
                    library: {
                        type: 'image'
                    }
                });

                // When an image is selected, run a callback
                mediaUploader.on('select', function () {
                    const attachment = mediaUploader.state().get('selection').first().toJSON();

                    // Set the hidden input value to the attachment ID
                    $('#job_company_logo_id').val(attachment.id);

                    // Display the preview image
                    $('.logo-preview').attr('src', attachment.url).show();

                    // Update button text
                    $('#upload_logo_button').html('<i class="bi bi-upload"></i> Change Logo');

                    // Show remove button
                    $('#remove_logo_button').show();
                });

                // Open the uploader dialog
                mediaUploader.open();
            });

            // Remove button click
            $('#remove_logo_button').on('click', function (e) {
                e.preventDefault();

                // Clear the hidden input
                $('#job_company_logo_id').val('');

                // Hide the preview image
                $('.logo-preview').attr('src', '').hide();

                // Update button text
                $('#upload_logo_button').html('<i class="bi bi-upload"></i> Upload Logo');

                // Hide remove button
                $(this).hide();
            });
        },

        /**
         * Handles toggling the external application URL fields based on selection.
         */
        ExternalApplicationUrlToggle: function () {
            const $select = $('#is_apply_btn');
            const $fields = $('#application-url-fields');

            $select.on('change', function () {
                const value = $(this).val();
                if (value === 'external') {
                    $fields.hide().removeClass('jbs-d-none').slideDown(200);
                } else {
                    $fields.slideUp(200, function() {
                        $(this).addClass('jbs-d-none').show();
                    });
                }
            });

            // Initial state (in case of editing)
            const initialValue = $select.val();
            if (initialValue === 'external') {
                $fields.removeClass('jbs-d-none').show();
            } else {
                $fields.addClass('jbs-d-none');
            }
        }

    };

    $(document).ready(function () {
        JobusEmployerDashboard.init();
    });

})(jQuery);
