@extends('admin.layouts.admin')

@section('admin_content') 
 <div class="row">
            <div class="page-title-heading">Add Product</div>
     

        {{-- Success / Error Messages --}}
        @if(session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif

        @if(session('error'))
            <div class="alert alert-danger">{{ session('error') }}</div>
        @endif

        {{-- Validation Errors --}}
        @if($errors->any())
            <div class="alert alert-danger">
                <ul>
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

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

            {{-- Category --}}
            <div class="mb-3">
                <label>Category</label>
                <select name="category_id" class="form-control" required onchange="generateSlug()">
                    @foreach ($categories as $cat)
                        <option value="{{ $cat->id }}" {{ old('category_id') == $cat->id ? 'selected' : '' }}>
                            {{ $cat->name }}
                        </option>
                    @endforeach
                </select>
            </div>

            {{-- Category Slug --}}
            <div class="mb-3">
                <label>Category Slug</label>
                <input type="text" id="slug" class="form-control" readonly>
            </div>

            {{-- Item Name --}}
            <div class="mb-3">
                <label>Item Name</label>
                <input type="text" name="name" id="itemname" class="form-control" value="{{ old('name') }}" required>
            </div>

            {{-- Item Slug --}}
            <div class="mb-3">
                <label>Item Slug</label>
                <input type="text" id="itemslug" name="slug" class="form-control" readonly>
            </div>

            {{-- Description --}}
            <div class="mb-3">
                <label>Description</label>
                <textarea name="description" class="form-control" rows="4">{{ old('description') }}</textarea>
            </div>

            {{-- Image --}}
            <div class="mb-3">
                <label>Image</label>
                <input type="file" name="thumbnail" class="form-control" required>
            </div>

            {{-- Quantity --}}
            <div class="mb-3">
                <label>Quantity</label>
                <input type="number" name="stock" class="form-control" value="{{ old('stock') }}">
            </div>

            {{-- Price --}}
            <div class="mb-3">
                <label>Price</label>
                <input type="text" name="price" class="form-control" value="{{ old('price') }}">
            </div>

            {{-- SEO Fields --}}
            <div class="mb-3">
                <label>SEO Title</label>
                <input type="text" name="title_seo" class="form-control" value="{{ old('title_seo') }}">
            </div>

            <div class="mb-3">
                <label>SEO Description</label>
                <textarea name="description_seo" class="form-control" rows="4">{{ old('description_seo') }}</textarea>
            </div>

            <div class="mb-3">
                <label>SEO Keywords</label>
                <input type="text" name="keywords_seo" class="form-control" value="{{ old('keywords_seo') }}">
            </div>

            <button type="submit" class="btn btn-success">Add Product</button>
        </form>
</div>

{{-- Slug generation --}}
<script>
function generateSlug() {
    let cat = document.querySelector('[name="category_id"]');
    let catText = cat.options[cat.selectedIndex].text.toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9-]/g,'');
    let item = document.getElementById('itemname').value.toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9-]/g,'');
    document.getElementById('slug').value = catText;
    document.getElementById('itemslug').value = item;
}

document.getElementById('itemname').addEventListener('input', generateSlug);
document.querySelector('[name="category_id"]').addEventListener('change', generateSlug);
</script>
@endsection