@extends('admin.layouts.master')


@section('title')
    انشاء بوتن
@endsection

@section('css')
@endsection


@section('content-header')
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0 text-dark">انشاء بوتن</h1>
                </div><!-- /.col -->
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item active">انشاء بوتن</li>
                    </ol>
                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.container-fluid -->
    </div>
@endsection


@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card">


                    <div class="card-body">
                        @include('admin.messages')

                        <form action="{{ route('ButtonBoot.store') }}" method="post" autocomplete="off">
                            @csrf

                            <div class="row">
                                <div class="col">
                                    <label>اسم البوتن</label>
                                    <input type="text" name="name" required class="form-control">
                                </div>

                            </div>

                            <br>

                            <div class="row">
                                <div class="col">
                                    <label>محتوي البوتن</label>

                                    <textarea class="form-control" name="button_text" required rows="5"></textarea>
                                    <p>الأحرف المتبقية: <span id="charCount">1050</span></p>

                                </div>

                            </div>

                            <br>

                            <div class="card-body">
                                <div class="repeater">
                                    <div data-repeater-list="List_Classes">
                                        <div data-repeater-item>
                                            <div class="row">

                                                <div class="col">
                                                    <label>الاجابه</label>
                                                    <input type="text" class="form-control" name="button_title">
                                                </div>


                                                <div class="col">
                                                    <label>نوع الرد</label>
                                                    <select class="form-control" name="type" required
                                                        onchange="handleAjaxResponse(this)">
                                                        <option value="" disabled selected>-- اختر نوع الرد --
                                                        </option>
                                                        <option value="list">قائمة منسدلة</option>
                                                        <option value="button">زرار تفاعلى</option>
                                                        <option value="message">رد مباشر</option>
                                                    </select>

                                                </div>


                                                <div class="col list" id="list" style="display: none;">
                                                    <label>قائمة منسدلة</label>

                                                    <div style="display: grid; grid-template-columns: auto auto;">
                                                        <input type="text" id="name_replay_list" name="name_replay_list"
                                                            readonly class="form-control" value="">
                                                        <input type="hidden" id="reply_list_id" name="reply_list_id"
                                                            class="form-control" value="">

                                                        <a href="" style="display: none;"
                                                            class="btn btn-info btn-sm show_reply_list_new">اضافه ردرود
                                                            القائمه المسندله</a>
                                                        <button type="button" class="btn btn-sm btn-primary ml-3"
                                                            data-toggle="modal" data-target="#exampleModalBootList"><i
                                                                class="fa fa-plus"></i> اضافه جديده</button>
                                                        <!-- Modal -->

                                                    </div>
                                                </div>



                                                <div class="col button" id="button" style="display: none;">
                                                    <label>قائمة الرد تفاعلى</label>
                                                    <div style="display: grid; grid-template-columns: auto auto;">


                                                        <input type="text" id="name_replay_boot_button"
                                                            name="name_replay_boot_button" readonly class="form-control"
                                                            value="">
                                                        <input type="hidden" id="reply_boot_button_id"
                                                            name="reply_boot_button_id" class="form-control" value="">

                                                        <button type="button" class="btn btn-sm btn-primary ml-3"
                                                            data-toggle="modal" data-target="#exampleModalAddButton"><i
                                                                class="fa fa-plus"></i> اضافه جديده</button>
                                                        <a href="" style="display: none;"
                                                            class="btn btn-info btn-sm show_reply_button_new">اضافه
                                                            ردرود</a>


                                                    </div>

                                                </div>

                                                <div class="col message" id="message" style="display: none;">
                                                    <label>الرد</label>
                                                    <div style="display: grid; grid-template-columns: auto auto;">


                                                        <input type="text" id="name_replay2" name="name_replay2" readonly
                                                            class="form-control" value="">
                                                        <input type="hidden" id="reply_message_id" name="reply_message_id"
                                                            class="form-control" value="">

                                                        <button type="button" class="btn btn-sm btn-primary ml-3"
                                                            data-toggle="modal" data-target="#exampleModal"><i
                                                                class="fa fa-plus"></i> اضافه جديده</button>
                                                        <!-- Modal -->

                                                    </div>
                                                </div>


                                                <div class="col">
                                                    <label for="Name_en" class="mr-sm-2">العمليات
                                                        :</label>
                                                    <input class="btn btn-danger btn-block" data-repeater-delete
                                                        type="button" value="حذف" />
                                                </div>
                                            </div>
                                            <br>

                                        </div>

                                    </div>
                                    <br>
                                    <div class="row mt-20">
                                        <div class="col-12">
                                            <input class="btn btn-sm btn-primary" data-repeater-create type="button"
                                                value="اضافه جديده" />
                                        </div>

                                    </div>

                                </div>
                            </div>

                            <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
                                aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="exampleModalLabel">اضافه قالب رسائل مباشرة</h5>
                                            <button type="button" class="close" data-dismiss="modal"
                                                aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                        </div>
                                        <div class="modal-body">

                                            <div class="row">
                                                <div class="col">
                                                    <label>اسم الرد</label>
                                                    <input type="text" name="name_replay" class="form-control">
                                                </div>
                                            </div>

                                            <br>


                                            <div class="row">
                                                <div class="col">
                                                    <label>الرد</label>
                                                    <textarea class="form-control" rows="5" name="messages_replay"></textarea>

                                                </div>
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary"
                                                data-dismiss="modal">اغلاق</button>
                                            <button type="button" class="btn btn-primary add_new_replay">اضافه
                                                جديده</button>
                                        </div>
                                    </div>
                                </div>
                            </div>


                            @include('admin.buttonboot.bootlist')
                            @include('admin.buttonboot.bootbutton')



                            <div class="row mt-2">
                                <div class="col">
                                    <button class="btn btn-success">حفظ البيانات</button>
                                </div>
                            </div>

                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection


