@extends('layouts.admin')

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

@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.slides.index') }}">Slides</a></li>
            <li class="breadcrumb-item active" aria-current="page">Edit Slide</li>
        </ol>
    </nav>

    <h1>Edit Slide</h1>

    <form action="{{ route('admin.slides.update', $slide->id) }}" method="POST" enctype="multipart/form-data">
        @csrf
        @method('PUT')
        <div class="mb-3">
            <label for="name" class="form-label">Title</label>
            <input type="text" id="name" name="name" class="form-control @error('name') is-invalid @enderror" value="{{ old('name', $slide->name) }}">
            @error('name')
            <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        <div class="mb-3">
            <label for="content_title" class="form-label">Content Title</label>
            <input type="text" id="content_title" name="content_title" class="form-control @error('content_title') is-invalid @enderror" value="{{ old('content_title', $slide->content_title) }}">
            @error('content_title')
            <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

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

        <div class="mb-3">
            <label for="order" class="form-label">Order</label>
            <input type="number" id="order" name="order" class="form-control @error('order') is-invalid @enderror" value="{{ old('order', $slide->order) }}">
            @error('order')
            <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        <div class="mb-3">
            <label for="sector" class="form-label">Sector</label>
            <select class="form-select" id="sector" name="sector_id">
                @foreach($sectors as $sector)
                <option value="{{ $sector->id }}" {{ $slide->sector_id == $sector->id ? 'selected' : '' }}>
                    {{ $sector->title }}
                </option>
                @endforeach
            </select>
            @error('sector')
            <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        <div class="mb-3">
            <label for="url" class="form-label">URL</label>
            <input type="text" id="url" name="url" class="form-control @error('url') is-invalid @enderror" value="{{ old('url', $slide->url) }}">
            @error('url')
            <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        <div class="mb-3">
            <label for="image" class="form-label">Image</label>
            <input type="file" id="image" name="image" class="form-control @error('image') is-invalid @enderror">
            @error('image')
            <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        @if ($slide->image)
        <div class="mb-3">
            <img src="{{ asset($slide->image) }}" alt="Current Image" class="img-thumbnail" style="max-width: 200px;">
            <button type="button" class="btn btn-danger mt-2" id="deleteImageBtn" >Remove Image</button>
        </div>
        @endif

        <button type="submit" class="btn btn-primary">Update Slide</button>
    </form>
</div>


<!--script src="https://cdn.tiny.cloud/1/o35nrvszar8z284zvothcsrb3ffnhkvvq3e3za5ilc6en51r/tinymce/7/tinymce.min.js" referrerpolicy="origin"></script>
<script>
                tinymce.init({
                    selector: '#content',
                    menubar: false,
                    plugins: 'advlist autolink lists link image charmap preview anchor searchreplace visualblocks code fullscreen insertdatetime media table paste code help wordcount',
                    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.slides.deleteImage', $slide->id) }}',
                    type: 'DELETE',
                    data: {
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        // Remove the image and button from the UI
                        $('img').remove();
                        $('#deleteImageBtn').remove();
                        alert('Image removed successfully.');
                    },
                    error: function(xhr) {
                        alert('An error occurred while removing the image.');
                    }
                });
            }
        });
    });
</script>

@endsection