@extends('layouts.app')

@section('title', 'Add Product | Saai Cards')

@section('content')
<div class="max-w-2xl mx-auto">
    <div class="mb-lg flex justify-between items-center">
        <div>
            <h2 class="font-headline-md text-headline-md text-on-surface">Add Product</h2>
            <p class="font-body-md text-body-md text-on-surface-variant">Add a new product for standard booking</p>
        </div>
        <a href="{{ route('masters.products.index') }}" class="text-primary font-label-md text-label-md hover:underline">Back to List</a>
    </div>

    <form action="{{ route('masters.products.store') }}" method="POST" class="bg-surface-container-lowest rounded-xl custom-shadow border border-surface-container p-xl space-y-md">
        @csrf
        
        <div>
            <label class="block font-label-md text-label-md text-on-surface-variant mb-1">Category <span class="text-error">*</span></label>
            <select name="category_id" class="w-full bg-surface-container-low border border-outline-variant rounded-lg px-md py-sm text-body-md focus:border-primary outline-none" required>
                <option value="">Select Category</option>
                @foreach($categories as $cat)
                    <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                @endforeach
            </select>
        </div>

        <div>
            <label class="block font-label-md text-label-md text-on-surface-variant mb-1">Product Name <span class="text-error">*</span></label>
            <input type="text" name="name" class="w-full bg-surface-container-low border border-outline-variant rounded-lg px-md py-sm text-body-md focus:border-primary outline-none" required>
        </div>

        <div>
            <label class="block font-label-md text-label-md text-on-surface-variant mb-1">Price (Rs)</label>
            <input type="number" step="0.01" name="price" class="w-full bg-surface-container-low border border-outline-variant rounded-lg px-md py-sm text-body-md focus:border-primary outline-none" value="0">
        </div>

        <div class="flex items-center gap-2">
            <input type="checkbox" name="status" id="status" value="1" checked class="w-4 h-4 text-primary rounded border-outline">
            <label for="status" class="font-body-md text-on-surface">Active</label>
        </div>

        <div class="pt-md border-t border-outline-variant/30 text-right">
            <button type="submit" class="bg-primary text-on-primary px-xl py-sm rounded-lg font-bold hover:brightness-110 transition-all shadow-sm">Save Product</button>
        </div>
    </form>
</div>
@endsection