@extends('layouts.app')

@section('title', __('dashboard.Add New Product'))
@section('page_heading', __('dashboard.Add New Product'))


@section('content')
<div style="display:flex;align-items:center;justify-content:flex-end;gap:.5rem;margin-bottom:1.25rem">
    <a href="{{ route('dashboard.products.index') }}" class="app-btn app-btn--secondary app-btn--sm">
        <i class="fa-solid fa-arrow-right"></i> {{ __('dashboard.Products') }}
    </a>
</div>

@include('layouts.partials.workspace-page-styles')

<div class="workspace-shell">
    <div class="workspace-body">
        <div class="collection-card__header">
            <div class="collection-card__intro">
                <span class="collection-card__icon"><i class="fa-solid fa-cart-plus"></i></span>
                <div class="collection-card__title">
                    <h2>{{ __('dashboard.Add New Product') }}</h2>
                    <p>{{ __('dashboard.create_product_desc') }}</p>
                </div>
            </div>
        </div>

        <form action="{{ route('dashboard.products.store') }}" method="POST" enctype="multipart/form-data" class="mt-4">
            @csrf

            <div class="app-grid g-4">
                <div class="md:col-span-6">
                    <label class="app-label font-bold required">{{ __('dashboard.Type') }}</label>
                    <select name="type" id="product_type" class="app-input app-select @error('type') app-input--invalid @enderror" required>
                        <option value="" disabled selected>-- {{ __('dashboard.Select Type') }} --</option>
                        <option value="sale" @selected(old('type') === 'sale')>{{ __('dashboard.Sale') }}</option>
                        <option value="rent" @selected(old('type') === 'rent')>{{ __('dashboard.Rent') }}</option>
                    </select>
                    @error('type')<div class="app-field-error">{{ $message }}</div>@enderror
                </div>

                <div class="md:col-span-6">
                    <label class="app-label font-bold required">{{ __('dashboard.Category') }}</label>
                    <select name="product_category_id" id="product_category" class="app-input app-select @error('product_category_id') app-input--invalid @enderror" required>
                        <option value="" disabled selected>-- {{ __('dashboard.Select Category') }} --</option>
                    </select>
                    @error('product_category_id')<div class="app-field-error">{{ $message }}</div>@enderror
                </div>

                <div class="md:col-span-6">
                    <label class="app-label font-bold required">{{ __('dashboard.SKU') }}</label>
                    <input type="text" name="sku" class="app-input @error('sku') app-input--invalid @enderror" value="{{ old('sku') }}" required>
                    @error('sku')<div class="app-field-error">{{ $message }}</div>@enderror
                </div>

                <div class="md:col-span-6">
                    <label class="app-label font-bold required">{{ __('dashboard.Name') }}</label>
                    <input type="text" name="name" class="app-input @error('name') app-input--invalid @enderror" value="{{ old('name') }}" required>
                    @error('name')<div class="app-field-error">{{ $message }}</div>@enderror
                </div>

                <div class="md:col-span-6">
                    <label class="app-label font-bold required">{{ __('dashboard.Price') }}</label>
                    <input type="number" step="0.01" name="price" class="app-input @error('price') app-input--invalid @enderror" value="{{ old('price', 0) }}" required>
                    @error('price')<div class="app-field-error">{{ $message }}</div>@enderror
                </div>

                <div class="md:col-span-6">
                    <label class="app-label font-bold required">{{ __('dashboard.Stock') }}</label>
                    <input type="number" name="stock" class="app-input @error('stock') app-input--invalid @enderror" value="{{ old('stock', 1) }}" required>
                    @error('stock')<div class="app-field-error">{{ $message }}</div>@enderror
                </div>

                <div class="col-span-12">
                    <label class="app-label font-bold">{{ __('dashboard.Images') }}</label>
                    <input type="file" name="images[]" class="app-input" multiple onchange="previewNewImages(this.files)">
                    @error('images.*')<div class="text-red-600 dark:text-red-400">{{ $message }}</div>@enderror
                </div>

                <div id="new_images_section" class="col-span-12" style="display:none">
                    <div id="preview_new_container" class="flex flex-wrap gap-2"></div>
                </div>

                <div class="col-span-12">
                    <label class="app-label font-bold">{{ __('dashboard.Product Options') }}</label>
                    <div id="product_options_container" class="app-grid g-3"></div>
                    @error('options')<div class="text-red-600 dark:text-red-400">{{ $message }}</div>@enderror
                </div>
            </div>

            <div class="flex justify-end gap-2 mt-5">
                <a href="{{ route('dashboard.products.index') }}" class="app-btn app-btn--secondary">{{ __('dashboard.Cancel') }}</a>
                <button type="submit" class="app-btn app-btn--primary">{{ __('dashboard.Save') }}</button>
            </div>
        </form>
    </div>
