@extends('back.layouts.app', ['title' => $title])
@section('content')
    <div class="pl-3 pr-2 content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <div class="row">
                <div class="col-md-5 col-sm-12">
                    <ol class="breadcrumb">
                        <li>
                            <a href="{{ admin_url() }}"> <i class="fas fa-gauge"></i> Home </a>
                        </li>
                         <li>
                              @if($module->id==50 || $module->id==52 )
                              
                   <a href="{{ admin_url() . 'module/' . $module->type . '?id=' . $product_id }}" > {{ ucwords($module->term) }}</a>

                                @else
                            <a href="{{ admin_url() . 'module/' . $module->type }}">{{ ucwords($module->term) }}</a>
                            @endif
                        </li>
                        <li class="active">Add New {{ ucwords($module->term) }}</li>
                    </ol>
                </div>
                <div class="col-md-7 col-sm-12"> @include('back.common_views.quicklinks') </div>
            </div>
        </section>
        
        
        <section class="p-0 content">
            <form action="{{ admin_url() . 'module/' . $module->type . '/' . $module->id }}" id="form"
                class="form-horizontal" enctype="multipart/form-data">
                @csrf
                
                <input type="hidden" name="product_id" value="{{$product_id}}">
               
                
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 id="modal_form_title" class="modal-title"> Add New {{ ucwords($module->term) }} </h4>
                        
                         @if($module->id==50)
                   <a href="{{ admin_url() . 'module/' . $module->type . '?id=' . $product_id }}" class="go-back" > Back </a>

                                @else
                                <a href="{{ admin_url() . 'module/' . $module->type }}" class="go-back">
                                    <i
                                        class="fas fa-angle-double-left" aria-hidden="true"></i> Back </a>
                                        @endif
                    </div>
                    
                    <div class="modal-body form">
                        <div class=" card-body">
                            <input type="hidden" name="id" id="id" value="">
                            <input type="hidden" name="moduleType" id="moduleType" value="{{ $module->type }}">
                            <div class="form-body">
                                <div id="form-errors"></div>
                                
                                <div id="page_heading">
                                    <label class="form-label">Heading</label>
                                    <input
                                        @if ($module->show_page_slug_field == 1) onchange="string_to_slug('module_heading', 'module_slug');" @endif
                                        name="module_heading" placeholder="Heading" class="form-control" type="text">
                                    <span id="module_heading" style="padding-left:2px;" class="err"></span>
                                </div>
                                
                                
                                
                                <div id="page_link"
                                    style=" display:{{ $module->show_page_slug_field == 1 ? 'block' : 'none' }}">
                                    <label for="basic-url">{{ ucwords($module->term) }}
                                        Link
                                        @php helptooltip('page_link') @endphp </label>
                                    <div class="mb-2">
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text">
                                                    {{ url($module->type == 'cms' ? '' : $module->type . '/') }}
                                                </span>
                                            </div>
                                            <input type="text" class="form-control slug-field" name="module_slug"
                                                id="slug_field" placeholder="{{ ucwords($module->type) }} Link"
                                                @if ($module->show_page_slug_field == 1) onchange="check_slug('module_slug');" @endif>
                                        </div>
                                    </div>
                                    <span id="page_slug" style="padding-left:2px;" class="err"></span>
                                </div>
                                <div id="menu_type_div"
                                    style="display: {{ $module->show_menu_field == 1 ? 'block' : 'none' }}">
                                    <label class="form-label">Show this page in</label>
                                    <br>
                                    @if ($menu_types)
                                        @foreach ($menu_types as $meny_type)
                                            <label class="form-label">
                                                <input name="menu_type[]" value="{{ $meny_type->id }}" type="checkbox" />
                                                {{ ucfirst($meny_type->menu_type) }} Menu</label>
                                        @endforeach
                                    @endif <br />
                                    <span id="menu_type" style="padding-left:2px;" class="err"></span>
                                    <p>Note: if you want to update further menu settings then please <a
                                            href="{{ route('menus.index') }}" target="_blank">click here</a></p>
                                </div>
                                <div id="page_excerpt" class="mb-3"
                                    @if ($module->show_excerpt == '0') style="display: none" @endif>
                                    <label class="form-label">{{ ucwords($module->term) }} Excerpt</label>
                                    <textarea name="excerpt_editor" id="excerpt_editor" placeholder="{{ ucwords($module->term) }} Excerpt"
                                        class="form-control" type="text"></textarea>
                                    <textarea name="excerpt" id="excerpt" style="display: none;"></textarea>
                                </div>
                                <div id="page_content" @if ($module->show_descp == '0') style="display: none" @endif>
                                    <label class="form-label">{{ ucwords($module->term) }} Description</label>
                                    <label for="">
                                        <a href="javascript:;" data-bs-toggle="modal" data-bs-target="#media_image"
                                            class="btn btn-sm btn-info"> <i class="fas fa-cloud-download"
                                                aria-hidden="true"></i>
                                            Insert Image from Media</a>
                                        <a href="javascript:;" data-bs-toggle="modal" data-bs-target="#media_files"
                                            class="btn btn-sm btn-warning"> <i class="fas fa-cloud-download"
                                                aria-hidden="true"></i>
                                            Insert Document from Media</a>
                                    </label>

                                    <textarea name="editor1" id="editor1" placeholder="{{ ucwords($module->term) }} Description" class="form-control"
                                        type="text"></textarea>
                                    <textarea name="module_description" id="module_description1" style="display: none;"></textarea>
                                    <span id="module_description" style="padding-left:2px;" class="err"></span>
                                </div>
                                {{-- @if ($module->have_category == '1')
            <div id="have_category">
               <label class="form-label">Category</label>
               <select name="cat" id="cat" onchange="ChangeCat(this.value)" class="form-control">
               <option {!!selectVal(0,'')!!}> Main Categories</option>
               @foreach ($allParentCategory as $catGroup)
               @if ($catGroup['cat'] == 0)
               <option {!!selectVal($catGroup['id'],'')!!}>-{{$catGroup['title']}} </option>
               @php $childCategories=childCategories($catGroup['id']);
               foreach($childCategories as $subk=>$subv){
               @endphp
               <option {!!selectVal($subv['id'],'')!!}>&nbsp;&nbsp;--{{$subv['title']}} </option>
               @php }@endphp
               @endif
               @endforeach
               </select>
               @endif --}}
                                                           @if ($module->id == 50)
    <div id="dynamicFieldsWrapper">
        @php
            $fields = $moduleData->additional_field_1 ?? [];
            // Ensure it's an array
            if (!is_array($fields)) {
                $fields = json_decode($fields, true) ?? [];
            }

            // Split fields into groups of 3 (surface, thickness, size per row)
            $chunks = array_chunk($fields, 3);
            if (empty($chunks)) {
                $chunks = [[]]; // At least one empty row if no data exists
            }
        @endphp

        @foreach ($chunks as $index => $row)
            <div class="row mb-3 dynamic-fields">
                <div class="col-md-4">
                    <label class="form-label">SURFACES</label>
                    <input type="text" class="form-control" name="additional_field_1[]" 
                        value="{{ $row[0] ?? '' }}" placeholder="SURFACES">
                </div>
                <div class="col-md-4">
                    <label class="form-label">THICKNESSES</label>
                    <input type="text" class="form-control" name="additional_field_1[]" 
                        value="{{ $row[1] ?? '' }}" placeholder="THICKNESSES">
                </div>
                <div class="col-md-3">
                    <label class="form-label">SIZES</label>
                    <input type="text" class="form-control" name="additional_field_1[]" 
                        value="{{ $row[2] ?? '' }}" placeholder="SIZES">
                </div>
                <div class="col-md-1 d-flex align-items-center text-end">
                    <button type="button" class="btn btn-danger btn-sm removeRow" 
                        style="{{ $index == 0 ? 'display:none;' : '' }}">
                        <i class="fas fa-trash"></i>
                    </button>
                </div>
            </div>
        @endforeach
    </div>

    <!-- plus button outside, only one at bottom -->
    <div class="text-end mb-3">
        <button type="button" class="btn btn-success btn-sm" id="addRowBtn">
            <i class="fas fa-plus"></i> Add
        </button>
    </div>
    @endif
    
  @if ($module->id == 50)