@section('js')
    <script src="{{ asset('path/plugins-jquery.js') }}"></script>
    <script src="{{ asset('path/custom.js') }}"></script>
    <script type="text/javascript">
        var plugin_path = '{{ asset('admin/assets/js') }}/';
    </script>
    <script>
        $(document).ready(function() {
            function updateBootList() {
                $.ajax({
                    url: '{{ route('update_list_messages') }}',
                    method: 'GET',
                    success: function(response) {

                    },
                    error: function(xhr, status, error) {

                    }
                });
            }
            $('.updatedlistBoot').click(function() {
                updateBootList();
            });

        });
    </script>


    <script>
        $(document).ready(function() {
            var maxChars = 1050;
            $('textarea[name="button_text"]').on('input', function() {
                var inputText = $(this).val();
                var remainingChars = maxChars - inputText.length;
                $('#charCount').text(remainingChars);

                if (inputText.length >= maxChars) {
                    $(this).val(inputText.substring(0, maxChars));
                    $(this).css('border', '1px solid red'); // Correctly apply border style
                    $(this).prop('disabled', true); // Use prop() to disable input
                }
            });

            $('input[name="header_text"]').on('blur', function() {
                $(this).prop('disabled', false); // Re-enable input on blur
            });
        });
    </script>

    <script>
        $(document).ready(function() {
            var maxItems = 3; // تحديد العدد الأقصى للعناصر
            $('.repeater').on('click', '[data-repeater-create]', function() {
                var repeater = $(this).closest('.repeater');
                var itemsCount = repeater.find('[data-repeater-item]').length;

                if (itemsCount >= maxItems) {

                    Swal.fire({
                        icon: 'info',
                        title: 'الحد الأقصى',
                        text: 'برجاء العلم لقد تم الوصول للحد الأقصى',
                        showConfirmButton: false,
                        timer: 1500
                    });

                    // إلغاء ربط الحدث click بعد الوصول إلى الحد الأقصى
                    $(this).off('click');
                    return false;
                }
            });
        });







        function handleAjaxResponse(selectElement) {

            var selectedType = selectElement.value;
            var row = selectElement.parentNode.parentNode;

            var listDiv = row.querySelector('.list');
            var buttonDiv = row.querySelector('.button');
            var messageDiv = row.querySelector('.message');


            if (listDiv) listDiv.style.display = 'none';
            if (buttonDiv) buttonDiv.style.display = 'none';
            if (messageDiv) messageDiv.style.display = 'none';

            if (selectedType === 'list') {
                if (listDiv) listDiv.style.display = 'block';
            } else if (selectedType === 'button') {
                if (buttonDiv) buttonDiv.style.display = 'block';
            } else if (selectedType === 'message') {
                if (messageDiv) messageDiv.style.display = 'block';
            }
        }








        function sendData(data) {
            $.ajax({
                url: '{{ route('add_new_replay_message') }}',
                method: 'POST',
                headers: {
                    "X-CSRF-TOKEN": "{{ csrf_token() }}"
                },
                data: data,

                success: function(response) {
                    $('input[name="name_replay"]').each(function(index, element) {
                        $(element).val(''); // إعادة تعيين القيمة الفارغة لحقل الاسم في كل صف
                    });

                    $('textarea[name="messages_replay"]').each(function(index, element) {
                        $(element).val('');
                    });

                    $('#exampleModal').modal('hide');


                    var repeater = $(this).closest('.repeater');
                    var itemsCount = repeater.find('[data-repeater-item]').length;

                    $('input[id="reply_message_id"]').eq(itemsCount - 1).val(response.id);
                    $('input[id="name_replay2"]').eq(itemsCount - 1).val(response.name);



                },



                error: function(xhr, status, error) {
                    console.error(error);
                }
            });
        }



        $('.add_new_replay').click(function() {
            var newName = $('input[name="name_replay"]').val();
            var messages = $('textarea[name="messages_replay"]').val();
            if (newName && messages) {
                var data = {
                    name: newName,
                    messages: messages
                };
                sendData(data);
            } else {
                alert('يجب ادخال البيانات');
            }
        });
    </script>



    <script>
        function sendDataList(data) {
            $.ajax({
                url: '{{ route('add_new_list_message') }}',
                method: 'POST',
                headers: {
                    "X-CSRF-TOKEN": "{{ csrf_token() }}"
                },
                data: data,

                success: function(response) {
                    $('input[name="name_lilst"]').each(function(index, element) {
                        $(element).val('');
                    });
                    $('input[name="header_text"]').each(function(index, element) {
                        $(element).val('');
                    });
                    $('input[name="body_text"]').each(function(index, element) {
                        $(element).val('');
                    });
                    $('input[name="footer_text"]').each(function(index, element) {
                        $(element).val('');
                    });
                    $('input[name="button_text_tow"]').each(function(index, element) {
                        $(element).val('');
                    });
                    $('input[name="section_1_title"]').each(function(index, element) {
                        $(element).val('');
                    });



                    $('#exampleModalBootList').modal('hide');


                    var repeater = $(this).closest('.repeater');
                    var itemsCount = repeater.find('[data-repeater-item]').length;
                    $('input[id="reply_list_id"]').eq(itemsCount - 1).val(response.id);
                    $('input[id="name_replay_list"]').eq(itemsCount - 1).val(response.name);

                    $('.show_reply_list_new').show().attr('href', '{{ route('listBoot.show', ':id') }}'.replace(
                        ':id', response.id)).attr('target', '_blank');


                },



                error: function(xhr, status, error) {
                    console.error(error);
                }
            });
        }


        $('.add_new_list').click(function() {

            var name_lilst = $('input[name="name_lilst"]').val();
            var header_text = $('input[name="header_text"]').val();
            var body_text = $('input[name="body_text"]').val();
            var footer_text = $('input[name="footer_text"]').val();
            var button_text_tow = $('input[name="button_text_tow"]').val();
            var section_1_title = $('input[name="section_1_title"]').val();
            if (name_lilst && header_text && body_text && footer_text && button_text_tow && section_1_title) {
                var data = {
                    name_lilst: name_lilst,
                    header_text: header_text,
                    body_text: body_text,
                    footer_text: footer_text,
                    button_text_tow: button_text_tow,
                    section_1_title: section_1_title,
                };
                sendDataList(data);
            } else {
                alert('يجب ادخال البيانات');
            }
        });
    </script>



    <script>
        function sendDataButtton(data) {
            $.ajax({
                url: '{{ route('add_new_button_message') }}',
                method: 'POST',
                headers: {
                    "X-CSRF-TOKEN": "{{ csrf_token() }}"
                },
                data: data,

                success: function(response) {
                    $('input[name="name_boot_new"]').each(function(index, element) {
                        $(element).val('');
                    });
                    $('input[textarea="button_text_boot_new"]').each(function(index, element) {
                        $(element).val('');
                    });

                    $('#exampleModalAddButton').modal('hide');


                    var repeater = $(this).closest('.repeater');
                    var itemsCount = repeater.find('[data-repeater-item]').length;
                    $('input[id="reply_boot_button_id"]').eq(itemsCount - 1).val(response.id);
                    $('input[id="name_replay_boot_button"]').eq(itemsCount - 1).val(response.name);

                    $('.show_reply_button_new').show().attr('href', '{{ route('ButtonBoot.show', ':id') }}'
                        .replace(':id', response.id)).attr('target', '_blank');


                },



                error: function(xhr, status, error) {
                    console.error(error);
                }
            });
        }


        $('.add_new_button_boot_new').click(function() {

            var name_boot_new = $('input[name="name_boot_new"]').val();
            var button_text_boot_new = $('textarea[name="button_text_boot_new"]').val();

            if (name_boot_new && button_text_boot_new) {
                var data = {
                    name_boot_new: name_boot_new,
                    button_text_boot_new: button_text_boot_new,
                };
                sendDataButtton(data);
            } else {
                alert('يجب ادخال البيانات');
            }
        });
    </script>


    <script>
        $(document).ready(function() {
            var maxChars = 1050;
            $('textarea[name="button_text_boot_new"]').on('input', function() {
                var inputText = $(this).val();
                var remainingChars = maxChars - inputText.length;
                $('#charCountbutton_text_boot_new').text(remainingChars);

                if (inputText.length >= maxChars) {
                    $(this).val(inputText.substring(0, maxChars));
                    $(this).css('border', '1px solid red'); // Correctly apply border style
                    $(this).prop('disabled', true); // Use prop() to disable input
                }
            });
        });
    </script>

    <script>
        $(document).ready(function() {
            var maxChars = 100;
            $('input[name="header_text"]').on('input', function() {
                var inputText = $(this).val();
                var remainingChars = maxChars - inputText.length;
                $('#charCountheader_text').text(remainingChars);

                if (inputText.length >= maxChars) {
                    $(this).val(inputText.substring(0, maxChars));
                    $(this).css('border', '1px solid red'); // Correctly apply border style
                    $(this).prop('disabled', true); // Use prop() to disable input
                }
            });

            $('input[name="header_text"]').on('blur', function() {
                $(this).prop('disabled', false); // Re-enable input on blur
            });
        });
    </script>




    <script>
        $(document).ready(function() {
            var charCountBodyText = 80;
            $('input[name="body_text"]').on('input', function() {
                var inputText = $(this).val();
                var remainingChars = charCountBodyText - inputText.length;
                $('#charCountBodyText').text(remainingChars);

                if (inputText.length >= charCountBodyText) {
                    $(this).val(inputText.substring(0, charCountBodyText));
                    $(this).css('border', '1px solid red'); // Correctly apply border style
                    $(this).prop('disabled', true); // Use prop() to disable input
                }
            });

            $('input[name="body_text"]').on('blur', function() {
                $(this).prop('disabled', false); // Re-enable input on blur
            });
        });
    </script>


    <script>
        $(document).ready(function() {
            var charCountFooterText = 80;
            $('input[name="footer_text"]').on('input', function() {
                var inputText = $(this).val();
                var remainingChars = charCountFooterText - inputText.length;
                $('#charCountFooterText').text(remainingChars);

                if (inputText.length >= charCountFooterText) {
                    $(this).val(inputText.substring(0, charCountFooterText));
                    $(this).css('border', '1px solid red'); // Correctly apply border style
                    $(this).prop('disabled', true); // Use prop() to disable input
                }
            });

            $('input[name="footer_text"]').on('blur', function() {
                $(this).prop('disabled', false); // Re-enable input on blur
            });
        });
    </script>



    <script>
        $(document).ready(function() {
            var charCountButtonText = 100;
            $('input[name="button_text_tow"]').on('input', function() {
                var inputText = $(this).val();
                var remainingChars = charCountButtonText - inputText.length;
                $('#charCountButtonText').text(remainingChars);

                if (inputText.length >= charCountButtonText) {
                    $(this).val(inputText.substring(0, charCountButtonText));
                    $(this).css('border', '1px solid red'); // Correctly apply border style
                    $(this).prop('disabled', true); // Use prop() to disable input
                }
            });

            $('input[name="button_text_tow"]').on('blur', function() {
                $(this).prop('disabled', false); // Re-enable input on blur
            });
        });
    </script>

    <script>
        $(document).ready(function() {
            var charCountSectionTitle = 100;
            $('input[name="section_1_title"]').on('input', function() {
                var inputText = $(this).val();
                var remainingChars = charCountSectionTitle - inputText.length;
                $('#charCountSectionTitle').text(remainingChars);

                if (inputText.length >= charCountSectionTitle) {
                    $(this).val(inputText.substring(0, charCountSectionTitle));
                    $(this).css('border', '1px solid red'); // Correctly apply border style
                    $(this).prop('disabled', true); // Use prop() to disable input
                }
            });


        });
    </script>
@endsection