@extends('layouts.admin')

@section('content')
@if ($errors->any())
    <div style="color: red; background: #fee; padding: 10px; border-radius: 8px; margin-bottom: 20px;">
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif
<div class="page-header">
    <div>
        <h1 class="page-title">Products</h1>
        <p class="page-subtitle">Manage products with their respective categories.</p>
    </div>
    <button class="btn btn-primary" onclick="openModal('createProductModal')">
        <i class="fa-solid fa-plus"></i> Add New Product
    </button>
</div>

<div class="card">
    <div class="table-wrap">
        <table>
            <thead>
                <tr>
                    <th>Image</th>
                    <th>Product Details</th>
                    <th>Category</th>
                    <th>Status</th>
                    <th style="text-align: right;">Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach($products as $product)
                <tr>
                    <td>
                        <img src="{{ $product->image_url }}" style="width: 50px; height: 50px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border);">
                    </td>
                    <td>
                        <div class="td-name">{{ $product->title }}</div>
                        <small class="text-muted">{{ Str::limit($product->description, 40) }}</small>
                    </td>
                    <td>
                        <span class="badge" style="background: var(--surface-2); color: var(--accent);">
                            {{ $product->category->name ?? 'N/A' }}
                        </span>
                    </td>
                    <td>
                        <span class="badge {{ $product->status == 1 ? 'badge-success' : 'badge-danger' }}">
                            {{ $product->status == 1 ? 'Active' : 'Inactive' }}
                        </span>
                    </td>
                    <td style="text-align: right;">
                        <div class="action-btns" style="justify-content: flex-end;">
                            <button class="action-btn edit" onclick="editProduct({{ json_encode($product) }})">
                                <i class="fa-solid fa-pen-to-square"></i>
                            </button>
                            <form action="{{ route('admin.products.destroy', $product->id) }}" method="POST" onsubmit="return confirm('Delete this product?')">
                                @csrf @method('DELETE')
                                <button type="submit" class="action-btn delete"><i class="fa-solid fa-trash"></i></button>
                            </form>
                        </div>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

<div id="createProductModal" class="modal-overlay">
    <div class="modal-content">
        <div class="auth-header">
            <h2 class="auth-title">Add New Product</h2>
            <button class="close-btn" onclick="closeModal('createProductModal')">&times;</button>
        </div>
        <form action="{{ route('admin.products.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 15px;">
                <div class="form-group">
                    <label class="form-label">Product Title</label>
                    <input type="text" name="title" class="form-input" required style="padding-left:15px">
                </div>
                <div class="form-group">
                    <label class="form-label">Category</label>
                    <select name="category_id" class="form-input" required style="padding-left:15px">
                        <option value="">Select Category</option>
                        @foreach($categories as $cat)
                            <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="form-label">Description</label>
                <textarea name="description" class="form-input" rows="3" style="padding:10px; height:auto"></textarea>
            </div>
            <div class="form-group">
                <label class="form-label">Product Image</label>
                <input type="file" name="image" class="form-input" required style="padding:10px">
            </div>
            <div class="form-group">
                <label class="form-label">Status</label>
                <select name="status" class="form-input" style="padding-left:15px">
                    <option value="1">Active</option>
                    <option value="0">Inactive</option>
                </select>
            </div>
            <button type="submit" class="btn btn-primary btn-auth" style="margin-top:20px">Save Product</button>
        </form>
    </div>
</div>

<div id="editProductModal" class="modal-overlay">
    <div class="modal-content">
        <div class="auth-header">
            <h2 class="auth-title">Edit Product</h2>
            <button class="close-btn" onclick="closeModal('editProductModal')">&times;</button>
        </div>
        <form id="editProductForm" method="POST" enctype="multipart/form-data">
            @csrf @method('PUT')
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 15px;">
                <div class="form-group">
                    <label class="form-label">Product Title</label>
                    <input type="text" name="title" id="edit_title" class="form-input" required style="padding-left:15px">
                </div>
                <div class="form-group">
                    <label class="form-label">Category</label>
                    <select name="category_id" id="edit_category_id" class="form-input" required style="padding-left:15px">
                        @foreach($categories as $cat)
                            <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="form-label">Description</label>
                <textarea name="description" id="edit_description" class="form-input" rows="3" style="padding:10px; height:auto"></textarea>
            </div>
            <div class="form-group">
                <label class="form-label">Update Image (Optional)</label>
                <input type="file" name="image" class="form-input" style="padding:10px">
            </div>
            <div class="form-group">
                <label class="form-label">Status</label>
                <select name="status" id="edit_status" class="form-input" style="padding-left:15px">
                    <option value="1">Active</option>
                    <option value="0">Inactive</option>
                </select>
            </div>
            <button type="submit" class="btn btn-primary btn-auth" style="margin-top:20px">Update Product</button>
        </form>
    </div>
</div>

@push('styles')
<style>
    .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.8); display: none; align-items: center; justify-content: center; z-index: 3000; backdrop-filter: blur(8px); padding: 20px; }
    .modal-overlay.active { display: flex; }
    .modal-content { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; width: 100%; max-width: 700px; padding: 40px; position: relative; max-height: 90vh; overflow-y: auto; }
    .badge-success { background: rgba(16, 185, 129, 0.1); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.2); }
    .badge-danger { background: rgba(239, 68, 68, 0.1); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.2); }
</style>
@endpush

@push('scripts')
<script>
    function openModal(id) { document.getElementById(id).classList.add('active'); }
    function closeModal(id) { document.getElementById(id).classList.remove('active'); }

    function editProduct(product) {
        const form = document.getElementById('editProductForm');
        form.action = `/admin/products/${product.id}`;
        
        document.getElementById('edit_title').value = product.title;
        document.getElementById('edit_category_id').value = product.category_id;
        document.getElementById('edit_description').value = product.description || '';
        document.getElementById('edit_status').value = product.status;

        openModal('editProductModal');
    }

    window.onclick = function(event) {
        if (event.target.classList.contains('modal-overlay')) {
            event.target.classList.remove('active');
        }
    }
</script>
@endpush
@endsection