@include('Partials.sidebar')

<section class="main_content dashboard_part large_header_bg">

    @include('Partials.header')

    <div class="main_content_iner default_main_contaner_iner">

        @if ($errors->any())
            <div>
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div class="page-body">
            <div class="container-fluid">
                <div class="page-title">
                    <div class="row">
                        <div class="col-sm-6 ps-0">
                            <h3>Footer Section</h3>
                        </div>
                    </div>
                </div>
            </div>

            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        <div class="location-form" style="width: 100%">

                            <div class="location-form-header">
                                <h3>Footer Section</h3>
                            </div>
                            <div class="location-form-body">
                                <form id="home_banner_section_form" action="{{ url('/footer-section/store') }}"
                                    method="POST" enctype="multipart/form-data">
                                    @csrf
                                    <div class="row">
                                        <div class="col-xl-12 col-sm-6">
                                            <div class="form-group">
                                                <label for="Title" class="form-label">Footer Title:</label>
                                                <input type="text" id="title" name="title" required class="form-control"
                                                    value="{{ old('title', $footerSection->title ?? '') }}">
                                            </div>
                                        </div>
                                        <div class="col-xl-12 col-sm-6">
                                            <div class="form-group">
                                                <label for="Description" class="form-label">Footer Description:</label>
                                                <textarea rows="5" id="description" name="description" required
                                                    class="form-control">{{ old('description', $footerSection->description ?? '') }}</textarea>
                                            </div>
                                        </div>
                                        <div class="col-xl-12 col-sm-6">
                                            <div class="form-group">
                                                <label for="Sub Title" class="form-label">Sub Title:</label>
                                                <input type="text" id="sub_title" name="sub_title" required
                                                    class="form-control"
                                                    value="{{ old('sub_title', $footerSection->sub_title ?? '') }}">
                                            </div>
                                        </div>
                                        <div class="col-xl-12 col-sm-6">
                                            <div class="form-group">
                                                <label for="Address" class="form-label">Address:</label>
                                                <textarea rows="5" id="address" name="address" required
                                                    class="form-control">{{ old('address', $footerSection->address ?? '') }}</textarea>
                                            </div>
                                        </div>

                                        <div class="col-xl-12 col-sm-6">
                                            <label for="Phone" class="form-label">Phone Number:</label>
                                            <div id="phone-container">
                                                @php
                                                    $slideContents = json_decode($footerSection->phone, true);                                                   
                                                @endphp
                                                @if (!empty($slideContents) && count($slideContents) > 0)
                                                    @foreach ($slideContents as $index => $slides_content)
                                                        <div class="border-box phone-section"
                                                            id="phone-">
                                                            <div class="row">
                                                                <div class="col-xl-12 col-sm-6">
                                                                    <div class="form-group">
                                                                        <label for="phone-"
                                                                            class="form-label">Phone
                                                                            Number:</label>
                                                                        <input type="text"
                                                                            id="phone-"
                                                                            name="phone-" required
                                                                            class="form-control"
                                                                            value="{{ old('phone', $slides_content ?? '')}}">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <button type="button" class="btn btn-danger remove-slide"
                                                                onclick="removePhone(this)">Remove</button>
                                                        </div>
                                                    @endforeach
                                                @else
                                                    <div class="border-box phone-section" id="phone-0">
                                                        <div class="row">
                                                            <div class="col-xl-12 col-sm-6">
                                                                <div class="form-group">
                                                                    <label for="phone-0" class="form-label">Phone
                                                                        Number:</label>
                                                                    <input type="text" id="phone-0" name="phone-0" required
                                                                        class="form-control" value="">
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <button type="button" class="btn btn-danger remove-slide"
                                                            onclick="removePhone(this)">Remove</button>
                                                    </div>
                                                @endif
                                            </div>
                                            <button type="button" class="btn btn-success" id="add-new">Add
                                                New</button><br /><br />
                                        </div>

                                        <div class="col-xl-12 col-sm-6">
                                            <div class="form-group">
                                                <label for="Mail ID" class="form-label">Mail ID:</label>
                                                <input type="text" id="mail_id" name="mail_id" required
                                                    class="form-control"
                                                    value="{{ old('mail_id', $footerSection->mailid ?? '') }}">
                                            </div>
                                        </div>

                                    </div>

                                    <button class="btn btn-primary"
                                        type="submit">{{ isset($footerSection) ? 'Update' : 'Submit' }}</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</section>

<script>

    window.removePhone = function (button) {
        button.closest('.phone-section').remove();
    };

    jQuery(document).ready(function ($) {

        let phoneIndex = {{ isset($slideContents) && count($slideContents) > 0 ? count($slideContents) : 1 }};

        document.getElementById('add-new').addEventListener('click', function () {
            const phoneContainer = document.getElementById('phone-container');
            const newPhone = document.createElement('div');

            newPhone.className = 'border-box phone-section';
            newPhone.id = `phone-${phoneIndex}`;

            newPhone.innerHTML = `
                        <div class="row">
                                                        <div class="col-xl-12 col-sm-6">
                                                            <div class="form-group">
                                                                <label for="phone-${phoneIndex}" class="form-label">Phone Number:</label>
                                                                <input type="text" id="phone-${phoneIndex}"
                                                                    name="phone-${phoneIndex}" required class="form-control">
                                                            </div>
                                                        </div>
                                                    </div>
                
                <button type="button" class="btn btn-danger remove-slide"
                                                                onclick="removePhone(this)">Remove</button>
    `;

            phoneContainer.appendChild(newPhone);
            addSlideValidation(phoneIndex);
            phoneIndex++;

            function addSlideValidation(index) {
                // Check that the element exists before applying validation
                $(`#phone-${index}`).rules("add", {
                    required: true,
                    messages: { required: "Please enter Phone Number" }
                });

            }
        });





        $('#home_banner_section_form').validate({
            rules: {
                title: {
                    required: true
                },
                description: {
                    required: true
                },
                sub_title: {
                    required: true
                },
                address: {
                    required: true
                },
                mail_id: {
                    required: true
                },
            },
            messages: {
                title: {
                    required: "Please enter Title"
                },
                description: {
                    required: "Please enter Description"
                },
                sub_title: {
                    required: "Please enter Sub Title"
                },
                address: {
                    required: "Please enter Address"
                },
                mail_id: {
                    required: "Please enter Mail Id"
                },
            },
            errorPlacement: function (error, element) {

                var placement = $(element).attr("name");
                error.insertAfter(element);
            },
            submitHandler: function (form) {
                submitForm();
            }

        });

        // Function to add validation rules to phone input fields
        function addSlideValidation(index) {
            // Add validation rule for the new phone input
            $(`#phone-${index}`).rules("add", {
                required: true,
                messages: {
                    required: "Please enter Phone Number"
                }
            });
           
        }

        // Apply validation to existing phone inputs
        const existingSlideCount = {{ count($slideContents) }};
        for (let i = 0; i < existingSlideCount; i++) {
            addSlideValidation(i);
        }
    });


</script>

@include('Partials.footer')