@extends('admin.layouts.container')

@section('content')
    <div class="side-title">
        <div class="row">
            <div class="col-lg-6">
                <h3>{{ $head ?? ''}}</h3>
            </div>
            {{--
            <div class="col-lg-6">
                <div class="form-group">
                    <label> صفحات المنشور </label>
                    <select class="form-control {{ $errors->has('flyer_id') ? 'is-invalid' : '' }}" name="flyer_id">
                        <option value="">{{__('dashboard.select')}}</option>
                        @foreach($flyers as $row)
                            <option {{ (isset($flyerPage) ? $flyerPage->flyer_id : null) == $row->id ? 'selected' : '' }} value="{{$row->id}}">{{$row->title}}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            --}}
        </div>
    </div>
 <form  method="post" onsubmit="saveForm(this)" action="{{ $action }}" enctype="multipart/form-data">
            @if($flyerPage ?? ''  && $flyerPage->id)
                @method('PUT')
            @endif
            @csrf
    <div class="border-item">
        @if($flyerPage ?? ''  && $flyerPage->id)
        <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
          <li class="nav-item" role="presentation">
            <button class="nav-link active" id="pills-page1-tab" data-toggle="pill" data-target="#pills-page1"> {{__('flyer_pages.flyer_image')}} </button>
          </li>
          <li class="nav-item" role="presentation">
            <button class="nav-link" id="pills-page2-tab" data-toggle="pill" data-target="#pills-page2"> {{__('flyer_pages.products')}} </button>
          </li>
        </ul>
        @endif
        <div class="tab-content" id="pills-tabContent">
          <div class="tab-pane fade show active" id="pills-page1">
              <div class="img-tab">
           

            <input type="hidden" name="flyer_id" value="{{isset($flyerPage) ? $flyerPage->flyer_id : ($request->flyer_id ?? null) }}">

            <div class="form-group col-lg-12 image_container" >
                <label>{{ meta('image', getCurrentLocale()) ?? __('flyers.image') }} </label>
                <input id="image_thumbnail" class="image_thumbnail" type="hidden" name="image" value="{{old("image", $flyerPage->image ?? "")}}"/>

                <div class="photos main_photo {{ old('image', $flyerPage->image ?? '') ? : 'hide' }}">
                    <div class="col-md-4">
                        <div class="items">
                            <div class="img">
                                <a href="#" id="lfm" data-input=".image_thumbnail" data-preview=".image_holder" class="lfm" data-hide=".pick_button">
                                    <img src="{{asset(old('image', $flyerPage->image ?? ''))}} "  id="image_holder" class="image_holder"/>
                                </a>
                            </div>
                            <a href="#" class="showHide resetImage close" data-empty=".image_thumbnail" data-hide=".main_photo" data-show=".pick_button"><i class="fas fa-times"></i></a>
                        </div>
                    </div>
                </div>

                <div class="clearfix"></div>
                <span class="input-group-btn pick_button {{ old('image', $flyerPage->image ?? '') ? 'hide' : '' }} ">
                <a id="lfm"  data-input=".image_thumbnail" data-preview=".image_holder" data-show=".main_photo" data-hide=".pick_button" class="lfm btn btn-primary text-light">
                    <i class="fas fa-camera-retro"></i> {{__('dashboard.choose')}}
                </a>
             </span>
            </div>

            
                </div>
          </div>
          @if($flyerPage ?? ''  && $flyerPage->id)
              <div class="tab-pane fade" id="pills-page2">
                  <div class="products-tab">
                        <div class="flyer-page">
                            <div class="row">
                                <div class="col-lg-4">
                                    <div class="controls-container" id="controls-container">
                                        <button type='button' class="btn btn-success rounded-3 px-5 mb-4" onclick="addProduct()">{{__('flyer_pages.add_product')}}</button>
                                        @foreach($products as $key => $product)
                                            <div class="control-panel" data-id="{{$key+1}}">
                                                <h6 class="mb-3">{{__('flyer_pages.product')}}</h6>
                                                <div class="form-group">
                                                    <label>{{__('flyer_pages.link')}}: </label><br>
                                                    <select name="products[{{$key+1}}][product_id]" class="linkInput">
                                                        <option>{{__('dashboard.select')}}</option>
                                                        @foreach($store_products as $row)
                                                            <option {{$row->id == $product->product_id ? 'selected' : ''}} value="{{$row->id}}">{{$row->title}}</option>
                                                        @endforeach
                                                    </select>
                                                    <!--<input type="url" name="products[{{$key+1}}][link]" value="{{$product->link}}" class="linkInput" oninput="updateProductLink({{$key+1}}, this.value)">-->
                                                    <input type="hidden" id="productStyle1" name="products[{{$key+1}}][dimensions]" value="{{$product->dimensions}}">
                                                </div>
                                                <button type="button" class="dlt btn btn-danger py-1" onclick="removeProduct({{$key+1}})">{{__('flyer_pages.delete')}}</button>
                                            </div>
                                        @endforeach
                                    </div>
                                    <!--<div class="mt-4 col-12">-->
                                    <!--    <button class="bttn w-100 rounded-pill"><span>حفظ</span></button>-->
                                    <!--</div>-->
                                </div>
                                <div class="col-lg-8">
                                    <div class="page-img">
                                        <img src="{{asset($flyerPage->image)}}" alt="{{__('flyer_pages.products')}}" class="product-image">
                                        @foreach($products as $key => $product)
                                            <div class="product-box" data-id="{{$key+1}}" style="{{$product->dimensions}}">
                                                <a class="hidden-link" href="#" target="_blank"></a>
                                                <div class="drag-handle"></div>
                                                <div class="resize-handle"></div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                  </div>
              </div>
        @endif
        </div>
        <div class="text-center mt-5 col-12">
            <button class="bttn"><span>{{ __('dashboard.save') }}</span></button>
        </div>
    </div>