</div>
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const productTypeSelect = document.getElementById('product_type');
    const productCategorySelect = document.getElementById('product_category');
    const productOptionsContainer = document.getElementById('product_options_container');

    function fetchCategories(type) {
        if (!type) { productCategorySelect.innerHTML = '<option value="" disabled selected>-- {{ __("dashboard.Select Category") }} --</option>'; productOptionsContainer.innerHTML = ''; return; }
        fetch(`/dashboard/products-get-categories-by-type/${type}`)
            .then(r => r.json())
            .then(categories => {
                let opts = '<option value="" disabled selected>-- {{ __("dashboard.Select Category") }} --</option>';
                categories.forEach(c => { opts += `<option value="${c.id}" ${oldCategoryId == c.id ? 'selected' : ''}>${c.name}</option>`; });
                productCategorySelect.innerHTML = opts;
                if (productCategorySelect.value) fetchProductOptions(productCategorySelect.value);
            });
    }

    function fetchProductOptions(categoryId) {
        if (!categoryId) { productOptionsContainer.innerHTML = ''; return; }
        fetch(`/dashboard/products-get-options-by-category/${categoryId}`)
            .then(r => r.json())
            .then(options => {
                productOptionsContainer.innerHTML = options.map(o => `
                    <div class="md:col-span-6">
                        <label class="app-label font-bold">${o.name}</label>
                        ${getOptionInput(o)}
                    </div>`).join('');
            });
    }

    function getOptionInput(option) {
        if (option.type === 'text') return `<input type="text" name="options[${option.id}][value]" class="app-input">`;
        if (option.type === 'multiple') return option.values.map(v => `<div class="app-check"><input class="app-check__input" type="checkbox" name="options[${option.id}][value][]" value="${v.value_name}" id="opt_${option.id}_${v.id}"><label class="app-check__label" for="opt_${option.id}_${v.id}">${v.value_name}</label></div>`).join('');
        if (option.type === 'color') return option.values.map(v => `<div class="app-check"><input class="app-check__input" type="radio" name="options[${option.id}][value]" value="${v.value_name}" id="opt_${option.id}_${v.id}"><label class="app-check__label" for="opt_${option.id}_${v.id}">${v.value_name}</label></div>`).join('');
        return `<input type="text" name="options[${option.id}][value]" class="app-input">`;
    }

    productTypeSelect.addEventListener('change', function () { fetchCategories(this.value); productOptionsContainer.innerHTML = ''; });
    productCategorySelect.addEventListener('change', function () { fetchProductOptions(this.value); });

    const oldType = "{{ old('type') }}";
    const oldCategoryId = "{{ old('product_category_id') }}";
    if (oldType) { productTypeSelect.value = oldType; fetchCategories(oldType); if (oldCategoryId) setTimeout(() => { productCategorySelect.value = oldCategoryId; fetchProductOptions(oldCategoryId); }, 500); }
});

function previewNewImages(files) {
    const container = document.getElementById('preview_new_container');
    container.innerHTML = '';
    document.getElementById('new_images_section').style.display = files.length ? '' : 'none';
    Array.from(files).forEach((file, i) => {
        const reader = new FileReader();
        reader.onload = e => {
            const div = document.createElement('div');
            div.className = 'text-center';
            div.innerHTML = `<img src="${e.target.result}" width="100" class="app-thumbnail mb-1"><div><input type="radio" name="main_image_index" value="${i}" id="main_${i}" ${i===0?'checked':''}><label for="main_${i}" class="app-label ms-1">{{ __('dashboard.Set as main') }}</label></div>`;
            container.appendChild(div);
        };
        reader.readAsDataURL(file);
    });
}
</script>
@endsection