@extends('layout2.clim.admin-header')

@section('content')
    <div class="container-fluid px-4 py-4">
        <div class="card shadow-sm border-0">
            <div class="card-header bg-white d-flex justify-content-between align-items-center py-3">
                <h5 class="mb-0 text-primary">
                    @isset($product)
                        Edit
                    @else
                        Create
                    @endisset Product
                </h5>
                <a href="{{ route('products.index') }}" class="btn btn-outline-secondary">
                    <i class="fas fa-arrow-left me-2"></i> Back
                </a>
            </div>

            <div class="card-body">
                <form
                    action="@isset($product) {{ route('products.update', $product->id) }} @else {{ route('products.store') }} @endisset"
                    method="POST" enctype="multipart/form-data">
                    @csrf
                    @isset($product)
                        @method('PUT')
                    @endisset

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="name" class="form-label">Product Name <span
                                        class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="name" name="name" required
                                    value="{{ old('name', $product->name ?? '') }}">
                            </div>

                            <div class="mb-3">
                                <label for="description" class="form-label">Description <span
                                        class="text-danger">*</span></label>
                                <textarea class="form-control" id="description" name="description" rows="4" required>{{ old('description', $product->description ?? '') }}</textarea>
                            </div>
                            <div class="mb-3">
                                <label for="image" class="form-label">Product Image <span
                                        class="text-danger">*</span></label>
                                <input type="file" class="form-control" id="image" name="image"
                                    @empty($product) required @endempty accept="image/*">
                                @isset($product->image)
                                    <img id="existingImage" src="{{ asset('storage/' . $product->image) }}" alt="Current image"
                                        class="img-thumbnail" width="100">
                                @endisset
                                <img id="imagePreview" src="#" alt="Image preview" class="img-thumbnail d-none"
                                    width="100">
                                <small class="text-muted">Max file size: 500KB</small>
                            </div>
                        </div>

                        <div class="col-md-6">


                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="old_price" class="form-label">Old Price</label>
                                        <input type="number" step="0.01" class="form-control" id="old_price"
                                            name="old_price" value="{{ old('old_price', $product->old_price ?? '') }}">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="new_price" class="form-label">New Price <span
                                                class="text-danger">*</span></label>
                                        <input type="number" step="0.01" class="form-control" id="new_price"
                                            name="new_price" required
                                            value="{{ old('new_price', $product->new_price ?? '') }}">
                                    </div>
                                </div>
                            </div>

                            <div class="mb-3">
                                <label for="in_stock" class="form-label">In Stock <span class="text-danger">*</span></label>
                                <input type="number" class="form-control" id="in_stock" name="in_stock" required
                                    value="{{ old('in_stock', $product->in_stock ?? 0) }}">
                            </div>

                            <div class="mb-3">
                                <label for="category_id" class="form-label">Category <span
                                        class="text-danger">*</span></label>
                                <select class="form-select" id="category_id" name="category_id" required>
                                    <option value="">Select Category</option>
                                    @foreach ($categories as $category)
                                        <option value="{{ $category->id }}" @selected(old('category_id', $product->category_id ?? '') == $category->id)>
                                            {{ $category->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="mb-3">
                                <label for="sub_category_id" class="form-label">Sub Category</label>
                                <select class="form-select" id="sub_category_id" name="sub_category_id">
                                    <option value="">Select Sub Category</option>
                                    @foreach ($subcategories as $subcategory)
                                        <option value="{{ $subcategory->id }}" @selected(old('sub_category_id', $product->sub_category_id ?? '') == $subcategory->id)>
                                            {{ $subcategory->name }}
                                            ({{ $subcategory->category->name ?? 'Uncategorized' }})
                                        </option>
                                    @endforeach
                                </select>
                            </div>


                            <div class="mb-3 form-check">
                                <input type="checkbox" class="form-check-input" id="is_top_selling"
                                    name="is_top_selling" @checked(old('is_top_selling', $product->is_top_selling ?? false))>
                                <label class="form-check-label" for="is_top_selling">Top Selling Product</label>
                            </div>

                            <div class="mb-3 form-check">
                                <input type="checkbox" class="form-check-input" id="new_arrival" name="new_arrival"
                                    @checked(old('new_arrival', $product->new_arrival ?? false))>
                                <label class="form-check-label" for="new_arrival">New Arrival</label>
                            </div>
                        </div>
                    </div>

                    <div class="d-flex justify-content-end gap-2 mt-3">
                        <a href="{{ route('products.index') }}" class="btn btn-secondary">Cancel</a>
                        <button type="submit" class="btn btn-primary">
                            @isset($product)
                                Update
                            @else
                                Create
                            @endisset Product
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        // Image Preview Functionality
        document.getElementById('image').addEventListener('change', function(e) {
            const file = e.target.files[0];

            // Validate file size
            if (file && file.size > 500 * 1024) {
                alert('File size exceeds 500KB limit');
                e.target.value = '';
                return;
            }

            // Show preview
            if (file) {
                const reader = new FileReader();

                reader.onload = function(e) {
                    // Hide existing image (if editing)
                    const existingImage = document.getElementById('existingImage');
                    if (existingImage) {
                        existingImage.classList.add('d-none');
                    }

                    // Show new preview
                    const preview = document.getElementById('imagePreview');
                    preview.src = e.target.result;
                    preview.classList.remove('d-none');
                }

                reader.readAsDataURL(file);
            }
        });
    </script>
@endsection