@extends('admin.layouts.app')

@section('content')
<div class="container">
    <h1>Izmeni odeljenje</h1>

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

        <div class="mb-3">
            <label for="title" class="form-label">Naslov *</label>
            <input type="text" id="title" name="title" class="form-control" value="{{ old('title', $department->title) }}" required>
            @error('title')<div class="text-danger">{{ $message }}</div>@enderror
        </div>

        <div class="mb-3">
            <label for="slug" class="form-label">Slug (opciono)</label>
            <input type="text" id="slug" name="slug" class="form-control" value="{{ old('slug', $department->slug) }}">
            <small class="form-text text-muted">Ako ostavite prazno, biće generisan automatski.</small>
            @error('slug')<div class="text-danger">{{ $message }}</div>@enderror
        </div>

        <div class="mb-3">
            <label for="content" class="form-label">Sadržaj</label>
            <textarea id="content" name="content" class="form-control" rows="5">{{ old('content', $department->content) }}</textarea>
            @error('content')<div class="text-danger">{{ $message }}</div>@enderror
        </div>

        <div class="mb-3">
            <label for="image" class="form-label">Nova slika (opciono)</label>
            <input type="file" id="image" name="image" class="form-control" accept="image/*">
            @error('image')<div class="text-danger">{{ $message }}</div>@enderror

            @if ($department->image)
                <div class="mt-2">
                    <p>Trenutna slika:</p>
                    <img src="{{ asset('storage/' . $department->image) }}" alt="Trenutna slika" class="img-fluid" style="max-height: 200px;">
                </div>
            @endif
        </div>

        <div class="mb-3">
            <label for="status" class="form-label">Status *</label>
            <select id="status" name="status" class="form-control" required>
                <option value="1" {{ old('status', $department->status) == '1' ? 'selected' : '' }}>Aktivno</option>
                <option value="0" {{ old('status', $department->status) == '0' ? 'selected' : '' }}>Neaktivno</option>
            </select>
            @error('status')<div class="text-danger">{{ $message }}</div>@enderror
        </div>

        <button type="submit" class="btn btn-primary">Sačuvaj izmene</button>
        <a href="{{ route('admin.departments.index') }}" class="btn btn-secondary">Nazad</a>
    </form>
</div>

<script src="https://cdn.tiny.cloud/1/inrjht0ng6y4vo6onmvobng3lqsh3zzm4xghztbeiudfhiqs/tinymce/7/tinymce.min.js" referrerpolicy="origin"></script>

<script>
    tinymce.init({
        selector: 'textarea', // Selektuj textarea polje gde ćeš dodati editor
        plugins: 'advlist autolink lists link image charmap print preview anchor media',
        toolbar: 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | link image media',
        height: 700,
        image_caption: true,
        automatic_uploads: true,
        file_picker_types: 'image',
        file_picker_callback: function (cb, value, meta) {
            var input = document.createElement('input');
            input.setAttribute('type', 'file');
            input.setAttribute('accept', 'image/*');
            input.onchange = function () {
                var file = this.files[0];
                var reader = new FileReader();
                reader.onload = function () {
                    var id = 'blobid' + (new Date()).getTime();
                    var blobCache = tinymce.activeEditor.editorUpload.blobCache;
                    var blobInfo = blobCache.create(id, file, reader.result);
                    blobCache.add(blobInfo);
                    cb(blobInfo.blobUri(), { title: file.name });
                };
                reader.readAsDataURL(file);
            };
            input.click();
        },
    });
</script>
@endsection