@extends('layouts.master', ['title' => 'List - License - Pages'])

@section('workspace')

    <!-- Breadcrumb -->
    <section class="breadcrumb lg:flex items-start">
        <div>
            <h1>EzyPOS License</h1>
            <ul>
                <li><a href="#no-link">Pages</a></li>
                <li class="divider la la-arrow-right"></li>
                <li><a href="#no-link">License</a></li>
                <li class="divider la la-arrow-right"></li>
                <li>List</li>
            </ul>
        </div>

        <div class="flex flex-wrap gap-2 items-center ltr:ml-auto rtl:mr-auto mt-5 lg:mt-0">

            <!-- Search -->
            <form class="flex flex-auto">
                <label class="form-control-addon-within rounded-full">
                    <input class="form-control border-none" placeholder="Search">
                    <button
                        class="text-gray-300 dark:text-gray-700 text-xl leading-none la la-search ltr:mr-4 rtl:ml-4"></button>
                </label>
            </form>

            <div class="flex gap-x-2">

                <!-- Sort By -->
                <div class="dropdown">
                    <button class="btn btn_outlined btn_secondary uppercase" data-toggle="dropdown-menu">
                        Sort By
                        <span class="ltr:ml-3 rtl:mr-3 la la-caret-down text-xl leading-none"></span>
                    </button>
                    <div class="dropdown-menu">
                        <a href="#no-link">Ascending</a>
                        <a href="#no-link">Descending</a>
                    </div>
                </div>

