@extends('layouts.app')

@section('title', 'Add Equipment')
@section('subtitle', 'Add new equipment to inventory')

@section('content')
<div class="max-w-4xl mx-auto py-4 sm:py-6 px-4 sm:px-6 lg:px-8">
    <!-- Success/Error Messages -->
    @if(session('success'))
        <div class="mb-6 bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-lg">
            <div class="flex items-center">
                <i class="fas fa-check-circle mr-2"></i>
                {{ session('success') }}
            </div>
        </div>
    @endif

    @if(session('error'))
        <div class="mb-6 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg">
            <div class="flex items-center">
                <i class="fas fa-exclamation-circle mr-2"></i>
                {{ session('error') }}
            </div>
        </div>
    @endif

    <div class="bg-white rounded-xl shadow-lg overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-200 bg-orange-50">
            <h3 class="text-lg font-medium text-gray-900">
                <i class="fas fa-plus text-orange-600 mr-2"></i>
                Add New Equipment
            </h3>
        </div>

        <form method="POST" action="{{ route('equipment.store') }}" class="p-6 space-y-6">
            @csrf

            <!-- Basic Information -->
            <div>
                <h4 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
                    <i class="fas fa-info-circle text-blue-500 mr-2"></i>
                    Basic Information
                </h4>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label for="name" class="block text-sm font-medium text-gray-700 mb-2">Equipment Name *</label>
                        <input type="text" id="name" name="name" value="{{ old('name') }}" required
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-orange-500 focus:border-orange-500 transition-colors @error('name') border-red-500 ring-red-500 @enderror"
                               placeholder="Enter equipment name">
                        @error('name')
                            <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="equipment_code" class="block text-sm font-medium text-gray-700 mb-2">Equipment Code *</label>
                        <input type="text" id="equipment_code" name="equipment_code" value="{{ old('equipment_code') }}" required
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-orange-500 focus:border-orange-500 transition-colors @error('equipment_code') border-red-500 ring-red-500 @enderror"
                               placeholder="e.g., EQ001">
                        @error('equipment_code')
                            <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="md:col-span-2">
                        <label for="description" class="block text-sm font-medium text-gray-700 mb-2">Description</label>
                        <textarea id="description" name="description" rows="3"
                                  class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-orange-500 focus:border-orange-500 transition-colors @error('description') border-red-500 ring-red-500 @enderror"
                                  placeholder="Enter equipment description">{{ old('description') }}</textarea>
                        @error('description')
                            <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Category and Condition -->
            <div>
                <h4 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
                    <i class="fas fa-tags text-green-500 mr-2"></i>
                    Category & Condition
                </h4>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label for="category" class="block text-sm font-medium text-gray-700 mb-2">Category *</label>
                        <select id="category" name="category" required
                                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-orange-500 focus:border-orange-500 transition-colors @error('category') border-red-500 ring-red-500 @enderror">
                            <option value="">Select Category</option>
                            <option value="PPE" {{ old('category') == 'PPE' ? 'selected' : '' }}>Personal Protective Equipment</option>
                            <option value="Tools" {{ old('category') == 'Tools' ? 'selected' : '' }}>Tools</option>
                            <option value="Machinery" {{ old('category') == 'Machinery' ? 'selected' : '' }}>Machinery</option>
                            <option value="Communication" {{ old('category') == 'Communication' ? 'selected' : '' }}>Communication</option>
                            <option value="Safety" {{ old('category') == 'Safety' ? 'selected' : '' }}>Safety</option>
                        </select>
                        @error('category')
                            <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="condition" class="block text-sm font-medium text-gray-700 mb-2">Condition *</label>
                        <select id="condition" name="condition" required
                                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-orange-500 focus:border-orange-500 transition-colors @error('condition') border-red-500 ring-red-500 @enderror">
                            <option value="">Select Condition</option>
                            <option value="new" {{ old('condition') == 'new' ? 'selected' : '' }}>New</option>
                            <option value="good" {{ old('condition') == 'good' ? 'selected' : '' }}>Good</option>
                            <option value="fair" {{ old('condition') == 'fair' ? 'selected' : '' }}>Fair</option>
                            <option value="needs_repair" {{ old('condition') == 'needs_repair' ? 'selected' : '' }}>Needs Repair</option>
                            <option value="damaged" {{ old('condition') == 'damaged' ? 'selected' : '' }}>Damaged</option>
                        </select>
                        @error('condition')
                            <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Purchase Information -->
            <div>
                <h4 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
                    <i class="fas fa-shopping-cart text-purple-500 mr-2"></i>
                    Purchase Information
                </h4>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div>
                        <label for="purchase_price" class="block text-sm font-medium text-gray-700 mb-2">Purchase Price</label>
                        <input type="number" id="purchase_price" name="purchase_price" value="{{ old('purchase_price') }}" step="0.01" min="0"
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-orange-500 focus:border-orange-500 transition-colors @error('purchase_price') border-red-500 ring-red-500 @enderror"
                               placeholder="0.00">
                        @error('purchase_price')
                            <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="purchase_date" class="block text-sm font-medium text-gray-700 mb-2">Purchase Date</label>
                        <input type="date" id="purchase_date" name="purchase_date" value="{{ old('purchase_date') }}"
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-orange-500 focus:border-orange-500 transition-colors @error('purchase_date') border-red-500 ring-red-500 @enderror">
                        @error('purchase_date')
                            <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="supplier" class="block text-sm font-medium text-gray-700 mb-2">Supplier</label>
                        <input type="text" id="supplier" name="supplier" value="{{ old('supplier') }}"
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-orange-500 focus:border-orange-500 transition-colors @error('supplier') border-red-500 ring-red-500 @enderror"
                               placeholder="Supplier name">
                        @error('supplier')
                            <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Stock Information -->
            <div>
                <h4 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
                    <i class="fas fa-boxes text-yellow-500 mr-2"></i>
                    Stock Information
                </h4>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label for="minimum_stock_level" class="block text-sm font-medium text-gray-700 mb-2">Minimum Stock Level *</label>
                        <input type="number" id="minimum_stock_level" name="minimum_stock_level" value="{{ old('minimum_stock_level') }}" required min="0"
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-orange-500 focus:border-orange-500 transition-colors @error('minimum_stock_level') border-red-500 ring-red-500 @enderror"
                               placeholder="0">
                        @error('minimum_stock_level')
                            <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="current_stock" class="block text-sm font-medium text-gray-700 mb-2">Current Stock *</label>
                        <input type="number" id="current_stock" name="current_stock" value="{{ old('current_stock') }}" required min="0"
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-orange-500 focus:border-orange-500 transition-colors @error('current_stock') border-red-500 ring-red-500 @enderror"
                               placeholder="0">
                        @error('current_stock')
                            <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Additional Information -->
            <div>
                <h4 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
                    <i class="fas fa-sticky-note text-gray-500 mr-2"></i>
                    Additional Information
                </h4>
                <div>
                    <label for="notes" class="block text-sm font-medium text-gray-700 mb-2">Notes</label>
                    <textarea id="notes" name="notes" rows="4"
                              class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-orange-500 focus:border-orange-500 transition-colors @error('notes') border-red-500 ring-red-500 @enderror"
                              placeholder="Additional notes about the equipment">{{ old('notes') }}</textarea>
                    @error('notes')
                        <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <!-- Form Actions -->
            <div class="flex justify-end space-x-3 pt-6 border-t border-gray-200">
                <a href="{{ route('equipment.index') }}" class="px-6 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition-colors">
                    <i class="fas fa-times mr-2"></i>Cancel
                </a>
                <button type="submit" class="px-6 py-2 bg-orange-500 text-white rounded-lg hover:bg-orange-600 transition-colors">
                    <i class="fas fa-save mr-2"></i>Add Equipment
                </button>
            </div>
        </form>
    </div>
</div>
@endsection