@extends('layouts.seller')

@section('css')
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/flick/jquery-ui.css">
    <style>
        .tbl-edit {
            font-size: 14px;
            cursor: pointer;
            display: none;
        }
        .floor{
            position: relative;
            overflow: hidden; /* Prevents child divs from moving outside */
        }
    </style>
@endsection

@section('content')
    @php
        $isEdit = $data->id ?? false;
        $tables = $tables ?? [];
    @endphp
    <div class="page-header text-uppercase">
        <ul class="list-unstyled space-list m-0">
            <li>
                <p>{{ __('table-management.title')}}</p>
            </li>
            <li>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{!! route('seller.dashboard', getStoreSlug()) !!}">{!! __('common.home') !!}</a></li>
                        <li class="breadcrumb-item" aria-current="page">
                            <a href="{!! route('seller.table-management.index') !!}">{!! __('table-management.title') !!}</a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">
                            {{ $data->id ? __('table-management.edit') : __('table-management.create') }}
                        </li>
                    </ol>
                </nav>
            </li>
        </ul>
    </div>
    <div class="admin-area-col table_manage">
        <div class="row mb-3">
            <div class="col-3">
                {{ Form::open(array('route' => $route,'class' =>'', 'method' => 'POST' ,'id' => 'ajaxSave','files' => true))}}
                {!! Form::hidden('next',1) !!}
                {!! Form::hidden('tables','') !!}
                {!! Form::hidden('is_duplicate',$duplicate ?? 0) !!}
                {!! Form::label('Area Name',__('table-management.area_name')) !!}
                {!! Form::text('name',$data->name ?? '',['class' => 'form-control']) !!}
                {!! Form::submit('save',['class' => 'btn btn-primary', 'id' => 'submit-area-btn','style' => 'display:none']) !!}
                {!! Form::close() !!}
            </div>
            <div class="col-9 d-flex justify-content-end " style="place-items:center">
                <button class="btn btn-primary width80" id="save-area-btn">{!! __('table-management.save') !!}</button>
            </div>
        </div>
        <div class="row mb-3">
            <div class="col-3"> </div>
            <div class="col-9 shapes d-flex" style="place-items: center;">
                <div class="main-circle inner-text mx-3 __table_object" data-table_class="main-circle" data-type="1" id="main-table-circle">{!! __('table-management.table') !!}</div>
                <div class="main-square inner-text mx-3 __table_object" data-table_class="main-square" data-type="1" id="main-table-square">{!! __('table-management.table') !!}</div>
                <div class="main-rectangle inner-text mx-3 __table_object" data-table_class="main-rectangle" data-type="1" id="main-table-rectangle">{!! __('table-management.table') !!}</div>
                <div class="main-rectangle-vertical inner-text mx-3 __table_object" data-table_class="main-rectangle-vertical" data-type="1" id="main-table-rectangle-vertical">{!! __('table-management.table') !!}</div>
                <div class="main-object inner-text mx-3 __table_object" data-table_class="main-object" data-type="2" id="main-object">{!! __('table-management.object') !!}</div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 ">
                <div class="round-white-bg box-shadow floor" style="height: 100vh">

                </div>
            </div>
        </div>
    </div>
    <!-- Dynamic Modal --->
    <div class="modal fade" id="tbl-options" tabindex="-1" role="dialog" data-keyboard="false">
        <div class="modal-dialog modal-md" role="document">
            <div class="modal-content">
                <div class="modal-body" id="dynamicBody">
                    {!! Form::label('tbl_name',__('table-management.table_name')) !!}
                    {!! Form::text('tbl_name','',   ['class' => 'form-control']) !!}
                    {!! Form::hidden('tbl_id','') !!}
                    {!! Form::hidden('tbl_parent_id','') !!}
                    <div class="tbl-options-btn mt-3 text-right">
                        <button class="btn btn-primary width80 _cancel_tbl_btn">{!! __('table-management.cancel') !!}</button>
                        <button class="btn btn-primary width80 _add_tbl_btn">{!! __('table-management.save') !!}</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection
