@extends('layouts.vendor')

@section('title', 'Frame Catalog')
@section('header_title', 'Eyewear & Frame Catalog Management')

@section('content')
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;">
        <p style="color: var(--text-muted);">Manage your optical store's frames, upload photos, and attach AR try-on assets.</p>
        <button onclick="document.getElementById('addFrameModal').style.display='block'" class="btn btn-primary">
            <i class="fa-solid fa-plus"></i> Upload New Frame
        </button>
    </div>

    <div class="card">
        <table>
            <thead>
                <tr>
                    <th>Frame Info</th>
                    <th>Category</th>
                    <th>Specifications</th>
                    <th>Price</th>
                    <th>Stock</th>
                    <th>AR Try-On</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($frames as $frame)
                    <tr>
                        <td>
                            <strong style="color: #fff; font-size: 1.05rem;">{{ $frame->name }}</strong>
                            <div style="font-size: 0.8rem; color: var(--text-muted);">{{ Str::limit($frame->description, 50) }}</div>
                        </td>
                        <td>
                            <div>{{ $frame->category->name ?? 'General' }}</div>
                            <div style="font-size: 0.8rem; color: var(--text-muted);">{{ $frame->subCategory->name ?? '' }}</div>
                        </td>
                        <td>
                            <div><strong>{{ $frame->shape ?? 'Standard' }}</strong> | {{ $frame->rim_type ?? 'Full-rim' }}</div>
                            <div style="font-size: 0.8rem; color: var(--text-muted);">Color: {{ $frame->color ?? 'Black' }} | Size: {{ $frame->size ?? 'Medium' }} | {{ $frame->gender ?? 'Unisex' }}</div>
                        </td>
                        <td style="color: #10B981; font-weight: 700; font-size: 1.1rem;">₹{{ number_format($frame->price, 2) }}</td>
                        <td><span class="badge {{ $frame->stock_quantity <= $frame->low_stock_threshold ? 'badge-danger' : 'badge-success' }}">{{ $frame->stock_quantity }} units</span></td>
                        <td>
                            @if($frame->tryon_image_url)
                                <span class="badge badge-success"><i class="fa-solid fa-check"></i> Enabled</span>
                            @else
                                <span class="badge badge-danger">Not Uploaded</span>
                            @endif
                        </td>
                        <td>
                            <form action="{{ route('vendor.frames.delete', $frame->id) }}" method="POST" onsubmit="return confirm('Delete this frame from catalog?');">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-danger" style="font-size: 0.8rem; padding: 0.4rem 0.8rem;">
                                    <i class="fa-solid fa-trash"></i> Delete
                                </button>
                            </form>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="7" style="text-align: center; color: var(--text-muted); padding: 2rem;">No frames in your catalog yet.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>

        <div style="margin-top: 1.5rem;">
            {{ $frames->links() }}
        </div>
    </div>

    <!-- Upload Frame Modal -->
    <div id="addFrameModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 1000; backdrop-filter: blur(5px);">
        <div style="background: #1E293B; border: 1px solid var(--border); border-radius: 20px; max-width: 620px; margin: 3rem auto; padding: 2rem; position: relative; max-height: 90vh; overflow-y: auto;">
            <button onclick="document.getElementById('addFrameModal').style.display='none'" style="position: absolute; top: 1.5rem; right: 1.5rem; background: none; border: none; color: #fff; font-size: 1.2rem; cursor: pointer;">
                <i class="fa-solid fa-xmark"></i>
            </button>

            <h3 style="margin-bottom: 1.5rem;"><i class="fa-solid fa-glasses" style="color: var(--primary);"></i> Upload New Frame / Eyewear</h3>

            <form action="{{ route('vendor.frames.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div>
                    <label>Frame Model Name *</label>
                    <input type="text" name="name" placeholder="e.g. AeroClassic Titanium Aviator" required>
                </div>

                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
                    <div>
                        <label>Category</label>
                        <select name="category_id">
                            <option value="">-- Select Category --</option>
                            @foreach($categories as $cat)
                                <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label>Price (₹) *</label>
                        <input type="number" name="price" placeholder="1499" step="0.01" required>
                    </div>
                </div>

                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
                    <div>
                        <label>Opening Stock *</label>
                        <input type="number" name="stock_quantity" value="0" min="0" required>
                    </div>
                    <div>
                        <label>Low Stock Alert At</label>
                        <input type="number" name="low_stock_threshold" value="5" min="0">
                    </div>
                </div>

                <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem;">
                    <div>
                        <label>Shape</label>
                        <select name="shape">
                            <option value="Aviator">Aviator</option>
                            <option value="Round">Round</option>
                            <option value="Rectangle">Rectangle</option>
                            <option value="Square">Square</option>
                            <option value="Wayfarer">Wayfarer</option>
                            <option value="Cat-Eye">Cat-Eye</option>
                        </select>
                    </div>
                    <div>
                        <label>Rim Type</label>
                        <select name="rim_type">
                            <option value="Full-rim">Full-rim</option>
                            <option value="Half-rim">Half-rim</option>
                            <option value="Rimless">Rimless</option>
                        </select>
                    </div>
                    <div>
                        <label>Size</label>
                        <select name="size">
                            <option value="Medium">Medium</option>
                            <option value="Small">Small</option>
                            <option value="Large">Large</option>
                        </select>
                    </div>
                </div>

                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
                    <div>
                        <label>Color</label>
                        <input type="text" name="color" placeholder="e.g. Matte Black, Gold">
                    </div>
                    <div>
                        <label>Target Gender</label>
                        <select name="gender">
                            <option value="Unisex">Unisex</option>
                            <option value="Men">Men</option>
                            <option value="Women">Women</option>
                            <option value="Kids">Kids</option>
                        </select>
                    </div>
                </div>

                <div>
                    <label>Description</label>
                    <textarea name="description" rows="2" placeholder="Material, frame dimensions, warranty..."></textarea>
                </div>

                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
                    <div>
                        <label>Catalog Photos (Multiple)</label>
                        <input type="file" name="images[]" multiple accept="image/*">
                    </div>
                    <div>
                        <label>AR Try-On Image (Transparent PNG)</label>
                        <input type="file" name="tryon_image" accept="image/png">
                    </div>
                </div>

                <button type="submit" class="btn btn-primary" style="width: 100%; justify-content: center; padding: 0.85rem; font-size: 1rem;">
                    <i class="fa-solid fa-cloud-arrow-up"></i> Upload Frame to Catalog
                </button>
            </form>
        </div>
    </div>
@endsection
