@extends('layouts.app')

@section('content')
    <ul class="nav nav-pills nav-fill" id="formTabs" role="tablist">
        <li class="nav-item">
            <button class="nav-link active text-uppercase fw-bold" data-bs-toggle="tab" data-bs-target="#form1" type="button">
                Hero
            </button>
        </li>
        <li class="nav-item">
            <button class="nav-link text-uppercase fw-bold" data-bs-toggle="tab" data-bs-target="#form2" type="button">
                About
            </button>
        </li>
        <li class="nav-item">
            <button class="nav-link text-uppercase fw-bold" data-bs-toggle="tab" data-bs-target="#form3" type="button">
                Services
            </button>
        </li>
        <li class="nav-item">
            <button class="nav-link text-uppercase fw-bold" data-bs-toggle="tab" data-bs-target="#form4" type="button">
                Why Choose Us
            </button>
        </li>
        <li class="nav-item">
            <button class="nav-link text-uppercase fw-bold" data-bs-toggle="tab" data-bs-target="#form5" type="button">
                Get in Touch
            </button>
        </li>
    </ul>
    <div class="tab-content mt-3">
        <!-- Form 1 -->
        <div class="tab-pane fade show active" id="form1">
            <form action="{{ route('hero.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="type" value="hero">
                <div class="mb-3">
                    <label class="form-label text-uppercase">Sub title</label>
                    <input type="text" name="sub_title" class="form-control" value="{{ $hero->sub_title ?? '' }}">
                </div>
                <div class="mb-3">
                    <label class="form-label text-uppercase">First Title</label>
                    <input type="text" name="title" class="form-control" value="{{ $hero->title ?? '' }}">
                </div>
                <div class="mb-3">
                    <label class="form-label text-uppercase">Second Title</label>
                    <input type="text" name="title_2" class="form-control" value="{{ $hero->title_2 ?? '' }}">
                </div>
                <div class="mb-3">
                    <label class="form-label text-uppercase">Button text</label>
                    <input type="text" name="button_text" class="form-control" value="{{ $hero->button_text ?? '' }}">
                </div>
                <div class="mb-3">
                    <label class="form-label text-uppercase">Button link</label>
                    <input type="text" name="button_link" class="form-control" value="{{ $hero->button_link ?? '' }}">
                </div>
                <div class="mb-3">
                    <label class="form-label text-uppercase">Image</label>
                    <input type="file" name="image" class="form-control">
                    <input type="hidden" name="old_hero_image" value="{{ optional($hero)->image }}">
                    <div class="mt-2">
                        <img id="heroImagePreview" src="{{ $hero->image ?? '' }}" style="max-height: 150px;">
                    </div>
                </div>
                <button class="btn btn-primary">Submit</button>
            </form>
        </div>
        <!-- Form 2 -->
        <div class="tab-pane fade" id="form2">
            <form action="{{ route('about.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="type" value="about">
                <div class="mb-3">
                    <label>Sub title</label>
                    <input type="text" name="sub_title" class="form-control" value="{{ $about->sub_title ?? '' }}">
                </div>
                <div class="mb-3">
                    <label>Title</label>
                    <input type="text" name="title" class="form-control" value="{{ $about->title ?? '' }}">
                </div>
                <div class="mb-3">
                    <label>Description 1</label>
                    <textarea name="description_1" class="form-control">{{ $about->description_1 ?? '' }}</textarea>
                </div>
                <div class="mb-3">
                    <label>Description 2</label>
                    <textarea name="description_2" class="form-control">{{ $about->description_2 ?? '' }}</textarea>
                </div>
                <div class="mb-3">
                    <label>Button text</label>
                    <input type="text" name="button_text" class="form-control"
                        value="{{ $about->button_text ?? '' }}">
                </div>
                <div class="mb-3">
                    <label>Button link</label>
                    <input type="text" name="button_link" class="form-control"
                        value="{{ $about->button_link ?? '' }}">
                </div>
                <div class="mb-3">
                    <label>Image</label>
                    <input type="file" name="image" class="form-control">
                    <input type="hidden" name="old_about_image" value="{{ optional($about)->image }}">
                    <div class="mt-2">
                        <img id="aboutImagePreview" src="{{ $about->image ?? '' }}" style="max-height: 150px; ">
                    </div>
                </div>
                <button class="btn btn-primary">Submit</button>
            </form>
        </div>

        {{-- Form 3 --}}
        <div class="tab-pane fade" id="form3">
            <form action="{{ route('service.store') }}" method="POST" enctype="multipart/form-data">
                @csrf

                <div class="row">

                    <!-- MAIN SECTION -->
                    <div class="col-md-12 mb-3">
                        <h4>Main Section</h4>
                    </div>

                    <div class="col-md-6 mb-3">
                        <label>Section Sub Title</label>
                        <input type="text" name="section_sub_title" class="form-control"
                            value="{{ $service->section_sub_title ?? '' }}">
                    </div>

                    <div class="col-md-6 mb-3">
                        <label>Section Title</label>
                        <input type="text" name="section_title" class="form-control"
                            value="{{ $service->section_title ?? '' }}">
                    </div>

                    <!-- ============ SERVICE 1 ============ -->
                    <div class="col-md-6 mb-4 border p-3">
                        <h5>Service 1</h5>

                        <label>Icon</label>
                        <input type="file" name="service_1_icon" class="form-control mb-2" id="service_1_icon">

                        <input type="hidden" name="old_service_1_icon" value="{{ $service->service_1_icon ?? '' }}">

                        @if (!empty($service->service_1_icon))
                            <img id="preview_service_1_icon" src="{{ asset('storage/' . $service->service_1_icon) }}"
                                style="max-height:100px;" class="mb-2">
                        @endif


                        <label>Image</label>
                        <input type="file" name="section_1_image" class="form-control mb-2" id="section_1_image">

                        <input type="hidden" name="old_section_1_image" value="{{ $service->section_1_image ?? '' }}">

                        @if (!empty($service->section_1_image))
                            <img id="preview_section_1_image" src="{{ asset('storage/' . $service->section_1_image) }}"
                                style="max-height:100px;" class="mb-2">
                        @endif
                        <label>Title</label>
                        <input type="text" name="service_1_title" class="form-control mb-2"
                            value="{{ $service->service_1_title ?? '' }}">
                        <label>Item 1</label>
                        <input type="text" name="section_1_item_1" class="form-control mb-2"
                            value="{{ $service->section_1_item_1 ?? '' }}">

                        <label>Item 2</label>
                        <input type="text" name="section_1_item_2" class="form-control mb-2"
                            value="{{ $service->section_1_item_2 ?? '' }}">

                        <label>Item 3</label>
                        <input type="text" name="section_1_item_3" class="form-control mb-2"
                            value="{{ $service->section_1_item_3 ?? '' }}">

                        <label>Item 4</label>
                        <input type="text" name="section_1_item_4" class="form-control mb-2"
                            value="{{ $service->section_1_item_4 ?? '' }}">

                        <label>Item 5</label>
                        <input type="text" name="section_1_item_5" class="form-control mb-2"
                            value="{{ $service->section_1_item_5 ?? '' }}">
                    </div>

                    <!-- ============ SERVICE 2 ============ -->
                    <div class="col-md-6 mb-4 border p-3">
                        <h5>Service 2</h5>

                        <label>Icon</label>
                        <input type="file" name="service_2_icon" class="form-control mb-2" id="service_2_icon">

                        <input type="hidden" name="old_service_2_icon" value="{{ $service->service_2_icon ?? '' }}">

                        @if (!empty($service->service_2_icon))
                            <img id="preview_service_2_icon" src="{{ asset('storage/' . $service->service_2_icon) }}"
                                style="max-height:100px;" class="mb-2">
                        @endif


                        <label>Image</label>
                        <input type="file" name="section_2_image" class="form-control mb-2" id="section_2_image">

                        <input type="hidden" name="old_section_2_image" value="{{ $service->section_2_image ?? '' }}">

                        @if (!empty($service->section_2_image))
                            <img id="preview_section_2_image" src="{{ asset('storage/' . $service->section_2_image) }}"
                                style="max-height:100px;" class="mb-2">
                        @endif
                        <label>Title</label>
                        <input type="text" name="service_2_title" class="form-control mb-2"
                            value="{{ $service->service_2_title ?? '' }}">
                        <label>Item 1</label>
                        <input type="text" name="section_2_item_1" class="form-control mb-2"
                            value="{{ $service->section_2_item_1 ?? '' }}">

                        <label>Item 2</label>
                        <input type="text" name="section_2_item_2" class="form-control mb-2"
                            value="{{ $service->section_2_item_2 ?? '' }}">

                        <label>Item 3</label>
                        <input type="text" name="section_2_item_3" class="form-control mb-2"
                            value="{{ $service->section_2_item_3 ?? '' }}">

                        <label>Item 4</label>
                        <input type="text" name="section_2_item_4" class="form-control mb-2"
                            value="{{ $service->section_2_item_4 ?? '' }}">
                    </div>

                    <!-- ============ SERVICE 3–6 (same pattern shortened) ============ -->
                    <div class="col-md-6 mb-4 border p-3">
                        <h5>Service 3</h5>

                        <label>Icon</label>
                        <input type="file" name="service_3_icon" class="form-control mb-2">

                        <input type="hidden" name="old_service_3_icon" value="{{ $service->service_3_icon ?? '' }}">

                        @if (!empty($service->service_3_icon))
                            <img src="{{ asset('storage/' . $service->service_3_icon) }}" style="max-height:100px;"
                                class="mb-2">
                        @endif


                        <label>Image</label>
                        <input type="file" name="section_3_image" class="form-control mb-2">

                        <input type="hidden" name="old_section_3_image" value="{{ $service->section_3_image ?? '' }}">

                        @if (!empty($service->section_3_image))
                            <img src="{{ asset('storage/' . $service->section_3_image) }}" style="max-height:100px;"
                                class="mb-2">
                        @endif


                        <label>Title</label>
                        <input type="text" name="service_3_title" class="form-control mb-2"
                            value="{{ $service->service_3_title ?? '' }}">

                        <label>Item 1</label>
                        <input type="text" name="section_3_item_1" class="form-control mb-2"
                            value="{{ $service->section_3_item_1 ?? '' }}">

                        <label>Item 2</label>
                        <input type="text" name="section_3_item_2" class="form-control mb-2"
                            value="{{ $service->section_3_item_2 ?? '' }}">

                        <label>Item 3</label>
                        <input type="text" name="section_3_item_3" class="form-control mb-2"
                            value="{{ $service->section_3_item_3 ?? '' }}">

                        <label>Item 4</label>
                        <input type="text" name="section_3_item_4" class="form-control mb-2"
                            value="{{ $service->section_3_item_4 ?? '' }}">
                    </div>
                    <div class="col-md-6 mb-4 border p-3">
                        <h5>Service 4</h5>

                        <label>Icon</label>
                        <input type="file" name="service_4_icon" class="form-control mb-2">

                        <input type="hidden" name="old_service_4_icon" value="{{ $service->service_4_icon ?? '' }}">

                        @if (!empty($service->service_4_icon))
                            <img src="{{ asset('storage/' . $service->service_4_icon) }}" style="max-height:100px;"
                                class="mb-2">
                        @endif


                        <label>Image</label>
                        <input type="file" name="section_4_image" class="form-control mb-2">

                        <input type="hidden" name="old_section_4_image" value="{{ $service->section_4_image ?? '' }}">

                        @if (!empty($service->section_4_image))
                            <img src="{{ asset('storage/' . $service->section_4_image) }}" style="max-height:100px;"
                                class="mb-2">
                        @endif


                        <label>Title</label>
                        <input type="text" name="service_4_title" class="form-control mb-2"
                            value="{{ $service->service_4_title ?? '' }}">

                        <label>Item 1</label>
                        <input type="text" name="section_4_item_1" class="form-control mb-2"
                            value="{{ $service->section_4_item_1 ?? '' }}">

                        <label>Item 2</label>
                        <input type="text" name="section_4_item_2" class="form-control mb-2"
                            value="{{ $service->section_4_item_2 ?? '' }}">

                        <label>Item 3</label>
                        <input type="text" name="section_4_item_3" class="form-control mb-2"
                            value="{{ $service->section_4_item_3 ?? '' }}">

                        <label>Item 4</label>
                        <input type="text" name="section_4_item_4" class="form-control mb-2"
                            value="{{ $service->section_4_item_4 ?? '' }}">
                    </div>
                    <div class="col-md-6 mb-4 border p-3">
                        <h5>Service 5</h5>

                        <label>Icon</label>
                        <input type="file" name="service_5_icon" class="form-control mb-2">

                        <input type="hidden" name="old_service_5_icon" value="{{ $service->service_5_icon ?? '' }}">

                        @if (!empty($service->service_5_icon))
                            <img src="{{ asset('storage/' . $service->service_5_icon) }}" style="max-height:100px;"
                                class="mb-2">
                        @endif


                        <label>Image</label>
                        <input type="file" name="section_5_image" class="form-control mb-2">

                        <input type="hidden" name="old_section_5_image" value="{{ $service->section_5_image ?? '' }}">

                        @if (!empty($service->section_5_image))
                            <img src="{{ asset('storage/' . $service->section_5_image) }}" style="max-height:100px;"
                                class="mb-2">
                        @endif


                        <label>Title</label>
                        <input type="text" name="service_5_title" class="form-control mb-2"
                            value="{{ $service->service_5_title ?? '' }}">

                        <label>Item 1</label>
                        <input type="text" name="section_5_item_1" class="form-control mb-2"
                            value="{{ $service->section_5_item_1 ?? '' }}">

                        <label>Item 2</label>
                        <input type="text" name="section_5_item_2" class="form-control mb-2"
                            value="{{ $service->section_5_item_2 ?? '' }}">

                        <label>Item 3</label>
                        <input type="text" name="section_5_item_3" class="form-control mb-2"
                            value="{{ $service->section_5_item_3 ?? '' }}">

                        <label>Item 4</label>
                        <input type="text" name="section_5_item_4" class="form-control mb-2"
                            value="{{ $service->section_5_item_4 ?? '' }}">
                    </div>
                    <div class="col-md-6 mb-4 border p-3">
                        <h5>Service 6</h5>

                        <label>Icon</label>
                        <input type="file" name="service_6_icon" class="form-control mb-2">

                        <input type="hidden" name="old_service_6_icon" value="{{ $service->service_6_icon ?? '' }}">

                        @if (!empty($service->service_6_icon))
                            <img src="{{ asset('storage/' . $service->service_6_icon) }}" style="max-height:100px;"
                                class="mb-2">
                        @endif


                        <label>Image</label>
                        <input type="file" name="section_6_image" class="form-control mb-2">

                        <input type="hidden" name="old_section_6_image" value="{{ $service->section_6_image ?? '' }}">

                        @if (!empty($service->section_6_image))
                            <img src="{{ asset('storage/' . $service->section_6_image) }}" style="max-height:100px;"
                                class="mb-2">
                        @endif


                        <label>Title</label>
                        <input type="text" name="service_6_title" class="form-control mb-2"
                            value="{{ $service->service_6_title ?? '' }}">

                        <label>Item 1</label>
                        <input type="text" name="section_6_item_1" class="form-control mb-2"
                            value="{{ $service->section_6_item_1 ?? '' }}">

                        <label>Item 2</label>
                        <input type="text" name="section_6_item_2" class="form-control mb-2"
                            value="{{ $service->section_6_item_2 ?? '' }}">

                        <label>Item 3</label>
                        <input type="text" name="section_6_item_3" class="form-control mb-2"
                            value="{{ $service->section_6_item_3 ?? '' }}">

                        <label>Item 4</label>
                        <input type="text" name="section_6_item_4" class="form-control mb-2"
                            value="{{ $service->section_6_item_4 ?? '' }}">
                    </div>

                    <!-- SUBMIT -->
                    <div class="col-md-12 mt-3">
                        <button type="submit" class="btn btn-primary">
                            Save Services
                        </button>
                    </div>

                </div>
            </form>
        </div>
        {{-- Form 4 --}}
        <div class="tab-pane fade" id="form4">
            <form action="{{ route('whyChooseUs.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <!-- Section Info -->
                <div class="mb-3">
                    <label>Sub Title</label>
                    <input type="text" name="sub_title" class="form-control"
                        value="{{ $whyChooseUs->sub_title ?? '' }}">
                </div>

                <div class="mb-3">
                    <label>Title</label>
                    <input type="text" name="title" class="form-control" value="{{ $whyChooseUs->title ?? '' }}">
                </div>

                <div class="mb-3">
                    <label>Description</label>
                    <textarea name="description" class="form-control">{{ $whyChooseUs->description ?? '' }}</textarea>
                </div>

                <div class="row g-4">
                    <div class="col-md-12">
                        <h3>Edit Cards</h3>
                    </div>
                    <div class="col-md-6">
                        <!-- CARD 1 -->
                        <div class="card p-3">
                            <h5>Card 1</h5>
                            <div class="mb-3">
                                <label for="">Title</label>
                                <input type="text" name="card_1_title" class="form-control" placeholder="Title"
                                    value="{{ $whyChooseUs->card_1_title ?? '' }}">
                            </div>
                            <div class="mb-3">
                                <label for="">Description</label>
                                <textarea name="card_1_desc" class="form-control" placeholder="Description">{{ $whyChooseUs->card_1_desc ?? '' }}</textarea>
                            </div>
                            <div class="mb-3">
                                <label for="">Counter</label>
                                <input type="text" name="card_1_counter" class="form-control" placeholder="Counter"
                                    value="{{ $whyChooseUs->card_1_counter ?? '' }}">
                            </div>
                            <div class="mb-3">
                                <label for="">Counter Title</label>
                                <input type="text" name="card_1_counter_title" class="form-control"
                                    placeholder="Counter Title" value="{{ $whyChooseUs->card_1_counter_title ?? '' }}">
                            </div>
                        </div>

                    </div>
                    <div class="col-md-6">
                        <!-- CARD 2 -->
                        <div class = "card p-3">
                            <h5>Card 2</h5>
                            <div class="mb-3">
                                <label for="">Title</label>
                                <input type="text" name="card_2_title" class="form-control"
                                    value="{{ $whyChooseUs->card_2_title ?? '' }}" placeholder="Title">
                            </div>
                            <div class="mb-3">
                                <label for="">Description</label>
                                <textarea name="card_2_desc" class="form-control">{{ $whyChooseUs->card_2_desc ?? '' }}</textarea>
                            </div>
                            <div class="mb-3">
                                <label for="">Counter</label>

                                <input type="text" name="card_2_counter" class="form-control"
                                    value="{{ $whyChooseUs->card_2_counter ?? '' }}">
                            </div>
                            <div class="mb-3">
                                <label for="">Counter Title</label>

                                <input type="text" name="card_2_counter_title" class="form-control"
                                    value="{{ $whyChooseUs->card_2_counter_title ?? '' }}">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card p-3">
                            <h5>Card 3</h5>
                            <div class="mb-3">
                                <label for="">Title</label>
                                <input type="text" name="card_3_title" class="form-control"
                                    value="{{ $whyChooseUs->card_3_title ?? '' }}">
                            </div>
                            <div class="mb-3">
                                <label for="">Description</label>
                                <textarea name="card_3_desc" class="form-control">{{ $whyChooseUs->card_3_desc ?? '' }}</textarea>
                            </div>
                            <div class="mb-3">
                                <label for="">Counter</label>

                                <input type="text" name="card_3_counter" class="form-control"
                                    value="{{ $whyChooseUs->card_3_counter ?? '' }}">
                            </div>
                            <div class="mb-3">
                                <label for="">Counter Title</label>

                                <input type="text" name="card_3_counter_title" class="form-control"
                                    value="{{ $whyChooseUs->card_3_counter_title ?? '' }}">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card p-3">
                            <h5>Card 4</h5>
                            <div class="mb-3">
                                <label for="">Title</label>
                                <input type="text" name="card_4_title" class="form-control"
                                    value="{{ $whyChooseUs->card_4_title ?? '' }}">
                            </div>
                            <div class="mb-3">
                                <label for="">Description</label>
                                <textarea name="card_4_desc" class="form-control">{{ $whyChooseUs->card_4_desc ?? '' }}</textarea>
                            </div>
                            <div class="mb-3">
                                <label for="">Counter</label>

                                <input type="text" name="card_4_counter" class="form-control"
                                    value="{{ $whyChooseUs->card_4_counter ?? '' }}">
                            </div>
                            <div class="mb-3">
                                <label for="">Counter Title</label>

                                <input type="text" name="card_4_counter_title" class="form-control"
                                    value="{{ $whyChooseUs->card_4_counter_title ?? '' }}">
                            </div>
                        </div>

                    </div>
                </div>
                <button type="submit" class="btn btn-primary mt-3">Save</button>

            </form>
        </div>
        {{-- Form 5 --}}
        <div class="tab-pane fade" id="form5">
            <form action="{{ route('getInTouch.store') }}" method="POST" enctype="multipart/form-data">
                @csrf

                <!-- Section Info -->
                <div class="mb-3">
                    <label>Section Sub Title</label>
                    <input type="text" name="section_sub_title" class="form-control"
                        value="{{ $getInTouch->section_sub_title ?? '' }}">
                </div>

                <div class="mb-3">
                    <label>Section Title</label>
                    <input type="text" name="section_title" class="form-control"
                        value="{{ $getInTouch->section_title ?? '' }}">
                </div>

                <hr>

                <!-- Form Info -->
                <div class="mb-3">
                    <label>Form Sub Title</label>
                    <input type="text" name="form_sub_title" class="form-control"
                        value="{{ $getInTouch->form_sub_title ?? '' }}">
                </div>

                <div class="mb-3">
                    <label>Form Title</label>
                    <input type="text" name="form_title" class="form-control"
                        value="{{ $getInTouch->form_title ?? '' }}">
                </div>

                <hr>

                <!-- Image -->
                <div class="mb-3">
                    <label>Image</label>

                    <input type="file" name="image" class="form-control" id="getInTouchImageInput">

                    <!-- keep old image -->
                    <input type="hidden" name="old_image" value="{{ optional($getInTouch)->image }}">

                    <div class="mt-2">
                        <img id="getInTouchImagePreview" src="{{ optional($getInTouch)->image }}"
                            style="max-height: 150px; {{ optional($getInTouch)->image ? '' : 'display:none;' }}">
                    </div>
                </div>

                <button type="submit" class="btn btn-primary">Save</button>
            </form>

        </div>
    </div>




    <script>
        document.getElementById('heroImageInput').addEventListener('change', function(e) {
            const file = e.target.files[0];
            const preview = document.getElementById('heroImagePreview');

            if (file) {
                preview.src = URL.createObjectURL(file);
                preview.style.display = 'block';
            }
        });
    </script>
    <script>
        document.getElementById('aboutImageInput').addEventListener('change', function(e) {
            const file = e.target.files[0];
            const preview = document.getElementById('aboutImagePreview');

            if (file) {
                preview.src = URL.createObjectURL(file);
                preview.style.display = 'block';
            }
        });
    </script>
    <script>
        document.getElementById('getInTouchImagePreview').addEventListener('change', function(e) {
            const file = e.target.files[0];
            const preview = document.getElementById('getInTouchImagePreview');

            if (file) {
                preview.src = URL.createObjectURL(file);
                preview.style.display = 'block';
            }
        });
    </script>
    <script>
        function bindPreview(inputId, imgId) {
            const input = document.getElementById(inputId);
            const img = document.getElementById(imgId);

            if (!input || !img) return;

            input.addEventListener('change', function() {
                const file = this.files[0];

                if (file) {
                    img.src = URL.createObjectURL(file);
                    img.style.display = 'block';
                }
            });
        }

        // Bind all 6 services
        for (let i = 1; i <= 6; i++) {
            bindPreview(`service_${i}_icon`, `preview_service_${i}_icon`);
        }
    </script>
@endsection