@extends('admin.layouts.admin')

@section('title', 'Products - SIVILIMA Admin')
@section('breadcrumb_title', 'Products')
@section('breadcrumb')
  <li class="breadcrumb-item active" aria-current="page">Products</li>
@endsection

@section('content')
@if(session('success'))
<div class="alert alert-success alert-dismissible fade show"><button type="button" class="btn-close" data-bs-dismiss="alert"></button>{{ session('success') }}</div>
@endif

<div class="row">
  <div class="col-12">
    <div class="card">
      <div class="card-header d-flex justify-content-between align-items-center">
        <h6 class="mb-0">All Products ({{ $products->count() }})</h6>
        <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#addProductModal">+ Add Product</button>
      </div>
      <div class="card-body">
        <div class="table-responsive">
          <table class="table table-bordered align-middle">
            <thead>
              <tr>
                <th width="60">#</th>
                <th>Image</th>
                <th>Name</th>
                <th>Category</th>
                <th>Price (Rs.)</th>
                <th width="70">Order</th>
                <th width="70">Status</th>
                <th width="100">Actions</th>
              </tr>
            </thead>
            <tbody>
              @forelse($products as $product)
              <tr>
                <td>{{ $loop->iteration }}</td>
                <td>
                  @if($product->image)
                    <img src="{{ Str::startsWith($product->image ?? '', 'products/') ? asset('storage/' . $product->image) : asset($product->image ?? 'images/hero_ceiling.png') }}" style="width:60px;height:40px;object-fit:cover;border-radius:4px;">
                  @else
                    <span class="text-muted">-</span>
                  @endif
                </td>
                <td><strong>{{ $product->name }}</strong></td>
                <td><span class="badge bg-secondary">{{ $product->category->name ?? '-' }}</span></td>
                <td>{{ number_format($product->price, 2) }}</td>
                <td>{{ $product->sort_order }}</td>
                <td>
                  @if($product->is_active)
                    <span class="badge bg-success">Active</span>
                  @else
                    <span class="badge bg-warning text-dark">Draft</span>
                  @endif
                </td>
                <td>
                  <div class="d-flex gap-1">
                    <a href="{{ route('admin.products.edit', $product) }}" class="btn btn-sm btn-outline-primary"><i class="bi bi-pencil"></i></a>
                    <form method="POST" action="{{ route('admin.products.destroy', $product) }}" onsubmit="return confirm('Delete?')" style="display:inline">
                      @csrf @method('DELETE')
                      <button class="btn btn-sm btn-outline-danger"><i class="bi bi-trash"></i></button>
                    </form>
                  </div>
                </td>
              </tr>
              @empty
              <tr><td colspan="8" class="text-center text-muted py-4">No products yet.</td></tr>
              @endforelse
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Add Product Modal -->
<div class="modal fade" id="addProductModal" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
        <form method="POST" action="{{ route('admin.products.store') }}" enctype="multipart/form-data">
        @csrf
        <div class="modal-header"><h5 class="modal-title">Add New Product</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
        <div class="modal-body">
          <div class="row g-3">
            <div class="col-md-6">
              <label class="form-label">Name *</label>
              <input type="text" name="name" class="form-control" required>
            </div>
            <div class="col-md-6">
              <label class="form-label">Category *</label>
              <select name="category_id" class="form-select" required>
                <option value="">Select...</option>
                @foreach($categories as $cat)
                <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                @endforeach
              </select>
            </div>
            <div class="col-md-4">
              <label class="form-label">Price (Rs.)</label>
              <input type="number" name="price" class="form-control" step="0.01" min="0" value="0">
            </div>
            <div class="col-md-4">
              <label class="form-label">Sort Order</label>
              <input type="number" name="sort_order" class="form-control" value="0">
            </div>
            <div class="col-md-4">
              <label class="form-label">Status</label>
              <select name="is_active" class="form-select">
                <option value="1">Active</option>
                <option value="0">Draft</option>
              </select>
            </div>
            <div class="col-12">
              <label class="form-label">Image</label>
              <input type="file" name="image" class="form-control" accept="image/*">
              <small class="text-muted">JPG, PNG, WebP - Max 5MB</small>
            </div>
            <div class="col-12">
              <label class="form-label">Description</label>
              <textarea name="description" class="form-control" rows="3"></textarea>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary">Save Product</button>
        </div>
      </form>
    </div>
  </div>
</div>
@endsection