@extends('layouts.app')
@section('content')
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0" style="font-size: 2.5rem; color: #333; font-weight: bold;">Home Page Details</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="#" style="color: #666;">Home</a></li>
                        <li class="breadcrumb-item active" aria-current="page" style="color: #333; font-weight: bold;">
                            Dashboard
                        </li>
                    </ol>
                </div>
            </div>
{{--            <a href="{{ route('admin.contactFormupdate') }}">Delete</a>--}}
            <form action="{{ route('admin.contactForm') }}" method="post" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="slug" value="contact">
                <div id="duplicated-container" class="show-box">
                    @php
                        $decodedContent = json_decode($existingContent['content'], true);
                    @endphp

                    @foreach ($decodedContent['phone'] as $index => $phone)
                        <div class="form-group variation-box">
                            <div class="row">
                                <!-- Phone -->
                                <div class="col-3">
                                    <div class="col-lg-12">
                                        <div class="left-area">
                                            <p class="m-0">{{ __('Location Heading') }}</p>
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <input type="text" class="form-control" name="location_heading[]" value="{{ $decodedContent['location_heading'][$index] ?? '' }}" placeholder="Location Heading">
                                    </div>
                                </div>
                                <div class="col-3">
                                    <div class="col-lg-12">
                                        <div class="left-area">
                                            <p class="m-0">{{ __('Phone') }}</p>
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <input type="text" class="form-control" name="phone[]" value="{{ $phone }}" placeholder="Phone">
                                    </div>
                                </div>

                                <!-- Address -->
                                <div class="col-3">
                                    <div class="col-lg-12">
                                        <div class="left-area">
                                            <p class="m-0">{{ __('Address') }}</p>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-9 pr-0">
                                            <input type="text" class="form-control" name="address[]" value="{{ $decodedContent['address'][$index] ?? '' }}" placeholder="Address">
                                        </div>
                                    </div>
                                </div>

                                <!-- Location Heading -->


                                <!-- Google Map Link -->
                                <div class="col-3">
                                    <div class="col-lg-12">
                                        <div class="left-area">
                                            <p class="m-0">{{ __('Google Map Link') }}</p>
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <input type="text" class="form-control" name="map_link[]" value="{{ $decodedContent['map_link'][$index] ?? '' }}" placeholder="Map Link">
                                    </div>
                                </div>
                            </div>

                            <div class="col-1"></div>

                            <div class="col-1 d-flex justify-content-center align-items-center">
                                <button type="button" class="btn btn-danger mt-4 minus-variation" style="display: {{ $index == 0 ? 'none' : 'block' }}"><i class="fas fa-minus"></i></button>
                                <button type="button" class="btn btn-primary mt-4 add-variation" style="display: {{ $index == 0 ? 'block' : 'none' }}"><i class="fas fa-plus"></i></button>
                            </div>
                        </div>
                    @endforeach
                </div>
                <button type="submit" class="btn btn-success">Submit</button>
            </form>

            <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

            <script>
                $(document).ready(function () {
                    // Event delegation for plus buttons
                    $("#duplicated-container").on("click", ".add-variation", function () {
                        var clone = $(".form-group.variation-box:first").clone(true);

                        clone.find("input[type=text]").val("");
                        clone.find(".minus-variation").show();
                        clone.find(".add-variation").hide();

                        $("#duplicated-container").append(clone);
                    });

                    // Event delegation for minus buttons
                    $("#duplicated-container").on("click", ".minus-variation", function () {
                        $(this).closest(".form-group.variation-box").remove();
                    });
                });
            </script>

@endsection