@section('script')
    <script src="{!! asset('/assets/plugin/box-modeling/box-modeling.js') !!}"> </script>
    <script>
        $(document).on('click', '.__table_object', function() {
            let parentTableId = $(this).prop('id');
            $('input[name="tbl_parent_id"]').val(parentTableId);
            $("#tbl-options").modal('show');
        });

        function newTable(parentTableId,name)
        {
            const parentTable = $(`#${parentTableId}`);
            const objectClass = parentTable.data('table_class');
            const len = parseInt($(`input[name="next"]`).val()) + 1;
            $(`input[name="next"]`).val(len);
            const boxModelId = `${objectClass}-n${len + 1}`;
            const style = "left: 74px; top: 97px; z-index: 1000;";
            const type = parentTable.data('type');
            createTable(boxModelId,objectClass,style,type,name);
        }

        function createTable(boxModelId,objectClass,style,type,name,id = '',in_use = 0)
        {
            const floorView = $('.floor');
            const showEdit = !(name == '') ? 'display:none' : '';
            const tblNameElem = `<div><span class="tbl-name">${name}</span></div>`;
            const modifyOptions = `<div class="tbl-edit" style="${showEdit}" data-tbl_id="${boxModelId}">
                                        <span class="edit-option"><i class="fa fa-edit" aria-hidden="true"></i></span>
                                        <span class="duplicate-option"><i class="fa fa-copy" aria-hidden="true"></i></span>
                                        <span class="delete-option"><i class="fa fa-trash" aria-hidden="true"></i></span>
                                    </div>`;
            const htmlElem = `<div class="${objectClass} box inner-text" data-class="${objectClass}" id="${boxModelId}" data-id="${id}" data-type="${type}" style="${style}">
                                    <div class="tbl-inner">${tblNameElem +  modifyOptions}</div>
                                </div>`; // Using template literal for HTML string
            floorView.append(htmlElem);

            if(type == 1) $(`#${boxModelId}`).css('border',`3px solid ${in_use}`);

            createBox(boxModelId);
        }

        function createBox(boxModelId)
        {
            const boxModel = $(`#${boxModelId}`);
            boxModel.boxModeling({
                rotate: true,
                resize: true,
                move: true,
            }).trigger('reset');

            boxModel.hover(
                    function() {
                        rotateBoxOptions($(this));
                        $(this).find('.tbl-edit').show();

                    },
                    function() {
                        $(this).find('.tbl-edit').hide();
                    }
            );

            rotateBoxOptions();
        }

        $(document).on('click','.edit-option',function () {
            let tblId = $(this).parent().data('tbl_id');
            let tblName = $(this).closest('.box').find('span.tbl-name').text();
            $('input[name="tbl_id"]').val(tblId);
            $('input[name="tbl_name"]').val(tblName);
            $("#tbl-options").modal('show');
        });

        $('._cancel_tbl_btn').click(()=> {
            $("#tbl-options").modal('hide');
            $('input[name="tbl_name"]').val('');
        });

        $('._add_tbl_btn').click(()=> {
            const tblName = $('input[name="tbl_name"]').val();
            const tblId = $('input[name="tbl_id"]').val();
            if(tblId){
                $(`#${tblId}`).find('span.tbl-name').html(tblName);
            }else{
                const parentTableId = $('input[name="tbl_parent_id"]').val();
                newTable(parentTableId,tblName);
            }
            resetForm();
        });

        function resetForm()
        {
            $('input[name="tbl_name"]').val('');
            $('input[name="tbl_id"]').val('');
            $('input[name="tbl_parent_id"]').val('');
            $("#tbl-options").modal('hide');
        }

        function createTablesJson(){
            let tblArr = $('.box').map(function () {
                const elem = $(this);
                return {
                    'id': elem.data('id') || 0,
                    'class': elem.data('class'),
                    'style': elem.attr('style'),
                    'name': elem.find('span.tbl-name').text(),
                    'type': elem.data('type')
                };
            }).get();
            $('input[name="tables"]').val(JSON.stringify(tblArr));
        }

        $('form > [name="name"]').on('keyup',function () {
            createTablesJson();
        });

        $('#save-area-btn').click(function () {
            createTablesJson();
            $('#submit-area-btn').trigger('submit');
        });
        $(document).ready(function(){
            let tableData = @json($tables);
            tableData.forEach(function(tbl) {
                createTable(tbl.boxModelId, tbl.objectClass, tbl.style, tbl.type, tbl.name,tbl.id,tbl.table_in_use);
            });

            rotateBoxOptions();
            createTablesJson();
        });

        const applyRotationCorrection = (element) => {
            const style = element.attr('style');
            if (style) {
                const match = /rotate\(([-0-9.]+)deg\)/.exec(style);
                if (match) {
                    const rotateAngle = parseFloat(match[1]);
                    element.find('div.tbl-edit').css('transform', `rotate(${-(rotateAngle)}deg)`);
                }
            }
        };

        function rotateBoxOptions(target = null)
        {
            if (target) {
                applyRotationCorrection(target);
            } else {
                $('.box').each(function () {
                    applyRotationCorrection($(this));
                });
            }
        }

        $(document).on('click','.delete-option',function(){
            $(this).closest('.box').remove();
        });

        $(document).on('click', '.duplicate-option', function() {
            const floorView = $('.floor');
            let tblId = $(this).parent().data('tbl_id');
            let parentElem = $(`#${tblId}`);
            let parentElemClass = parentElem.data('class');
            const len = parseInt($(`input[name="next"]`).val()) + 1;
            $(`input[name="next"]`).val(len);

            let newElemId = `${parentElemClass}-n${len + 1}`;
            let clonedHtml = parentElem.clone().prop('id', newElemId).attr('data-id','');
            clonedHtml.find('.box-handlers').remove();
            let left = parseInt(clonedHtml.css('left'));
            let top = parseInt(clonedHtml.css('top'));
            clonedHtml.css('left',(left+10)+'px');
            clonedHtml.css('top',(top+10)+'px');

            clonedHtml.find('.tbl-edit').attr('data-tbl_id', newElemId).css('display','none');
            floorView.append(clonedHtml);

            createBox(newElemId);
        });

    </script>
@endsection