@extends('layouts/contentLayoutMaster')

@section('title', 'Create Mockup')
@section('main-page', 'Create Mockup')

@section('vendor-style')
    {{-- Page Css files --}}
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/forms/select/select2.min.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/dataTables.bootstrap5.min.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/responsive.bootstrap5.min.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/buttons.bootstrap5.min.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/rowGroup.bootstrap5.min.css')) }}">
    <style>
        .small-badge {
            font-size: 10px;
            font-weight: 500;
            padding: 3px 6px;
            border-radius: 999px;
            line-height: 1.2;
        }
    </style>
    <style>
        .gradient-picker-trigger {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-image: url('/images/AddColor.svg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            border: 1px solid #ccc;
            cursor: pointer;
            position: relative;
        }

        .gradient-picker-trigger .pcr-button {
            display: none !important;
        }

        .selected-color-wrapper {
            width: 28px;
            height: 28px;
        }

        .selected-color-dot {
            width: 100%;
            height: 100%;
            padding: 1px;
            border-radius: 50%;
            border: 2px solid #ccc;
            box-sizing: border-box;
            background-clip: content-box;
        }

        .selected-color-inner {
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }

        .remove-color-btn {
            position: absolute;
            top: -5px;
            right: -5px;
            background-color: #F4F6F6 !important;
            color: #424746 !important;
            border-radius: 5px;
            width: 16px;
            height: 16px;
            font-size: 16px;
            line-height: 1;
            padding: 1px;
            display: none;
        }

        .selected-color-wrapper:hover .remove-color-btn {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .gradient-edit-picker-trigger {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-image: url('/images/AddColor.svg') !important;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            border: 1px solid #ccc;
            cursor: pointer;
            position: relative;
        }

        .gradient-edit-picker-trigger .pcr-button {
            display: none !important;
        }

        /* كل بلوك ياخد سطر كامل ويتكدس عموديًا */
        .type-block {
            display: block !important;
            width: 100% !important;
            box-sizing: border-box;
            margin-bottom: .75rem;
        }

        /* لو الـ inner d-flex موجود داخل البلوك فهو هعرض Base | Mask جنب بعض */
        .type-block > .d-flex {
            display: flex;
            gap: 1rem;
            align-items: flex-start;
        }

        /* تأكد أن الحاوية اليسرى عمودية */
        #left-column {
            display: flex !important;
            flex-direction: column !important;
            gap: .75rem;
        }

        /* لو محتاج تجاويف داخل البلوكات */
        .upload-card {
            box-sizing: border-box;
        }

        /* show more button animation */
        :root {
            --anim-duration: 300ms;
            --anim-ease: cubic-bezier(.2, .9, .3, 1);
        }

        .show-more:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
            transition: transform 180ms var(--anim-ease), box-shadow 180ms var(--anim-ease);
        }
    </style>
@endsection

@section('page-style')
    {{-- Page Css files --}}
    <link rel="stylesheet" href="{{ asset(mix('css/base/plugins/forms/form-validation.css')) }}">
@endsection

