@extends('layouts.master')
@section('title')
    Services
@endsection

@section('css')
    <script src="{{asset('custom_js/upload-image.js')}}"></script>
@endsection

@section('content')
    @section('content')
    @component('components.breadcrumb')
    @slot('li_1')
        Services
    @endslot
    @slot('title')
        Services
    @endslot
    @endcomponent

    <div class="card info-card pt-5 ps-3">
        <div class="card-body">
            <form action="{{ route('services.update', $service->id) }}" method="post" enctype="multipart/form-data">
                @csrf

                 <!-- Existing hidden inputs for old images -->
                <input type="hidden" name="old_img_service_images" value="{{ json_encode($serviceImages) }}">

                <input type="hidden" name="old_img_banner_image" value="{{ $service->banner_image }}">
                <input type="hidden" name="old_img_service2_image" value="{{ $service->service2_image }}">

                <div class="row">
                    <div class="col-12 mb-3">
                        <div class="card">
                            <div class="card-body">
                                <img src="{{ asset('uploads/services/'.$service->banner_image) }}" alt="banner_image" class="d-block rounded" width="150" height="90" id="uploadedAvatar" />
                                <br>
                                <div class="form-group">
                                    <label for="upload" class="btn btn-primary me-2 mb-2" tabindex="0">
                                        <span class="d-none d-sm-block">Upload Image Here</span>
                                        <i class="bx bx-upload d-block d-sm-none"></i>
                                        <input class="form-control account-file-input" type="file" name="banner_image" id="upload" hidden>
                                    </label>
                                    <button type="button" class="btn btn-outline-secondary account-image-reset mb-2">
                                        <i class="bx bx-reset d-block d-sm-none"></i>
                                        <span class="d-none d-sm-block">Reset</span>
                                    </button>
                                </div>
                                <span class="text text-info" style="font-size: 11px">The image is preferred to be 2418 x 1340</span>
                                @error('banner_image')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="col-6 mb-3">
                        <label for="banner_title" class="form-label">Banner Title</label>
                        <input type="text" class="form-control" name="banner_title" value="{{ old('banner_title', $service->banner_title) }}" />
                        @error('banner_title')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="col-6 mb-3">
                        <label for="banner_subtitle" class="form-label">Banner Sub Title</label>
                        <input type="text" class="form-control" name="banner_subtitle" value="{{ old('banner_subtitle', $service->banner_subtitle) }}" />
                        @error('banner_subtitle')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="col-6 mb-3">
                        <label for="banner_service_title" class="form-label">Banner Service Title</label>
                        <input type="text" class="form-control" name="banner_service_title" value="{{ old('banner_service_title', $service->banner_service_title) }}" />
                        @error('banner_service_title')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="col-6 mb-3">
                        <label for="banner_service_slogan" class="form-label">Banner Service Slogan</label>
                        <input type="text" class="form-control" name="banner_service_slogan" value="{{ old('banner_service_slogan', $service->banner_service_slogan) }}" />
                        @error('banner_service_slogan')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                    @if($service->id != 1)
                        <hr>

                        <div class="col-12 mb-3">
                            <div class="card">
                                <div class="card-body">
                                    <img src="{{ asset('uploads/services/'.$service->service2_image) }}" alt="service2_image" class="d-block rounded" width="150" height="90" id="uploadedAvatar2" />
                                    <br>
                                    <div class="form-group">
                                        <label for="upload2" class="btn btn-primary me-2 mb-2" tabindex="0">
                                            <span class="d-none d-sm-block">Upload Image Here</span>
                                            <i class="bx bx-upload d-block d-sm-none"></i>
                                            <input class="form-control account-file-input2" type="file" name="service2_image" id="upload2" hidden>
                                        </label>
                                        <button type="button" class="btn btn-outline-secondary account-image-reset2 mb-2">
                                            <i class="bx bx-reset d-block d-sm-none"></i>
                                            <span class="d-none d-sm-block">Reset</span>
                                        </button>
                                    </div>
                                    <span class="text text-info" style="font-size: 11px">The image is preferred to be 820 x 385</span>
                                    @error('service2_image')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        <div class="col-6 mb-3">
                            <label for="service2_title" class="form-label">Service2 Title</label>
                            <input type="text" class="form-control" name="service2_title" value="{{ old('service2_title', $service->service2_title) }}" />
                            @error('service2_title')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="col-6 mb-3">
                            <label for="service2_description" class="form-label">Service2 Description</label>
                            <textarea rows="3" class="form-control" name="service2_description">{{ old('service2_description', $service->service2_description) }}</textarea>
                            @error('service2_description')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>

                        {{-- <hr>

                        <div class="col-12 mb-3">
                            <div class="card">
                                <div class="card-body">
                                    <img src="{{ asset('uploads/services/'.$service->service3_image) }}" alt="service3_image" class="d-block rounded" width="150" height="90" id="uploadedAvatar3" />
                                    <br>
                                    <div class="form-group">
                                        <label for="upload3" class="btn btn-primary me-3 mb-2" tabindex="0">
                                            <span class="d-none d-sm-block">Upload Image Here</span>
                                            <i class="bx bx-upload d-block d-sm-none"></i>
                                            <input class="form-control account-file-input3" type="file" name="service3_image" id="upload3" hidden>
                                        </label>
                                        <button type="button" class="btn btn-outline-secondary account-image-reset2 mb-2">
                                            <i class="bx bx-reset d-block d-sm-none"></i>
                                            <span class="d-none d-sm-block">Reset</span>
                                        </button>
                                    </div>
                                    <span class="text text-info" style="font-size: 11px">The image is preferred to be 1940 x 1340</span>
                                    @error('service3_image')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                        </div> --}}
                    
                        <hr>

                        <div class="col-6 mb-3">
                            <div class="form-group">
                                <label for="category_id">Category</label>
                                <select name="category_id" id="category_id" class="form-select">
                                    <option value="" selected="" disabled="">Select Category</option>
                                    @foreach ($categories as $category)
                                        <option value="{{ $category->id }}" {{ $category->id == $service->category_id ? 'selected' : '' }}>{{ $category->name }}</option>
                                    @endforeach
                                </select>
                                @error('category_id')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        <div class="col-6 mb-3">
                            <label for="subcategory_id" class="form-label">Sub Category</label>
                            <select name="subcategory_id" id="subcategory_id" class="form-select">
                                <option value="" disabled selected>Select Sub Category</option>
                                {{-- options will be loaded dynamically --}}
                            </select>
                            @error('subcategory_id')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="col-6 mb-3">
                            <label for="order" class="form-label">Order</label>
                            <input type="number" class="form-control" name="order" value="{{ old('order', $service->order) }}" />
                            @error('order')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="col-3 mb-3 mt-4 ms-2">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" name="published" {{ $service->published == 1 ? 'checked' : '' }}>
                                <label class="form-check-label" for="flexSwitchCheckChecked">Active</label>
                            </div>
                            @error('published')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    @endif
                </div>

                @if($service->id != 1)
                    <hr>

                    <!-- Container for Dynamic Image Inputs -->
                    <h2>Other Service Images</h2>
                    <h4 class="text text-info mb-5">Images are preferred to be 1072 x 567</h4>
                    <div id="image-inputs-container" class="col-6 mb-3">
                        @foreach ($serviceImages as $index => $image)
                            <div class="image-input-group mb-3">
                                <label class="form-label">Service Image</label>
                                <div class="row align-items-center">
                                    <div class="col-3">
                                        <img src="{{ $image == 'default_other_image.png' ? asset('uploads/services/' . $image) : asset('uploads/services/' . $service->id . '/' . $image) }}"
                                            alt="previous_image"
                                            class="d-block rounded"
                                            width="150" height="90"/>
                                    </div>
                                    <div class="col-5">
                                        <input type="file" class="form-control" name="service_images[{{ $index }}][file]">
                                    </div>
                                    <div class="col-2">
                                        <input type="hidden" name="service_images[{{ $index }}][old]" value="{{ $image }}">
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input"
                                                name="service_images[{{ $index }}][delete]"
                                                id="delete_image_{{ $index }}">
                                            <label class="form-check-label" for="delete_image_{{ $index }}">Delete</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="mt-2">
                                    <input type="text" class="form-control mb-2"
                                        placeholder="Image Title"
                                        name="service_images[{{ $index }}][text]"
                                        value="{{ $serviceImageTitles[$index] ?? '' }}">

                                    <textarea class="form-control"
                                        placeholder="Image Description"
                                        name="service_images[{{ $index }}][description]">{{ $serviceImageDescriptions[$index] ?? '' }}</textarea>
                                </div>
                                <hr>
                            </div>
                        @endforeach
                    </div>
                    <button type="button" id="add-image-button" class="btn btn-primary mb-3">Add Another Image</button>
                @endif
                <hr>

                <button type="submit" class="btn btn-round btn-success col-md-1 me-2">Save</button>
                <a href="{{ route('services.all') }}" style="width: 200px" class="btn btn-secondary"><i class="fa fa-chevron-circle-left" aria-hidden="true"></i> Back</a>
            </form>
        </div>
    </div>
