@extends('layouts.admin-layout')
@section('title')
    Update Contact
@endsection
@section('content')
    <style>
        .active {
            background-color: #007BFF !important;
            color: white !important;
        }
    </style>
  
    <!-- Content Wrapper -->
    <div class="content-wrapper">
        <form action="{{ route('admin.update.services') }}" method="POST" enctype="multipart/form-data">
            {{-- <input type="hidden" name="media_collections[]" value="contact_banner_img"> --}}
            @csrf
            <!-- Weight List Main Heading Content Section -->
            <section class="content">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-12">
                            <div class="card card-box-shadow mt-5">
                                <div class="card-header">
                                    <h3 class="card-title">Services Page</h3>
                                </div>

                                <div class="card-body">
                                    <div class="row">


                                        <!-- First Input Field -->
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="heading"> Page Heading</label>
                                                <input type="text" class="form-control form__field"
                                                    value="{{ $decodedData['heading'] ?? '' }}" name="heading"
                                                    placeholder="Enter text to highlight in red">
                                            </div>
                                        </div>

                                        <!-- Second Input Field -->

                                        <div class="col-md-6">
                                            <label for="description">Page Description</label>
                                            <div class="input-group mb-2 ">
                                                <textarea class="form-control form__field" name="description" placeholder="Enter service item">{{ $decodedData['description'] ?? '' }}</textarea>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- Card Body -->




                                <div class="card-body">
                                    <div class="row">
                                        <input type="hidden" name="admin_id">

                                        <!-- First Input Field -->
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="main_heading">Heading</label>
                                                <input type="text" class="form-control form__field"
                                                    value="{{ $decodedData['main_heading'] ?? '' }}" name="main_heading"
                                                    placeholder="Enter text to highlight in red">
                                            </div>
                                        </div>

                                        <!-- Second Input Field -->

                                        <div class="col-md-12" id="service-items">
                                            <label for="service_item_1"> List</label>

                                            @if (isset($decodedData['service_items']) && is_array($decodedData['service_items']))
                                                @foreach ($decodedData['service_items'] as $key => $service_item)
                                                    <div class="input-group mb-2 service-item">
                                                        <input type="text" class="form-control form__field"
                                                            value="{{ $service_item }}" name="service_items[]"
                                                            placeholder="Enter service item">
                                                        <button type="button" class="btn btn-danger remove-item">X</button>
                                                    </div>
                                                @endforeach
                                            @endif


                                        </div>
                                        <button type="button" class="btn btn-primary mt-2" id="add-service-item">Add
                                            List</button>
                                    </div>
                                </div>


                                {{-- 1232 --}}
                                <div class="card-body">
                                    <div class="row">


                                        <!-- First Input Field -->
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="main_heading">Heading</label>
                                                <input type="text" class="form-control form__field"
                                                    value="{{ $decodedData['main_heading1'] ?? '' }}" name="main_heading1"
                                                    placeholder="Enter text to highlight in red">
                                            </div>
                                        </div>

                                        <!-- Second Input Field -->

                                        <div class="col-md-12" id="service-items1">
                                            <label for="service_item_2"> List</label>

                                            @if (isset($decodedData['service_items2']) && is_array($decodedData['service_items2']))
                                                @foreach ($decodedData['service_items2'] as $key => $service_item1)
                                                    <div class="input-group mb-2 service-item1">
                                                        <input type="text" class="form-control form__field"
                                                            value="{{ $service_item1 }}" name="service_items2[]"
                                                            placeholder="Enter service item">
                                                        <button type="button"
                                                            class="btn btn-danger remove-item1">X</button>
                                                    </div>
                                                @endforeach
                                            @endif


                                        </div>
                                        <button type="button" class="btn btn-primary mt-2" id="add-service-item1">Add
                                            List</button>
                                    </div>
                                </div>





                                {{-- 94754 --}}
                                <div class="card-body">
                                    <div class="row">


                                        <!-- First Input Field -->
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="main_heading">Heading</label>
                                                <input type="text" class="form-control form__field"
                                                    value="{{ $decodedData['main_heading2'] ?? '' }}" name="main_heading2"
                                                    placeholder="Enter text to highlight in red">
                                            </div>
                                        </div>


                                        <!-- Second Input Field -->

                                        <div class="col-md-12" id="service-items2">
                                            <label for="service_item_2"> List</label>

                                            @if (isset($decodedData['service_items3']) && is_array($decodedData['service_items3']))
                                                @foreach ($decodedData['service_items3'] as $key => $service_item2)
                                                    <div class="input-group mb-2 service-item2">
                                                        <input type="text" class="form-control form__field"
                                                            value="{{ $service_item2 }}" name="service_items3[]"
                                                            placeholder="Enter  item">
                                                        <button type="button"
                                                            class="btn btn-danger remove-item2">X</button>
                                                    </div>
                                                @endforeach
                                            @endif


                                        </div>
                                        <button type="button" class="btn btn-primary mt-2" id="add-service-item2">Add
                                            List</button>
                                    </div>
                                </div>


                                {{-- 329472390 --}}
                                <div class="card-body">
                                    <div class="row">


                                        <!-- First Input Field -->
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="main_heading">Heading</label>
                                                <input type="text" class="form-control form__field"
                                                    value="{{ $decodedData['main_heading4'] ?? '' }}" name="main_heading4"
                                                    placeholder="Enter text to highlight in red">
                                            </div>
                                        </div>

                                        <!-- Second Input Field -->

                                        <div class="col-md-12" id="service-items4">
                                            <label for="service_item_2"> List</label>

                                            @if (isset($decodedData['service_items4']) && is_array($decodedData['service_items4']))
                                                @foreach ($decodedData['service_items4'] as $key => $service_item4)
                                                    <div class="input-group mb-2 service-item2">
                                                        <input type="text" class="form-control form__field"
                                                            value="{{ $service_item4 }}" name="service_items4[]"
                                                            placeholder="Enter  item">
                                                        <button type="button"
                                                            class="btn btn-danger remove-item4">X</button>
                                                    </div>
                                                @endforeach
                                            @endif


                                        </div>
                                        <button type="button" class="btn btn-primary mt-2" id="add-service-item4">Add
                                            List</button>
                                    </div>
                                </div>


                                {{-- pricing --}}
                                <div class="card-body">
                                    <div class="row">
                                        <input type="hidden" name="admin_id">
                                        <!-- First Input Field -->
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="service_pricing">Heading</label>
                                                <input type="text" class="form-control form__field"
                                                    value="{{ $decodedData['service_pricing'] ?? '' }}"
                                                    name="service_pricing" placeholder="Enter text to highlight in red">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="service_pricing">Description</label>
                                                <textarea class="form-control form__field" name="service_description" placeholder="Enter text to highlight in red">{{ $decodedData['service_description'] ?? '' }}</textarea>
                                            </div>
                                        </div>

                                        <!-- Second Input Field -->
                                        <div class="col-md-12" id="price-items">
                                            <label for="price_items"> List</label>
                                            @if (isset($decodedData['price_items']) && is_array($decodedData['price_items']))
                                                @foreach ($decodedData['price_items'] as $key => $price_item)
                                                    <div class="input-group mb-2 price_item">
                                                        <input type="text" class="form-control form__field"
                                                            value="{{ $price_item }}" name="price_items[]"
                                                            placeholder="Enter item">
                                                        <button type="button"
                                                            class="btn btn-danger remove-item0">X</button>
                                                    </div>
                                                @endforeach
                                            @endif

                                        </div>
                                        <button type="button" class="btn btn-primary mt-2" id="add-price-item">Add
                                            List</button>

                                    </div>
                                </div>




                                {{-- Choose --}}
                                <div class="card-body">
                                    <div class="row">
                                        <input type="hidden" name="admin_id">
                                        <!-- First Input Field -->
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="service_pricing6">Heading</label>
                                                <input type="text" class="form-control form__field"
                                                    value="{{ $decodedData['service_pricing6'] ?? '' }}"
                                                    name="service_pricing6" placeholder="Enter text to highlight in red">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="service_pricing">Description</label>
                                                <textarea class="form-control form__field" name="service_description6" placeholder="Enter text to highlight in red">{{ $decodedData['service_description6'] ?? '' }}</textarea>
                                            </div>
                                        </div>

                                        <!-- Second Input Field -->
                                        <div class="col-md-12" id="items6">
                                            <label for="items6"> List</label>
                                            @if (isset($decodedData['items6']) && is_array($decodedData['items6']))
                                                @foreach ($decodedData['items6'] as $key => $item6)
                                                    <div class="input-group mb-2 items-6">
                                                        <input type="text" class="form-control form__field"
                                                            value="{{ $item6 }}" name="items6[]"
                                                            placeholder="Enter item">
                                                        <button type="button"
                                                            class="btn btn-danger remove-item6">X</button>
                                                    </div>
                                                @endforeach
                                            @endif

                                        </div>
                                        <button type="button" class="btn btn-primary mt-2" id="add-price-item6">Add
                                            List</button>

                                    </div>
                                </div>
                                <!-- /.card-body -->
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- Submit Button -->
            <div class="text-center mt-3">
                <div class="form-group">
                    <input type="submit" class="btn btn-primary btn-sm w-25" value="Update Content">
                </div>
            </div>
        </form>
    </div>


    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const serviceItemsContainer = document.getElementById("service-items");
            const addButton = document.getElementById("add-service-item");

            addButton.addEventListener("click", function() {
                const newItem = document.createElement("div");
                newItem.classList.add("input-group", "mb-2", "service-item");

                newItem.innerHTML = `
                <input type="text" class="form-control form__field" name="service_items[]" placeholder="Enter service item">
                <button type="button" class="btn btn-danger remove-item">X</button>
            `;

                serviceItemsContainer.appendChild(newItem);
            });

            serviceItemsContainer.addEventListener("click", function(event) {
                if (event.target.classList.contains("remove-item")) {
                    event.target.parentElement.remove();
                }
            });



            const add = document.getElementById("add-price-item");
            const service = document.getElementById("price-items");

            add.addEventListener("click", function() {
                const newItem = document.createElement("div");
                newItem.classList.add("input-group", "mb-2", "price-item");

                newItem.innerHTML = `
                <input type="text" class="form-control form__field" name="price_items[]" placeholder="Enter service item">
                        <button type="button" class="btn btn-danger remove-item0">X</button>
                   `;

                service.appendChild(newItem);
            });

            service.addEventListener("click", function(event) {
                if (event.target.classList.contains("remove-item0")) {
                    event.target.parentElement.remove();
                }
            });




            const add1 = document.getElementById("add-service-item1");
            const service1 = document.getElementById("service-items1");

            add1.addEventListener("click", function() {
                const newItem = document.createElement("div");
                newItem.classList.add("input-group", "mb-2", "service-item1");

                newItem.innerHTML = `
                <input type="text" class="form-control form__field" name="service_items2[]" placeholder="Enter service item">
                        <button type="button" class="btn btn-danger remove-item1">X</button>
                   `;

                service1.appendChild(newItem);
            });

            service1.addEventListener("click", function(event) {
                if (event.target.classList.contains("remove-item1")) {
                    event.target.parentElement.remove();
                }
            });


            const add2 = document.getElementById("add-service-item2");
            const service2 = document.getElementById("service-items2");

            add2.addEventListener("click", function() {
                const newItem = document.createElement("div");
                newItem.classList.add("input-group", "mb-2", "service-item2");

                newItem.innerHTML = `
                <input type="text" class="form-control form__field" name="service_items3[]" placeholder="Enter service item">
                        <button type="button" class="btn btn-danger remove-item2">X</button>
                   `;

                service2.appendChild(newItem);
            });

            service2.addEventListener("click", function(event) {
                if (event.target.classList.contains("remove-item2")) {
                    event.target.parentElement.remove();
                }
            });


            const add4 = document.getElementById("add-service-item4");
            const service4 = document.getElementById("service-items4");

            add4.addEventListener("click", function() {
                const newItem = document.createElement("div");
                newItem.classList.add("input-group", "mb-2", "service-item4");

                newItem.innerHTML = `
                <input type="text" class="form-control form__field" name="service_items4[]" placeholder="Enter service item">
                        <button type="button" class="btn btn-danger remove-item4">X</button>
                   `;

                service4.appendChild(newItem);
            });

            service4.addEventListener("click", function(event) {
                if (event.target.classList.contains("remove-item4")) {
                    event.target.parentElement.remove();
                }
            });



            const add6 = document.getElementById("add-price-item6");
            const service6 = document.getElementById("items6");

            add6.addEventListener("click", function() {
                const newItem = document.createElement("div");
                newItem.classList.add("input-group", "mb-2", "items-6");

                newItem.innerHTML = `
                <input type="text" class="form-control form__field" name="items6[]" placeholder="Enter service item">
                        <button type="button" class="btn btn-danger remove-item6">X</button>
                   `;

                service6.appendChild(newItem);
            });

            service6.addEventListener("click", function(event) {
                if (event.target.classList.contains("remove-item6")) {
                    event.target.parentElement.remove();
                }
            });
        });
    </script>

@endsection