@extends('layouts.app')

@section('content')
<div class="container" style="max-width: 800px; margin: 50px auto; padding: 20px; font-family: var(--font-body);">
    <h2 style="font-family: var(--font-heading); margin-bottom: 20px;">Admin Dashboard</h2>
    
    @if(session('success'))
        <div style="background-color: #d4edda; color: #155724; padding: 15px; margin-bottom: 20px; border-radius: 4px;">
            {{ session('success') }}
        </div>
    @endif
    
    @if(session('error'))
        <div style="background-color: #f8d7da; color: #721c24; padding: 15px; margin-bottom: 20px; border-radius: 4px;">
            {{ session('error') }}
        </div>
    @endif

    <div style="border: 1px solid var(--border-color); padding: 30px; border-radius: 8px; background: #fdfdfd;">
        <h3 style="margin-bottom: 15px;">Upload Products via Excel</h3>
        <p style="margin-bottom: 20px; color: var(--secondary-color);">Upload an Excel or CSV file to import products to the database.</p>
        
        <form action="{{ route('admin.import') }}" method="POST" enctype="multipart/form-data" style="display: flex; flex-direction: column; gap: 15px;">
            @csrf
            <input type="file" name="file" required accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" style="padding: 10px; border: 1px solid #ccc;">
            <button type="submit" style="padding: 12px 20px; background-color: var(--primary-color); color: #fff; border: none; cursor: pointer; border-radius: 4px; font-weight: bold;">
                Upload & Import
            </button>
        </form>
    </div>
    
    <div style="margin-top: 40px;">
        <h3>Current Products ({{ count($products) }})</h3>
        <table style="width: 100%; text-align: left; border-collapse: collapse; margin-top: 15px;">
            <thead>
                <tr style="border-bottom: 2px solid var(--border-color);">
                    <th style="padding: 10px 0;">Name</th>
                    <th style="padding: 10px 0;">Price</th>
                    <th style="padding: 10px 0;">Carat</th>
                </tr>
            </thead>
            <tbody>
                @forelse($products as $product)
                <tr style="border-bottom: 1px solid #eee;">
                    <td style="padding: 10px 0;">{{ $product->name }}</td>
                    <td style="padding: 10px 0;">{{ $product->price }}</td>
                    <td style="padding: 10px 0;">{{ $product->carat }}</td>
                </tr>
                @empty
                <tr>
                    <td colspan="3" style="padding: 20px 0; color: #888; text-align: center;">No products found in the database.</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection