@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('listBoot.store')}}" method="post" autocomplete="off">
                            @csrf

                            <div class="row">
                                <div class="col">
                                    <label for="name">اسم القائمة</label>
                                    <input type="text" id="name" name="name" value="{{ old('name') }}" required class="form-control mb-1">
                                    @error('name')
                                    <p class="alert alert-danger">{{$message}}</p>
                                    @enderror
                                </div>


                                <div class="col">
                                    <label>عنوان القائمه</label>
                                    <input type="text" name="header_text" value="{{old('header_text')}}" required class="form-control mb-1">
                                    <p>الأحرف المتبقية: <span id="charCount">100</span></p>
                                    @error('header_text')
                                     <p class="alert alert-danger">{{$message}}</p>
                                    @enderror
                                </div>
                            </div>

                            <br>

                            <div class="row">
                                <div class="col">
                                    <label>محتوي القائمه</label>
                                    <input type="text" name="body_text" value="{{old('body_text')}}" required class="form-control mb-1">
                                    <p>الأحرف المتبقية: <span id="charCountBodyText">85</span></p>

                                    @error('body_text')
                                     <p class="alert alert-danger">{{$message}}</p>
                                    @enderror
                                </div>

                                <div class="col">
                                    <label>نهايه القائمه</label>
                                    <input type="text" name="footer_text" value="{{old('footer_text')}}"  required class="form-control mb-1">
                                    <p>الأحرف المتبقية: <span id="charCountFooterText">80</span></p>

                                    @error('footer_text')
                                     <p class="alert alert-danger">{{$message}}</p>
                                    @enderror
                                </div>
                            </div>

                            <br>

                            <div class="row">
                                <div class="col">
                                    <label>اسم زر القائمه</label>
                                    <input type="text" name="button_text" value="{{old('button_text')}}" required class="form-control mb-1">
                                    <p>الأحرف المتبقية: <span id="charCountButtonText">100</span></p>

                                    @error('button_text')
                                     <p class="alert alert-danger">{{$message}}</p>
                                    @enderror
                                </div>
                                <div class="col">
                                    <label>العنوان بداخل القائمه</label>
                                    <input type="text" name="section_1_title" value="{{old('section_1_title')}}" required class="form-control mb-1">
                                    <p>الأحرف المتبقية: <span id="charCountSectionTitle">100</span></p>

                                    @error('section_1_title')
                                     <p class="alert alert-danger">{{$message}}</p>
                                    @enderror
                                </div>
                            </div>

                            <br>

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

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


@section('js')


    <script>
        $(document).ready(function() {
            var maxChars = 100;
            $('input[name="header_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 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"]').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"]').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
                }
            });

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