@extends('layouts.admin')
@section('title', 'Edit Product')
@section('page_title', 'Edit Product')
@section('page_css')
    <link rel="stylesheet" href="{{ asset('css/admin/forms.css') }}">
@endsection
@section('content')
    <x-admin.page-header title="Edit Product" :breadcrumb="[['label' => 'Products', 'url' => route('admin.products.index')], ['label' => $product->name]]" />
    <x-admin.form-card title="Edit Product Details" :action="route('admin.products.update', $product->id)" method="PUT" enctype="multipart">
        <div class="form-grid">
            <div class="form-group">
                <label class="form-label" for="name">Product Name <span class="form-required">*</span></label>
                <input type="text" name="name" id="name" value="{{ old('name', $product->name) }}" class="form-input" required>
                @error('name') <span class="form-error">{{ $message }}</span> @enderror
            </div>
            <div class="form-group">
                <label class="form-label" for="category_id">Category</label>
                <select name="category_id" id="category_id" class="form-select">
                    <option value="">Select Category</option>
                    @foreach($categories as $cat)
                        <option value="{{ $cat->id }}" {{ old('category_id', $product->category_id) == $cat->id ? 'selected' : '' }}>{{ $cat->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="form-group">
                <label class="form-label" for="country_id">Country</label>
                <select name="country_id" id="country_id" class="form-select" data-chained-target="#destination_id" data-chained-url="{{ route('admin.ajax.destinations') }}" data-chained-param="country_id" data-selected="{{ old('country_id', $product->country_id) }}">
                    <option value="">Select Country</option>
                    @foreach($countries as $country)
                        <option value="{{ $country->id }}" {{ old('country_id', $product->country_id) == $country->id ? 'selected' : '' }}>{{ $country->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="form-group">
                <label class="form-label" for="destination_id">Destination</label>
                <select name="destination_id" id="destination_id" class="form-select" data-chained-target="#brand_id" data-chained-url="{{ route('admin.ajax.brands') }}" data-chained-param="destination_id" data-selected="{{ old('destination_id', $product->destination_id) }}" data-error-msg="Failed to load destinations">
                    @if($product->destination)
                        <option value="{{ $product->destination->id }}" selected>{{ $product->destination->name }}</option>
                    @else
                        <option value="">Select Country first</option>
                    @endif
                </select>
            </div>
            <div class="form-group">
                <label class="form-label" for="brand_id">Brand</label>
                <select name="brand_id" id="brand_id" class="form-select" data-selected="{{ old('brand_id', $product->brand_id) }}" data-error-msg="Failed to load brands">
                    @if($product->brand)
                        <option value="{{ $product->brand->id }}" selected>{{ $product->brand->name }}</option>
                    @else
                        <option value="">Select Destination first</option>
                    @endif
                </select>
            </div>
        
            <div class="form-group">
                <label class="form-label" for="url">Product URL</label>
                <input type="url" name="url" id="url" value="{{ old('url', $product->url) }}" class="form-input">
            </div>
            <div class="form-group">
                <label class="form-label" for="price">Price ({{ config('admin.currency_symbol', '$') }})</label>
                <input type="number" name="price" id="price" value="{{ old('price', $product->price) }}" class="form-input" min="0" step="0.01">
            </div>
            <div class="form-group">
                <label class="form-label" for="discount_percent">Discount %</label>
                <input type="number" name="discount_percent" id="discount_percent" value="{{ old('discount_percent', $product->discount_percent) }}" class="form-input" min="0" max="100">
            </div>
        </div>
        <div class="form-group form-group--full">
            <label class="form-label" for="description">Description</label>
            <textarea name="description" id="description" rows="4" class="form-textarea">{{ old('description', $product->description) }}</textarea>
        </div>
        <div class="form-toggles-row">
            <div class="form-toggle">
                <label class="toggle-label" for="is_top">Top Product</label>
                <label class="toggle-switch">
                    <input type="hidden" name="is_top" value="0">
                    <input type="checkbox" name="is_top" id="is_top" value="1" {{ old('is_top', $product->is_top) ? 'checked' : '' }}>
                    <span class="toggle-slider"></span>
                </label>
            </div>
            <div class="form-toggle">
                <label class="toggle-label" for="is_popular">Popular</label>
                <label class="toggle-switch">
                    <input type="hidden" name="is_popular" value="0">
                    <input type="checkbox" name="is_popular" id="is_popular" value="1" {{ old('is_popular', $product->is_popular) ? 'checked' : '' }}>
                    <span class="toggle-slider"></span>
                </label>
            </div>
            <div class="form-toggle">
                <label class="toggle-label" for="status">Status (Active)</label>
                <label class="toggle-switch">
                    <input type="hidden" name="status" value="inactive">
                    <input type="checkbox" name="status" id="status" value="active" {{ old('status', $product->status) === 'active' ? 'checked' : '' }}>
                    <span class="toggle-slider"></span>
                </label>
            </div>
        </div>
        <x-admin.image-upload name="image" :current="$product->image" label="Product Image" />
        <div class="form-actions">
            <button type="submit" class="btn-primary-action"><i class="bi bi-check-lg"></i> Update Product</button>
            <a href="{{ route('admin.products.index') }}" class="btn-cancel">Cancel</a>
        </div>
    </x-admin.form-card>
@endsection
@section('page_js')
    <script src="{{ asset('js/admin/ajax-dropdowns.js') }}"></script>
    <script src="{{ asset('js/admin/image-preview.js') }}"></script>
@endsection