{{--                <!-- Assign License -->--}}
{{--                <a href="{{route('sub-dealer.licenses.assign-view')}}" class="btn btn_primary uppercase">Assign License</a>--}}
            </div>
        </div>
    </section>

    <!-- List -->
    <div class="card p-5">
        <div class="overflow-x-auto">
            <table class="table table-auto table_hoverable w-full">
                <thead>
                <tr>

                    <th class="ltr:text-left rtl:text-right uppercase">License Key</th>
                    <th class="text-center uppercase">App Id</th>
                    <th class="text-center uppercase">License Type</th>
                    <th class="text-center uppercase">Change License Count</th>
                    <th class="text-center uppercase">Register Date</th>
                    <th class="text-center uppercase">Status</th>
                    <th class="uppercase">Action</th>
                </tr>
                </thead>
                <tbody>

                @if($licenses->count() > 0)
                    @foreach($licenses as $license)
                        <tr>
                            <td>{{ $license->license_key }}</td>
                            <td class="text-center">{{ $license->app_id }}</td>
                            <td class="text-center">{{ ucfirst($license->license_type )}}</td>
                            <td class="text-center">{{ $license->change_license_count }}</td>
                            <td class="text-center">{{ $license->registered_date }}</td>
                            <td class="text-center">

                                @if($license->status == 'active')

                                    <div class="badge badge_outlined badge_success uppercase">{{$license->status}}</div>
                                @else
                                    <div class="badge badge_outlined badge_danger uppercase">{{$license->status}}</div>

                                @endif

                            </td>
                            <td class="ltr:text-right rtl:text-left whitespace-nowrap">
                                <div class="inline-flex ltr:ml-auto rtl:mr-auto">

                                    @if($license->app_id == '')
                                        {{--Assign License--}}
                                        <button class="btn btn-icon btn_outlined btn_primary" data-toggle="modal"
                                                data-target="#exampleModalCentered"
                                                onclick="openModal('{{$license->license_key}}')"><span
                                                class="la la-file-contract"></span></button>

                                    @else
                                        {{--Customer Info--}}
                                        <a class="btn btn-icon btn_outlined btn_success"
                                           href="{{route('sub-dealer.customers.info', $license->app->company->company_id)}}"><span
                                                class="la la-info-circle"></span></a>

                                        {{--                                        Change License Type--}}
                                        <button class="btn btn-icon btn_outlined btn_info ltr:ml-2 rtl:mr-2"
                                                data-toggle="modal"
                                                data-target="#changeLicenseTypeModal"
                                                onclick="openModal('{{$license->license_key}}')"><span
                                                class="la la-file-contract"></span></button>

                                        @if($license->status == 'active')
                                            {{--Disable License--}}
                                            <button class="btn btn-icon btn_outlined btn_danger ltr:ml-2 rtl:mr-2"
                                                    data-toggle="modal"
                                                    data-target="#disabledLicenseModal"
                                                    onclick="openDisableLicenseModal('{{$license->license_key}}', 'off')"><span
                                                    class="la la-ban"></span></button>
                                        @else
                                            {{--Enable License--}}
                                            <button class="btn btn-icon btn_outlined btn_success ltr:ml-2 rtl:mr-2"
                                                    data-toggle="modal"
                                                    data-target="#disabledLicenseModal"
                                                    onclick="openDisableLicenseModal('{{$license->license_key}}','on')"><span
                                                    class="la la-check-circle"></span></button>

                                        @endif
                                        {{--Transfer License--}}
                                        <button class="btn btn-icon btn_outlined btn_secondary ltr:ml-2 rtl:mr-2"
                                                data-toggle="modal"
                                                data-target="#transferLicenseModal"
                                                onclick="openModal('{{$license->license_key}}')"><span
                                                class="la la-exchange"></span></button>

                                    @endif




                                    {{--                                    <a href="#no-link" class="btn btn-icon btn_outlined btn_secondary ltr:ml-2 rtl:mr-2">--}}
                                    {{--                                        <span class="la la-pen-fancy"></span>--}}
                                    {{--                                    </a>--}}
                                </div>
                            </td>
                        </tr>

                    @endforeach
                @else
                    <tr>
                        <td colspan="5" class="text-center">No License Found</td>
                    </tr>
                @endif

                </tbody>
            </table>
        </div>
    </div>

    <div id="changeLicenseTypeModal" class="modal" data-animations="fadeInDown, fadeOutUp" data-static-backdrop>
        <div class="modal-dialog modal-dialog_centered max-w-2xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="modal-title">Change License Type</h2>
                    <button class="close la la-times" data-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="custom-select">
                        <select id="change_license_type" class="form-control">
                            <option>Select</option>
                            <option value="standalone">Standalone</option>
                            {{--                            <option>Cloud</option>--}}
                            <option value="local">Local</option>
                        </select>
                        <div class="custom-select-icon la la-caret-down"></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="flex ltr:ml-auto rtl:mr-auto">
                        <button class="btn btn_secondary uppercase" data-dismiss="modal">Close</button>
                        <button class="btn btn_primary ltr:ml-2 rtl:mr-2 uppercase" onclick="submitTransferType()">
                            Confirm
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div id="transferLicenseModal" class="modal" data-animations="fadeInDown, fadeOutUp" data-static-backdrop>
        <div class="modal-dialog modal-dialog_centered max-w-2xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="modal-title">Transfer EzyPOS License</h2>
                    <button class="close la la-times" data-dismiss="modal" onclick="closeModal()"></button>
                </div>
                <div class="modal-body">
                    <div class="relative">
                        <label
                            class="label absolute block bg-input top-0 ltr:ml-3 rtl:mr-3 px-1 rounded font-heading uppercase"
                            for="ezypos_appid_new">New EzyPOS AppId</label>
                        <input id="ezypos_appid_new" class="form-control mt-2 pt-5" placeholder="Enter new appid here">
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="flex ltr:ml-auto rtl:mr-auto">
                        <button class="btn btn_secondary uppercase" data-dismiss="modal" onclick="closeModal()">Close
                        </button>
                        <button class="btn btn_primary ltr:ml-2 rtl:mr-2 uppercase" onclick="submitTransfer()">Confirm
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div id="exampleModalCentered" class="modal" data-animations="fadeInDown, fadeOutUp" data-static-backdrop>
        <div class="modal-dialog modal-dialog_centered max-w-2xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="modal-title">Assign EzyPOS License</h2>
                    <button class="close la la-times" data-dismiss="modal" onclick="closeModal()"></button>
                </div>
                <div class="modal-body">
                    <div class="relative">
                        <label
                            class="label absolute block bg-input top-0 ltr:ml-3 rtl:mr-3 px-1 rounded font-heading uppercase"
                            for="ezypos_appid">EzyPOS AppId</label>
                        <input id="ezypos_appid" class="form-control mt-2 pt-5" placeholder="Enter appid here">
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="flex ltr:ml-auto rtl:mr-auto">
                        <button class="btn btn_secondary uppercase" data-dismiss="modal" onclick="closeModal()">Close
                        </button>
                        <button class="btn btn_primary ltr:ml-2 rtl:mr-2 uppercase" onclick="submitFunction()">Confirm
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="disabledLicenseModal" class="modal" data-animations="fadeInDown, fadeOutUp" data-static-backdrop>
        <div class="modal-dialog modal-dialog_centered max-w-2xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="modal-title" id="disabledTitle">License Deactivate</h2>
                    <button class="close la la-times" data-dismiss="modal"
                            onclick="closeDisableLicenseModal()"></button>
                </div>
                <div class="modal-body">
                    <p id="disabledContent">Are you sure want to deactivate this license?</p>
                </div>
                <div class="modal-footer">
                    <div class="flex ltr:ml-auto rtl:mr-auto">
                        <button class="btn btn_secondary uppercase" data-dismiss="modal"
                                onclick="closeDisableLicenseModal()">Close
                        </button>
                        <button class="btn btn_primary ltr:ml-2 rtl:mr-2 uppercase" onclick="confirmDisableFunction()">
                            Confirm
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{--    <div class="mt-5">--}}
    {{--        @include('partials._pagination')--}}
    {{--    </div>--}}

    <!-- Footer Bar -->
    {{--    <div class="footer-bar">--}}
    {{--        <div class="flex items-center uppercase">--}}
    {{--            <span class="badge badge_primary ltr:mr-2 rtl:ml-2">1</span>--}}
    {{--            Post Selected--}}
    {{--        </div>--}}
    {{--        <div class="ltr:ml-auto rtl:mr-auto">--}}
    {{--            <button class="btn btn_danger uppercase">--}}
    {{--                <span class="la la-trash-alt text-xl leading-none ltr:mr-2 rtl:ml-2"></span>--}}
    {{--                Remove--}}
    {{--            </button>--}}
    {{--        </div>--}}
    {{--    </div>--}}

