@extends('layouts.admin')

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

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

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="flex flex-col gap-1">
                <label class="kt-form-label" for="product-name">Name</label>
                <input class="kt-input" id="product-name" name="name" value="{{ old('name', $product->name) }}" required>
                @error('name')<div class="text-xs text-destructive">{{ $message }}</div>@enderror
            </div>
            <div class="flex flex-col gap-1">
                <label class="kt-form-label" for="product-sku">SKU</label>
                <input class="kt-input" id="product-sku" name="sku" value="{{ old('sku', $product->sku) }}">
            </div>
            <div class="mw-span flex flex-col gap-2">
                <label class="kt-form-label" for="product-image">Image</label>
                <div class="mw-image-row">
                    <div class="mw-image-preview" id="product-preview">
                        <img id="product-preview-img" alt="" src="{{ $imageUrl }}" @if(! $imageUrl) hidden @endif>
                        <span id="product-preview-empty" @if($imageUrl) hidden @endif>No image selected</span>
                    </div>
                    <div class="mw-drop" id="product-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="product-file" type="file" accept="image/jpeg,image/png,image/webp,image/gif,image/svg+xml">
                    </div>
                </div>
                <input class="kt-input" id="product-image" name="image" value="{{ $imageValue }}" placeholder="library/...">
                <div class="mw-image-tools">
                    <button class="kt-btn kt-btn-sm kt-btn-outline" type="button" id="product-library-open">Select from library</button>
                    <button class="kt-btn kt-btn-sm kt-btn-outline" type="button" id="product-image-clear">Remove image</button>
                    <span id="product-upload-status"></span>
                </div>
                @error('image')<div class="text-xs text-destructive">{{ $message }}</div>@enderror
            </div>
            <div class="flex flex-col gap-1">
                <label class="kt-form-label" for="product-price">Regular Price</label>
                <input class="kt-input" id="product-price" type="number" step="0.01" name="regular_price" value="{{ old('regular_price', $product->regular_price ?? 0) }}" required>
            </div>
            <div class="flex flex-col gap-1">
                <label class="kt-form-label" for="product-sale">Sale Price</label>
                <input class="kt-input" id="product-sale" type="number" step="0.01" name="sale_price" value="{{ old('sale_price', $product->sale_price) }}">
            </div>
            <div class="flex flex-col gap-1">
                <label class="kt-form-label" for="product-unit">Unit</label>
                <select class="kt-select" id="product-unit" name="unit">
                    @foreach(['kg' => 'kg', 'piece' => 'piece', 'dozen' => 'dozen'] as $value => $label)
                        <option value="{{ $value }}" @selected(old('unit', $product->unit ?? 'kg') === $value)>{{ $label }}</option>
                    @endforeach
                </select>
            </div>
            <div class="flex flex-col gap-1">
                <label class="kt-form-label" for="product-gst">GST %</label>
                <input class="kt-input" id="product-gst" type="number" step="0.01" name="gst_rate" value="{{ old('gst_rate', $product->gst_rate ?? 0) }}">
            </div>
            <div class="flex flex-col gap-1">
                <label class="kt-form-label" for="product-stock">Stock Qty</label>
                <input class="kt-input" id="product-stock" type="number" name="stock_qty" value="{{ old('stock_qty', $product->stock_qty ?? 100) }}" required>
            </div>
            <div class="flex flex-col gap-1">
                <label class="kt-form-label" for="product-stock-status">Stock Status</label>
                <select class="kt-select" id="product-stock-status" name="stock_status">
                    <option value="instock" @selected(old('stock_status', $product->stock_status)==='instock')>In Stock</option>
                    <option value="outofstock" @selected(old('stock_status', $product->stock_status)==='outofstock')>Out of Stock</option>
                </select>
            </div>
            <div class="mw-span flex flex-col gap-1">
                <label class="kt-form-label" for="product-short">Short Description</label>
                <textarea class="kt-textarea" id="product-short" name="short_description" rows="4">{{ old('short_description', $product->short_description) }}</textarea>
            </div>
            <div class="mw-span flex flex-col gap-1">
                <label class="kt-form-label" for="product-description">Description</label>
                <textarea class="kt-textarea" id="product-description" name="description" rows="8">{{ old('description', $product->description) }}</textarea>
            </div>
            <div class="flex flex-col gap-2 md:col-span-2">
                <label class="kt-form-label">Categories</label>
                <div class="flex flex-wrap gap-x-4 gap-y-2">
                    @php $selected = old('categories', $product->exists ? $product->categories->pluck('id')->all() : []); @endphp
                    @foreach($categories as $category)
                        <label class="flex items-center gap-2 text-sm">
                            <input class="kt-checkbox" type="checkbox" name="categories[]" value="{{ $category->id }}" @checked(in_array($category->id, $selected))>
                            {{ $category->name }}
                        </label>
                    @endforeach
                </div>
            </div>
        </div>

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

        <div class="flex flex-wrap items-center justify-between gap-3 border-t border-border pt-4">
            <div class="flex flex-wrap gap-4">
                <label class="flex items-center gap-2 text-sm">
                    <input class="kt-checkbox" type="checkbox" name="is_featured" value="1" @checked(old('is_featured', $product->is_featured))>
                    Featured / Bestseller
                </label>
                <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') : ($product->exists ? $product->is_active : true))>
                    Active
                </label>
            </div>
            <div class="flex gap-2">
                <a href="{{ route('admin.products.index') }}" class="kt-btn kt-btn-light">Cancel</a>
                <button type="submit" class="kt-btn kt-btn-primary">Save Product</button>
            </div>
        </div>
    </form>
</div>

<div class="mw-library-modal" id="product-library-modal" hidden>
    <div class="mw-library-dialog" role="dialog" aria-modal="true" aria-labelledby="product-library-title">
        <div class="mw-library-dialog-head">
            <h3 id="product-library-title">Select image</h3>
            <button type="button" id="product-library-close" aria-label="Close">×</button>
        </div>
        <div class="mw-library-dialog-grid" id="product-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 product form to upload one.</p>
            @endforelse
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    .mw-span { grid-column: 1 / -1; }
    .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; }
    #product-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>
    const tinymceBase = @json(asset('metronic/assets/vendors/tinymce'));
    const editorOptions = {
        license_key: 'gpl',
        base_url: tinymceBase,
        suffix: '.min',
        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; }',
    };
    tinymce.init({ ...editorOptions, selector: '#product-short', height: 180 });
    tinymce.init({ ...editorOptions, selector: '#product-description', height: 320 });
</script>
<script>
(function () {
    const input = document.getElementById('product-image');
    const preview = document.getElementById('product-preview-img');
    const empty = document.getElementById('product-preview-empty');
    const drop = document.getElementById('product-drop');
    const fileInput = document.getElementById('product-file');
    const status = document.getElementById('product-upload-status');
    const modal = document.getElementById('product-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'));

    function urlFor(path) {
        if (!path) return '';
        if (path.startsWith('http://') || path.startsWith('https://')) return path;
        if (path.startsWith('library/')) return storageBase + '/' + path;
        if (path.startsWith('images/')) return @json(rtrim(asset(''), '/')) + '/' + path.replace(/^\/+/, '');
        return storageBase + '/library/' + 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('product-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 = 'Image selected. Save the product 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('product-image-clear').addEventListener('click', () => {
        showImage('');
        status.textContent = '';
    });
    document.getElementById('product-library-open').addEventListener('click', () => { modal.hidden = false; });
    document.getElementById('product-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 = 'Image selected. Save the product to keep it.';
        modal.hidden = true;
    });
})();
</script>
@endpush