@extends('Template::layouts.master')
@section('content')
    <div class="custom--card card">
        <div class="seo-content-wrapper">
            <div class="seo-content-wrapper__left">
                <h5 class="mb-3">@lang('SEO Content Create')</h5>
                <form id="contentGenerate" enctype="multipart/form-data">
                    <div class="row">
                        <div class="col-12">
                            <div class="form-group">
                                <label class="form--label">Content Type</label>
                                <select class="form-control form--control select2" name="content_type_id" required>
                                    <option value="" selected disabled>@lang('Select One')</option>
                                    @foreach ($contentTypes as $content)
                                        <option value="{{ $content->id }}">{{ __($content->name) }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="form-group">
                                <label class="form--label">@lang('Keyword or topics')</label>
                                <textarea name="prompt" class="form-control form--control" required></textarea>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="form-group">
                                <label for="tone" class="form--label">@lang('Select Tone')</label>
                                <div class="gap-3 flex-wrap">
                                    <label for="formal-radio" class="form--radio">
                                        <input class="form-check-input" type="radio" name="tone" value="formal" id="formal-radio" checked="">
                                        <span>@lang('Formal')</span>
                                    </label>
                                    <label for="informative-radio" class="form--radio">
                                        <input class="form-check-input" type="radio" name="tone" value="informative" id="informative-radio">
                                        <span>@lang('Informative')</span>
                                    </label>
                                    <label for="conversational-radio" class="form--radio">
                                        <input class="form-check-input" type="radio" name="tone" value="conversational" id="conversational-radio">
                                        <span>@lang('Conversational')</span>
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="form-group">
                                <ul class="ad-gen-attach">
                                    <li class="ad-gen-attach-item">
                                        <label class="ad-gen-attach-item__dropzone">
                                            <span class="icon">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
                                                    <path d="M0.516953 15.337L0.499141 15.3549C0.258672 14.8294 0.107266 14.2327 0.0449219 13.5736C0.107266 14.2238 0.276484 14.8116 0.516953 15.337Z" fill="currentColor"></path>
                                                    <path d="M6.23492 7.65094C7.40563 7.65094 8.35459 6.70191 8.35459 5.53125C8.35459 4.36057 7.40563 3.41156 6.23492 3.41156C5.06425 3.41156 4.11523 4.36057 4.11523 5.53125C4.11523 6.70191 5.06425 7.65094 6.23492 7.65094Z" fill="currentColor"></path>
                                                    <path d="M12.638 0.1875H5.17453C1.93266 0.1875 0 2.12016 0 5.36203V12.8255C0 13.7963 0.169219 14.6423 0.49875 15.3548C1.26469 17.047 2.90344 18 5.17453 18H12.638C15.8798 18 17.8125 16.0673 17.8125 12.8255V10.7859V5.36203C17.8125 2.12016 15.8798 0.1875 12.638 0.1875ZM16.3608 9.53906C15.6661 8.94234 14.5439 8.94234 13.8492 9.53906L10.1442 12.7186C9.44953 13.3153 8.32734 13.3153 7.63266 12.7186L7.32984 12.4692C6.6975 11.917 5.69109 11.8636 4.97859 12.3445L1.64766 14.58C1.45172 14.0813 1.33594 13.5023 1.33594 12.8255V5.36203C1.33594 2.85047 2.66297 1.52344 5.17453 1.52344H12.638C15.1495 1.52344 16.4766 2.85047 16.4766 5.36203V9.63703L16.3608 9.53906Z" fill="currentColor"></path>
                                                </svg>
                                            </span>
                                            <span class="text">@lang('Add Image')</span>
                                            <input class="visually-hidden ad-gen-attach-input" name="image" type="file" accept=".jpg,.jpeg,.png">
                                        </label>

                                        <div class="ad-gen-attach-item__preview d-none">
                                            <img class="ad-gen-attach-item__preview-img banner-image" src="" alt="img">
                                            <button class="ad-gen-attach-item__preview-close" type="button"></button>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-12">
                            <button type="submit" class="btn btn--base rounded-3 w-100">@lang('Generate')</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="seo-content-wrapper__right">
                <div class="seo-content-view">
                    <div class="blank__content" id="formView">
                        <div class="placeholder-glow">
                            <svg class="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="128" height="128" color="hsl(var(--white))" fill="none">
                                <path d="M11 21H10C6.22876 21 4.34315 21 3.17157 19.8284C2 18.6569 2 16.7712 2 13V10C2 6.22876 2 4.34315 3.17157 3.17157C4.34315 2 6.22876 2 10 2H12C15.7712 2 17.6569 2 18.8284 3.17157C20 4.34315 20 6.22876 20 10V10.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                <path d="M17.4069 14.4036C17.6192 13.8655 18.3808 13.8655 18.5931 14.4036L18.6298 14.4969C19.1482 15.8113 20.1887 16.8518 21.5031 17.3702L21.5964 17.4069C22.1345 17.6192 22.1345 18.3808 21.5964 18.5931L21.5031 18.6298C20.1887 19.1482 19.1482 20.1887 18.6298 21.5031L18.5931 21.5964C18.3808 22.1345 17.6192 22.1345 17.4069 21.5964L17.3702 21.5031C16.8518 20.1887 15.8113 19.1482 14.4969 18.6298L14.4036 18.5931C13.8655 18.3808 13.8655 17.6192 14.4036 17.4069L14.4969 17.3702C15.8113 16.8518 16.8518 15.8113 17.3702 14.4969L17.4069 14.4036Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                <path d="M7 7H15M7 11.5H15M7 16H11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>
                            <h6>@lang('Smart content, Real results, 100% AI-powered')</h6>
                        </div>
                    </div>
                    <div class="gallary-details-card-loader d-none" id="loaderView">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="sparkle">
                            <defs>
                                <linearGradient id="starGradient" gradientUnits="userSpaceOnUse" x1="100%" y1="0%" x2="0%" y2="100%" gradientTransform="rotate(266)">
                                    <stop offset="-11.87%" stop-color="hsl(var(--base-two))" />
                                    <stop offset="114.26%" stop-color="hsl(var(--base))" />
                                </linearGradient>
                            </defs>
                            <path class="path" stroke-linejoin="round" stroke-linecap="round" stroke="currentColor" fill="currentColor"
                                  d="M14.187 8.096L15 5.25L15.813 8.096C16.0231 8.83114 16.4171 9.50062 16.9577 10.0413C17.4984 10.5819 18.1679 10.9759 18.903 11.186L21.75 12L18.904 12.813C18.1689 13.0231 17.4994 13.4171 16.9587 13.9577C16.4181 14.4984 16.0241 15.1679 15.814 15.903L15 18.75L14.187 15.904C13.9769 15.1689 13.5829 14.4994 13.0423 13.9587C12.5016 13.4181 11.8321 13.0241 11.097 12.814L8.25 12L11.096 11.187C11.8311 10.9769 12.5006 10.5829 13.0413 10.0423C13.5819 9.50162 13.9759 8.83214 14.186 8.097L14.187 8.096Z">
                            </path>
                            <path class="path" stroke-linejoin="round" stroke-linecap="round" stroke="currentColor" fill="currentColor"
                                  d="M6 14.25L5.741 15.285C5.59267 15.8785 5.28579 16.4206 4.85319 16.8532C4.42059 17.2858 3.87853 17.5927 3.285 17.741L2.25 18L3.285 18.259C3.87853 18.4073 4.42059 18.7142 4.85319 19.1468C5.28579 19.5794 5.59267 20.1215 5.741 20.715L6 21.75L6.259 20.715C6.40725 20.1216 6.71398 19.5796 7.14639 19.147C7.5788 18.7144 8.12065 18.4075 8.714 18.259L9.75 18L8.714 17.741C8.12065 17.5925 7.5788 17.2856 7.14639 16.853C6.71398 16.4204 6.40725 15.8784 6.259 15.285L6 14.25Z">
                            </path>
                            <path class="path" stroke-linejoin="round" stroke-linecap="round" stroke="currentColor" fill="currentColor"
                                  d="M6.5 4L6.303 4.5915C6.24777 4.75718 6.15472 4.90774 6.03123 5.03123C5.90774 5.15472 5.75718 5.24777 5.5915 5.303L5 5.5L5.5915 5.697C5.75718 5.75223 5.90774 5.84528 6.03123 5.96877C6.15472 6.09226 6.24777 6.24282 6.303 6.4085L6.5 7L6.697 6.4085C6.75223 6.24282 6.84528 6.09226 6.96877 5.96877C7.09226 5.84528 7.24282 5.75223 7.4085 5.697L8 5.5L7.4085 5.303C7.24282 5.24777 7.09226 5.15472 6.96877 5.03123C6.84528 4.90774 6.75223 4.75718 6.697 4.5915L6.5 4Z">
                            </path>
                        </svg>
                        <p class="gallary-details-card-loader__text">@lang('Processing Your content generation...')</p>
                    </div>
                    <div class="h-100 d-none" id="dataShow"></div>
                </div>
                <div class="seo-content-view__footer flex-align justify-content-between d-none" id="actionArea">
                    <div class="d-flex gap-3">
                        <button class="btn btn--base btn--sm rounded-2" id="copyBtn"><i class="fa-regular fa-copy"></i> @lang('Copy')</button>
                    </div>
                    <div class="d-flex gap-3">
                        <a href="" class="btn btn--sm btn--gray" id="downloadLink"><i class="fa-solid fa-download"></i></a>
                        <button type="button" class="btn btn--sm btn--gray" id="refreshBtn"><i class="fa-solid fa-rotate-right"></i></button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection



@push('style-lib')
    <link rel="stylesheet" href="{{ asset('assets/global/css/select2.min.css') }}">
@endpush

@push('script-lib')
    <script src="{{ asset('assets/global/js/select2.min.js') }}"></script>
@endpush


@push('style')
    <style>
        .h-100 {
            overflow-y: auto;
        }
    </style>
@endpush

@push('script')
    <script>
        (function($) {
            "use strict";
            $('.select2').select2();

            let formView = $("#formView");
            let loaderView = $("#loaderView");
            let dataShow = $("#dataShow");
            let actionArea = $("#actionArea");

            $(document).on("change", ".ad-gen-attach-input", function() {
                const input = $(this);
                const file = this.files[0];

                if (file) {
                    const reader = new FileReader();
                    reader.onload = function() {
                        const item = input.closest(".ad-gen-attach-item");
                        const dropzone = item.find(".ad-gen-attach-item__dropzone");
                        const preview = item.find(".ad-gen-attach-item__preview");
                        const previewImg = preview.find(".ad-gen-attach-item__preview-img");
                        dropzone.addClass("d-none");
                        preview.removeClass("d-none");
                        previewImg.attr("src", reader.result);
                    };
                    reader.readAsDataURL(file);
                }
            });

            $(document).on("click", ".ad-gen-attach-item__preview-close", function(e) {
                e.preventDefault();
                const item = $(this).closest(".ad-gen-attach-item");
                const dropzone = item.find(".ad-gen-attach-item__dropzone");
                const preview = item.find(".ad-gen-attach-item__preview");
                const previewImg = preview.find(".ad-gen-attach-item__preview-img");
                previewImg.attr("src", "");
                preview.addClass("d-none");
                dropzone.removeClass("d-none");
                item.find(".ad-gen-attach-input").val("");
            });


            $("#contentGenerate").on('submit', function(e) {
                e.preventDefault();
                let form = $(this);

                let prompt = $('[name=prompt]').val();
                let content_type_id = Number($('[name=content_type_id]').find('option:selected').val());
                let tone = $('[name="tone"]:checked').val();
                let imageFile = $(this).find('[name=image]')[0].files[0];


                let formData = new FormData(this);
                formData.append("_token", "{{ csrf_token() }}");
                formData.append("prompt", prompt);
                formData.append("content_type_id", content_type_id);
                if (imageFile) {
                    formData.append("image", imageFile);
                }
                formData.append("tone", tone);


                $.ajax({
                    type: "POST",
                    url: `{{ route('user.content.generate') }}`,
                    data: formData,
                    contentType: false,
                    processData: false,
                    beforeSend: function() {
                        $(form).find('.generateBtn').addClass('processing').prop('disabled', true);
                        formView.addClass('d-none');
                        loaderView.removeClass('d-none');
                    },
                    success: function(response) {
                        loaderView.addClass('d-none');
                        $(form).find('.generateBtn').removeClass('processing').prop('disabled', false);
                        if (response.status == 'error') {
                            resetForm();
                            notify('error', response.message.error);
                            return;
                        }
                        dataShow.removeClass('d-none');
                        actionArea.removeClass('d-none');
                        $("#downloadLink").attr('href', response.data.route)
                        typeText('dataShow', response.data.content, 10);
                    },
                    error: function(xhr) {
                        $(form).find('.generateBtn').removeClass('processing').prop('disabled', false);
                        resetForm();
                        notify('error', 'Invalid error from API');
                    }
                });
            });

            function resetForm() {
                if (!dataShow.hasClass('d-none')) {
                    dataShow.addClass('d-none');
                }
                if (!actionArea.hasClass('d-none')) {
                    actionArea.addClass('d-none');
                }

                if (formView.hasClass('d-none')) {
                    formView.removeClass('d-none');
                }

                let form = $("#contentGenerate")

                form.find('.ad-gen-attach-item').each(function() {
                    const item = $(this);
                    const input = item.find('.ad-gen-attach-input');
                    const dropzone = item.find('.ad-gen-attach-item__dropzone');
                    const preview = item.find('.ad-gen-attach-item__preview');
                    const previewImg = preview.find('.ad-gen-attach-item__preview-img');

                    input.val('');
                    previewImg.attr('src', '');
                    preview.addClass('d-none');
                    dropzone.removeClass('d-none');
                });
            }

            function typeText(elementId, text, speed = 50) {
                const el = document.getElementById(elementId);
                el.innerHTML = "";
                let i = 0;

                function typing() {
                    if (i < text.length) {
                        const char = text.charAt(i);
                        if (char === "\n") {
                            el.innerHTML += "<br>";
                        } else {
                            el.innerHTML += char;
                        }
                        i++;

                        // 👇 Auto-scroll to the bottom while typing
                        el.scrollTop = el.scrollHeight;

                        setTimeout(typing, speed);
                    }
                }
                typing();
            }

            $(document).on('click', '#copyBtn', async function(en) {
                en.preventDefault();

                try {
                    let copyContent = dataShow;
                    let textToCopy = copyContent.html()
                        .replace(/<br\s*\/?>/gi, '\n')
                        .replace(/&nbsp;/g, ' ')
                        .replace(/<\/p>/gi, '\n\n')
                        .replace(/<[^>]+>/g, '');

                    textToCopy = textToCopy.trim();

                    if (!textToCopy) {
                        notify('error', 'Nothing to copy!');
                        return;
                    }

                    await navigator.clipboard.writeText(textToCopy);
                    notify('success', 'Copied to clipboard!');

                } catch (err) {
                    console.error('Copy failed: ', err);
                    notify('error', 'Failed to copy. Please copy manually.');
                }
            });

            $(document).on('click', '#refreshBtn', function(e) {
                e.preventDefault();
                resetForm();
                $('[name=prompt]').val('');
                $('[name=content_type_id]').val('').trigger('change');
            });
        })(jQuery)
    </script>
@endpush