@extends('layouts.admin')
@section('content')
    <div class="main-card">
        @include('admin.partials.page-header', [
            'icon' => 'bi bi-bag',
            'title' => 'Edit Product',
            'subtitle' => 'Modify your product details, availability, and sync status.',
            'show_back' => true,
            'back_url' => route('admin.products.index'),
        ])
    </div>
    <div class="row justify-content-center mt-3">
        <div class="col-xl-12 col-lg-10">
            <form id="productForm" action="{{ route('admin.products.update', $product->id) }}" method="POST"
                isReload="{{ route('admin.products.index') }}">
                @csrf
                <div class="row g-4">
                    <div class="col-lg-8">
                        <div class="card border-0 shadow-sm rounded-4 p-4 bg-white mb-4">
                            <div class="d-flex align-items-center gap-2 mb-4 border-bottom pb-3">
                                <div class="p-2 bg-primary-subtle text-primary rounded-3">
                                    <i class="ti ti-box fs-5 d-block"></i>
                                </div>
                                <h5 class="fw-bold mb-0 text-dark">Primary Details</h5>
                            </div>

                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label
                                        class="form-label text-xs fw-bold text-uppercase text-muted tracking-wider">Product
                                        Name</label>
                                    <input type="text" name="name" class="form-control form-control-lg rounded-3 fs-6"
                                        value="{{ old('name', $product->name) }}" placeholder="Enter product name">
                                </div>

                                <div class="col-md-6">
                                    <label
                                        class="form-label text-xs fw-bold text-uppercase text-muted tracking-wider">Slug</label>
                                    <div class="input-group input-group-lg">
                                        <span
                                            class="input-group-text bg-light text-muted border-end-0 rounded-start-3 fs-6">/</span>
                                        <input type="text" id="slug" name="slug" readonly
                                            class="form-control rounded-end-3 fs-6 bg-light"
                                            value="{{ old('slug', $product->slug) }}">
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label text-xs fw-bold text-uppercase text-muted tracking-wider">Brand
                                        Name</label>
                                    <input type="text" name="brand_name"
                                        class="form-control form-control-lg rounded-3 fs-6 bg-light"
                                        value="{{ old('brand_name', $product->brand_name) }}" placeholder="Enter Brand Name"
                                        readonly>
                                </div>

                                <div class="col-md-6">
                                    <label
                                        class="form-label text-xs fw-bold text-uppercase text-muted tracking-wider">Category</label>
                                    <input type="text" name="category"
                                        class="form-control form-control-lg rounded-3 fs-6"
                                        value="{{ old('category', $product->category) }}" placeholder="Category">
                                </div>

                                <div class="col-md-8">
                                    <label
                                        class="form-label text-xs fw-bold text-uppercase text-muted tracking-wider">Retail
                                        Value</label>
                                    <div class="input-group input-group-lg">
                                        <span
                                            class="input-group-text bg-light text-dark border-end-0 rounded-start-3 fw-semibold fs-6">
                                            {{ strtoupper($product->price_currency ?? 'USD') }}
                                        </span>
                                        <input type="number" step="0.01" name="retail_value"
                                            class="form-control rounded-end-3 fs-6"
                                            value="{{ old('retail_value', $product->retail_value) }}" placeholder="0.00">
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <label
                                        class="form-label text-xs fw-bold text-uppercase text-muted tracking-wider">Currency</label>
                                    <input type="text"
                                        class="form-control form-control-lg rounded-3 bg-light text-muted fw-bold text-center fs-6"
                                        value="{{ strtoupper($product->price_currency) }}" readonly>
                                </div>
                            </div>
                        </div>

                        <div class="card border-0 shadow-sm rounded-4 p-4 bg-white">
                            <div class="d-flex align-items-center gap-2 mb-4 border-bottom pb-3">
                                <div class="p-2 bg-success-subtle text-success rounded-3">
                                    <i class="ti ti-adjustments fs-5 d-block"></i>
                                </div>
                                <h5 class="fw-bold mb-0 text-dark">Product Configurations</h5>
                            </div>

                            <div class="row g-3">
                                <div class="col-12">
                                    <label
                                        class="custom-option-card d-flex align-items-center justify-content-between p-3 rounded-3 border cursor-pointer w-100">
                                        <div class="d-flex align-items-center gap-3">
                                            <div class="icon-box p-2 rounded bg-light">
                                                <i class="ti ti-circle-check text-success fs-4"></i>
                                            </div>
                                            <div>
                                                <span class="fw-bold d-block text-dark">Available for Store</span>
                                                <small class="text-muted">Visible to customers and ready for
                                                    checkout.</small>
                                            </div>
                                        </div>
                                        <div class="form-check form-switch mb-0">
                                            <input class="form-check-input cursor-pointer" type="checkbox"
                                                name="is_available" id="is_available"
                                                {{ $product->is_available ? 'checked' : '' }}>
                                        </div>
                                    </label>
                                </div>

                                <div class="col-12">
                                    <label
                                        class="custom-option-card d-flex align-items-center justify-content-between p-3 rounded-3 border cursor-pointer w-100">
                                        <div class="d-flex align-items-center gap-3">
                                            <div class="icon-box p-2 rounded bg-light">
                                                <i class="ti ti-cloud text-info fs-4"></i>
                                            </div>
                                            <div>
                                                <span class="fw-bold d-block text-dark">Virtual Product</span>
                                                <small class="text-muted">Digital delivery item, no physical shipping
                                                    required.</small>
                                            </div>
                                        </div>
                                        <div class="form-check form-switch mb-0">
                                            <input class="form-check-input cursor-pointer" type="checkbox" name="is_virtual"
                                                id="is_virtual"{{ $product->is_virtual ? 'checked' : '' }}>
                                        </div>
                                    </label>
                                </div>

                                <div class="col-12">
                                    <label
                                        class="custom-option-card d-flex align-items-center justify-content-between p-3 rounded-3 border cursor-pointer w-100">
                                        <div class="d-flex align-items-center gap-3">
                                            <div class="icon-box p-2 rounded bg-light">
                                                <i class="ti ti-rss text-warning fs-4"></i>
                                            </div>
                                            <div>
                                                <span class="fw-bold d-block text-dark">Live Feed Connection</span>
                                                <small class="text-muted">Enable automatic real-time stream
                                                    synchronization.</small>
                                            </div>
                                        </div>
                                        <div class="form-check form-switch mb-0">
                                            <input class="form-check-input cursor-pointer" type="checkbox" name="live_feed"
                                                id="live_feed" {{ $product->live_feed ? 'checked' : '' }}>
                                        </div>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-4">
                        <div class="card border-0 shadow-sm rounded-4 p-4 bg-white position-sticky" style="top: 24px;">
                            <div class="d-flex align-items-center gap-2 mb-4 border-bottom pb-3">
                                <div class="p-2 bg-warning-subtle text-warning rounded-3">
                                    <i class="ti ti-refresh fs-5 d-block"></i>
                                </div>
                                <h5 class="fw-bold mb-0 text-dark">System Sync</h5>
                            </div>

                            <div class="mb-4">
                                <span class="text-xs fw-bold text-uppercase text-muted tracking-wider d-block mb-2">G2G
                                    Platform Integration</span>
                                <div class="p-3 bg-light rounded-3 d-flex align-items-center justify-content-between">
                                    <span class="small text-secondary fw-medium">Uploaded to G2G</span>
                                    @if ($product->is_uploaded)
                                        <span class="badge bg-success text-white px-2 py-1 rounded-2 small">Active</span>
                                    @else
                                        <span
                                            class="badge bg-secondary text-white px-2 py-1 rounded-2 small">Pending</span>
                                    @endif
                                </div>
                            </div>

                            <div class="mb-2">
                                <span
                                    class="text-xs fw-bold text-uppercase text-muted tracking-wider d-block mb-2">Management
                                    Type</span>
                                <div class="p-3 bg-light rounded-3 d-flex align-items-center justify-content-between">
                                    <span class="small text-secondary fw-medium">Manual Override</span>
                                    @if ($product->is_edited)
                                        <span class="text-info fw-bold small d-flex align-items-center gap-1">
                                            <span class="p-1 rounded-circle bg-info d-inline-block"></span> Manual
                                        </span>
                                    @else
                                        <span class="text-muted fw-semibold small d-flex align-items-center gap-1">
                                            <span class="p-1 rounded-circle bg-secondary d-inline-block"></span>
                                            Automated
                                        </span>
                                    @endif
                                </div>
                            </div>
                            <div class="mb-2 mt-4">
                                <button type="submit" data-loading class="btn btn-primary">
                                    <span class="btn-text">
                                        Save Changes
                                    </span>
                                    <span class="btn-spinner d-none">
                                        <span class="spinner-border spinner-border-sm"></span>
                                        Saving...
                                    </span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection
@push('scripts')
    <script>
        initAdvancedFormValidation('#productForm', {
            name: {
                required: true
            },
            slug: {
                required: true
            },
            brand_id: {
                required: true
            },
            category: {
                required: true
            },
            retail_value: {
                required: true,
                number: true,
                min: 0
            }
        }, 
        {
            name: {
                required: 'Please enter product name.'
            },
            slug: {
                required: 'Please enter slug.'
            },
            brand_id: {
                required: 'Please select brand.'
            },
            category: {
                required: 'Please enter category.'
            },
            retail_value: {
                required: 'Please enter retail value.',
                number: 'Retail value must be numeric.',
                min: 'Retail value must be greater than 0.'
            }
        });
    </script>
@endpush