<!-- Thumbnail Image -->
<!-- Thumbnail Image -->
<div id="field2">
    <label class="form-label">
        Thumbnail Image
        <span>(max size:{{ getMaxUploadSize() }}MB)</span>
        @php helptooltip('max_image_size') @endphp
    </label>
    <label class="form-label">
        <span>(Rec'd size: 208 × 320)</span>
    </label>


  {{-- ✅ Show preview after upload --}}
    <div id="thumbnail_preview_wrapper" style="margin-top:10px;">
        <img id="thumbnail_preview" 
             src="{{ !empty($moduleData->thumbnail_image) ? asset('/'.$moduleData->thumbnail_image) : '' }}" 
             alt="Thumbnail Preview" 
             style="max-width:250px; max-height:250px; display: {{ !empty($moduleData->thumbnail_image) ? 'block' : 'none' }}; border:1px solid #ddd; padding:4px; border-radius:6px;">
    </div>

    <input type="file" name="thumbnail_image" id="thumbnail_image" class="form-control"
        accept="image/*" onchange="previewThumbnail(event)">
    <span id="thumbnail_image_error" style="padding-left:2px;" class="err"></span>

  
</div> 
@endif

 @if ($module->id == 49)
               <div id="field1">
    <label class="form-label">{{ ucwords($module->additional_field_1) }}</label>
    <select name="view_product" class="form-control" id="view_product">
        <option value="" selected>Select Product</option>
 
        @foreach ($categories as $category)
            {{-- Category name (disabled so not selectable) --}}
            <option value="" disabled style="font-weight: bold; color: #555;">
                {{ $category->title }}
            </option>
 
            {{-- Products under category --}}
            @if ($category->products->isNotEmpty())
                @foreach ($category->products as $value)
                    <option value="{{ $value->id }}" 
                        >
                        &nbsp;&nbsp;{{ $value->product_name }}
                    </option>
                @endforeach
            @endif
        @endforeach
    </select>
</div>             
 @endif                           
                            
                             @if ($module->id != 50)
                            
                            <div id="field1" style="display:none;">
                                <label class="form-label">{{ ucwords($module->additional_field_title_1) }}</label>
                                <input type="text" class="form-control" id="additional_field_1"
                                    name="additional_field_1" value="{{ ucwords($module->additional_field_1) }}"
                                    placeholder="{{ ucwords($module->additional_field_title_1) }} ">
                                <span id="additional_field1" style="padding-left:2px;" class="err"></span>
                            </div>
                            

                            
                            @endif
                            
     
     
                         @if ($module->id == 52)  
                                <div id="product_vss">
    <label class="form-label">Product Visualization Categories</label>
    <div class="row">
        @foreach($product_vss as $vs)
            <div class="col-md-3">
                <div class="form-check">
                    <input 
                        type="checkbox" 
                        class="form-check-input" 
                        id="vs_{{ $vs->id }}" 
                        name="product_vss[]" 
                        value="{{ $vs->id }}"
                        {{ in_array($vs->id, old('product_vss', [])) ? 'checked' : '' }}
                    >
                    <label class="form-check-label" for="vs_{{ $vs->id }}">
                        {{ $vs->heading }}
                    </label>
                </div>
            </div>
        @endforeach
    </div>

    <span id="product_vss_error" style="padding-left:2px;" class="err"></span>
</div>

@endif

                                
                                @if ($module->id == 36)
                                    <div id="field2" style="display:none;">
                                        <div class="row">
                                            <div class="col-md-4">{{ ucwords($module->additional_field_title_2) }}</div>
                                            <div class="col-md-8"><a href="javascript:;" data-bs-toggle="modal"
                                                    data-bs-target="#media_image_addition" class="btn btn-sm btn-info"> <i
                                                        class="fas fa-cloud-download" aria-hidden="true"></i> Insert
                                                    Image
                                                    from Media</a></div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-8"><input type="text" class="form-control"
                                                    id="additional_field_2" name="additional_field_2" value=""
                                                    placeholder="{{ ucwords($module->additional_field_title_2) }} "></div>
                                            <div class="col-md-4"><img width="200" id="edit_portfolio_img"
                                                    src="" alt=""></div>
                                        </div>
                                        <span id="additional_field2" style="padding-left:2px;" class="err"></span>
                                    </div>
                                @else
                                    <div id="field2" style="display:none;">
                                        <label class="form-label">{{ ucwords($module->additional_field_title_2) }}</label>
                                        <input type="text" class="form-control" id="additional_field_2"
                                            name="additional_field_2"
                                            placeholder="{{ ucwords($module->additional_field_title_2) }} ">
                                        <span id="additional_field2" style="padding-left:2px;" class="err"></span>
                                    </div>
                                @endif
                                <div id="field3" style="display:none;">
                                    <label class="form-label">{{ ucwords($module->additional_field_title_3) }}</label>
                                    <input type="text" class="form-control" id="additional_field_3"
                                        name="additional_field_3"
                                        placeholder="{{ ucwords($module->additional_field_title_3) }} ">
                                    <span id="additional_field3" style="padding-left:2px;" class="err"></span>
                                </div>
                                <div id="field4" style="display:none;">
                                    <label class="form-label">{{ ucwords($module->additional_field_title_4) }}</label>
                                    <input type="text" class="form-control" id="additional_field_4"
                                        name="additional_field_4"
                                        placeholder="{{ ucwords($module->additional_field_title_4) }} ">
                                    <span id="additional_field4" style="padding-left:2px;" class="err"></span>
                                </div>
                                <div id="field5" style="display:none;">
                                    <label class="form-label">{{ ucwords($module->additional_field_title_5) }}</label>
                                    <input type="text" class="form-control" id="additional_field_5"
                                        name="additional_field_5"
                                        placeholder="{{ ucwords($module->additional_field_title_5) }} ">
                                    <span id="additional_field5" style="padding-left:2px;" class="err"></span>
                                </div>
                                <div id="field6" style="display:none;">
                                    <label class="form-label">{{ ucwords($module->additional_field_title_6) }}</label>
                                    <input type="text" class="form-control" id="additional_field_6"
                                        name="additional_field_6"
                                        placeholder="{{ ucwords($module->additional_field_title_6) }} ">
                                    <span id="additional_field6" style="padding-left:2px;" class="err"></span>
                                </div>
                                <div id="field7" style="display:none;">
                                    <label class="form-label">{{ ucwords($module->additional_field_title_7) }}</label>
                                    <input type="text" class="form-control" id="additional_field_7"
                                        name="additional_field_7"
                                        placeholder="{{ ucwords($module->additional_field_title_7) }} ">
                                    <span id="additional_field7" style="padding-left:2px;" class="err"></span>
                                </div>
                                <div id="field8" style="display:none;">
                                    <label class="form-label">{{ ucwords($module->additional_field_title_8) }}</label>
                                    <input type="text" class="form-control" id="additional_field_8"
                                        name="additional_field_8"
                                        placeholder="{{ ucwords($module->additional_field_title_8) }} ">
                                    <span id="additional_field8" style="padding-left:2px;" class="err"></span>
                                </div>
                                <div class="row" id="page_featured_img"
                                    style="display:{{ $module->show_feature_img_field == 1 ? 'block' : 'none' }}">
                                    <div class="col-md-12">
                                        <div id="fea_img">
                                            <div class="col-md-3">
                                                <div id="module_featured_img" class="card">
                                                </div>
                                            </div>
                                           @if($module->id == 49)
    <div class="col-md-12">
        <label class="form-label">Update {{ ucwords($module->term) }} Image
            <span>(max size:{{ getMaxUploadSize() }}MB)</span> 
            @php echo helptooltip('max_image_size') @endphp 
        </label>

        <label class="form-label">
            <span>(Rec'd size: 1400 x 600)</span>
        </label>

        <div id="file-field">
            <input type="file" name="module_img" id="module_img" class="form-control">
            <div id="attached_files_div"></div>
        </div>
    </div>

@elseif($module->id == 50)
    <div class="col-md-12">
        <label class="form-label">Update {{ ucwords($module->term) }} Image
            <span>(max size:{{ getMaxUploadSize() }}MB)</span> 
            @php echo helptooltip('max_image_size') @endphp 
        </label>

        <label class="form-label">
            <span>(Rec'd size: 150 x 150)</span> {{-- 👈 Change this size as per your requirement --}}
        </label>

        <div id="file-field">
            <input type="file" name="module_img" id="module_img" class="form-control">
            <div id="attached_files_div"></div>
        </div>
    </div>

@else
    <div class="col-md-12">
        <label class="form-label">Update {{ ucwords($module->term) }} Image
            <span>(max size:{{ getMaxUploadSize() }}MB)</span> 
            @php echo helptooltip('max_image_size') @endphp 
        </label>

        <div id="file-field">
            <input type="file" name="module_img" id="module_img" class="form-control">
            <div id="attached_files_div"></div>
        </div>
    </div>
@endif

                                            
                                            <div class="clear"></div>
                                            <div class="mt-3 mb-3">
                                                <label class="text-sm text text-info img_alt_title_label"><i
                                                        class="fas fa-bars" aria-hidden="true"></i> Image
                                                    Title/Alt</label>
                                                <div class="mt-3 mb-3" style="display:none;">
                                                    <label class="form-label">Image Title</label>
                                                    <input type="text" name="featured_img_title"
                                                        id="featured_img_title" class="form-control"
                                                        placeholder="Featured Image Title" value="">
                                                    <label class="mt-3">Image Alt</label>
                                                    <input type="text" name="featured_img_alt" id="featured_img_alt"
                                                        class="form-control" placeholder="Featured Image Alt"
                                                        value="">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @include('back.module.module_data_images.module_data_images_html')
                                @include('back.module.module_videos.module_videos_html')
                                <div id="page_follow"
                                    style="display: {{ $module->show_follow == 1 ? 'block' : 'none' }}">
                                    <label class="form-label">Make Follow</label>
                                    <input name="show_follow" id="show_follow_rel_1" value="1" type="radio"
                                        checked />
                                    @php echo helptooltip('follow') @endphp
                                    <br />
                                    <label class="form-label">Make No Follow</label>
                                    <input name="show_follow" id="show_follow_rel_0" value="0" type="radio" />
                                </div>
                                <br>
                                <div id="page_index" style="display: {{ $module->show_index == 1 ? 'block' : 'none' }}">
                                    <label class="form-label">Indexing</label>
                                    <input name="show_index" id="show_index_rel_1" value="1" type="radio"
                                        checked />
                                    @php echo helptooltip('indexing') @endphp
                                    <br />
                                    <label class="form-label">No Indexing</label>
                                    <input name="show_index" id="show_index_rel_0" value="0" type="radio" />
                                </div>
                                <br>
                                <div id="page_seo_option"
                                    style="display: {{ $module->show_seo_field == 1 ? 'block' : 'none' }}">
                                    @include('back.common_views.seo_fields', [
                                        'meta_title' => '',
                                        'meta_keywords' => '',
                                        'meta_description' => '',
                                        'canonical_url' => '',
                                    ])
                                </div>
                            </div>
                        </div>
                        <div class="bottom-btns">
                            <input type="hidden" name="module_id" id="module_id" value="{{ ucwords($module->id) }}">
                            <input type="hidden" name="from_page_update" id="from_page_update" value="yess">
                            <button type="button" id="btnSave" onclick="save()"
                                class="btn btn-sm btn-primary pull-right">Save</button>
                                
                            @if($module->id==50 || $module->id==52)
                            
                            <a href="{{ admin_url() . 'module/' . $module->type . '?id=' . $product_id }}" 
   class="go-back">
    <button type="button" class="btn btn-sm btn-danger" data-bs-dismiss="modal">
        <i class="fas fa-angle-double-left" aria-hidden="true"></i> Back
    </button>
</a>
@else
<a href="{{ admin_url() . 'module/' . $module->type }}" class="go-back"><button
                                    type="button" class="btn btn-sm btn-danger" data-bs-dismiss="modal"><i
                                        class="fas fa-angle-double-left" aria-hidden="true"></i> Back </button></a>


                            @endif
                            
                            
                        </div>
                    </div>
            </form>
        </section>
    </div>
    <!-- /.modal -->
    <div class="modal fade" id="cropper_form" role="dialog">
        <div class="modal-dialog modal-lg">
            <form action="#" id="crop_form" class="form-horizontal" enctype="multipart/form-data">
                @csrf
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 id="cropper_form_title" class="modal-title">Image Cropper Form</h4>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body form">
                        <div class=" card-body">
                            <div class="row">
                                <div class="col-md-8" id="large_image"><img id="image" src=""
                                        alt="Crop Picture"></div>
                                <div class="col-md-4">
                                    <div class="preview"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <input type="hidden" name="source_image" id="source_image" value="" />
                        <input type="hidden" name="crop_x" id="crop_x" value="" />
                        <input type="hidden" name="crop_y" id="crop_y" value="" />
                        <input type="hidden" name="crop_height" id="crop_height" value="" />
                        <input type="hidden" name="crop_width" id="crop_width" value="" />
                        <input type="hidden" name="crop_rotate" id="crop_rotate" value="" />
                        <input type="hidden" name="module_id" value="{{ ucwords($module->id) }}">
                        <input type="hidden" name="image_1_2" id="image_1_2" value="">
                        <button type="button" id="btnCrop" onclick="save_cropped_img()"
                            class="btn btn-sm btn-primary">Crop
                            Image
                        </button>
                        <button type="button" class="btn btn-sm btn-danger" data-bs-dismiss="modal">Cancel</button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </form>
        </div>
    </div>
    @include('back.module.media_popup')
    @include('back.module.files_popup')
    @include('back.module.module_data_images.module_data_images_popups')
@endsection
@section('beforeHeadClose')
    <style>
        .sortable_div {
            display: inline-block !important;
        }

        .sortable_div i {
            background-color: #b4b3b3;
            text-align: center;
            line-height: 24px;
            width: 30px;
            height: 26px;
            cursor: all-scroll;
            border-radius: 4px;
            padding-top: 0px;
        }
    </style>
@endsection
@section('beforeBodyClose')
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
    <script type="text/javascript" src="{{ asset_storage('') . 'module/module/admin/js/module.js' }}"></script>
    <!-- Filer -->
    <link rel="stylesheet" href="{{ asset_storage('') . 'module/module/admin/crop-avatar/cropper.css' }}">
    <style>
        img {
            max-width: 100%;
        }
    </style>
    <script src="{{ asset_storage('') . 'module/module/admin/crop-avatar/cropper.js' }}"></script>
    <!------------ Module JS Functions ---------------------->
    @include('back.module.module_data_images.module_data_images_js')
    @include('back.module.module_videos.module_videos_js')
    <script type="text/javascript">
        var save_method; //for save method string
        var table;
        $(document).ready(function() {
            additional_fields({{ ucwords($module->additional_fields) }});
        });

        function bind_cropper_preview() {
            var $previews = $('.preview');
            var $image = $('#image');
            var cropBoxData;
            var canvasData;
            $('#cropper_form').on('shown.bs.modal', function() {
                $image.cropper({
                    autoCropArea: 0.5,
                    viewMode: 1,
                    dragMode: 'move',
                    guides: false,
                    restore: false,
                    highlight: false,
                    cropBoxMovable: true,
                    cropBoxResizable: false,
                    aspectRatio: {{ $module->feature_img_thmb_width }} /
                        {{ $module->feature_img_thmb_height }},
                    minCropBoxWidth: {{ $module->feature_img_thmb_width }},
                    minCropBoxHeight: {{ $module->feature_img_thmb_height }},
                    ready: function() {
                        var $clone = $(this).clone().removeClass('cropper-hidden');
                        $clone.css({
                            display: 'block',
                            width: '100%',
                            minWidth: 0,
                            minHeight: 0,
                            maxWidth: 'none',
                            maxHeight: 'none'
                        });
                        $previews.css({
                            width: '100%',
                            overflow: 'hidden'
                        }).html($clone);
                        $image.cropper('setCanvasData', canvasData);
                        $image.cropper('setCropBoxData', cropBoxData);
                    },
                    crop: function(e) {
                        var imageData = $(this).cropper('getImageData');
                        var previewAspectRatio = e.width / e.height;
                        $('#crop_x').val(e.x);
                        $('#crop_y').val(e.y);
                        $('#crop_height').val(e.height);
                        $('#crop_width').val(e.width);
                        $('#crop_rotate').val(e.rotate);
                        $previews.each(function() {
                            var $preview = $(this);
                            var previewWidth = $preview.width();
                            var previewHeight = previewWidth / previewAspectRatio;
                            var imageScaledRatio = e.width / previewWidth;
                            $preview.height(previewHeight).find('img').css({
                                width: imageData.naturalWidth / imageScaledRatio,
                                height: imageData.naturalHeight / imageScaledRatio,
                                marginLeft: -e.x / imageScaledRatio,
                                marginTop: -e.y / imageScaledRatio
                            });
                        });
                    }
                });
            });
        }

        function save_cropped_img() {
            var json = [
                '{"x":' + $('#crop_x').val(),
                '"y":' + $('#crop_y').val(),
                '"height":' + $('#crop_height').val(),
                '"width":' + $('#crop_width').val(),
                '"rotate":' + $('#crop_rotate').val() + '}'
            ].join();
            $.ajax({
                url: "{{ admin_url() . 'modul/crop_image' }}",
                type: "POST",
                dataType: "JSON",
                data: $('#crop_form').serialize(),
                success: function(data) {
                    console.log(data.cropped_image);
                    $('#featured_img').val(data.cropped_image);
                    $('.jFiler-item-thumb-image').find('img').attr('src', asset_uploads +
                        'module/{{ $module->type }}/thumb/' + data.cropped_image);
                    $('#cropper_form').modal('hide');
                },
                error: function(jqXHR, textStatus, errorThrown) {}
            });
        }

        function add_content() {
            reset_model();
            save_method = 'add';
            $('#modal_form_title').text('Add {{ ucwords($module->term) }}');
            tinyMCE.get('editor1').setContent('');
        }

        function save() {
            $('#btnSave').attr('disabled', 'disabled');
            $('#btnSave').text('Submitting...');
            $(window).off('beforeunload');
            var url;

            var excerpt = tinyMCE.get('excerpt_editor').getContent();
            $('#excerpt').val(excerpt);

            var content = tinyMCE.get('editor1').getContent();
            $('#module_description1').val(content);

            if (save_method == 'add') {
                url = "{{ admin_url() . 'module/' . $module->type }}";
            } else {
                var id = $('[name="id"]').val();
                mId = $('#module_id').val();
                url = "{{ admin_url() . 'module/' }}" + mId;
                console.log(id);
                console.log(url);
            }
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
             var form = new FormData($('#form')[0]);
            $.ajax({
                url: url,
                type: "POST",
                 processData: false,
                 contentType: false,
                 cache: false,
                 data: form,
                success: function(data, status) {
                    console.log(data);
                    $('#btnSave').removeAttr('disabled');
                    $('#btnSave').text('Save');
                    if ($.isEmptyObject(data.error)) {
                        $('#modal_form').modal('hide');
                        if ($("#from_page_update").val() == "yess") {
                            
                            @if($module->id==50 || $module->id==52)
                            
                           redirect_url = "{{ admin_url() . 'module/' . $module->type . '/edit/' }}" 
             + data.module_data_id 
             + "?product_id={{ $product_id }}";

                            @else
                            redirect_url = "{{ admin_url() . 'module/' . $module->type . '/edit/' }}" + data
                                .module_data_id;
                            @endif
                            
                            
                                
                                
                            window.location.href = redirect_url;
                        } else {
                            location.reload();
                        }
                    } else {
                        errorsHtml = '<div class="alert alert-danger"><ul>';
                        $.each(data, function(key, value) {
                            errorsHtml += '<li>' + value[0] + '</li>'; //showing only the first error.
                        });
                        errorsHtml += '</ul></di>';
                        $('#form-errors').html(errorsHtml);
                    }
                    $('#loading').hide();
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    $('#loading').hide();
                    console.log(jqXHR);
                    console.log(textStatus);
                    console.log(errorThrown);
                    alert('Error adding / update data ' + ' ' + textStatus + ' ' + errorThrown);
                }
            });
        }

        function delete_content(id) {
            $('.message-container').fadeOut(3000);
            var mess_alert = '';
            mess_alert = 'Are you sure you want to delete this';
            if (confirm(mess_alert)) {
                // ajax delete data to database
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                console.log(id);
                $.ajax({
                    url: "{{ base_url() . 'adminmedia/module/delete' }}/" + id,
                    type: "DELETE",
                    success: function(data) {
                        //if success reload ajax table
                        $('#modal_form').modal('hide');
                        $('#item_' + id).hide();
                        location.reload();
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        console.log(jqXHR);
                        console.log(textStatus);
                        console.log(errorThrown);
                        alert('Error adding / update data ' + ' ' + textStatus + ' ' + errorThrown);
                    }
                });
            }
        }

        function remove_featured_img(id) {
            if (confirm("Are you sure you want to delete this {{ ucwords($module->term) }} Image?")) {
                url = "{{ base_url() }}adminmedia/modul/remove_image?id=" + id + '&&type={{ $module->type }}';
                $.ajax({
                    url: url,
                    type: "GET",
                    success: function(data) {
                        $('#module_featured_img').hide();
                        $('#module_featured_img').html("");
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        console.log(jqXHR);
                        console.log(textStatus);
                        console.log(errorThrown);
                        alert('Error adding / update data ' + ' ' + textStatus + ' ' + errorThrown);
                    }
                });
            }
        }
    </script>
    <!----------- END Module JS functions -------------------->
    <script>
        var uploadUrl = "{{ admin_url() }}module_image/upload_image";
        var deleteUrl = "{{ admin_url() }}module_image/remove_image";
        var folder = "{{ 'module/' . $module->type }}";
        var maxSize = {{ getMaxUploadSize() }};
        var csrfToken = $('meta[name="csrf-token"]').attr('content');
        var show_cropper = {{ $module->crop_image == 'Yes' ? 1 : 0 }};
        var module_id = "{{ $module->type }}";
    </script>
    <script type="text/javascript" src="{{ asset_storage('') . 'back/js/fileUploader.js' }}"></script>
    
   <script>
        document.addEventListener('DOMContentLoaded', function () {
            const wrapper = document.getElementById('dynamicFieldsWrapper');
            const addBtn = document.getElementById('addRowBtn');

            addBtn.addEventListener('click', function () {
                const newRow = document.createElement('div');
                newRow.classList.add('row', 'mb-3', 'dynamic-fields');
                newRow.innerHTML = `
                    <div class="col-md-4">
                        <input type="text" class="form-control" name="additional_field_1[]" placeholder="SURFACES">
                    </div>
                    <div class="col-md-4">
                        <input type="text" class="form-control" name="additional_field_1[]" placeholder="THICKNESSES">
                    </div>
                    <div class="col-md-3">
                        <input type="text" class="form-control" name="additional_field_1[]" placeholder="SIZES">
                    </div>
                    <div class="col-md-1 d-flex align-items-center text-end">
                        <button type="button" class="btn btn-danger btn-sm removeRow">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                `;
                wrapper.appendChild(newRow);
            });

            // Delegate remove button click
            wrapper.addEventListener('click', function (e) {
                if (e.target.closest('.removeRow')) {
                    e.target.closest('.dynamic-fields').remove();
                }
            });
        });
    </script>
{{-- ✅ Script for live preview --}}
<script>
function previewThumbnail(event) {
    const preview = document.getElementById('thumbnail_preview');
    const file = event.target.files[0];

    if (file) {
        const reader = new FileReader();
        reader.onload = e => {
            preview.src = e.target.result;
            preview.style.display = 'block';
        };
        reader.readAsDataURL(file);
    } else {
        preview.src = '';
        preview.style.display = 'none';
    }
}
</script>
    <!-- Bootstrap modal -->
    <div id="loading" class="loadinggif" style="display: none;"></div>
    <!-- End Bootstrap modal -->
    @include('back.module.media_js')
@endsection