@extends('admin.layout')

@section('title', 'Create Product')

@section('admin-content')
<h1 class="text-2xl font-bold text-gray-800 mb-6">Create Product</h1>

<form method="POST" action="{{ route('admin.products.store') }}" enctype="multipart/form-data" class="space-y-6">
    @csrf
    
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">Product Name</label>
            <input type="text" name="name" required class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-primary">
        </div>
        
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">Shipping Type</label>
            <select name="shipping_type" required class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-primary">
                <option value="AIR">AIR (14 days)</option>
                <option value="SEA">SEA (70 days)</option>
            </select>
        </div>
        
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">Base Cost (₦)</label>
            <input type="number" name="base_cost" step="0.01" required class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-primary">
        </div>
        
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">Markup Price (₦)</label>
            <input type="number" name="markup_price" step="0.01" required class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-primary">
        </div>
        
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">Estimated Days</label>
            <input type="number" name="estimated_days" required class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-primary">
        </div>
        
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">Min Quantity</label>
            <input type="number" name="min_quantity" value="1" required class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-primary">
        </div>
        
        <div class="md:col-span-2">
            <label class="block text-sm font-medium text-gray-700 mb-2">Pairing Deadline</label>
            <input type="datetime-local" name="pairing_deadline" required class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-primary">
        </div>
    </div>
    
    <div>
        <label class="block text-sm font-medium text-gray-700 mb-2">Description</label>
        <textarea name="description" rows="4" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-primary"></textarea>
    </div>
    
    <div>
        <label class="block text-sm font-medium text-gray-700 mb-2">Product Images</label>
        <input type="file" name="images[]" multiple accept="image/*" class="w-full px-4 py-2 border rounded-lg">
    </div>
    
    <div class="flex items-center justify-end space-x-4">
        <a href="{{ route('admin.products.index') }}" class="px-6 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50">Cancel</a>
        <button type="submit" class="px-6 py-2 bg-green-600 text-white font-bold rounded-lg hover:bg-green-700 shadow-md">Create Product</button>
    </div>
</form>
@endsection