</form>
@endsection

@section('inner_js')
    <!-- Editor JS orders -->
    <script src="{{ asset('/assets/admin/js/lib/tinymce.min.js') }}"></script>
    <script>
        let route_prefix = "{{ url(config('lfm.prefix')) }}",
            url = "{{url('/')}}/",
            currentLanguage = "{{getCurrentLocale()}}",
            imagePath = "{{asset('')}}";
    </script>
    <script src="{{ asset('assets/admin/js/editor.js') }}"></script>
    <script src="{{ asset('assets/admin/js/lfm.js') }}"></script>

    <!--flyer page-->
        <script>
        let productCount = {{count($products)}};

        function addProduct() {
            productCount++;
            const container = document.querySelector(".page-img");
            const controlsContainer = document.getElementById("controls-container");

            const productBox = document.createElement("div");
            productBox.className = "product-box";
            productBox.style.left = "10%";
            productBox.style.top = "10%";
            productBox.style.width = "20%";
            productBox.style.height = "30%";
            productBox.dataset.id = productCount;

            productBox.addEventListener('click', (e) => {
                e.stopPropagation();
                selectProduct(productBox.dataset.id);
            });

            const productLink = document.createElement("a");
            productLink.className = "hidden-link";
            productLink.href = "#";
            productLink.target = "_blank";

            const dragHandle = document.createElement("div");
            dragHandle.className = "drag-handle";

            const resizeHandle = document.createElement("div");
            resizeHandle.className = "resize-handle";

            productBox.appendChild(productLink);
            productBox.appendChild(dragHandle);
            productBox.appendChild(resizeHandle);
            container.appendChild(productBox);

            enableDragging(productBox, dragHandle,productCount);
            enableResizing(productBox, resizeHandle,productCount);

            const controlPanel = document.createElement("div");
            controlPanel.className = "control-panel";
            controlPanel.dataset.id = productCount;
            controlPanel.innerHTML = `
                <h6 class="mb-3">{{__('flyer_pages.product')}}</h6>
                <div class="form-group">
                    <label>{{__('flyer_pages.link')}}: </label><br>
                    <select name="products[${productCount}][product_id]" class="linkInput">
                        <option>{{__('dashboard.select')}}</option>
                        @foreach($store_products as $row)
                            <option value="{{$row->id}}">{{$row->title}}</option>
                        @endforeach
                    </select>
                    <input type="hidden" id="productStyle${productCount}" name="products[${productCount}][dimensions]">
                </div>
                <button type="button" class="dlt btn btn-danger py-1" onclick="removeProduct(${productCount})">{{__('flyer_pages.delete')}}</button>
            `;
            controlsContainer.appendChild(controlPanel);
            updateLocation(productCount,productBox.style.cssText)
            
        }

        function removeProduct(id) {
            if (document.querySelectorAll(".product-box").length > 1) {
                document.querySelector(`.product-box[data-id='${id}']`).remove();
                document.querySelector(`.control-panel[data-id='${id}']`).remove();
            } else {
                alert("{{__('flyer_pages.at_least_product')}}");
            }
        }

        function selectProduct(id) {
            document.querySelectorAll(".product-box, .control-panel").forEach(el => {
                el.classList.toggle("selected", el.dataset.id === id);
            });
        }

        document.addEventListener("click", (e) => {
            if (e.target.closest(".control-panel")) {
                selectProduct(e.target.closest(".control-panel").dataset.id);
            }
        });

        function enableDragging(box, handle,productId) {
            let isDragging = false, startX, startY, initialLeft, initialTop;
            const container = document.querySelector(".page-img");

            handle.addEventListener('mousedown', function (e) {
                isDragging = true;
                startX = e.clientX;
                startY = e.clientY;

                initialLeft = (box.offsetLeft / container.offsetWidth) * 100;
                initialTop = (box.offsetTop / container.offsetHeight) * 100;

                document.body.style.cursor = 'grabbing';
                e.preventDefault();
            });

            document.addEventListener('mousemove', function (e) {
                if (!isDragging) return;
                let deltaX = ((e.clientX - startX) / container.offsetWidth) * 100;
                let deltaY = ((e.clientY - startY) / container.offsetHeight) * 100;

                let newLeft = initialLeft + deltaX;
                let newTop = initialTop + deltaY;
                box.style.left = Math.min(Math.max(newLeft, 0), 100) + '%';
                box.style.top = Math.min(Math.max(newTop, 0), 100) + '%';
            });

            document.addEventListener('mouseup', function () {
                isDragging = false;
                updateLocation(productId,box.style.cssText)
                document.body.style.cursor = 'default';
            });
        }

        function enableResizing(box, handle,productId) {
            let isResizing = false, startX, startY, initialWidth, initialHeight;
            const container = document.querySelector(".page-img");

            handle.addEventListener('mousedown', function (e) {
                isResizing = true;
                startX = e.clientX;
                startY = e.clientY;

                initialWidth = (box.offsetWidth / container.offsetWidth) * 100;
                initialHeight = (box.offsetHeight / container.offsetHeight) * 100;

                document.body.style.cursor = 'nwse-resize';
                e.preventDefault();
            });

            document.addEventListener('mousemove', function (e) {
                if (!isResizing) return;
                let deltaX = ((e.clientX - startX) / container.offsetWidth) * 100;
                let deltaY = ((e.clientY - startY) / container.offsetHeight) * 100;
                
                box.style.width = (initialWidth + deltaX) + '%';
                box.style.height = (initialHeight + deltaY) + '%';

            });
            document.addEventListener('mouseup', function () {
                isResizing = false;
                updateLocation(productId,box.style.cssText)
                document.body.style.cursor = 'default';
            });
        }

        function updateProductLink(id, url) {
            document.querySelector(`.product-box[data-id='${id}'] .hidden-link`).href = url;
        }
        
        function updateLocation(productId,style)
        {
            $(`#productStyle${productId}`).val(style)
        }
        
        
    </script>
@endsection