@extends('layout')

@section('h4-page', __('redeemCode'))

@section('contents')
    <style>
        .preview-title {
            position: absolute;
            top: 21px;
            left: 10.2rem;
            /* border: 1px solid red; */
            font-size: 8px;
            width: 68px;
            color: white
        }

        .preview-subtitle {
            position: absolute;
            top: 40px;
            left: 10.2rem;
            /* border: 1px solid green; */
            font-size: 21px;
            color: white;
            width: 68px;
        }

        .preview-details-title {
            position: absolute;
            top: 21px;
            left: 5rem;
            /* border: 1px solid blue; */
            font-size: 8px;
            width: 55px;
            height: 50px;
        }

        .preview-details-title>p {
            height: 100%;
            width: 100%;
            margin-bottom: 0;
            position: relative;
            align-content: center;
        }
    </style>
    <div class="row layout-top-spacing">
        <div class="col-lg-12 col-md-12 mb-md-0 mb-4">
            <div class="mb-3">
                @if (session('success'))
                    <div class="alert alert-success alert-dismissible fade show " role="alert">
                        {{ session('success') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif
                @if ($errors->any())
                    <div class="alert alert-danger mt-3 ">
                        <ul class="mb-0">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
                <div class="d-flex justify-content-end">
                    <button class="btn btn-sm btn-info font-weight-bold text-xs createModel"
                        href="{{ route('redeemCode.create') }}" data-bs-toggle="modal" data-bs-target="#exampleModal">
                        {{ __('create') }} +
                    </button>
                </div>
            </div>
            <div class="table-responsive">
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>{{ __('Titles') }}</th>
                            <th>{{ __('Subtitle') }}</th>
                            <th>{{ __('Action') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse (@$main as $key => $item)
                            <tr>
                                <td>{{ $main->currentPage() > 1 ? $main->perPage() * $main->currentPage() - $main->perPage() + $key + 1 : $key + 1 }}
                                </td>
                                <td>{{ $item->title }}</td>
                                <td>{{ $item->subtitle }} </td>
                                <td>
                                    <button class="btn btn-secondary editModel"
                                        data-id="{{ $item->id }}">{{ __('edit') }}</button>
                                    <button class="btn btn-danger"
                                        onclick="deleteItem({{ $item->id }})">{{ __('Delete') }}</button>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" class="text-center">{{ __('NoDataFound') }}</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content bg-white">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">{{ __('redeemCode') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <ul class="list-group" id="modalDiv">
                        <li class="list-group-item border-0 px-0">
                            <div class="form-group ps-0">
                                <div style="position: relative;text-align: center;">
                                    <div style="position: relative; width: 250px; margin: auto">
                                        <img src="{{ asset('img/redeemCode_template.png') }}" alt="template"
                                            style="position: relative; width:  250px;height: 90px;">
                                        <div class="preview-title">
                                            <span id="previwe-title-message"></span>
                                        </div>
                                        <div class="preview-subtitle">
                                            <span id="previwe-subtitle-message"></span>
                                        </div>
                                        <div class="preview-details-title">
                                            <p id="previwe-details-message"></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="list-group-item border-0 px-0">
                            <div class="form-group ps-0">
                                <x-flag-contry></x-flag-contry>
                            </div>
                        </li>
                        @foreach ($config_lang as $key => $item)
                            <li
                                class="list-group-item border-0 px-0 datalange datalange_{{ $item }} @if ($key != 0) d-none @endif">
                                <div class="form-group ps-0">
                                    <label class="form-label">{{ __('Title') }} [{{ $item }}]</label>
                                    <input type="text" class="form-control" name="datalange[{{ $item }}][title]"
                                        id="datalange[{{ $item }}][title]"
                                        onkeyup="writeImage('title', this.value)"
                                        onkeypress="writeImage('title', this.value)">
                                </div>
                            </li>
                            <li
                                class="list-group-item border-0 px-0 datalange datalange_{{ $item }} @if ($key != 0) d-none @endif">
                                <div class="form-group ps-0">
                                    <label class="form-label">{{ __('Subtitle') }} [{{ $item }}]</label>
                                    <input type="text" class="form-control"
                                        name="datalange[{{ $item }}][subtitle]"
                                        id="datalange[{{ $item }}][subtitle]"
                                        onkeyup="writeImage('subtitle', this.value)"
                                        onkeypress="writeImage('subtitle', this.value)">
                                </div>
                            </li>
                            <li
                                class="list-group-item border-0 px-0 datalange datalange_{{ $item }} @if ($key != 0) d-none @endif">
                                <div class="form-group ps-0">
                                    <label class="form-label">{{ __('Details Title') }} [{{ $item }}]</label>
                                    <input type="text" class="form-control"
                                        name="datalange[{{ $item }}][detail]"
                                        id="datalange[{{ $item }}][detail]" {{-- onkeydown="checkNumber('datalange[{{ $item }}][countLabel]', this, 40)" --}}
                                        onkeyup="writeImage('details', this.value)"
                                        onkeypress="writeImage('details', this.value)">
                                    <div class="d-flex justify-content-end">
                                        {{-- <span><span class="" id="datalange[{{ $item }}][countLabel]">0</span>
                                            /
                                            40</span> --}}
                                    </div>

                                </div>
                            </li>
                        @endforeach

                        <li class="list-group-item border-0 px-0 ">
                            <div class="form-group ps-0">
                                <label class="form-label">{{ __('StartDate') }}</label>
                                <input type="date" class="form-control" name="start_date" id="start_date" required>
                            </div>
                        </li>
                        <li class="list-group-item border-0 px-0 ">
                            <div class="form-group ps-0">
                                <label class="form-label">{{ __('EndDate') }}</label>
                                <input type="date" class="form-control" name="end_date" id="end_date" required>
                            </div>
                        </li>
                        @foreach ($config_lang as $key => $item)
                            <li
                                class="list-group-item border-0 px-0 datalange datalange_{{ $item }} @if ($key != 0) d-none @endif">
                                <div class="form-group ps-0">
                                    <label class="form-label">{{ __('Detail Redeem') }} [{{ $item }}]</label>
                                    <textarea rows="10" class="form-control" name="datalange[{{ $item }}][desc]"
                                        id="datalange[{{ $item }}][desc]"></textarea>
                                </div>
                            </li>
                        @endforeach
                        <li class="list-group-item border-0 px-0 ">
                            <div class="form-group ps-0">
                                <label class="form-label">{{ __('Code') }}</label>
                                <input type="text" class="form-control" name="code" id="code"
                                    maxlength="100" placeholder="CODE1234">
                            </div>
                        </li>
                        <li class="list-group-item border-0 px-0 ">
                            <div class="form-group ps-0">
                                <label class="form-label">{{ __('Type') }}</label>
                                <select name="type_code" id="type_code" class="form-select" required>
                                    <option value="">{{ __('--Select Type--') }}</option>
                                    <option value="percent">Percent</option>
                                    <option value="price">Price</option>
                                    <option value="freeshipping">Freeshipping</option>
                                </select>
                            </div>
                        </li>
                        <li class="list-group-item border-0 px-0">
                            <div class="form-group ps-0">
                                <label class="form-label">{{ __('Number') }}</label>
                                <input type="text" class="form-control" name="number" id="number"
                                    maxlength="20">
                            </div>
                        </li>
                        <li class="list-group-item border-0 px-0">
                            <div class="form-group ps-0">
                                <label class="form-label">{{ __('Service') }}</label>
                                <select name="service_id" id="service_id" class="form-select">
                                    <option value="all">{{ __('--All Service--') }}</option>
                                    @foreach (@$services as $key => $item)
                                        <option value="{{ $item->id }}">{{ $item->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn bg-gradient-secondary"
                        data-bs-dismiss="modal">{{ __('close') }}</button>
                    <button type="button" class="btn btn-primary saveModel" id="updateModel"
                        data-id="">{{ __('save') }}</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        function changeLange(e) {
            document.getElementById("lange").value = e.id;
            document.getElementById("imageFlagDrowdown").src = e.querySelector('img').src;
            lange = document.querySelectorAll(`.datalange`);
            lange.forEach(element => {
                if (element.classList.contains(`datalange_${e.id}`)) {
                    element.classList.remove("d-none");
                    writeImage('title', document.getElementById(`datalange[${e.id}][title]`).value);
                    writeImage('subtitle', document.getElementById(`datalange[${e.id}][subtitle]`).value);
                    writeImage('details', document.getElementById(`datalange[${e.id}][detail]`).value);
                } else {
                    element.classList.add("d-none");
                }
            });
        }
    </script>
    <script>
        function displaySelectedImage(event, elementId) {
            const selectedImage = document.getElementById(elementId);
            const fileInput = event.target;

            if (fileInput.files && fileInput.files[0]) {
                const reader = new FileReader();

                reader.onload = function(e) {
                    selectedImage.src = e.target.result;
                };

                reader.readAsDataURL(fileInput.files[0]);
            }
        }
    </script>
    <script>
        function setInputFilter(textbox, inputFilter, errMsg) {
            ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop", "focusout"]
            .forEach(
                function(event) {
                    textbox.addEventListener(event, function(e) {
                        if (inputFilter(this.value)) {
                            // Accepted value.
                            if (["keydown", "mousedown", "focusout"].indexOf(e.type) >= 0) {
                                this.classList.remove("input-error");
                                this.setCustomValidity("");
                            }

                            this.oldValue = this.value;
                            this.oldSelectionStart = this.selectionStart;
                            this.oldSelectionEnd = this.selectionEnd;
                        } else if (this.hasOwnProperty("oldValue")) {
                            // Rejected value: restore the previous one.
                            this.classList.add("input-error");
                            this.setCustomValidity(errMsg);
                            this.reportValidity();
                            this.value = this.oldValue;
                            this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
                        } else {
                            // Rejected value: nothing to restore.
                            this.value = "";
                        }
                    });
                });
        }
        setInputFilter(document.getElementById("number"), function(value) {
            return /^-?\d*[.,]?\d{0,2}$/.test(value);
        }, "Must be a currency value");

        function changePin(e) {
            var pin = document.getElementById("pin");
            if (pin.value == 0) {
                pin.value = 1;
            } else {
                pin.value = 0;
            }
        }

        function deleteItem(id) {
            Swal.fire({
                title: '{{ __('Delete') }}',
                text: "{{ __('You want delete value ?') }}",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#5e72e4',
                cancelButtonColor: '#d33',
                confirmButtonText: '{{ __('Yes') }}',
                cancelButtonText: '{{ __('No') }}'
            }).then((result) => {
                if (result.isConfirmed) {
                    var is_url = "{{ route('redeemCode.destroy', ':id') }}";
                    $.ajax({
                        url: is_url.replace(':id', id),
                        type: 'DELETE',
                        data: {
                            _token: '{{ csrf_token() }}',
                            status: 0,
                        },
                        success: function(response) {
                            Swal.fire({
                                title: '{{ __('Success') }}',
                                text: "{{ __('Delete value success.') }}",
                                confirmButtonText: '{{ __('OK') }}',
                                icon: 'success',
                            }).then((result) => {
                                if (result.isConfirmed) {
                                    location.reload();
                                }
                            });
                        },
                        error: function(XMLHttpRequest, textStatus, errorThrown) {
                            Swal.fire({
                                title: '{{ __('Error') }}',
                                text: "{{ __('Cannot delete value.') }}",
                                confirmButtonText: '{{ __('OK') }}',
                                icon: 'error',
                            });
                        }
                    });
                }
            })
        }
        $(document).ready(function() {
            var langs = @json($config_lang);
            var statusModel = "create";
            var idModel = 0;
            var datadetails;
            $(".createModel").on("click", function() {
                langs.forEach((element, index) => {
                    const inputTitle = document.getElementsByName(
                        `datalange[${element}][title]`)[0];
                    const inputSubtitle = document.getElementsByName(
                        `datalange[${element}][subtitle]`)[0];
                    const inputDetail = document.getElementsByName(
                        `datalange[${element}][detail]`)[0];
                    const textareaDesc = document.getElementsByName(
                        `datalange[${element}][desc]`)[0];
                    inputTitle.value = null;
                    inputSubtitle.value = null;
                    inputDetail.value = null;
                    textareaDesc.value = null;
                });
                writeImage('title', '');
                writeImage('subtitle', '');
                writeImage('details', '');
                document.getElementById("start_date").value = null;
                document.getElementById("end_date").value = null;
                document.getElementById("code").value = null;
                document.getElementById("type_code").value = '';
                document.getElementById("number").value = 0;
                $('#service_id').val('all').change();
                idModel = 0;
                statusModel = "create";
            })
            $('.editModel').on("click", function() {
                var url_edit = "{{ route('redeemCode.edit', ':id') }}";
                $.ajax({
                    type: "GET",
                    url: url_edit.replace(":id", $(this).data("id")),
                    success: async function(response) {
                        var data = response;
                        langs.forEach((element, index) => {
                            const inputTitle = document.getElementsByName(
                                `datalange[${element}][title]`)[0];
                            const inputSubtitle = document.getElementsByName(
                                `datalange[${element}][subtitle]`)[0];
                            const inputDetail = document.getElementsByName(
                                `datalange[${element}][detail]`)[0];
                            const textareaDesc = document.getElementsByName(
                                `datalange[${element}][desc]`)[0];
                            inputTitle.value = data.title[element] ?? null;
                            inputSubtitle.value = data.subtitle[element] ?? null;
                            inputDetail.value = data.detail[element] ?? null;
                            textareaDesc.value = data.desc[element] ?? null;
                            if (index == 0) {
                                writeImage('title', data.title[element]);
                                writeImage('subtitle', data.subtitle[element]);
                                writeImage('details', data.detail[element]);
                            }
                        });

                        document.getElementById("start_date").value = data.start_date;
                        document.getElementById("end_date").value = data.end_date;
                        document.getElementById("code").value = data.code ?? null;
                        document.getElementById("type_code").value = data.type ?? '';
                        document.getElementById("number").value = data.price ?? 0;
                        $('#service_id').val(data.service ?? 'all').change();
                        idModel = data.id;
                        statusModel = "update";
                        $('#exampleModal').modal("show");
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        Swal.fire({
                            title: '{{ __('Error') }}',
                            text: "{{ __('Cannot save value.') }}",
                            confirmButtonText: '{{ __('OK') }}',
                            icon: 'error',
                        });
                    },
                });

            });
            $("#updateModel").on("click", function() {
                if (statusModel == "create") {
                    var url = "{{ route('redeemCode.store') }}";
                    var formData = new FormData();
                    var inputs = document.querySelectorAll('#modalDiv input[type=text]');
                    formData.append('start_date', document.getElementById("start_date").value);
                    formData.append('end_date', document.getElementById("end_date").value);
                    var textarea = document.querySelectorAll("#modalDiv textarea");
                    inputs.forEach(function(input) {
                        formData.append(input.name, input.value);
                    });
                    textarea.forEach(function(textarea) {
                        formData.append(textarea.name, textarea.value);
                    })
                    formData.append("price", document.getElementById("number").value);
                    formData.append("type", document.getElementById("type_code").value);
                    formData.append("service", $('#service_id').val());
                    formData.append('_token', "{{ csrf_token() }}");
                    $.ajax({
                        type: "POST",
                        url: url,
                        data: formData,
                        processData: false, // Prevent jQuery from processing the FormData
                        contentType: false, // Prevent jQuery from setting contentType
                        success: function(response) {
                            if (response.status == 200) {
                                Swal.fire({
                                    title: '{{ __('Success') }}',
                                    text: "{{ __('Save value success.') }}",
                                    confirmButtonText: '{{ __('OK') }}',
                                    icon: 'success',
                                }).then((result) => {
                                    if (result.isConfirmed) {
                                        location.reload();
                                    }
                                });
                            } else if (response.status == 1) {
                                Swal.fire({
                                    title: '{{ __('Error') }}',
                                    text: "{{ __('duplicateCode') }}",
                                    confirmButtonText: '{{ __('OK') }}',
                                    icon: 'error',
                                });
                            }

                        },
                        error: function(request, status, error) {
                            Swal.fire({
                                title: '{{ __('Error') }}',
                                text: "{{ __('Cannot save value.') }}",
                                confirmButtonText: '{{ __('OK') }}',
                                icon: 'error',
                            });
                        },
                    });
                } else {
                    var url = "{{ route('redeemCode.update', ':id') }}"
                    var formData = new FormData();
                    var inputs = document.querySelectorAll('#modalDiv input[type=text]');
                    var textarea = document.querySelectorAll("#modalDiv textarea");
                    formData.append('start_date', document.getElementById("start_date").value);
                    formData.append('end_date', document.getElementById("end_date").value);
                    inputs.forEach(function(input) {
                        formData.append(input.name, input.value);
                    });
                    textarea.forEach(function(textarea) {
                        formData.append(textarea.name, textarea.value);
                    })
                    formData.append("price", document.getElementById("number").value);
                    formData.append("type", document.getElementById("type_code").value);
                    formData.append("service", $('#service_id').val());
                    formData.append('_token', "{{ csrf_token() }}");
                    formData.append('_method', "PUT");
                    $.ajax({
                        type: "POST",
                        url: url.replace(":id", idModel),
                        data: formData,
                        processData: false, // Prevent jQuery from processing the FormData
                        contentType: false, // Prevent jQuery from setting contentType
                        success: function(response) {
                            if (response.status == 200) {
                                Swal.fire({
                                    title: '{{ __('Success') }}',
                                    text: "{{ __('Save value success.') }}",
                                    confirmButtonText: '{{ __('OK') }}',
                                    icon: 'success',
                                }).then((result) => {
                                    if (result.isConfirmed) {
                                        location.reload();
                                    }
                                });
                            } else if (response.status == 1) {
                                Swal.fire({
                                    title: '{{ __('Error') }}',
                                    text: "{{ __('duplicateCode.') }}",
                                    confirmButtonText: '{{ __('OK') }}',
                                    icon: 'error',
                                });
                            }
                            // Swal.fire({
                            //     title: '{{ __('Success') }}',
                            //     text: "{{ __('Save value success.') }}",
                            //     confirmButtonText: '{{ __('OK') }}',
                            //     icon: 'success',
                            // }).then((result) => {
                            //     if (result.isConfirmed) {
                            //         location.reload();
                            //     }
                            // });
                        },
                        error: function(request, status, error) {
                            Swal.fire({
                                title: '{{ __('Error') }}',
                                text: "{{ __('Cannot save value.') }}",
                                confirmButtonText: '{{ __('OK') }}',
                                icon: 'error',
                            });
                        },
                    });
                }
            });
            $('.manageModel').on("click", function() {
                var url_edit = "{{ route('redeemCode.show', ':id') }}";
                idModel = $(this).data("id");
                $.ajax({
                    type: "GET",
                    url: url_edit.replace(":id", $(this).data("id")),
                    success: async function(response) {
                        var data = response;
                        datadetails = data.condition;
                        if (datadetails.length > 0) {
                            document.getElementById("code").value = datadetails[0].name;
                            document.getElementById("type_code").value = datadetails[0].type;
                            switch (datadetails[0].type) {
                                case 'freeshipping':
                                    $('#HeadDetils').removeClass('d-none');
                                    $('#detailsTypeCode').html(templateFreeshipping(
                                        datadetails));
                                    setInputFilter(document.getElementById("number"), function(
                                        value) {
                                        return /^-?\d*[.,]?\d{0,2}$/.test(value);
                                    }, "Must be a currency value");
                                    break;
                                default:
                                    $('#HeadDetils').addClass('d-none');
                                    $('#HeaderTypeCode').html('');
                                    $('#detailsTypeCode').html('');
                                    break;
                            }
                        } else {
                            document.getElementById("code").value = null;
                            document.getElementById("type_code").value = '';
                            $('#HeadDetils').addClass('d-none');
                            $('#HeaderTypeCode').html('');
                            $('#detailsTypeCode').html('');
                        }
                        $('#exampleModal2').modal("show");

                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        Swal.fire({
                            title: '{{ __('Error') }}',
                            text: "{{ __('Cannot save value.') }}",
                            confirmButtonText: '{{ __('OK') }}',
                            icon: 'error',
                        });
                    },
                });
            });
            $('#type_code').on("change", function() {
                $('#HeaderTypeCode').html($("#type_code option:selected").text());
                if ($(this).val() == 'percent') {
                    $('#HeadDetils').removeClass('d-none');
                    $('#detailsTypeCode').html(templatePercent(datadetails));
                    setInputFilter(document.getElementById("number"), function(value) {
                        return /^-?\d*[.,]?\d{0,2}$/.test(value);
                    }, "Must be a currency value");

                } else if ($(this).val() == 'price') {
                    $('#HeadDetils').removeClass('d-none');
                    $('#detailsTypeCode').html(templatePrice(datadetails));
                    setInputFilter(document.getElementById("number"), function(value) {
                        return /^-?\d*[.,]?\d{0,2}$/.test(value);
                    }, "Must be a currency value");

                } else if ($(this).val() == 'give_coupon') {
                    $('#detailsTypeCode').html('');

                } else if ($(this).val() == 'cashback') {
                    $('#detailsTypeCode').html('');

                } else if ($(this).val() == 'freeshipping') {
                    $('#HeadDetils').removeClass('d-none');
                    $('#detailsTypeCode').html(templateFreeshipping(datadetails));
                    setInputFilter(document.getElementById("number"), function(value) {
                        return /^-?\d*[.,]?\d{0,2}$/.test(value);
                    }, "Must be a currency value");

                } else {
                    $('#HeadDetils').addClass('d-none');
                    $('#HeaderTypeCode').html('');
                    $('#detailsTypeCode').html('');
                }


            });

            $('#updateModelMange').on("click", function() {
                var url = "{{ route('redeemCode.updateCondition', ':id') }}"
                var formData = new FormData();
                var inputs = document.querySelectorAll('#modalDivDetail input[type=text]')
                var inputsDetails = document.querySelectorAll('#detailsTypeCode input[type=text]')
                inputs.forEach(function(input) {
                    formData.append(input.name, input.value);
                });
                formData.append("number", document.getElementById("number").value);
                formData.append("type_code", document.getElementById("type_code").value);
                formData.append("_method", "PUT");
                formData.append("_token", "{{ csrf_token() }}");
                $.ajax({
                    type: "POST",
                    url: url.replace(":id", idModel),
                    data: formData,
                    processData: false, // Prevent jQuery from processing the FormData
                    contentType: false, // Prevent jQuery from setting contentType
                    success: function(response) {
                        Swal.fire({
                            title: '{{ __('Success') }}',
                            text: "{{ __('Save value success.') }}",
                            confirmButtonText: '{{ __('OK') }}',
                            icon: 'success',
                        }).then((result) => {
                            if (result.isConfirmed) {
                                location.reload();
                            }
                        });
                    },
                    error: function(request, status, error) {
                        Swal.fire({
                            title: '{{ __('Error') }}',
                            text: "{{ __('Cannot save value.') }}",
                            confirmButtonText: '{{ __('OK') }}',
                            icon: 'error',
                        });
                    },
                });
            });

            function templatePercent(data) {
                var html = '';
                html += `
                    <ul class="list-group" id="detailsTemplateTypeCode">
                        <li class="list-group-item border-0 px-0 ">
                            <div class="form-group ps-0">
                                <label for="">Percent</label>
                                <input tpye="text" class="price form-control" id="number" name="number">
                            </div>
                        </li>
                    </ul>
                `;

                return html;
            }

            function templatePrice(data) {
                var html = '';
                html += `
                    <ul class="list-group" id="detailsTemplateTypeCode">
                        <li class="list-group-item border-0 px-0 ">
                            <div class="form-group ps-0">
                                <label for="">Price</label>
                                <input tpye="text" class="price form-control" id="number" name="number">
                            </div>
                        </li>
                    </ul>
                `;

                return html;
            }

            function templateGiveCoupon(data) {
                var html = '';
                html += `
                `;

                return html;
            }

            function templateCashback(data) {
                var html = '';
                html += `
                `;

                return html;
            }

            function templateFreeshipping(data) {
                var html = '';
                html += `
                    <ul class="list-group" id="detailsTemplateTypeCode">
                        <li class="list-group-item border-0 px-0 ">
                            <div class="form-group ps-0">
                                <label for="">Price</label>
                                <input tpye="text" class="price form-control" id="number" name="number" value="${data[0].price ?? 0}">
                            </div>
                        </li>
                    </ul>
                `;

                return html;
            }
        });

        function checkNumber(label_id, e, max) {
            // let lang = document.getElementById("lange").value;
            // if (lang == 'en') {
            //     var count = e.value.length;
            //     var text = document.getElementById(label_id);
            //     if (count > max) {
            //         e.value = e.value.substring(0, max);
            //     }
            //     text.innerHTML = count;
            // } else if (lang == 'th') {
            //     var count = e.value.length;
            //     var text = document.getElementById(label_id);
            //     if (count > max) {
            //         e.value = e.value.substring(0, max);
            //     }
            //     text.innerHTML = count;
            // }


        }

        function writeImage(type, message) {

            if (type == 'title') {
                document.getElementById("previwe-title-message").innerHTML = message;
            } else if (type == 'subtitle') {
                document.getElementById("previwe-subtitle-message").innerHTML = message;
            } else if (type == 'details') {
                document.getElementById("previwe-details-message").innerHTML = message;
            }
        }
    </script>
@endsection