@endsection
@section('js')
    <script>
        document.getElementById('add-image-button').addEventListener('click', function() {
            const container = document.getElementById('image-inputs-container');
            const index = container.querySelectorAll('.image-input-group').length;

            const newInput = document.createElement('div');
            newInput.className = 'image-input-group mb-3';

            newInput.innerHTML = `
                <label class="form-label">New Service Image</label>
                <div class="row align-items-center">
                    <div class="col-9">
                        <input type="file" class="form-control"
                            name="service_images[new_${index}][file]">
                    </div>
                    <div class="col-3">
                        <button type="button" class="btn btn-danger remove-image-btn">
                            Remove
                        </button>
                    </div>
                </div>

                <div class="mt-2">
                    <input type="text" class="form-control mb-2"
                        placeholder="Image Title"
                        name="service_images[new_${index}][text]">

                    <textarea class="form-control"
                        placeholder="Image Description"
                        name="service_images[new_${index}][description]"></textarea>
                </div>
                <hr>
            `;

            container.appendChild(newInput);
        });

        // delegated remove action
        document.addEventListener('click', function(e) {
            if (e.target.matches('.remove-image-btn')) {
                e.target.closest('.image-input-group').remove();
            }
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const categorySelect = document.getElementById('category_id');
            const subcategorySelect = document.getElementById('subcategory_id');
            const selectedSubcategoryId = "{{ $service->sub_category_id ?? '' }}"; // comes from DB

            // Load subcategories when category changes
            categorySelect.addEventListener('change', function () {
                const categoryId = this.value;

                if (categoryId) {
                    let url = '{{ route("service.categories.subcategories", ":id") }}';
                    url = url.replace(':id', categoryId);

                    fetch(url)
                        .then(response => response.json())
                        .then(data => {
                            subcategorySelect.innerHTML = '<option value="" disabled>Select Sub Category</option>';

                            data.forEach(subcat => {
                                const option = document.createElement('option');
                                option.value = subcat.id;
                                option.textContent = subcat.name;

                                // Preselect if matches saved one
                                if (subcat.id == selectedSubcategoryId) {
                                    option.selected = true;
                                }

                                subcategorySelect.appendChild(option);
                            });
                        })
                        .catch(error => console.error('Error loading subcategories:', error));
                } else {
                    subcategorySelect.innerHTML = '<option value="" disabled selected>Select Sub Category</option>';
                }
            });

            // Trigger load if editing existing portfolio
            if (categorySelect.value) {
                categorySelect.dispatchEvent(new Event('change'));
            }
        });
    </script>
@endsection