@extends('layouts.vendor')

@section('title', 'Contact Lenses')
@section('header_title', 'Contact Lens 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 contact lenses inventory and color try-on assets.</p>
        <button onclick="document.getElementById('addLensModal').style.display='block'" class="btn btn-primary">
            <i class="fa-solid fa-plus"></i> Upload New Contact Lens
        </button>
    </div>

    <div class="card">
        <table>
            <thead>
                <tr>
                    <th>Lens Title</th>
                    <th>Category</th>
                    <th>Color & Type</th>
                    <th>Price</th>
                    <th>Stock</th>
                    <th>Try-On Asset</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($lenses as $lens)
                    <tr>
                        <td>
                            <strong style="color: #fff; font-size: 1.05rem;">{{ $lens->name }}</strong>
                            <div style="font-size: 0.8rem; color: var(--text-muted);">{{ Str::limit($lens->description, 50) }}</div>
                        </td>
                        <td>
                            <div>{{ $lens->category->name ?? 'General' }}</div>
                            <div style="font-size: 0.8rem; color: var(--text-muted);">{{ $lens->subCategory->name ?? '' }}</div>
                        </td>
                        <td>
                            <div><strong>{{ $lens->color ?? 'Clear' }}</strong></div>
                            <div style="font-size: 0.8rem; color: var(--text-muted);">Type: {{ $lens->lens_type ?? 'Monthly' }}</div>
                        </td>
                        <td style="color: #10B981; font-weight: 700; font-size: 1.1rem;">₹{{ number_format($lens->price, 2) }}</td>
                        <td><span class="badge {{ $lens->stock_quantity <= $lens->low_stock_threshold ? 'badge-danger' : 'badge-success' }}">{{ $lens->stock_quantity }} units</span></td>
                        <td>
                            @if($lens->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.lenses.delete', $lens->id) }}" method="POST" onsubmit="return confirm('Delete this lens 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 contact lenses uploaded yet.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>

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

    <!-- Upload Lens Modal -->
    <div id="addLensModal" 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: 580px; margin: 3.5rem auto; padding: 2rem; position: relative; max-height: 90vh; overflow-y: auto;">
            <button onclick="document.getElementById('addLensModal').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-eye" style="color: var(--primary);"></i> Upload New Contact Lens</h3>

            <form action="{{ route('vendor.lenses.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div>
                    <label>Lens Name *</label>
                    <input type="text" name="name" placeholder="e.g. AquaGlow Ocean Blue Monthly Lenses" 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="750" 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; gap: 1rem;">
                    <div>
                        <label>Shade / Color</label>
                        <input type="text" name="color" placeholder="e.g. Hazel Brown, Ocean Blue">
                    </div>
                    <div>
                        <label>Lens Type / Usage</label>
                        <select name="lens_type">
                            <option value="Monthly">Monthly Disposable</option>
                            <option value="Daily">Daily Disposable</option>
                            <option value="Yearly">Yearly</option>
                        </select>
                    </div>
                </div>

                <div>
                    <label>Description</label>
                    <textarea name="description" rows="2" placeholder="Water content, diameter, base curve..."></textarea>
                </div>

                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
                    <div>
                        <label>Catalog Photos</label>
                        <input type="file" name="images[]" multiple accept="image/*">
                    </div>
                    <div>
                        <label>Try-On PNG Asset</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 Contact Lens
                </button>
            </form>
        </div>
    </div>
@endsection
