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

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

@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.store') }}" method="post" enctype="multipart/form-data">
                @csrf

                <div class="row">

                    <div class="col-12 mb-3">
                        <div class="card">
                            <div class="card-body">
                                <img src="{{ asset('uploads/services/banner_image.png') }}" 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') }}" />
                        @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') }}" />
                        @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') }}" />
                        @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') }}" />
                        @error('banner_service_slogan')
                            <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/service2_image.png') }}" 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') }}" />
                        @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') }}</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/service3_image.png') }}" 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->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 id="subcategory_id" name="subcategory_id" class="form-select">
                            <option value="">-- Select Sub Category --</option>
                        </select>
                    </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') }}" />
                        @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" checked>
                            <label class="form-check-label" for="flexSwitchCheckChecked">Active</label>
                        </div>
                        @error('published')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                </div>

                <hr>

                <!-- Container for Dynamic Image Inputs -->
                <h2>Other Service Images</h2><br>
                <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">
                    <div class="image-input-group">
                        <label for="service_image_1" class="form-label">Service Image</label>
                        <div class="row">
                            <div class="col-9">
                                <input type="file" class="form-control" name="service_images[]" id="service_image_1">
                                @error('service_images.*')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            {{-- <div class="col-2">
                                <button type="button" class="btn btn-danger" onclick="this.parentElement.remove();">Remove</button>
                            </div> --}}
                            <div class="col-9 mt-2">
                                <input type="text" class="form-control" name="image_titles[]" placeholder="Image Title">
                                @error('image_titles.*')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-9 mt-2">
                                <textarea class="form-control" name="image_descriptions[]" placeholder="Image Description" rows="5"></textarea>
                                @error('image_descriptions.*')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        <br>
                    </div>
                </div>
                <button type="button" id="add-image-button" class="btn btn-primary mb-3">Add Another Service</button>

                <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.children.length + 1;
            const newInput = document.createElement('div');
            newInput.className = 'image-input-group';
            newInput.innerHTML = `
                <label for="service_image_${index}" class="form-label">Service Image</label>
                    <div class="row">
                        <div class="col-9">
                            <input type="file" class="form-control" name="service_images[]" id="service_image_${index}">
                            @error('service_images.*')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="col-9 mt-2">
                            <input type="text" class="form-control" name="image_titles[]" placeholder="Image Title">
                            @error('image_titles.*')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="col-9 mt-2">
                            <textarea class="form-control" name="image_descriptions[]" placeholder="Image Description" rows="5"></textarea>
                            @error('image_descriptions.*')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="col-6 mt-2">
                            <button type="button" class="btn btn-danger" onclick="this.parentElement.parentElement.parentElement.remove();">Remove</button>
                        </div>
                    </div>
                <br>
            `;
            container.appendChild(newInput);
        });
    </script>
    <script>
        $(document).ready(function() {
            $('#category_id').on('change', function() {
                let categoryId = $(this).val();
                let subcategorySelect = $('#subcategory_id');
                
                subcategorySelect.empty().append('<option value="">-- Loading... --</option>');

                if (categoryId) {
                    $.ajax({
                        url: '{{ route("service.categories.subcategories", ":id") }}'.replace(':id', categoryId),
                        type: 'GET',
                        success: function(data) {
                            subcategorySelect.empty().append('<option value="">-- Select Subcategory --</option>');
                            $.each(data, function(key, subcat) {
                                subcategorySelect.append('<option value="' + subcat.id + '">' + subcat.name + '</option>');
                            });
                        },
                        error: function() {
                            subcategorySelect.empty().append('<option value="">-- Error loading --</option>');
                        }
                    });
                } else {
                    subcategorySelect.empty().append('<option value="">-- Select Subcategory --</option>');
                }
            });
        });
    </script>
@endsection