@extends('layouts.app')

@section('title', isset($contract) ? 'Edit Contract' : 'Add New Contract')

@section('content')
<div class="min-h-screen bg-gray-50 p-4 lg:p-6">
    <div class="max-w-4xl mx-auto">
        <div class="bg-white rounded-lg shadow-sm border border-gray-200">
            <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
                <h5 class="text-lg font-semibold text-gray-900 m-0">
                    <i class="fas fa-file-contract mr-2"></i>
                    @if(isset($contract))
                        Edit Contract
                    @else
                        Add New Contract
                    @endif
                </h5>
                <a href="{{ route('contracts.index') }}" class="inline-flex items-center px-4 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700 transition-colors">
                    <i class="fas fa-arrow-left mr-2"></i>Back to List
                </a>
            </div>
            <div class="p-6">
                <form action="{{ isset($contract) ? route('contracts.update', $contract->id) : route('contracts.store') }}" method="POST">
                    @csrf
                    @if(isset($contract))
                        @method('PUT')
                    @endif

                    <!-- Basic Information -->
                    <div class="mb-6">
                        <div class="w-full">
                            <h6 class="text-blue-600 font-semibold text-sm mb-3">
                                <i class="fas fa-info-circle mr-2"></i>
                                Basic Information
                            </h6>
                            <p class="text-gray-500 text-sm">Basic contract details and identification.</p>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <div class="mb-4">
                                <label for="client_id" class="block text-sm font-medium text-gray-700 mb-2">Client</label>
                                <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('client_id') border-red-500 @enderror" id="client_id" name="client_id" required>
                                    <option value="">Select Client</option>
                                    @foreach($clients as $clientId => $clientName)
                                        <option value="{{ $clientId }}" {{ old('client_id', $contract->client_id ?? '') == $clientId ? 'selected' : '' }}>
                                            {{ $clientName }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('client_id')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                        <div>
                            <div class="mb-4">
                                <label for="status_id" class="block text-sm font-medium text-gray-700 mb-2">Status</label>
                                <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('status_id') border-red-500 @enderror" id="status_id" name="status_id" required>
                                    <option value="">Select Status</option>
                                    @foreach($statuses as $statusId => $statusName)
                                        <option value="{{ $statusId }}" {{ old('status_id', $contract->status_id ?? '') == $statusId ? 'selected' : '' }}>
                                            {{ $statusName }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('status_id')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <div class="mb-4">
                                <label for="contract_number" class="block text-sm font-medium text-gray-700 mb-2">Contract Number</label>
                                <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('contract_number') border-red-500 @enderror" id="contract_number" name="contract_number" 
                                       value="{{ old('contract_number', $contract->contract_number ?? '') }}" required
                                       placeholder="e.g. CONT-2024-001">
                                @error('contract_number')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                        <div>
                            <div class="mb-4">
                                <label for="title" class="block text-sm font-medium text-gray-700 mb-2">Contract Title</label>
                                <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('title') border-red-500 @enderror" id="title" name="title" 
                                       value="{{ old('title', $contract->title ?? '') }}" required
                                       placeholder="e.g. Security Services Contract">
                                @error('title')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 gap-6">
                        <div>
                            <div class="mb-4">
                                <label for="description" class="block text-sm font-medium text-gray-700 mb-2">Description</label>
                                <textarea class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('description') border-red-500 @enderror" id="description" name="description" rows="3" 
                                          placeholder="Contract description and terms...">{{ old('description', $contract->description ?? '') }}</textarea>
                                @error('description')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <!-- Contract Terms -->
                    <div class="mb-6">
                        <div class="w-full">
                            <h6 class="text-blue-600 font-semibold text-sm mb-3">
                                <i class="fas fa-calendar-alt mr-2"></i>
                                Contract Terms
                            </h6>
                            <p class="text-gray-500 text-sm">Contract duration and financial details.</p>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <div class="mb-4">
                                <label for="start_date" class="block text-sm font-medium text-gray-700 mb-2">Start Date</label>
                                <input type="date" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('start_date') border-red-500 @enderror" id="start_date" name="start_date" 
                                       value="{{ old('start_date', isset($contract) && $contract->start_date ? $contract->start_date->format('Y-m-d') : '') }}" required>
                                @error('start_date')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                        <div>
                            <div class="mb-4">
                                <label for="end_date" class="block text-sm font-medium text-gray-700 mb-2">End Date</label>
                                <input type="date" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('end_date') border-red-500 @enderror" id="end_date" name="end_date" 
                                       value="{{ old('end_date', isset($contract) && $contract->end_date ? $contract->end_date->format('Y-m-d') : '') }}" required>
                                @error('end_date')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <div class="mb-4">
                                <label for="value" class="block text-sm font-medium text-gray-700 mb-2">Contract Value</label>
                                <input type="number" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('value') border-red-500 @enderror" id="value" name="value" 
                                       value="{{ old('value', $contract->value ?? '') }}" step="0.01" min="0" required
                                       placeholder="0.00">
                                @error('value')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                        <div>
                            <div class="mb-4">
                                <label for="currency" class="block text-sm font-medium text-gray-700 mb-2">Currency</label>
                                <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('currency') border-red-500 @enderror" id="currency" name="currency" required>
                                    <option value="USD" {{ old('currency', $contract->currency ?? 'USD') == 'USD' ? 'selected' : '' }}>USD - US Dollar</option>
                                    <option value="EUR" {{ old('currency', $contract->currency ?? 'USD') == 'EUR' ? 'selected' : '' }}>EUR - Euro</option>
                                    <option value="GBP" {{ old('currency', $contract->currency ?? 'USD') == 'GBP' ? 'selected' : '' }}>GBP - British Pound</option>
                                    <option value="INR" {{ old('currency', $contract->currency ?? 'USD') == 'INR' ? 'selected' : '' }}>INR - Indian Rupee</option>
                                </select>
                                @error('currency')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <!-- Service Scope -->
                    <div class="mb-6">
                        <div class="w-full">
                            <h6 class="text-blue-600 font-semibold text-sm mb-3">
                                <i class="fas fa-tasks mr-2"></i>
                                Service Scope
                            </h6>
                            <p class="text-gray-500 text-sm">Select the services included in this contract.</p>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <div class="mb-4">
                                <label class="block text-sm font-medium text-gray-700 mb-2">Services Included</label>
                                <div class="space-y-2">
                                    <label class="flex items-center">
                                        <input type="checkbox" name="service_scope[]" value="patrolling" 
                                               {{ in_array('patrolling', old('service_scope', isset($contract) ? $contract->service_scope ?? [] : [])) ? 'checked' : '' }}
                                               class="mr-2 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                                        <span class="text-sm text-gray-700">Patrolling</span>
                                    </label>
                                    <label class="flex items-center">
                                        <input type="checkbox" name="service_scope[]" value="security" 
                                               {{ in_array('security', old('service_scope', isset($contract) ? $contract->service_scope ?? [] : [])) ? 'checked' : '' }}
                                               class="mr-2 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                                        <span class="text-sm text-gray-700">Security Services</span>
                                    </label>
                                    <label class="flex items-center">
                                        <input type="checkbox" name="service_scope[]" value="monitoring" 
                                               {{ in_array('monitoring', old('service_scope', isset($contract) ? $contract->service_scope ?? [] : [])) ? 'checked' : '' }}
                                               class="mr-2 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                                        <span class="text-sm text-gray-700">Monitoring</span>
                                    </label>
                                    <label class="flex items-center">
                                        <input type="checkbox" name="service_scope[]" value="consulting" 
                                               {{ in_array('consulting', old('service_scope', isset($contract) ? $contract->service_scope ?? [] : [])) ? 'checked' : '' }}
                                               class="mr-2 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                                        <span class="text-sm text-gray-700">Consulting</span>
                                    </label>
                                    <label class="flex items-center">
                                        <input type="checkbox" name="service_scope[]" value="maintenance" 
                                               {{ in_array('maintenance', old('service_scope', isset($contract) ? $contract->service_scope ?? [] : [])) ? 'checked' : '' }}
                                               class="mr-2 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                                        <span class="text-sm text-gray-700">Maintenance</span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="flex justify-end gap-3">
                        <a href="{{ route('contracts.index') }}" class="inline-flex items-center px-4 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700 transition-colors">
                            <i class="fas fa-times mr-2"></i>Cancel
                        </a>
                        <button type="submit" class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors">
                            <i class="fas fa-save mr-2"></i>
                            @if(isset($contract))
                                Update Contract
                            @else
                                Create Contract
                            @endif
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection