@extends('layouts.admin')

@section('title', $category->exists ? 'Edit Category' : 'Add Category')
@section('page_title', $category->exists ? 'Edit Category' : 'Add Category')

@section('content')
<div class="kt-card max-w-4xl">
    <div class="kt-card-header">
        <h3 class="kt-card-title">{{ $category->exists ? 'Edit' : 'Create' }} Category</h3>
    </div>
    <form class="kt-card-content flex flex-col gap-5" method="POST"
          action="{{ $category->exists ? route('admin.categories.update', $category) : route('admin.categories.store') }}">
        @csrf
        @if($category->exists) @method('PUT') @endif

        <div class="flex flex-col gap-1">
            <label class="kt-form-label" for="category-name">Name</label>
            <input class="kt-input" id="category-name" name="name" value="{{ old('name', $category->name) }}" required>
            @error('name')<div class="text-xs text-destructive">{{ $message }}</div>@enderror
        </div>

        <div class="flex flex-col gap-2">
            <label class="kt-form-label" for="category-icon">Icon</label>
            <div class="mw-image-row">
                <div class="mw-image-preview" id="category-preview">
                    <img id="category-preview-img" alt="" src="{{ $iconUrl }}" @if(! $iconUrl) hidden @endif>
                    <span id="category-preview-empty" @if($iconUrl) hidden @endif>No icon selected</span>
                </div>
                <div class="mw-drop" id="category-drop">
                    <strong>Drag & drop an image</strong>
                    <span>or click to browse. JPG, PNG, WEBP, GIF or SVG, up to 5 MB.</span>
                    <input id="category-file" type="file" accept="image/jpeg,image/png,image/webp,image/gif,image/svg+xml">
                </div>
            </div>
            <input class="kt-input" id="category-icon" name="icon" value="{{ $iconValue }}" placeholder="images/... or library/...">
            <div class="mw-image-tools">
                <button class="kt-btn kt-btn-sm kt-btn-outline" type="button" id="category-library-open">Select from library</button>
                <button class="kt-btn kt-btn-sm kt-btn-outline" type="button" id="category-icon-clear">Remove image</button>
                <span id="category-upload-status"></span>
            </div>
            @error('icon')<div class="text-xs text-destructive">{{ $message }}</div>@enderror
        </div>

        <div class="flex flex-col gap-1">
            <label class="kt-form-label" for="category-description">Description</label>
            <textarea class="kt-textarea" id="category-description" name="description" rows="8">{{ old('description', $category->description) }}</textarea>
        </div>

        <div class="flex flex-col gap-1 max-w-xs">
            <label class="kt-form-label" for="category-sort">Sort Order</label>
            <input class="kt-input" id="category-sort" type="number" name="sort_order" value="{{ old('sort_order', $category->sort_order ?? 0) }}">
        </div>

        @include('admin.partials.seo-fields', [
            'metaTitle' => old('meta_title', $category->meta_title),
            'metaDescription' => old('meta_description', $category->meta_description),
            'metaKeywords' => old('meta_keywords', $category->meta_keywords),
        ])

        <div class="flex flex-wrap items-center justify-between gap-3 border-t border-border pt-4">
            <label class="flex items-center gap-2 text-sm">
                <input class="kt-checkbox" type="checkbox" name="is_active" value="1" @checked($errors->any() ? old('is_active') : ($category->exists ? $category->is_active : true))>
                Active
            </label>
            <div class="flex gap-2">
                <a href="{{ route('admin.categories.index') }}" class="kt-btn kt-btn-light">Cancel</a>
                <button class="kt-btn kt-btn-primary" type="submit">Save</button>
            </div>
        </div>
    </form>
</div>

<div class="mw-library-modal" id="category-library-modal" hidden>
    <div class="mw-library-dialog" role="dialog" aria-modal="true" aria-labelledby="category-library-title">
        <div class="mw-library-dialog-head">
            <h3 id="category-library-title">Select image</h3>
            <button type="button" id="category-library-close" aria-label="Close">×</button>
        </div>
        <div class="mw-library-dialog-grid" id="category-library-grid">
            @forelse($library as $file)
                <button type="button" data-path="{{ $file['path'] }}" data-url="{{ $file['url'] }}" title="{{ $file['name'] }}">
                    <img src="{{ $file['url'] }}" alt="{{ $file['name'] }}">
                </button>
            @empty
                <p class="mw-library-dialog-empty">No images in the library yet. Drag a file onto the category form to upload one.</p>
            @endforelse
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    .mw-image-row { display: flex; gap: 12px; align-items: stretch; }
    .mw-image-preview {
        width: 148px; height: 148px; flex: 0 0 148px;
        border: 1px solid #e4e4e7; border-radius: 10px; background: #f4f4f5;
        display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 8px;
    }
    .mw-image-preview img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
    .mw-image-preview span { font-size: 12px; color: #71717a; text-align: center; }
    .mw-drop {
        flex: 1; min-height: 148px; border: 1.5px dashed #c4c4cc; border-radius: 10px;
        background: #fafafa; display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 4px; text-align: center; padding: 16px; cursor: pointer; position: relative;
    }
    .mw-drop strong { font-size: 14px; }
    .mw-drop span { font-size: 12px; color: #71717a; }
    .mw-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
    .mw-drop.is-over { border-color: #D31920; background: #fff5f5; }
    .mw-image-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
    #category-upload-status { font-size: 12px; color: #71717a; }
    .mw-library-modal {
        position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.45);
        display: flex; align-items: center; justify-content: center; padding: 24px;
    }
    .mw-library-modal[hidden] { display: none; }
    .mw-library-dialog { width: min(760px, 100%); max-height: min(80vh, 640px); background: #fff; border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; }
    .mw-library-dialog-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid #e4e4e7; }
    .mw-library-dialog-head h3 { margin: 0; font-size: 16px; }
    .mw-library-dialog-head button { border: 0; background: transparent; font-size: 24px; line-height: 1; cursor: pointer; }
    .mw-library-dialog-grid { display: grid; grid-template-columns: repeat(auto-fill, 110px); gap: 10px; padding: 16px; overflow: auto; justify-content: start; }
    .mw-library-dialog-grid button { width: 110px; height: 110px; border: 1px solid #e4e4e7; border-radius: 8px; background: #f4f4f5; padding: 6px; cursor: pointer; }
    .mw-library-dialog-grid img { width: 100%; height: 100%; object-fit: contain; }
    .mw-library-dialog-empty { grid-column: 1 / -1; margin: 0; color: #71717a; font-size: 14px; }
</style>
@endpush

@push('scripts')
<script src="assets/vendors/tinymce/tinymce.min.js"></script>
<script>
    tinymce.init({
        selector: '#category-description',
        license_key: 'gpl',
        base_url: @json(asset('metronic/assets/vendors/tinymce')),
        suffix: '.min',
        height: 280,
        menubar: false,
        branding: false,
        promotion: false,
        plugins: 'autolink lists link advlist wordcount',
        toolbar: 'undo redo | blocks | bold italic underline | alignleft aligncenter alignright | bullist numlist | link | removeformat',
        toolbar_mode: 'sliding',
        relative_urls: false,
        convert_urls: false,
        content_style: 'body { font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: 14px; line-height: 1.5; }',
    });
</script>
<script>
(function () {
    const input = document.getElementById('category-icon');
    const preview = document.getElementById('category-preview-img');
    const empty = document.getElementById('category-preview-empty');
    const drop = document.getElementById('category-drop');
    const fileInput = document.getElementById('category-file');
    const status = document.getElementById('category-upload-status');
    const modal = document.getElementById('category-library-modal');
    const token = document.querySelector('meta[name="csrf-token"]')?.content
        || document.querySelector('input[name="_token"]')?.value;
    const uploadUrl = @json(route('admin.images.store'));
    const storageBase = @json(asset('storage'));
    const publicBase = @json(rtrim(asset(''), '/'));

    function urlFor(path) {
        if (!path) return '';
        if (path.startsWith('http://') || path.startsWith('https://')) return path;
        if (path.startsWith('library/')) return storageBase + '/' + path;
        return publicBase + '/' + path.replace(/^\/+/, '');
    }

    function showImage(path, url) {
        input.value = path || '';
        const src = url || urlFor(path);
        if (!src) {
            preview.hidden = true;
            preview.removeAttribute('src');
            empty.hidden = false;
            return;
        }
        preview.src = src;
        preview.hidden = false;
        empty.hidden = true;
    }

    async function uploadFile(file) {
        status.textContent = 'Uploading…';
        const body = new FormData();
        body.append('upload', file);
        body.append('_token', token);
        const response = await fetch(uploadUrl, {
            method: 'POST',
            headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': token },
            body,
        });
        const data = await response.json();
        if (!response.ok) {
            status.textContent = data.errors?.upload?.[0] || data.message || 'Upload failed.';
            return;
        }
        showImage(data.path, data.url);
        const grid = document.getElementById('category-library-grid');
        grid.querySelector('.mw-library-dialog-empty')?.remove();
        const button = document.createElement('button');
        button.type = 'button';
        button.dataset.path = data.path;
        button.dataset.url = data.url;
        button.title = data.name;
        button.innerHTML = '<img alt="">';
        button.querySelector('img').src = data.url;
        button.querySelector('img').alt = data.name;
        grid.prepend(button);
        status.textContent = 'Icon selected. Save the category to keep it.';
    }

    ['dragenter', 'dragover'].forEach((name) => {
        drop.addEventListener(name, (event) => {
            event.preventDefault();
            drop.classList.add('is-over');
        });
    });
    ['dragleave', 'drop'].forEach((name) => {
        drop.addEventListener(name, (event) => {
            event.preventDefault();
            drop.classList.remove('is-over');
        });
    });
    drop.addEventListener('drop', (event) => {
        const file = event.dataTransfer?.files?.[0];
        if (file) uploadFile(file);
    });
    fileInput.addEventListener('change', () => {
        const file = fileInput.files?.[0];
        if (file) uploadFile(file);
        fileInput.value = '';
    });
    input.addEventListener('change', () => showImage(input.value.trim()));
    document.getElementById('category-icon-clear').addEventListener('click', () => {
        showImage('');
        status.textContent = '';
    });
    document.getElementById('category-library-open').addEventListener('click', () => { modal.hidden = false; });
    document.getElementById('category-library-close').addEventListener('click', () => { modal.hidden = true; });
    modal.addEventListener('click', (event) => {
        if (event.target === modal) modal.hidden = true;
        const button = event.target.closest('[data-path]');
        if (!button) return;
        showImage(button.dataset.path, button.dataset.url);
        status.textContent = 'Icon selected. Save the category to keep it.';
        modal.hidden = true;
    });
})();
</script>
@endpush