@extends('admin.layouts.app')

@section('content')
    <div class="content">
        <div class="container-fluid">
            <x-nav title="Edit Category" :route="''"  :import="''"/>
            <!-- end page-title -->
            <div class="row">
                <div class="col-12">
                    <div class="card m-b-30">
                        <div class="card-body">

                            <form action="{{route('dashboard.categories.update',$category->id)}}" method="POST" enctype="multipart/form-data">
                                @csrf
                                @method('PUT')
                                <x-input attribute="col-sm-10" label="Category Name" type="type" name="name" :value="$category->name" placeholder="Enter service title"/>
                                <!-- Description Input (Rich Text Editor) -->
{{--                                <div class="form-group row">--}}
{{--                                    <label for="description" class="col-sm-2 col-form-label">Description</label>--}}
{{--                                    <div class="col-sm-10">--}}
{{--                                        <textarea id="description" name="description" class="form-control rich-text-editor">{{ $category->description }}</textarea>--}}
{{--                                    </div>--}}
{{--                                </div>--}}

{{--                                <x-input attribute="col-sm-10" label="Service Photo" type="file" name="service_photo" value="" placeholder="Enter service Photo"/>--}}
{{--                                <x-input attribute="col-sm-10" label="Service Photo for details page" type="file" name="service_photo_details" value="" placeholder="Enter service Photo for details page"/>--}}
{{--                                <div class="form-group row">--}}
{{--                                    <div class="col-sm-10"><br><br></div>--}}
{{--                                </div>--}}
{{--                                <div class="form-group row">--}}
{{--                                    <label for="service_photo" class="col-form-label col-sm-2">Current service photo</label>--}}
{{--                                    <div class="col-sm-10">--}}
{{--                                        @if($category->service_photo)--}}
{{--                                            <img src="{{ asset($category->service_photo) }}" alt="Identity Photo" class="img-thumbnail" style="max-width: 200px; margin-right: 10px;">--}}
{{--                                            <button type="button" class="btn btn-danger delete-image" data-image-id="{{ $category->id }}">Delete</button>--}}
{{--                                        @else--}}
{{--                                            <p>No service photo currently</p>--}}
{{--                                        @endif--}}
{{--                                    </div>--}}
{{--                                </div>--}}
{{--                                <div class="form-group row">--}}
{{--                                    <div class="col-sm-10"><br><br></div>--}}
{{--                                </div>--}}
{{--                                <div class="form-group row">--}}
{{--                                    <label for="service_photo" class="col-form-label col-sm-2">Current Service Photo for details page</label>--}}
{{--                                    <div class="col-sm-10">--}}
{{--                                        @if($category->service_photo_details)--}}
{{--                                            <img src="{{ asset($category->service_photo_details) }}" alt="Identity Photo" class="img-thumbnail" style="max-width: 200px; margin-right: 10px;">--}}
{{--                                            <button type="button" class="btn btn-danger delete-image" data-image-id="{{ $category->id }}">Delete</button>--}}
{{--                                        @else--}}
{{--                                            <p>No service photo currently</p>--}}
{{--                                        @endif--}}
{{--                                    </div>--}}
{{--                                </div>--}}

                                <x-button :attribute="getAction()" :item="$item" />
                            </form>
                        </div>
                    </div>
                </div> <!-- end col -->
            </div>
        </div>
        <!-- container-fluid -->

    </div>

{{--    <!-- Include Rich Text Editor Script -->--}}
{{--    <script src="https://cdn.ckeditor.com/4.16.2/standard/ckeditor.js"></script>--}}
{{--    <script>--}}
{{--        // Initialize CKEditor--}}
{{--        CKEDITOR.replace('description', {--}}
{{--            height: 300,--}}
{{--            toolbarGroups: [--}}
{{--                { name: 'basicstyles', groups: ['basicstyles', 'cleanup'] },--}}
{{--                { name: 'paragraph', groups: ['list', 'indent', 'blocks', 'align'] },--}}
{{--                { name: 'styles' },--}}
{{--                { name: 'colors' },--}}
{{--                { name: 'links' },--}}
{{--                { name: 'insert' }--}}
{{--            ],--}}
{{--            removeButtons: 'Underline,Subscript,Superscript'--}}
{{--        });--}}


{{--        // Image delete functionality--}}
{{--        $(document).ready(function(){--}}
{{--            $('.delete-image').on('click', function(event){--}}
{{--                var ServiceId = $(this).data('image-id');--}}
{{--                if(confirm("Are you sure you want to delete this image?")) {--}}
{{--                    $.ajax({--}}
{{--                        url: "{{ route('dashboard.services.deleteImage') }}", // Adjust this route if necessary--}}
{{--                        method: 'POST',--}}
{{--                        data: {--}}
{{--                            _token: "{{ csrf_token() }}",--}}
{{--                            service_id: ServiceId--}}
{{--                        },--}}
{{--                        success: function(response){--}}
{{--                            location.reload();--}}
{{--                        },--}}
{{--                        error: function(xhr, status, error) {--}}
{{--                            console.error(xhr.responseText);--}}
{{--                            alert('An error occurred while deleting the image.');--}}
{{--                        }--}}
{{--                    });--}}
{{--                }--}}
{{--            });--}}
{{--        });--}}
{{--    </script>--}}
@endsection