@section('content')
    <!-- users list start -->
    <section class="">
        <div class="card">
            <div class="card-body">
                <form id="addMockupForm" enctype="multipart/form-data" action="{{ route('mockups.store') }}">
                    @csrf
                    {{--                    <input type="hidden" name="approach" value="{{ request('q') === 'with' ? 'with_editor' : 'without_editor' }}">--}}
                    <div class="modal-body flex-grow-1">
                        <div class="position-relative text-center mb-2">
                            <hr class="opacity-75" style="border: 1px solid #24B094;">
                            <span
                                class="position-absolute top-50 start-50 translate-middle px-1 bg-white fs-4 d-none d-md-flex"
                                style="color: #24B094">
                            Mockup Details
                        </span>
                        </div>
                        <div class="row">
                            <div class="row">

                                <div class="form-group mb-2 col-md-12">
                                    <label for="mockupName" class="label-text mb-1">Mockup Name</label>
                                    <input type="text" id="templateName" class="form-control" name="name"
                                           placeholder="Mockup Name">
                                </div>

                            </div>
                            <div class="row">

                                <div class="form-group mb-2 col-6">
                                    <label for="productsSelect" class="label-text mb-1">Product</label>
                                    <select id="productsSelect" name="category_id" class="form-select">
                                        <option value="" disabled selected>Choose product</option>
                                        @foreach($associatedData['products'] as $product)
                                            <option value="{{ $product->id }}">
                                                {{ $product->getTranslation('name', app()->getLocale()) }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group mb-2 col-6">
                                    <label for="categoriesSelect" class="label-text mb-1">Categories</label>
                                    <select id="categoriesSelect" name="product_ids[]" class="form-select" multiple>
                                        <option value="" disabled selected>Choose category</option>
                                    </select>
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group mb-2 col-md-3">
                                    <label for="fillRatio" class="label-text mb-1 d-flex align-items-center gap-2">
                                        Fill Ratio
                                    </label>
                                    <input type="number" id="fillRatio" class="form-control" name="fill_ratio"
                                           placeholder="ex: 70">
                                    <small class="form-text text-muted">
                                        ex: t-shirt: 70
                                    </small>
                                </div>

                                <div class="form-group mb-2 col-md-3">
                                    <label for="light_strength"
                                           class="label-text mb-1 d-flex align-items-center gap-2 flex-wrap">
                                        Light Strength
                                    </label>
                                    <input type="number" id="light_strength" class="form-control" name="light_strength"
                                           placeholder="ex: 40">
                                    <small class="form-text text-muted">
                                        ex: t-shirt: 35 ,scarf: 35-45
                                    </small>

                                </div>

                                <div class="form-group mb-2 col-md-3">
                                    <label for="shadow_strength"
                                           class="label-text mb-1 d-flex align-items-center gap-2 flex-wrap">
                                        Shadow Strength
                                    </label>
                                    <input type="number" id="shadow_strength" class="form-control"
                                           name="shadow_strength" placeholder="ex: 60">
                                    <small class="form-text text-muted">
                                        ex: t-shirt: 45% , scarf: 55-65%
                                    </small>

                                </div>

                                <div class="form-group mb-2 col-md-3">
                                    <label for="displacement_scale"
                                           class="label-text mb-1 d-flex align-items-center gap-2 flex-wrap">
                                        Displacement Scale
                                    </label>
                                    <input type="number" id="displacement_scale" class="form-control"
                                           name="displacement_scale" placeholder="ex: 15">
                                    <small class="form-text text-muted">
                                        ex: t-shirt: 8-10 ,scarf: 12-18
                                    </small>
                                </div>
                            </div>
                            <div class="form-group mb-2 col-md-12">
                                <div class="row">
                                    @foreach($associatedData['types'] as $type)
                                        <div class="col-md-4 mb-1">
                                            <label class="radio-box">
                                                <input class="form-check-input type-checkbox" type="checkbox"
                                                       name="types[]"
                                                       value="{{ $type->value }}"
                                                       data-type-name="{{ strtolower($type->value->name) }}">
                                                <span>{{ $type->value->label() }}</span>
                                            </label>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                            {{-- mockup Canvas --}}
                            <!-- العمود الشمال: يحتوي fixed-block + fileInputsContainer (البلوكات تتحط هنا) -->
                            <div class="row">
                                <div id="left-column" class="col-md-12">
                                    <!-- fixed-block يبقى مكان الإشارة لفانكشنك -->
                                    <div id="fixed-block"></div>

                                    <!-- الحاوية اللى بتضيف لها الفانكشن البلوكات (لو مش موجودة بالفعل) -->
                                    <div id="fileInputsContainer" class="row g-1"></div>
                                </div>
                            </div>
                            <!-- العمود اليمين: الـ editor / preview -->
                            {{--                        <div class="row">--}}
                            {{--                            <div class="d-none col-md-6 d-flex flex-column align-items-center" id="editorFrontWrapper">--}}
                            {{--                                <label class="label-text">Mockup Editor (Front)</label>--}}
                            {{--                                <canvas id="mockupCanvasFront" style="border:1px solid #ccc;" height="480"--}}
                            {{--                                        width="480"></canvas>--}}
                            {{--                            </div>--}}
                            {{--                            <div class="d-none col-md-6 d-flex flex-column align-items-center" id="editorBackWrapper">--}}
                            {{--                                <label class="label-text">Mockup Editor (Back)</label>--}}
                            {{--                                <canvas id="mockupCanvasBack" style="border:1px solid #ccc;" height="480"--}}
                            {{--                                        width="480"></canvas>--}}
                            {{--                            </div>--}}

                            {{--                            <div class="d-none col-md-6 d-flex flex-column align-items-center" id="editorNoneWrapper">--}}
                            {{--                                <label class="label-text">Mockup Editor (General)</label>--}}
                            {{--                                <canvas id="mockupCanvasNone" class="w-100" height="480" width="480"--}}
                            {{--                                        style="border:1px solid #ccc;"></canvas>--}}
                            {{--                            </div>--}}
                            {{--                        </div>--}}

                            {{--                        @if(request('q') === 'without')--}}


                            {{--                        <div class="form-group my-2 d-none" id="templatesCardsWrapper">--}}
                            {{--                            <label class="form-label mb-2">Choose Template</label>--}}
                            {{--                            <div id="templatesCardsContainer" class="row g-1 p-1 bg-white border rounded-3 shadow-sm">--}}
                            {{--                            </div>--}}
                            {{--                            <input type="hidden" name="template_id" id="selectedTemplateId" class="col-md-3">--}}
                            {{--                            <div id="templatesHiddenContainer"></div>--}}
                            {{--                        </div>--}}
                            {{--                        @endif--}}
                        </div>


                        <div class="mb-2">
                            <label class="label-text mb-1 d-block">Colors</label>
                            <div class="d-flex flex-wrap align-items-center gap-1">
                                <button type="button" id="openColorPicker"
                                        class="gradient-picker-trigger border openColorPicker"></button>

                                <span id="selected-colors"
                                      class="d-flex gap-1 flex-wrap align-items-center selected-colors"></span>
                            </div>
                            <div id="colorsInputContainer"></div>
                        </div>


                        <div class="modal-footer border-top-0">
                            <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel
                            </button>
                            <button type="submit" class="btn btn-primary fs-5 saveChangesButton" id="SaveChangesButton">
                                <span class="btn-text">Create</span>
                                <span id="saveLoader" class="spinner-border spinner-border-sm d-none saveLoader"
                                      role="status"
                                      aria-hidden="true"></span>
                            </button>
                        </div>

                </form>
            </div>

        </div>


        @include("modals.templates.template-modal")
    </section>
    <!-- users list ends -->
@endsection

@section('vendor-script')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.2.4/fabric.min.js"></script>

    {{-- Vendor js files --}}
    <script src="{{ asset(mix('vendors/js/forms/select/select2.full.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/jquery.dataTables.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/dataTables.bootstrap5.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/dataTables.responsive.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/responsive.bootstrap5.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/datatables.buttons.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/jszip.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/pdfmake.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/vfs_fonts.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/buttons.html5.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/buttons.print.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/dataTables.rowGroup.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/forms/validation/jquery.validate.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/forms/cleave/cleave.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/forms/cleave/addons/cleave-phone.us.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/forms/repeater/jquery.repeater.min.js')) }}"></script>
@endsection

@section('page-script')
    <script>
        $('#productsSelect').select2({
            placeholder: 'Choose product',
            allowClear: true,
            width: '100%',
        });
        $('#categoriesSelect').select2({
            placeholder: 'Choose category',
            allowClear: true,
            width: '100%',
        });

        $('#productsSelect').on('change', function () {
            const selectedIds = $(this).val();

            const ids = Array.isArray(selectedIds)
                ? selectedIds
                : (selectedIds ? [selectedIds] : []);

            const $right = $('#categoriesSelect');

            if (ids.length > 0) {
                $.ajax({
                    url: "{{ route('products.categories') }}",
                    type: "POST",
                    data: {
                        _token: "{{ csrf_token() }}",
                        category_ids: ids
                    },
                    success(response) {
                        $right.empty();

                        (response.data || []).forEach(cat => {
                            const opt = new Option(cat.name, cat.id, false, true);
                            $(opt).attr('data-has-mockup', cat.has_mockup ? '1' : '0');
                            $right.append(opt);
                        });

                        $right.trigger('change');
                    },
                    error(xhr) {
                        console.error("Error fetching categories:", xhr.responseText);
                    }
                });
            } else {
                $right.empty().trigger('change');
            }
        });


        window.templatePositions = window.templatePositions || {};
        var buildHiddenTemplateInputs;
        var calculateObjectPercents;

        function cacheCurrentTemplatePositions() {
            window.savedTemplatePositions = window.savedTemplatePositions || {};

            document.querySelectorAll('#templatesHiddenContainer .template-inputs').forEach(div => {
                const templateId = div.dataset.templateId;
                const inputs = div.querySelectorAll('input');
                const data = {};

                inputs.forEach(inp => {
                    const m = inp.name.match(/\[(front|back|none)_[a-z]+\]/);
                    if (m) {
                        const cleanKey = m[0].replace(/[\[\]]/g, ''); // front_x
                        data[cleanKey] = parseFloat(inp.value) || 0;
                    }
                });

                window.savedTemplatePositions[String(templateId)] = data;
            });

            console.log('✅ cached positions:', window.savedTemplatePositions);
        }

        document.addEventListener('DOMContentLoaded', function () {
            const $productSelect = $('#productsSelect');
            const $templatesWrapper = $('#templatesCardsWrapper');
            const $templatesCardsContainer = $('#templatesCardsContainer');
            const $selectedTemplateId = $('#selectedTemplateId');

            const $modal = $('#templateModal');
            const $modalContainer = $('#templates-modal-container');
            const $modalPagination = $('#templates-modal-pagination');

            const locale = "{{ app()->getLocale() }}";

            // حالة التمبليتس
            let firstPageTemplates = [];
            let nextPageUrl = null;
            let currentProductId = null;

            // =========================
            // Helpers
            // =========================
            function resetTemplatesUI() {
                $templatesCardsContainer.empty();
                $templatesWrapper.addClass('d-none');
                $selectedTemplateId.val('');
                firstPageTemplates = [];
                nextPageUrl = null;

                $modalContainer.empty();
                $modalPagination.empty();
            }

            function buildTemplateInnerCard(tpl, index = 0) {
                const id = tpl.id;
                const name = typeof tpl.name === 'object'
                    ? (tpl.name[locale] ?? Object.values(tpl.name)[0])
                    : (tpl.name || ('Template #' + id));

                const hasType3 = tpl.types?.some(t => t.value === 3);

                let front = '';
                let none = '';

                if (hasType3) {
                    none = tpl.source_design_svg || '';
                    front = '';
                } else {
                    front = tpl.source_design_svg || '';
                    none = '';
                }

                const back = tpl.back_base64_preview_image || '';
                const img = front || back || none || "{{ asset('images/placeholder.svg') }}";
                const editorBaseUrl = "{{ rtrim(config('services.editor_url'), '/') }}/mokup/";
                {{--const mockupId = "{{ $model->id }}";--}}
                {{--const productId = $('#productsSelect').val() || "{{ $model->category_id }}";--}}

                const editorUrl = `${editorBaseUrl}${mockupId}?${new URLSearchParams({
                    templateId: id,
                    is_has_category: '0',
                    product_id: String(productId || '')
                }).toString()}`;

                return `
        <div class="template-card h-100"
             data-id="${id}"
             data-index="${index}"
             data-front="${front}"
             data-back="${back}"
             data-none="${none}">
            <div class="card rounded-3 shadow-sm" style="border:1px solid #24B094;">
                <div class="d-flex justify-content-center align-items-center"
                     style="background-color:#F4F6F6;height:200px;border-radius:12px;padding:10px;">
                    <img
                        src="${img}"
                        class="mx-auto d-block"
                        style="height:auto;width:auto;max-width:100%;max-height:100%;border-radius:5px;"
                        alt="${name}">
                </div>

                <div class="card-body py-2">
                    <h6 class="card-title mb-0 text-truncate fs-5">${name}</h6>
                </div>

                <div class="d-flex gap-1 px-1 pb-2">
                    <button type="button"
                            class="btn btn-sm btn-primary w-100 js-show-on-mockup">
                        Show on Mockup
                    </button>

                    <a href="${editorUrl}"
                       target="_blank"
                       class="btn btn-sm btn-primary w-100">
                        Show with Editor
                    </a>

                    <button type="button"
                            class="btn btn-sm btn-outline-primary w-100 js-save-positions">
                        Save Positions
                    </button>
                </div>

                <div class="mb-2" style="padding-left: 10px">
                    <label class="label-text mb-1 d-block">Colors</label>
                    <div class="d-flex flex-wrap align-items-center gap-1">
                        <button type="button" class="openColorPicker gradient-picker-trigger border"></button>
                        <span class="selected-colors d-flex gap-1 flex-wrap align-items-center"></span>
                    </div>
                    <div class="colorsInputContainer"></div>
                </div>
            </div>
        </div>
    `;
            }

            // =========================
            // Cards (أول 3 بس)
            // =========================
            function renderTemplateCards(templates) {
                $templatesCardsContainer.empty();

                if (!templates.length) {
                    $templatesCardsContainer.append(`
                    <div class="col-12 text-center text-muted py-2">
                        No templates found
                    </div>
                `);
                    return;
                }

                const maxInline = 3;
                const visible = templates.slice(0, maxInline);

                visible.forEach(function (tpl, index) {
                    const cardHtml = `
                    <div class="col-12 col-md-4">
                        ${buildTemplateInnerCard(tpl, index)}
                    </div>
                `;
                    $templatesCardsContainer.append(cardHtml);
                });

                // لو عندنا أكتر من 3 → زر Show Remaining
                if (templates.length > maxInline) {
                    const showMoreHtml = `
                    <div class="template-card cursor-pointer d-flex justify-content-center justify-content-md-end">
                        <span class="template-card cursor-pointer show-more rounded-2 py-1 px-2 shadow-sm show-more-card js-open-templates-modal" tabindex="0" style="border:1px solid #24B094;">
                            Show more Templates</span>
                    </div>
                `;
                    $templatesCardsContainer.append(showMoreHtml);
                }
                $templatesWrapper.removeClass('d-none');
            }

            // =========================
            // Modal render
            // =========================
            function renderModalTemplates(templates, append = false) {
                if (!append) {
                    $modalContainer.empty();
                }

                if (!templates.length && !append) {
                    $modalContainer.html(`
                    <div class="col-12 text-center text-muted py-3">
                        No templates found
                    </div>
                `);
                    return;
                }

                templates.forEach(function (tpl, index) {
                    const cardHtml = `
                    <div class="col-12 col-md-6 col-lg-4">
                        ${buildTemplateInnerCard(tpl, index)}
                    </div>
                `;
                    $modalContainer.append(cardHtml);
                });
            }

            function renderModalPagination() {
                $modalPagination.empty();

                if (nextPageUrl) {
                    $modalPagination.html(`
                    <button
                        id="templates-modal-load-more"
                        type="button"
                        class="btn btn-sm btn-outline-primary"
                    >
                        Load More
                    </button>
                `);
                }
            }

            // =========================
            // Fetch templates (API)
            // =========================
            function getSelectedTypesForRequest() {
                const typeMap = {front: 1, back: 2, none: 3};

                return $('.type-checkbox:checked')
                    .map(function () {
                        const typeName = $(this).data('typeName'); // front / back / none
                        return typeMap[typeName];
                    })
                    .get(); // → [1, 2] مثلاً
            }

            {{--function fetchTemplatesForProduct(productId) {--}}
            {{--    if (!productId) {--}}
            {{--        resetTemplatesUI();--}}
            {{--        return;--}}
            {{--    }--}}

            {{--    resetTemplatesUI();--}}
            {{--    currentProductId = productId;--}}

            {{--    $templatesCardsContainer.html(`--}}
            {{--    <div class="col-12 text-center py-2">--}}
            {{--        Loading templates...--}}
            {{--    </div>--}}
            {{--`);--}}
            {{--    $templatesWrapper.removeClass('d-none');--}}

            {{--    $.ajax({--}}
            {{--        url: "{{ route('product-templates.index') }}",--}}
            {{--        method: "GET",--}}
            {{--        data: {--}}
            {{--            product_without_category_id: productId,--}}
            {{--            request_type: "api",--}}
            {{--            // approach: "without_editor",--}}
            {{--            paginate: true,--}}
            {{--            // has_not_mockups: true,--}}
            {{--            per_page: 12,--}}
            {{--            types: getSelectedTypesForRequest(),--}}
            {{--        },--}}

            {{--        success: function (response) {--}}
            {{--            const data = response.data ?? {};--}}
            {{--            const items = data.data ?? [];--}}
            {{--            const links = data.links ?? {};--}}

            {{--            firstPageTemplates = items;--}}
            {{--            nextPageUrl = links.next || null;--}}

            {{--            renderTemplateCards(firstPageTemplates);--}}
            {{--        },--}}
            {{--        error: function (xhr) {--}}
            {{--            console.error("Error loading templates", xhr);--}}
            {{--            resetTemplatesUI();--}}
            {{--        }--}}
            {{--    });--}}
            {{--}--}}

            // =========================
            // Events: Product change
            // =========================
            // $productSelect.on('change', function () {
            //     const productId = $(this).val();
            //     fetchTemplatesForProduct(productId);
            // });

            // حالة edit: لو فيه value جاهزة
            if ($productSelect.val()) {
                fetchTemplatesForProduct($productSelect.val());
            }

            // =========================
            // Show Remaining → افتح المودال
            // =========================
            $templatesCardsContainer.on('click', '.js-open-templates-modal', function () {
                // ✅ لو المودال متبني بالفعل (وفيه عناصر) افتحه بس
                if ($modalContainer.children().length === 0) {
                    const remaining = firstPageTemplates.slice(3);
                    renderModalTemplates(remaining, false);
                    renderModalPagination();
                }

                $modal.modal('show');
            });
            // =========================
            // Modal: Load More
            // =========================
            $(document).on('click', '#templates-modal-load-more', function () {
                const $btn = $(this);
                if (!nextPageUrl) return;

                $btn.prop('disabled', true).text('Loading...');

                $.ajax({
                    url: nextPageUrl,
                    method: "GET",
                    success: function (res) {
                        const data = res.data ?? {};
                        const items = data.data ?? [];
                        const links = data.links ?? {};

                        if (items.length) {
                            renderModalTemplates(items, true);
                        }

                        nextPageUrl = links.next || null;

                        if (nextPageUrl) {
                            $btn.prop('disabled', false).text('Load More');
                        } else {
                            $btn.remove();
                        }
                    },
                    error: function (xhr) {
                        console.error("Error loading more templates", xhr);
                        $btn.prop('disabled', false).text('Load More');
                    }
                });
            });

            // =========================
            // Show on Mockup (cards + modal)
            // =========================

            $(document).on('click', '.js-show-on-mockup', function () {
                const $cardWrapper = $(this).closest('.template-card');
                const id = $cardWrapper.data('id');
                const front = $cardWrapper.data('front');
                const back = $cardWrapper.data('back');
                const none = $cardWrapper.data('none');
                const name = $cardWrapper.find('.card-title').text();

                // Mark this template as selected
                $cardWrapper.addClass('selected');

                // Ensure it has a selectedColors array
                if (!$cardWrapper[0].selectedColors) {
                    $cardWrapper[0].selectedColors = [];
                }

                // Copy any existing selected colors from the card DOM inputs
                const colorInputs = $cardWrapper.find('input[name="pre_fill_colors[]"]');
                $cardWrapper[0].selectedColors = Array.from(colorInputs).map(input => input.value);

                // Highlight the selected card in templatesCardsWrapper
                $('#templatesCardsContainer').find('.template-card .card')
                    .removeClass('border-primary shadow-lg')
                    .css('border-color', '#24B094');

                // If clicked from the modal → swap with last card from main
                if ($(this).closest('#templateModal').length) {
                    const $mainContainer = $('#templatesCardsContainer');
                    const $modalContainer = $('#templates-modal-container');

                    const $modalCard = $(this).closest('.template-card');
                    const $modalCol = $modalCard.closest('[class*="col-"]');

                    // placeholder مكان كارت المودال
                    const $ph = $('<div class="__swap_ph__"></div>');
                    $modalCol.before($ph);

                    // آخر كارت من التلاتة اللي برا (بدون show-more)
                    const $mainCards = $mainContainer.find('.template-card').not('.show-more');
                    if (!$mainCards.length) return;

                    const $lastMainCard = $mainCards.last();
                    const $lastMainCol = $lastMainCard.closest('[class*="col-"]');

                    // 1) دخل آخر كارت برا إلى نفس مكان كارت المودال
                    $lastMainCol.detach()
                        .removeClass('col-12 col-md-4 col-lg-3')
                        .addClass('col-6 col-md-4 mb-2');

                    $ph.replaceWith($lastMainCol); // ✅ هنا اتأكدنا انه اتحط مكانه فعلاً

                    // 2) خرج كارت المودال وادخله أول التلاتة برا
                    $modalCol.detach()
                        .removeClass('col-6 col-md-4 mb-2')
                        .addClass('col-12 col-md-4 col-lg-3');

                    $mainContainer.prepend($modalCol);

                    // (اختياري) اقفل المودال
                    $('#templateModal').modal('hide');
                }

                // Highlight newly added/existing card
                $('#templatesCardsContainer').find(`.template-card[data-id="${id}"] .card`)
                    .addClass('border-primary shadow-lg')
                    .css('border-color', '#0d6efd');

                // Save template_id for single selection fallback (optional)
                $('#selectedTemplateId').val(id);

                // Load template on canvas
                if (typeof loadAndBind === 'function') {
                    if (front) {
                        loadAndBind(window.canvasFront, front, 'front', id);
                        document.getElementById('editorFrontWrapper')?.classList.remove('d-none');
                    }
                    if (back) {
                        loadAndBind(window.canvasBack, back, 'back', id);
                        document.getElementById('editorBackWrapper')?.classList.remove('d-none');
                    }
                    if (none) {
                        loadAndBind(window.canvasNone, none, 'none', id);
                        document.getElementById('editorNoneWrapper')?.classList.remove('d-none');
                    }
                }

                // Close modal
                $('#templateModal').modal('hide');
            });

// =========================
// Save Positions (cards + modal)
// =========================
            buildHiddenTemplateInputs = function () {
                const container = document.getElementById("templatesHiddenContainer");
                if (!container) return;

                container.innerHTML = "";

                // بس التمبليتس اللي اتعلّم عليها selected من الكروت
                const cards = document.querySelectorAll('.template-card.selected');

                let index = 0;
                cards.forEach(card => {
                    const tplId = String(card.dataset.id);
                    const positions = window.templatePositions[tplId] || {};
                    const selectedColors = card.selectedColors || [];

                    // لو مفيش أي side متحفظ ليه، نعدّي
                    if (!positions.front && !positions.back && !positions.none) return;

                    let html = `<div class="template-inputs" data-template-id="${tplId}">`;
                    html += `<input type="hidden" name="templates[${index}][template_id]" value="${tplId}">`;

                    ['front', 'back', 'none'].forEach(side => {
                        const p = positions[side];
                        if (!p) return;

                        html += `<input type="hidden" class="template_x ${side}" name="templates[${index}][${side}_x]" value="${p.xPct}">`;
                        html += `<input type="hidden" class="template_y ${side}" name="templates[${index}][${side}_y]" value="${p.yPct}">`;
                        html += `<input type="hidden" class="template_width ${side}" name="templates[${index}][${side}_width]" value="${p.wPct}">`;
                        html += `<input type="hidden" class="template_height ${side}" name="templates[${index}][${side}_height]" value="${p.hPct}">`;
                        html += `<input type="hidden" class="template_angle ${side}" name="templates[${index}][${side}_angle]" value="${p.angle}">`;
                    });

                    (selectedColors || []).forEach(color => {
                        html += `<input type="hidden" name="templates[${index}][colors][]" value="${color}">`;
                    });

                    html += `</div>`;

                    container.insertAdjacentHTML('beforeend', html);
                    index++;
                });

                console.log('📝 Hidden inputs rebuilt from templatePositions:', window.templatePositions);
            };

            calculateObjectPercents = function (obj, meta) {
                const center = obj.getCenterPoint();
                const wReal = (obj.width || 0) * (obj.scaleX || 1);
                const hReal = (obj.height || 0) * (obj.scaleY || 1);

                return {
                    xPct: ((center.x - meta.offsetLeft) / meta.scaledWidth).toFixed(6),
                    yPct: ((center.y - meta.offsetTop) / meta.scaledHeight).toFixed(6),
                    wPct: (wReal / meta.scaledWidth).toFixed(6),
                    hPct: (hReal / meta.scaledHeight).toFixed(6),
                    angle: obj.angle || 0
                };
            };

            // $('form').on('submit', function () {
            //     buildHiddenTemplateInputs();
            // });


            // حفظ أماكن Template واحد
            function savePositionsForTemplate(templateId) {
                const id = String(templateId);
                const canvases = {
                    front: window.canvasFront,
                    back: window.canvasBack,
                    none: window.canvasNone,
                };

                Object.entries(canvases).forEach(([type, canvas]) => {
                    if (!canvas || !canvas.__mockupMeta) return;

                    const obj = canvas.getObjects().find(
                        o => o.templateType === type && String(o.templateId) === id
                    );
                    if (!obj) return;

                    updateTemplatePositionsFromObject(obj, type);
                });

                buildHiddenTemplateInputs();
            }

            $(document).on('click', '.js-save-positions', function () {
                const card = this.closest('.template-card');
                if (!card) return;

                const templateId = card.dataset.id;
                if (!templateId) return;

                // اعتبر إن التمبليت ده داخل في الحفظ
                card.classList.add('selected');

                savePositionsForTemplate(templateId);

                Toastify({
                    text: "Positions saved successfully",
                    duration: 1500,
                    gravity: "top",
                    position: "right",
                    backgroundColor: "#28a745",
                    close: true,
                }).showToast();
            });


        });
    </script>

    <script>
        // =========================
        // CANVAS HELPER FUNCTIONS
        // =========================
        window.canvasFront = new fabric.Canvas('mockupCanvasFront');
        window.canvasBack = new fabric.Canvas('mockupCanvasBack');
        window.canvasNone = new fabric.Canvas('mockupCanvasNone');

        function loadBaseImage(canvas, baseUrl) {
            fabric.Image.fromURL(baseUrl, function (img) {
                img.set({selectable: false, evented: false});

                const canvasW = canvas.getWidth();
                const canvasH = canvas.getHeight();

                const scale = Math.min(canvasW / img.width, canvasH / img.height);
                const scaledW = img.width * scale;
                const scaledH = img.height * scale;

                const left = (canvasW - scaledW) / 2;
                const top = (canvasH - scaledH) / 2;

                canvas.__mockupMeta = {
                    originalWidth: img.width,
                    originalHeight: img.height,
                    scaledWidth: scaledW,
                    scaledHeight: scaledH,
                    offsetLeft: left,
                    offsetTop: top
                };

                canvas.setBackgroundImage(
                    img,
                    canvas.renderAll.bind(canvas),
                    {
                        scaleX: scale,
                        scaleY: scale,
                        left: left,
                        top: top,
                        originX: 'left',
                        originY: 'top'
                    }
                );
            });
        }

        function clearTemplateDesigns(canvas, type) {
            const objects = canvas.getObjects();
            objects.forEach(obj => {
                if (obj.templateType === type) {
                    canvas.remove(obj);
                }
            });
            canvas.renderAll();
        }

        // function syncTemplateInputs(obj, type) {
        //     const container = document.getElementById('templatesHiddenContainer');
        //     if (!container) return;

        //     const canvas = obj.canvas;
        //     const meta = canvas && canvas.__mockupMeta;
        //     if (!meta) return;

        //     const templateId = obj.templateId;

        //     const templateContainer = container.querySelector(`.template-inputs[data-template-id="${templateId}"]`);
        //     if (!templateContainer) return;

        //     const xInput = templateContainer.querySelector(`.template_x.${type}`);
        //     const yInput = templateContainer.querySelector(`.template_y.${type}`);
        //     const widthInput = templateContainer.querySelector(`.template_width.${type}`);
        //     const heightInput = templateContainer.querySelector(`.template_height.${type}`);
        //     const angleInput = templateContainer.querySelector(`.template_angle.${type}`);
        //     if (!xInput || !yInput || !widthInput || !heightInput || !angleInput) return;

        //     const center = obj.getCenterPoint();
        //     const wReal  = (obj.width || 0) * (obj.scaleX || 1);
        //     const hReal  = (obj.height || 0) * (obj.scaleY || 1);

        //     let xPct = (center.x - meta.offsetLeft) / meta.scaledWidth;
        //     let yPct = (center.y - meta.offsetTop)  / meta.scaledHeight;
        //     let wPct = wReal / meta.scaledWidth;
        //     let hPct = hReal / meta.scaledHeight;

        //     if (!Number.isFinite(xPct)) xPct = 0;
        //     if (!Number.isFinite(yPct)) yPct = 0;
        //     if (!Number.isFinite(wPct)) wPct = 0;
        //     if (!Number.isFinite(hPct)) hPct = 0;

        //     xInput.value      = xPct.toFixed(6);
        //     yInput.value      = yPct.toFixed(6);
        //     widthInput.value  = wPct.toFixed(6);
        //     heightInput.value = hPct.toFixed(6);
        //     angleInput.value  = String(obj.angle || 0);
        // }
        function updateTemplatePositionsFromObject(obj, type) {
            const canvas = obj.canvas;
            const meta = canvas && canvas.__mockupMeta;
            const tplId = obj.templateId;
            if (!meta || !tplId) return;

            const pos = calculateObjectPercents(obj, meta);

            const key = String(tplId);
            if (!window.templatePositions[key]) {
                window.templatePositions[key] = {};
            }
            window.templatePositions[key][type] = pos;
        }

        function clearTemplateInputsForObject(type) {
            const wrapper = document.getElementById('templatesCardsWrapper');
            if (!wrapper) return;

            const xInput = wrapper.querySelector(`.template_x.${type}`);
            const yInput = wrapper.querySelector(`.template_y.${type}`);
            const widthInput = wrapper.querySelector(`.template_width.${type}`);
            const heightInput = wrapper.querySelector(`.template_height.${type}`);
            const angleInput = wrapper.querySelector(`.template_angle.${type}`);

            [xInput, yInput, widthInput, heightInput, angleInput].forEach(inp => {
                if (inp) inp.value = '';
            });
        }

        function renderDeleteIcon(ctx, left, top) {
            const size = 18;

            ctx.save();
            ctx.beginPath();
            ctx.arc(left, top, size / 2, 0, Math.PI * 2, false);
            ctx.fillStyle = "#ff4d4f";
            ctx.fill();

            ctx.strokeStyle = "#ffffff";
            ctx.lineWidth = 2;
            ctx.beginPath();
            ctx.moveTo(left - 4, top - 4);
            ctx.lineTo(left + 4, top + 4);
            ctx.moveTo(left + 4, top - 4);
            ctx.lineTo(left - 4, top + 4);
            ctx.stroke();

            ctx.restore();
        }

        function addDeleteControl(obj, type) {
            obj.controls.deleteControl = new fabric.Control({
                x: 0.5,
                y: -0.5,
                offsetX: 0,
                offsetY: 0,
                cursorStyle: 'pointer',
                cornerSize: 24,
                mouseUpHandler: function (eventData, transform) {
                    const target = transform.target;
                    const canvas = target.canvas;

                    clearTemplateInputsForObject(type);

                    canvas.remove(target);
                    canvas.requestRenderAll();

                    return true;
                },
                render: renderDeleteIcon
            });
        }

        function applyDefaultPlacement(img, canvas, meta) {
            const defaultWidthRatio = 0.35;

            if (meta) {
                const targetW = meta.scaledWidth * defaultWidthRatio;
                const scale = targetW / img.width;

                img.scaleX = img.scaleY = scale;

                img.left = meta.offsetLeft + meta.scaledWidth / 2;
                img.top = meta.offsetTop + meta.scaledHeight * 0.35;
            } else {
                const canvasW = canvas.getWidth();
                const canvasH = canvas.getHeight();
                const targetW = canvasW * defaultWidthRatio;
                const scale = targetW / img.width;

                img.scaleX = img.scaleY = scale;
                img.left = canvasW / 2;
                img.top = canvasH / 2;
            }
        }

        function loadAndBind(canvas, designUrl, type, templateId) {
            // نمسح أي تصميم قديم لنفس الـ side
            clearTemplateDesigns(canvas, type);

            fabric.Image.fromURL(designUrl, function (img) {
                img.set({
                    originX: 'center',
                    originY: 'center',
                    transparentCorners: false
                });

                img.templateType = type;
                img.templateId = String(templateId);

                const meta = canvas.__mockupMeta;
                const stored = (window.templatePositions[img.templateId] || {})[type];

                if (meta && stored) {
                    // 🟢 استخدم الإحداثيات المحفوظة
                    const targetW = meta.scaledWidth * parseFloat(stored.wPct);
                    const targetH = meta.scaledHeight * parseFloat(stored.hPct);
                    const centerX = meta.offsetLeft + meta.scaledWidth * parseFloat(stored.xPct);
                    const centerY = meta.offsetTop + meta.scaledHeight * parseFloat(stored.yPct);

                    img.scaleX = targetW / img.width;
                    img.scaleY = targetH / img.height;
                    img.left = centerX;
                    img.top = centerY;
                    img.angle = parseFloat(stored.angle) || 0;
                } else {
                    // أول مرة لهذا الـ template → مركز التيشيرت بحجم افتراضي
                    applyDefaultPlacement(img, canvas, meta);
                }

                addDeleteControl(img, type);
                canvas.add(img);
                canvas.setActiveObject(img);
                canvas.renderAll();

                // أول sync → نخزن القيم
                if (meta) {
                    updateTemplatePositionsFromObject(img, type);
                    buildHiddenTemplateInputs();
                }
            });
        }


        // function saveAllTemplatePositions() {
        //     if (window.canvasFront) {
        //         window.canvasFront.getObjects().forEach(obj => {
        //             if (obj.templateType === 'front') {
        //                 syncTemplateInputs(obj, 'front');
        //             }
        //         });
        //     }

        //     if (window.canvasBack) {
        //         console.log('Canvas', window.canvasBack.getObjects());

        //         window.canvasBack.getObjects().forEach(obj => {
        //             if (obj.templateType === 'back') {
        //                 syncTemplateInputs(obj, 'back');
        //             }
        //         });
        //     }

        //     if (window.canvasNone) {
        //         window.canvasNone.getObjects().forEach(obj => {
        //             if (obj.templateType === 'none') {
        //                 syncTemplateInputs(obj, 'none');
        //             }
        //         });
        //     }
        // }

        function bindCanvasUpdates(canvas, type) {
            canvas.on('object:modified', function (e) {
                const obj = e.target;
                // syncTemplateInputs(obj, type);
                updateTemplatePositionsFromObject(obj, type);
                buildHiddenTemplateInputs();
            });
        }

        bindCanvasUpdates(window.canvasFront, "front");
        bindCanvasUpdates(window.canvasBack, "back");
        bindCanvasUpdates(window.canvasNone, "none");
    </script>

    <script>
        // =========================
        // TYPE CHECKBOXES + UPLOAD AREAS
        // =========================
        const checkboxes = document.querySelectorAll('.type-checkbox');
        const fileInputsContainer = document.getElementById('fileInputsContainer');

        function removeCanvasByType(type) {
            let canvas = null;
            let wrapperId = "";

            if (type === "front") {
                canvas = window.canvasFront;
                wrapperId = "editorFrontWrapper";
            } else if (type === "back") {
                canvas = window.canvasBack;
                wrapperId = "editorBackWrapper";
            } else if (type === "none") {
                canvas = window.canvasNone;
                wrapperId = "editorNoneWrapper";
            }

            if (!canvas) return;

            // 1️⃣ Remove all template objects of this type
            canvas.getObjects().forEach(o => {
                if (o.templateType === type) canvas.remove(o);
            });

            // 2️⃣ Remove background image
            canvas.setBackgroundImage(null, canvas.renderAll.bind(canvas));

            // 3️⃣ Clear saved input fields
            clearTemplateInputsForObject(type);

            // 4️⃣ Hide canvas wrapper
            const wrapper = document.getElementById(wrapperId);
            if (wrapper) wrapper.classList.add("d-none");

            canvas.renderAll();
        }

        function toggleCheckboxes() {
            let selectedTypes = [...checkboxes]
                .filter(cb => cb.checked)
                .map(cb => cb.dataset.typeName);

            checkboxes.forEach(cb => {
                const type = cb.dataset.typeName;

                cb.disabled =
                    (selectedTypes.includes('none') && (type === 'front' || type === 'back')) ||
                    ((selectedTypes.includes('front') || selectedTypes.includes('back')) && type === 'none');
            });

            renderFileInputs();
            if (window.jQuery) {
                // const $prod = $('#productsSelect');
                // if ($prod.length && $prod.val()) {
                //     $prod.trigger('change');
                // }
            }
        }

        function hideCanvasForType(type) {
            const wrapperIdMap = {
                front: 'editorFrontWrapper',
                back: 'editorBackWrapper',
                none: 'editorNoneWrapper',
            };

            const canvasMap = {
                front: window.canvasFront,
                back: window.canvasBack,
                none: window.canvasNone,
            };

            // أخفي الـ wrapper
            const wrapper = document.getElementById(wrapperIdMap[type]);
            if (wrapper) {
                wrapper.classList.add('d-none');
            }

            // امسح الكانفاس (الخلفية + الأوبجكتس)
            const canvas = canvasMap[type];
            if (canvas) {
                canvas.clear();
                canvas.renderAll();
                delete canvas.__mockupMeta; // ننسى الـ meta بتاعة الموكاب
            }

            // صفّر الـ hidden inputs بتاعة النوع ده
            if (typeof clearTemplateInputsForObject === 'function') {
                clearTemplateInputsForObject(type);
            }
        }

        // =========================
        // WARP POINTS EDITOR
        // =========================
        const warpState = {};

        function initWarpEditor(side, imageUrl) {
            const wrapper = document.getElementById(`warp-editor-${side}`);
            const img = document.getElementById(`warp-preview-${side}`);
            const canvas = document.getElementById(`warp-canvas-${side}`);
            if (!wrapper || !img || !canvas) return;

            warpState[side] = {
                points: [
                    {x: 0.1, y: 0.1},
                    {x: 0.9, y: 0.1},
                    {x: 0.9, y: 0.9},
                    {x: 0.1, y: 0.9},
                ],
                dragging: null,
            };

            img.src = imageUrl;
            wrapper.classList.remove('d-none');

            const LABELS = ['TL', 'TR', 'BR', 'BL'];
            const RADIUS = 10;

            function pxOf(p) {
                return {x: p.x * canvas.width, y: p.y * canvas.height};
            }

            function draw() {
                const ctx = canvas.getContext('2d');
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                const pts = warpState[side].points;

                // Fill
                ctx.beginPath();
                const f = pxOf(pts[0]);
                ctx.moveTo(f.x, f.y);
                pts.slice(1).forEach(p => {
                    const px = pxOf(p);
                    ctx.lineTo(px.x, px.y);
                });
                ctx.closePath();
                ctx.fillStyle = 'rgba(36,176,148,0.08)';
                ctx.fill();

                // Outline
                ctx.strokeStyle = 'rgba(36,176,148,0.85)';
                ctx.lineWidth = 1.5;
                ctx.setLineDash([6, 4]);
                ctx.stroke();
                ctx.setLineDash([]);

                // Diagonal guides
                ctx.beginPath();
                const tl = pxOf(pts[0]), br = pxOf(pts[2]);
                const tr = pxOf(pts[1]), bl = pxOf(pts[3]);
                ctx.moveTo(tl.x, tl.y);
                ctx.lineTo(br.x, br.y);
                ctx.moveTo(tr.x, tr.y);
                ctx.lineTo(bl.x, bl.y);
                ctx.strokeStyle = 'rgba(36,176,148,0.25)';
                ctx.lineWidth = 0.8;
                ctx.stroke();

                // Handles
                pts.forEach((p, i) => {
                    const px = pxOf(p);
                    ctx.beginPath();
                    ctx.arc(px.x, px.y, RADIUS, 0, Math.PI * 2);
                    ctx.fillStyle = '#24B094';
                    ctx.fill();
                    ctx.strokeStyle = '#fff';
                    ctx.lineWidth = 2;
                    ctx.stroke();
                    ctx.fillStyle = '#fff';
                    ctx.font = 'bold 10px sans-serif';
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'middle';
                    ctx.fillText(LABELS[i], px.x, px.y);
                });
            }

            function resize() {
                canvas.width = img.clientWidth || img.naturalWidth;
                canvas.height = img.clientHeight || img.naturalHeight;
                draw();
            }

            function nearestHandle(mx, my) {
                const pts = warpState[side].points;
                for (let i = 0; i < pts.length; i++) {
                    const p = pxOf(pts[i]);
                    if (Math.hypot(p.x - mx, p.y - my) < RADIUS + 5) return i;
                }
                return null;
            }

            canvas.addEventListener('pointerdown', e => {
                const rect = canvas.getBoundingClientRect();
                const mx = e.clientX - rect.left;
                const my = e.clientY - rect.top;
                warpState[side].dragging = nearestHandle(mx, my);
                if (warpState[side].dragging !== null) canvas.setPointerCapture(e.pointerId);
            });

            canvas.addEventListener('pointermove', e => {
                if (warpState[side].dragging === null) return;
                const rect = canvas.getBoundingClientRect();
                warpState[side].points[warpState[side].dragging] = {
                    x: Math.min(1, Math.max(0, (e.clientX - rect.left) / canvas.width)),
                    y: Math.min(1, Math.max(0, (e.clientY - rect.top) / canvas.height)),
                };
                draw();
                syncWarpInput(side);
            });

            canvas.addEventListener('pointerup', () => {
                warpState[side].dragging = null;
            });

            img.addEventListener('load', resize);
            new ResizeObserver(resize).observe(img);
            if (img.complete) resize();

            syncWarpInput(side);
        }

        function syncWarpInput(side) {
            // احذف أي inputs قديمة لنفس side
            document.querySelectorAll(`.warp-${side}`).forEach(el => el.remove());

            const state = warpState[side];
            if (!state || !state.points || state.points.length < 4) {
                return;
            }

            const pts = state.points;

            const warpPoints = {
                tl: pts[0],
                tr: pts[1],
                br: pts[2],
                bl: pts[3],
            };

            const form = document.getElementById('addMockupForm');

            Object.entries(warpPoints).forEach(([corner, point]) => {
                ['x', 'y'].forEach(axis => {
                    const input = document.createElement('input');
                    input.type = 'hidden';
                    input.className = `warp-${side}`;
                    input.name = `warp_points[${side}][${corner}][${axis}]`;
                    input.value = Number(point[axis].toFixed(6));
                    form.appendChild(input);
                });
            });
        }

        function resetWarp(side) {
            if (!warpState[side]) return;
            warpState[side].points = [
                {x: 0.1, y: 0.1},
                {x: 0.9, y: 0.1},
                {x: 0.9, y: 0.9},
                {x: 0.1, y: 0.9},
            ];
            // Re-init draw by triggering resize
            const img = document.getElementById(`warp-preview-${side}`);
            const canvas = document.getElementById(`warp-canvas-${side}`);
            if (canvas && img) {
                canvas.width = img.clientWidth || img.naturalWidth;
                canvas.height = img.clientHeight || img.naturalHeight;
                const ctx = canvas.getContext('2d');
                ctx.clearRect(0, 0, canvas.width, canvas.height);
            }
            syncWarpInput(side);
            // Re-init to redraw handles
            const imgEl = document.getElementById(`warp-preview-${side}`);
            if (imgEl && imgEl.src) initWarpEditor(side, imgEl.src);
        }

        $(document).on('click', '.js-reset-warp', function () {
            resetWarp($(this).data('side'));
            Toastify({text: 'Reset to default corners', backgroundColor: '#6c757d', duration: 1200}).showToast();
        });

        $(document).on('click', '.js-save-warp', function () {
            const side = $(this).data('side');
            const mockupId = "{{ $mockup->id ?? 'null' }}";

            syncWarpInput(side);

            if (!mockupId || mockupId === 'null') {
                Toastify({
                    text: 'Warp points ready — will save with mockup',
                    backgroundColor: '#17a2b8',
                    duration: 2000
                }).showToast();
                return;
            }

            fetch(`/admin/mockups/${mockupId}/side-settings/${side}`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                },
                body: JSON.stringify({warp_points: warpState[side]?.points}),
            })
                .then(r => r.json())
                .then(() => {
                    Toastify({
                        text: `Warp points saved for ${side}`,
                        backgroundColor: '#28a745',
                        duration: 1500
                    }).showToast();
                })
                .catch(() => {
                    Toastify({text: 'Save failed', backgroundColor: '#dc3545', duration: 1500}).showToast();
                });
        });
        // Disable Dropzone auto-discovery
        Dropzone.autoDiscover = false;

        // Track Dropzone instances to avoid re-init
        const dropzoneInstances = {};

        function renderFileInputs() {
            if (!fileInputsContainer) return;

            let selectedTypes = [...checkboxes]
                .filter(cb => cb.checked)
                .map(cb => cb.dataset.typeName);

            // Remove blocks + hide canvas for unchecked types
            ['front', 'back', 'none'].forEach(type => {
                if (!selectedTypes.includes(type)) {
                    const block = document.getElementById(`${type}-file-block`);
                    if (block) block.remove();

                    // Destroy dropzone instances for this type
                    ['base', 'mask', 'shadow', 'displacement', 'light'].forEach(part => {
                        const key = `${type}-${part}`;
                        if (dropzoneInstances[key]) {
                            dropzoneInstances[key].destroy();
                            delete dropzoneInstances[key];
                        }
                    });

                    if (typeof hideCanvasForType === 'function') {
                        hideCanvasForType(type);
                    }
                }
            });

            // Add blocks for newly selected types
            selectedTypes.forEach(type => {
                if (document.getElementById(`${type}-file-block`)) return;

                const typeLabel = type.charAt(0).toUpperCase() + type.slice(1);

                const block = document.createElement('div');
                block.className = 'col-md-6';
                block.id = `${type}-file-block`;

                block.innerHTML = `
            <label class="label-text">${typeLabel}</label>
            <hr style="height:2px;background-color:#CED5D4;"/>

            <div class="mb-2">
                <label class="form-label label-text">${typeLabel} Base Image</label>
                <div id="dz-${type}-base" class="dropzone dropzone-area">
                    <div class="dz-message">
                        <i data-feather="upload-cloud" style="width:28px;height:28px;stroke:#24B094;"></i>
                        <p class="mt-1 mb-0">Drag &amp; drop or <u>click to upload</u></p>
                        <small class="text-muted">PNG accepted</small>
                    </div>
                </div>
    <small class="form-text text-muted">
                                                            Upload an image with 1600w x 1800h [8:9].
                                                        </small>
            </div>

            <div class="mb-2">
                <label class="form-label label-text">${typeLabel} Mask Image</label>
                <div id="dz-${type}-mask" class="dropzone dropzone-area">
                    <div class="dz-message">
                        <i data-feather="upload-cloud" style="width:28px;height:28px;stroke:#24B094;"></i>
                        <p class="mt-1 mb-0">Drag &amp; drop or <u>click to upload</u></p>
                        <small class="text-muted">PNG accepted</small>
                    </div>
                </div>
    <small class="form-text text-muted">
                                                            Upload an image with 1600w x 1800h [8:9].
                                                        </small>
            </div>

            <div class="mb-2">
                <label class="form-label label-text">${typeLabel} Shadow Image</label>
                <div id="dz-${type}-shadow" class="dropzone dropzone-area">
                    <div class="dz-message">
                        <i data-feather="upload-cloud" style="width:28px;height:28px;stroke:#24B094;"></i>
                        <p class="mt-1 mb-0">Drag &amp; drop or <u>click to upload</u></p>
                        <small class="text-muted">PNG accepted</small>
                    </div>
                </div>
    <small class="form-text text-muted">
                                                            Upload an image with 1600w x 1800h [8:9].
                                                        </small>
            </div>

            <div class="mb-2">
                <label class="form-label label-text">${typeLabel} Displacement Image</label>
                <div id="dz-${type}-displacement" class="dropzone dropzone-area">
                    <div class="dz-message">
                        <i data-feather="upload-cloud" style="width:28px;height:28px;stroke:#24B094;"></i>
                        <p class="mt-1 mb-0">Drag &amp; drop or <u>click to upload</u></p>
                        <small class="text-muted">PNG accepted</small>
                    </div>
                </div>
    <small class="form-text text-muted">
                                                            Upload an image with 1600w x 1800h [8:9].
                                                        </small>
            </div>

            <div class="mb-2">
                <label class="form-label label-text">${typeLabel} Highlight Image</label>
                <div id="dz-${type}-light" class="dropzone dropzone-area">
                    <div class="dz-message">
                        <i data-feather="upload-cloud" style="width:28px;height:28px;stroke:#24B094;"></i>
                        <p class="mt-1 mb-0">Drag &amp; drop or <u>click to upload</u></p>
                        <small class="text-muted">PNG accepted</small>
                    </div>
                </div>
    <small class="form-text text-muted">
                                                            Upload an image with 1600w x 1800h [8:9].
                                                        </small>
            </div>


        `;

                document.getElementById('fileInputsContainer').appendChild(block);

                feather.replace();

                // Init Dropzone for each part after DOM is ready
                setTimeout(() => {
                    initDropzone(type, 'base');
                    initDropzone(type, 'mask');
                    initDropzone(type, 'shadow');
                    initDropzone(type, 'displacement');
                    initDropzone(type, 'light');
                }, 50);
            });
        }

        function initDropzone(type, part) {
            const key = `${type}-${part}`;
            const elId = `dz-${type}-${part}`;
            const el = document.getElementById(elId);
            const inputName = `${type}_${part}_image`;

            if (!el || dropzoneInstances[key]) return;

            // Hidden input to store the uploaded media ID
            let hiddenInput = document.querySelector(`input[name="${inputName}_id"]`);
            if (!hiddenInput) {
                hiddenInput = document.createElement('input');
                hiddenInput.type = 'hidden';
                hiddenInput.name = `${inputName}_id`;
                document.getElementById('addMockupForm').appendChild(hiddenInput);
            }

            const dz = new Dropzone(`#${elId}`, {
                url: "{{ route('media.store') }}",
                paramName: "file",
                maxFiles: 1,
                maxFilesize: 12,
                acceptedFiles: "image/png",
                dictInvalidFileType: "Only PNG files are allowed.",
                headers: {"X-CSRF-TOKEN": "{{ csrf_token() }}"},
                addRemoveLinks: true,
                dictRemoveFile: '✕ Remove',
                dictDefaultMessage: '',

                // Send custom properties with every upload
                params: {
                    "customProperties[role]": part,   // base | mask | shadow | displacement | light
                    "customProperties[side]": type,   // front | back | none
                },

                init: function () {
                    const dzInstance = this;

                    dzInstance.on('addedfile', function () {
                        if (dzInstance.files.length > 1) {
                            dzInstance.removeFile(dzInstance.files[0]);
                        }
                    });

                    dzInstance.on('success', function (file, response) {
                        if (response.success && response.data) {
                            file._mediaId = response.data.id;
                            hiddenInput.value = response.data.id;

                            if (part === 'base' && response.data.url) {
                                const canvasMap = {
                                    front: window.canvasFront,
                                    back: window.canvasBack,
                                    none: window.canvasNone
                                };
                                const wrapperMap = {
                                    front: 'editorFrontWrapper',
                                    back: 'editorBackWrapper',
                                    none: 'editorNoneWrapper'
                                };

                                loadBaseImage(canvasMap[type], response.data.url);
                                document.getElementById(wrapperMap[type])?.classList.remove('d-none');

                                // ✅ show warp editor for this side
                                initWarpEditor(type, response.data.url);
                            }
                        }
                    });

                    dzInstance.on('error', function (file, message) {
                        const msg = (typeof message === 'object') ? (message.message ?? 'Upload failed') : message;
                        console.error(`Dropzone [${key}] error:`, msg);
                    });

                    dzInstance.on('removedfile', function (file) {
                        hiddenInput.value = '';

                        if (file._mediaId) {
                            fetch("{{ url('api/v1/media') }}/" + file._mediaId, {
                                method: 'DELETE',
                                headers: {
                                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                                }
                            }).catch(err => console.error('Media delete failed:', err));
                        }

                        if (part === 'base') {
                            if (typeof hideCanvasForType === 'function') {
                                hideCanvasForType(type);
                            }
                        }
                    });
                }
            });

            dropzoneInstances[key] = dz;
        }

        // Attach a File object to a hidden <input type="file"> so the form submission picks it up
        function attachFileToForm(inputName, file) {
            let input = document.querySelector(`input[name="${inputName}"]`);
            if (!input) {
                input = document.createElement('input');
                input.type = 'file';
                input.name = inputName;
                input.style.display = 'none';
                document.getElementById('addMockupForm').appendChild(input);
            }

            const dt = new DataTransfer();
            dt.items.add(file);
            input.files = dt.files;
        }

        function removeFormFile(inputName) {
            const input = document.querySelector(`input[name="${inputName}"]`);
            if (input) input.value = '';
        }

        checkboxes.forEach(cb => cb.addEventListener('change', toggleCheckboxes));
    </script>

    <script>

        // =========================
        // MAIN IMAGE UPLOAD + FORM SUBMIT
        // =========================
        document.addEventListener('DOMContentLoaded', function () {
            const form = document.getElementById('addMockupForm');
            if (!form) return;

            form.addEventListener('submit', function () {
                // لو في أي template ظاهر حاليًا اتحرك ولسه متسجلش بالزر
                // هنحدّث templatePositions من الـ canvases
                ['front', 'back', 'none'].forEach(type => {
                    const canvas = (type === 'front') ? window.canvasFront :
                        (type === 'back') ? window.canvasBack :
                            window.canvasNone;

                    if (!canvas || !canvas.__mockupMeta) return;

                    canvas.getObjects().forEach(obj => {
                        if (!obj.templateId || obj.templateType !== type) return;
                        updateTemplatePositionsFromObject(obj, type);
                    });
                    syncWarpInput(type);
                });

                buildHiddenTemplateInputs();
            });
        });

        $(document).ready(function () {
            handleAjaxFormSubmit("#addMockupForm", {
                successMessage: "Mockup Created Successfully",
                onSuccess: function () {
                    location.replace('/mockups');
                }
            });
        });

        $(document).ready(function () {
            let input = $('#product-image-main');
            let uploadArea = $('#upload-area');
            let progress = $('#upload-progress');
            let progressBar = $('.progress-bar');
            let uploadedImage = $('#uploaded-image');
            let removeButton = $('#remove-image');

            uploadArea.on('click', function () {
                input.click();
            });

            input.on('change', function (e) {
                handleMainImageFiles(e.target.files);
            });

            uploadArea.on('dragover', function (e) {
                e.preventDefault();
                uploadArea.addClass('dragover');
            });

            uploadArea.on('dragleave', function (e) {
                e.preventDefault();
                uploadArea.removeClass('dragover');
            });

            uploadArea.on('drop', function (e) {
                e.preventDefault();
                uploadArea.removeClass('dragover');
                handleMainImageFiles(e.originalEvent.dataTransfer.files);
            });

            function handleMainImageFiles(files) {
                if (files.length > 0) {
                    let file = files[0];
                    let dataTransfer = new DataTransfer();
                    dataTransfer.items.add(file);
                    input[0].files = dataTransfer.files;

                    progress.removeClass('d-none');
                    progressBar.css('width', '0%');

                    let fakeProgress = 0;
                    let interval = setInterval(function () {
                        fakeProgress += 10;
                        progressBar.css('width', fakeProgress + '%');

                        if (fakeProgress >= 100) {
                            clearInterval(interval);

                            let reader = new FileReader();
                            reader.onload = function (e) {
                                uploadedImage.find('img').attr('src', e.target.result);
                                uploadedImage.removeClass('d-none');
                                progress.addClass('d-none');

                                $('#file-details .file-name').text(file.name);
                                $('#file-details .file-size').text((file.size / 1024).toFixed(2) + ' KB');
                            }
                            reader.readAsDataURL(file);
                        }
                    }, 100);
                }
            }

            removeButton.on('click', function () {
                uploadedImage.addClass('d-none');
                input.val('');
            });
        });
    </script>

    <script>
        // =========================
        // COLOR PICKER
        // =========================
        window.removeGlobalColor = function (hex, btn) {
            const li = btn.closest('li');
            if (li) li.remove();

            const inputContainer = document.getElementById('colorsInputContainer');
            if (!inputContainer) return;

            [...inputContainer.querySelectorAll('input')]
                .filter(i => i.value.toLowerCase() === hex.toLowerCase())
                .forEach(i => i.remove());
        };
        let pickrInstance = null;
        let currentCard = null; // card for current pickr session

        $(document).ready(function () {

            // Destroy previous instance if exists
            if (pickrInstance) pickrInstance.destroyAndRemove();

            // Dummy element for pickr
            const dummyElement = document.createElement('div');
            document.body.appendChild(dummyElement);

            pickrInstance = Pickr.create({
                el: dummyElement,
                theme: 'classic',
                components: {
                    preview: false,
                    opacity: false,
                    hue: true,
                    interaction: {
                        input: true,
                        save: true,
                        clear: true
                    }
                }
            });

            // Handle save
            pickrInstance.on('save', (color) => {
                const hex = color.toHEXA().toString().toLowerCase();

                // ===== q=with mode: write directly to #selected-colors & #colorsInputContainer =====
                if (!currentCard) {
                    const selectedColors = document.getElementById('selected-colors');
                    const inputContainer = document.getElementById('colorsInputContainer');
                    if (!selectedColors || !inputContainer) {
                        pickrInstance.hide();
                        return;
                    }

                    // avoid duplicates
                    if ([...inputContainer.querySelectorAll('input')].some(i => i.value === hex)) {
                        pickrInstance.hide();
                        return;
                    }

                    // color dot
                    const li = document.createElement('li');
                    li.style.listStyle = 'none';
                    li.innerHTML = `
            <div class="selected-color-wrapper position-relative">
                <div class="selected-color-dot" style="background-color:#fff;">
                    <div class="selected-color-inner" style="background-color:${hex};"></div>
                </div>
                <button type="button" onclick="removeGlobalColor('${hex}', this)" class="remove-color-btn">×</button>
            </div>`;
                    selectedColors.appendChild(li);

                    // hidden input
                    const input = document.createElement('input');
                    input.type = 'hidden';
                    input.name = 'pre_fill_colors[]';
                    input.value = hex;
                    inputContainer.appendChild(input);

                    pickrInstance.hide();
                    return;
                }

                // ===== q=without mode: write to card =====
                if (!currentCard.selectedColors) currentCard.selectedColors = [];
                if (!currentCard.selectedColors.includes(hex)) {
                    currentCard.selectedColors.push(hex);
                }

                renderSelectedColors(currentCard);
                buildHiddenTemplateInputs();
                pickrInstance.hide();
            });
            // Handle clear
            pickrInstance.on('clear', () => {
                // ===== q=with mode: clear global colors =====
                if (!currentCard) {
                    const selectedColors = document.getElementById('selected-colors');
                    const inputContainer = document.getElementById('colorsInputContainer');
                    if (selectedColors) selectedColors.innerHTML = '';
                    if (inputContainer) inputContainer.innerHTML = '';
                    pickrInstance.hide();
                    return;
                }

                // ===== q=without mode: clear card colors =====
                currentCard.selectedColors = [];
                renderSelectedColors(currentCard);
                buildHiddenTemplateInputs();
                pickrInstance.hide();
            });
        });

        // Open color picker
        // Open color picker
        $(document).on('click', '.openColorPicker', function () {
            const trigger = this;

            // ===== q=with: single global color picker (no template card) =====
            const isWithMode = trigger.id === 'openColorPicker'; // the static #openColorPicker button

            if (isWithMode) {
                currentCard = null; // no card context

                pickrInstance.show();

                setTimeout(() => {
                    const pickerPanel = document.querySelector('.pcr-app.visible');
                    if (pickerPanel) {
                        const rect = trigger.getBoundingClientRect();
                        pickerPanel.style.position = 'fixed';
                        pickerPanel.style.left = `${rect.left}px`;
                        pickerPanel.style.top = `${rect.bottom + 5}px`;
                        pickerPanel.style.zIndex = 9999;
                    }
                }, 0);
                return; // stop here, don't look for .template-card
            }

            // ===== q=without: per-template-card color picker =====
            const card = trigger.closest('.template-card');
            currentCard = card;
            if (!card.selectedColors) card.selectedColors = [];

            const rect = trigger.getBoundingClientRect();
            const modalScrollTop = document.querySelector('#templateModal .modal-body')?.scrollTop || 0;

            pickrInstance.show();

            setTimeout(() => {
                const pickerPanel = document.querySelector('.pcr-app.visible');
                if (pickerPanel) {
                    pickerPanel.style.position = 'absolute';
                    pickerPanel.style.left = `${rect.left + window.scrollX}px`;
                    pickerPanel.style.top = `${rect.bottom + window.scrollY + modalScrollTop + 5}px`;
                    pickerPanel.style.zIndex = 9999;
                }
            }, 0);
        });
        // Remove color from current card
        window.removeColor = function (hex, btn) {
            const card = btn.closest('.template-card');
            if (!card) return;

            if (!card.selectedColors) card.selectedColors = [];

            card.selectedColors = card.selectedColors.filter(
                c => c.toLowerCase() !== hex.toLowerCase()
            );

            renderSelectedColors(card);
            buildHiddenTemplateInputs(); // نحدّث templates[..][colors][] بناءً على التغييرات
        };

        // Render colors inside a card
        function renderSelectedColors(card) {
            const ul = card.querySelector('.selected-colors');
            const container = card.querySelector('.colorsInputContainer');

            if (!ul || !container) return;

            ul.innerHTML = '';
            ul.classList.add('list-unstyled', 'm-0', 'p-0');
            container.innerHTML = '';

            (card.selectedColors || []).forEach(c => {
                const li = document.createElement('li');
                li.innerHTML = `
                <div class="selected-color-wrapper position-relative">
                    <div class="selected-color-dot" style="background-color: #fff;">
                        <div class="selected-color-inner" style="background-color: ${c};"></div>
                    </div>
                    <button type="button" onclick="removeColor('${c}', this)" class="remove-color-btn">×</button>
                </div>
            `;
                ul.appendChild(li);

                const hiddenInput = document.createElement('input');
                hiddenInput.type = 'hidden';
                hiddenInput.name = 'pre_fill_colors[]';
                hiddenInput.value = c;
                container.appendChild(hiddenInput);
            });
        }

        function buildTemplateColorInputs(card, templateIndex) {
            const container = card.querySelector('.colorsInputContainer');
            if (!container) return;

            container.innerHTML = '';

            (card.selectedColors || []).forEach(color => {
                const input = document.createElement('input');
                input.type = 'hidden';
                input.name = `templates[${templateIndex}][colors][]`;
                input.value = color.toLowerCase(); // توحيد اللون
                const inputColors = document.createElement('input');
                inputColors.type = 'hidden';
                inputColors.name = 'pre_fill_colors[]';
                inputColors.value = color.toLowerCase();
                container.appendChild(input);
                container.appendChild(inputColors);
            });
        }

    </script>

@endsection