@endsection



@section('scripts')
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>

        let selectedLicenseKey = '';

        function closeModal() {
            document.getElementById('ezypos_appid').value = '';
            document.getElementById('ezypos_appid_new').value = '';
            selectedLicenseKey = '';
        }

        function openModal(licenseKey) {
            selectedLicenseKey = licenseKey;
        }

        function submitTransferType() {
            let transferType = document.getElementById('change_license_type').value;
            if (transferType === 'Select') {
                alert('Please select transfer type');
                return;
            } else {
                console.log(transferType);
                console.log(selectedLicenseKey);


                axios.post('{{route('sub-dealer.licenses.transfer-type')}}', {
                    _token: '{{csrf_token()}}',
                    license_key: selectedLicenseKey,
                    license_type: transferType,
                })
                    .then(function (response) {
                        console.log(response);
                        if (response.status === 200) {
                            alert(response.data.message);
                            window.location.reload();
                        } else {
                            alert(response.data.message);
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }

        }

        function submitTransfer() {
            let ezypos_appid = document.getElementById('ezypos_appid_new').value;
            if (ezypos_appid === '') {
                alert('Please enter EzyPOS AppId');
                return;
            }
            if (ezypos_appid.length !== 22) {
                alert('Please enter valid EzyPOS AppId');
                return;
            }

            axios.post('{{route('sub-dealer.licenses.transfer')}}', {
                _token: '{{csrf_token()}}',
                license_key: selectedLicenseKey,
                ezypos_appid: ezypos_appid,
            })
                .then(function (response) {
                    console.log(response);
                    if (response.status === 200) {
                        alert(response.data.message);
                        window.location.reload();
                    } else {
                        alert(response.data.message);
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
        }


        function submitFunction() {

            //ezypos appid
            let ezypos_appid = document.getElementById('ezypos_appid').value;
            if (ezypos_appid === '') {
                alert('Please enter EzyPOS AppId');
                return;
            }
            if (ezypos_appid.length !== 22) {
                alert('Please enter valid EzyPOS AppId');
                return;
            }

            console.log(selectedLicenseKey);

            axios.post('{{route('sub-dealer.licenses.assign')}}', {
                _token: '{{csrf_token()}}',
                license_key: selectedLicenseKey,
                ezypos_appid: ezypos_appid,
            })
                .then(function (response) {
                    console.log(response);
                    if (response.status === 200) {
                        alert(response.data.message);
                        window.location.reload();
                    } else {
                        alert(response.data.message);
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
        }

        // 获取输入字段或文本框的引用
        let inputField = document.getElementById('ezypos_appid');
        let inputFieldNew = document.getElementById('ezypos_appid_new');

        // 添加事件监听器
        inputField.addEventListener('input', addHyphen);
        inputFieldNew.addEventListener('input', addHyphen);
        inputField.addEventListener('paste', addHyphen);
        inputFieldNew.addEventListener('paste', addHyphen);


        // 处理函数：在输入或粘贴时自动添加连字符
        function addHyphen(event) {

            console.log('addHyphen');

            // 延迟执行以便等待输入或粘贴完成
            setTimeout(function () {
                // 获取输入字段的值
                let value = event.target.value.toUpperCase();

                value = value.replace(/-/g, "");

                //make sure length is 20
                if (value.length > 20) {
                    value = value.substring(0, 20);
                }


                // 使用正则表达式添加连字符
                let formattedValue = value.replace(/(\w{6})(\w{8})(\w{6})/, '$1-$2-$3');

                // 将格式化的值设置回输入字段
                event.target.value = formattedValue;
            }, 0);
        }


        function closeDisableLicenseModal() {
            selectedLicenseKey = '';
        }

        function openDisableLicenseModal(licenseKey, status) {
            selectedLicenseKey = licenseKey;

            if (status === 'on') {
                let disabledTitle = document.getElementById('disabledTitle');
                disabledTitle.innerHTML = 'License Activate';
                let disabledContent = document.getElementById('disabledContent');
                disabledContent.innerHTML = 'Are you sure want to activate this license?';
            }


        }

        function confirmDisableFunction() {
            axios.post('{{route('sub-dealer.licenses.status')}}', {
                _token: '{{csrf_token()}}',
                license_key: selectedLicenseKey,
            })
                .then(function (response) {
                    console.log(response);
                    if (response.status === 200) {
                        alert(response.data.message);
                        window.location.reload();
                    } else {
                        alert(response.data.message);
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
        }

    </script>
@endsection