@extends('layouts.admin')

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

@section('content')
<div class="container">
    
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Home</a></li>
            <li class="breadcrumb-item"><a href="{{ route('admin.subcategories.index') }}">Subcategories</a></li>
            <li class="breadcrumb-item active" aria-current="page">Edit Subcategory</li>
        </ol>
    </nav>
    
    <h1>Edit Subcategory</h1>

    <form action="{{ route('admin.subcategories.update', $subcategory) }}" 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 @error('title') is-invalid @enderror" id="title" name="title" value="{{ old('title', $subcategory->title) }}">
            @error('title')
            <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        <div class="mb-3">
            <label for="summary" class="form-label">Summary</label>
            <textarea class="form-control @error('summary') is-invalid @enderror" id="summary" name="summary">{{ old('summary', $subcategory->summary) }}</textarea>
            @error('summary')
            <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        <div class="mb-3">
            <label for="content" class="form-label">Content</label>
            <textarea class="form-control @error('content') is-invalid @enderror" id="content" name="content">{{ old('content', $subcategory->content) }}</textarea>
            @error('content')
            <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        <div class="mb-3">
            <label for="image" class="form-label">Image</label>
            @if ($subcategory->image)
                <div class="mb-2" id="image">
                    <img src="{{ url($subcategory->image) }}" alt="Subcategory Image" class="img-fluid" style="max-height: 200px;">                    
                    <button type="button" class="btn btn-danger" id="deleteImageBtn" data-image="{{ $subcategory->id }}">Remove Image</button>  
                </div>
            @endif
            <input type="file" class="form-control @error('image') is-invalid @enderror" id="image" name="image">
            @error('image')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        <div class="mb-3">
            <label for="hero_image" class="form-label">Hero Image</label>
            @if ($subcategory->hero_image)
                <div class="mb-2" id="heroimage">
                    <img src="{{ url($subcategory->hero_image) }}" alt="Subcategory Hero Image" class="img-fluid" style="max-height: 200px;">                    
                    <button type="button" class="btn btn-danger" id="deleteHeroImageBtn" data-image="{{ $subcategory->id }}">Remove Image</button>  
                </div>
            @endif
            <input type="file" class="form-control @error('hero_image') is-invalid @enderror" id="hero_image" name="hero_image">
            @error('hero_image')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        <div class="mb-3">
            <input type="checkbox" class="form-check-input" id="featured_product" name="featured" {{ old('featured', $subcategory->featured) ? 'checked' : '' }}>
            <label for="featured" class="form-check-label">Featured Product</label>
        </div>

        <div class="mb-3">
            <label for="category_id" class="form-label">Category</label>
            <select class="form-select @error('category_id') is-invalid @enderror" id="category_id" name="category_id">
                @foreach($categories as $id => $title)
                    <option value="{{ $id }}" {{ old('category_id', $subcategory->category_id) == $id ? 'selected' : '' }}>{{ $title }}</option>
                @endforeach
            </select>
            @error('category_id')
            <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

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

<!--script src="https://cdn.tiny.cloud/1/o35nrvszar8z284zvothcsrb3ffnhkvvq3e3za5ilc6en51r/tinymce/7/tinymce.min.js" referrerpolicy="origin"></script>
<script>
    tinymce.init({
        selector: '#content',
        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',
    });
</script-->

 <script>
$(document).ready(function() {
  $('#content').summernote();
});
</script>

<script>
$(document).ready(function() {
    $('#deleteImageBtn').on('click', function() {
        if (confirm('Are you sure you want to remove this image?')) {
            $.ajax({
                url: '{{ route('admin.subcategories.deleteImage', ['id' => $subcategory->id]) }}',
                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.');
                }
            });
        }
    });

    $('#deleteHeroImageBtn').on('click', function() {
        if (confirm('Are you sure you want to remove this hero image?')) {
            $.ajax({
                url: '{{ route('admin.subcategories.deleteHeroImage', ['id' => $subcategory->id]) }}',
                type: 'DELETE',
                data: {
                    _token: '{{ csrf_token() }}',
                    image: $(this).data('image')
                },
                success: function(response) {
                    // Odstranění obrázku a tlačítka z UI
                        $('#heroimage').remove();
                        alert('Image removed successfully.');
                },
                error: function(xhr) {
                    alert('An error occurred while removing the hero image.');
                }
            });
        }
    });
});
</script>
@endsection