@extends('layouts.admin')

@section('title', 'Edit Category')

@section('content')
<div class="container">
    <h1>Edit Category</h1>

    <form action="{{ route('admin.categories.update', $category->id) }}" method="POST" enctype="multipart/form-data">
        @csrf
        @method('PUT')

        <div class="mb-3">
            <label for="title" class="form-label">Title</label>
            <input type="text" class="form-control" id="title" name="title" value="{{ $category->title }}" required>
        </div>

        <div class="mb-3">
            <label for="summary" class="form-label">Summary</label>
            <textarea class="form-control" id="summary" name="summary">{{ $category->summary }}</textarea>
        </div>

        <div class="mb-3">
            <label for="content" class="form-label">Content</label>
            <textarea class="form-control" id="content" name="content">{{ $category->content }}</textarea>
        </div>

        <div class="mb-3">
            <label for="sector_id" class="form-label">Sector</label>
            <select class="form-control" id="sector_id" name="sector_id" required>
                @foreach ($sectors as $id => $title)
                    <option value="{{ $id }}" {{ $id == $category->sector_id ? 'selected' : '' }}>{{ $title }}</option>
                @endforeach
            </select>
        </div>

        <div class="mb-3">
            <label for="menu_position" class="form-label">Menu Position</label>
            <input type="number" class="form-control" id="menu_position" name="menu_position" value="{{ $category->menu_column }}">
        </div>

        <div class="mb-3">
            <label for="image" class="form-label">Image</label>
            <input type="file" class="form-control" id="image" name="image">
            @if($category->image)
                <img src="{{ asset($category->image) }}" alt="Image" class="img-thumbnail mt-2" width="200">
                <button type="button" class="btn btn-danger btn-sm" onclick="deleteImage('{{ route('admin.categories.deleteImage', ['id' => $category->id, 'imageType' => 'image']) }}')">Delete Image</button>

            @endif
        </div>

        <div class="mb-3">
            <label for="image_half_width" class="form-label">Image Half Width</label>
            <input type="file" class="form-control" id="image_half_width" name="image_half_width">
            @if($category->image_half)
                <img src="{{ asset($category->image_half) }}" alt="Image Half Width" class="img-thumbnail mt-2" width="200">
                <button type="button" class="btn btn-danger btn-sm" onclick="deleteImage('{{ route('admin.categories.deleteImage', ['id' => $category->id, 'imageType' => 'image_half_width']) }}')">Delete Image</button>
            @endif
        </div>

        <div class="mb-3">
            <label for="image_full_width" class="form-label">Image Full Width</label>
            <input type="file" class="form-control" id="image_full_width" name="image_full_width">
            @if($category->image_full)
                <img src="{{ asset($category->image_full) }}" alt="Image Full Width" class="img-thumbnail mt-2" width="200">                
                <button type="button" class="btn btn-danger btn-sm" onclick="deleteImage('{{ route('admin.categories.deleteImage', ['id' => $category->id, 'imageType' => 'image_full_width']) }}')">Delete Image</button>
            @endif
        </div>

        <div class="form-check mb-3">
            <input type="checkbox" class="form-check-input" id="menu_hide_subcategories" name="menu_hide_subcategories" {{ $category->menu_hide_subcategories ? 'checked' : '' }}>
            <label class="form-check-label" for="menu_hide_subcategories">Menu Hide Subcategories</label>
        </div>

        <button type="submit" class="btn btn-primary">Update</button>
        <a href="{{ route('admin.pages.index') }}" class="btn btn-secondary">Cancel</a>
    </form>
</div>

<!--script src="https://cdn.tiny.cloud/1/o35nrvszar8z284zvothcsrb3ffnhkvvq3e3za5ilc6en51r/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
<script>
    tinymce.init({
        selector: '#content, #content_before',
        plugins: 'advlist autolink lists link image charmap preview anchor',
        toolbar: 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help',
        content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
    });
</script-->
 <script>
$(document).ready(function() {
  $('#content').summernote();
  $('#content_before').summernote();
});
</script>
<script>
     $('#sector_id').select2({
         theme: 'bootstrap4',
         placeholder: 'Select a Page Section',
         allowClear: true
     });
 
function deleteImage(path){
        if (confirm('Are you sure you want to remove this image?')) {
            $.ajax({
                url: path,
                type: 'DELETE',
                data: {
                    _token: '{{ csrf_token() }}',
                    image: $(this).data('image')
                },
                success: function(response) {
                    // Odstranění obrázku a tlačítka z UI
                        $('#image').remove();
                        alert('Image removed successfully.');
                },
                error: function(xhr) {
                    alert('An error occurred while removing the image.');
                }
            });
        }
    };

</script>
@endsection