@extends('layouts.dashboard')

@section('title', __('messages.create') . ' ' . __('messages.leases'))
@section('header', 'Create New Lease Agreement')

@section('sidebar')
@include('company-admin.partials.sidebar')
@endsection

@section('content')
<!-- Page Header -->
<div class="mb-6">
    <h2 class="text-3xl font-bold bg-gradient-to-r from-green-600 to-emerald-600 bg-clip-text text-transparent">Create New Lease Agreement</h2>
    <p class="text-sm text-gray-500 mt-1">Set up a new lease agreement between a property and tenant</p>
</div>

<!-- Form Card -->
<div class="bg-white rounded-2xl shadow-lg border border-gray-100 p-8">
    <form action="{{ route('company.leases.store') }}" method="POST">
        @csrf
        
        <!-- Property & Tenant Section -->
        <div class="mb-8 pb-8 border-b border-gray-200">
            <h3 class="text-lg font-semibold text-gray-900 mb-6 flex items-center">
                <svg class="w-5 h-5 mr-2 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
                </svg>
                Property & Tenant Selection
            </h3>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="property_id" class="block text-sm font-semibold text-gray-700 mb-2">
                        Property <span class="text-red-500">*</span>
                    </label>
                    <select name="property_id" id="property_id" required 
                        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition duration-200 bg-white @error('property_id') border-red-500 @enderror"
                        onchange="updatePropertyDetails(this.value)">
                        <option value="">-- Select Property --</option>
                        @forelse($properties as $property)
                        <option value="{{ $property->id }}" 
                                data-price="{{ $property->price }}"
                                data-type="{{ $property->type }}"
                                data-address="{{ $property->address }}"
                                data-city="{{ $property->city }}"
                                data-status="{{ $property->status }}"
                                data-has-active-lease="{{ $property->leases->where('status', 'active')->count() > 0 ? '1' : '0' }}"
                                {{ old('property_id') == $property->id ? 'selected' : '' }}>
                            {{ $property->title }} - {{ $property->address }}, {{ $property->city }}
                            @if($property->status === 'available')
                                (Available)
                            @elseif($property->status === 'rented')
                                (Rented)
                            @else
                                ({{ ucfirst($property->status) }})
                            @endif
                        </option>
                        @empty
                        <option value="" disabled>No properties available. Please create a property first.</option>
                        @endforelse
                    </select>
                    @if($properties->count() === 0)
                    <p class="mt-2 text-sm text-amber-600 flex items-center">
                        <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
                        </svg>
                        You need to create at least one property before creating a lease. <a href="{{ route('company.properties.create') }}" class="text-green-600 hover:text-green-700 underline">Create Property</a>
                    </p>
                    @endif
                    <div id="property-details" class="mt-3 p-4 bg-blue-50 rounded-lg border border-blue-200 hidden">
                        <div class="grid grid-cols-2 gap-2 text-sm">
                            <div><span class="font-semibold">Type:</span> <span id="property-type"></span></div>
                            <div><span class="font-semibold">Status:</span> <span id="property-status"></span></div>
                            <div><span class="font-semibold">Suggested Rent:</span> <span id="property-price" class="font-bold text-green-600"></span></div>
                            <div><span class="font-semibold">Active Leases:</span> <span id="property-leases" class="font-semibold"></span></div>
                        </div>
                        <p class="text-xs text-gray-600 mt-2" id="property-warning"></p>
                    </div>
                    @error('property_id')
                        <p class="mt-1 text-sm text-red-600 flex items-center">
                            <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
                            </svg>
                            {{ $message }}
                        </p>
                    @enderror
                </div>

                <div>
                    <label for="tenant_id" class="block text-sm font-semibold text-gray-700 mb-2">
                        Tenant <span class="text-red-500">*</span>
                    </label>
                    <select name="tenant_id" id="tenant_id" required 
                        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition duration-200 bg-white @error('tenant_id') border-red-500 @enderror"
                        onchange="updateTenantDetails(this.value)">
                        <option value="">-- Select Tenant --</option>
                        @forelse($tenants as $tenant)
                        <option value="{{ $tenant->id }}" 
                                data-email="{{ $tenant->email }}"
                                data-phone="{{ $tenant->phone }}"
                                data-has-active-lease="{{ $tenant->activeLease ? '1' : '0' }}"
                                data-active-lease-property="{{ $tenant->activeLease ? $tenant->activeLease->property->title : '' }}"
                                {{ old('tenant_id') == $tenant->id ? 'selected' : '' }}>
                            {{ $tenant->full_name }} 
                            @if($tenant->phone)
                                - {{ $tenant->phone }}
                            @endif
                            @if($tenant->activeLease)
                                (Has Active Lease)
                            @endif
                        </option>
                        @empty
                        <option value="" disabled>No tenants available. Please register a tenant first.</option>
                        @endforelse
                    </select>
                    @if($tenants->count() === 0)
                    <p class="mt-2 text-sm text-amber-600 flex items-center">
                        <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
                        </svg>
                        You need to register at least one tenant before creating a lease. <a href="{{ route('company.tenants.create') }}" class="text-green-600 hover:text-green-700 underline">Register Tenant</a>
                    </p>
                    @endif
                    <div id="tenant-details" class="mt-3 p-4 bg-blue-50 rounded-lg border border-blue-200 hidden">
                        <div class="grid grid-cols-2 gap-2 text-sm">
                            <div><span class="font-semibold">Email:</span> <span id="tenant-email"></span></div>
                            <div><span class="font-semibold">Phone:</span> <span id="tenant-phone"></span></div>
                        </div>
                        <p class="text-xs text-yellow-700 mt-2 font-semibold" id="tenant-warning"></p>
                    </div>
                    @error('tenant_id')
                        <p class="mt-1 text-sm text-red-600 flex items-center">
                            <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
                            </svg>
                            {{ $message }}
                        </p>
                    @enderror
                </div>
            </div>
        </div>

        <!-- Lease Duration Section -->
        <div class="mb-8 pb-8 border-b border-gray-200">
            <h3 class="text-lg font-semibold text-gray-900 mb-6 flex items-center">
                <svg class="w-5 h-5 mr-2 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                </svg>
                Lease Duration
            </h3>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="start_date" class="block text-sm font-semibold text-gray-700 mb-2">
                        {{ __('messages.start_date') }} <span class="text-red-500">*</span>
                    </label>
                    <input type="date" name="start_date" id="start_date" required value="{{ old('start_date') }}" 
                        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition duration-200 @error('start_date') border-red-500 @enderror">
                    @error('start_date')
                        <p class="mt-1 text-sm text-red-600 flex items-center">
                            <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
                            </svg>
                            {{ $message }}
                        </p>
                    @enderror
                </div>

                <div>
                    <label for="end_date" class="block text-sm font-semibold text-gray-700 mb-2">
                        {{ __('messages.end_date') }} <span class="text-red-500">*</span>
                    </label>
                    <input type="date" name="end_date" id="end_date" required value="{{ old('end_date') }}" 
                        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition duration-200 @error('end_date') border-red-500 @enderror">
                    @error('end_date')
                        <p class="mt-1 text-sm text-red-600 flex items-center">
                            <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
                            </svg>
                            {{ $message }}
                        </p>
                    @enderror
                </div>
            </div>
        </div>

        <!-- Financial Details Section -->
        <div class="mb-8 pb-8 border-b border-gray-200">
            <h3 class="text-lg font-semibold text-gray-900 mb-6 flex items-center">
                <svg class="w-5 h-5 mr-2 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                Financial Details
            </h3>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div>
                    <label for="monthly_rent" class="block text-sm font-semibold text-gray-700 mb-2">
                        {{ __('messages.monthly_rent') }} <span class="text-red-500">*</span>
                    </label>
                    <div class="relative">
                        <input type="number" step="0.01" name="monthly_rent" id="monthly_rent" required value="{{ old('monthly_rent') }}" 
                            class="w-full px-4 py-3 pr-16 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition duration-200 @error('monthly_rent') border-red-500 @enderror"
                            placeholder="0.00">
                        <span class="absolute right-4 top-3 text-gray-500 font-semibold">{{ $currency ?? 'TZS' }}</span>
                    </div>
                    <p class="mt-1 text-xs text-gray-500">Monthly rental amount (will auto-fill from property price if available)</p>
                    @error('monthly_rent')
                        <p class="mt-1 text-sm text-red-600 flex items-center">
                            <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
                            </svg>
                            {{ $message }}
                        </p>
                    @enderror
                </div>

                <div>
                    <label for="security_deposit" class="block text-sm font-semibold text-gray-700 mb-2">Security Deposit (Optional)</label>
                    <div class="relative">
                        <input type="number" step="0.01" name="security_deposit" id="security_deposit" value="{{ old('security_deposit', 0) }}" 
                            class="w-full px-4 py-3 pr-16 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition duration-200 @error('security_deposit') border-red-500 @enderror"
                            placeholder="0.00" min="0">
                        <span class="absolute right-4 top-3 text-gray-500 font-semibold">{{ $currency ?? 'TZS' }}</span>
                    </div>
                    <p class="mt-1 text-xs text-gray-500">Refundable security deposit amount (if applicable)</p>
                    @error('security_deposit')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="payment_day" class="block text-sm font-semibold text-gray-700 mb-2">
                        Payment Day (1-31) <span class="text-red-500">*</span>
                    </label>
                    <input type="number" min="1" max="31" name="payment_day" id="payment_day" required value="{{ old('payment_day', 1) }}" 
                        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition duration-200 @error('payment_day') border-red-500 @enderror"
                        placeholder="Day of month (1-31)">
                    <p class="mt-1 text-xs text-gray-500">The day of each month when rent payment is due</p>
                    @error('payment_day')
                        <p class="mt-1 text-sm text-red-600 flex items-center">
                            <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
                            </svg>
                            {{ $message }}
                        </p>
                    @enderror
                </div>

                <div>
                    <label for="status" class="block text-sm font-semibold text-gray-700 mb-2">
                        {{ __('messages.status') }} <span class="text-red-500">*</span>
                    </label>
                    <select name="status" id="status" required 
                        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition duration-200 bg-white @error('status') border-red-500 @enderror">
                        <option value="active" {{ old('status', 'active') === 'active' ? 'selected' : '' }}>Active</option>
                        <option value="expired" {{ old('status') === 'expired' ? 'selected' : '' }}>Expired</option>
                        <option value="terminated" {{ old('status') === 'terminated' ? 'selected' : '' }}>Terminated</option>
                    </select>
                    <p class="mt-1 text-xs text-gray-500">Select "Active" for new lease agreements</p>
                    @error('status')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>
            </div>
        </div>

        <!-- Terms & Notes Section -->
        <div class="mb-8">
            <h3 class="text-lg font-semibold text-gray-900 mb-6 flex items-center">
                <svg class="w-5 h-5 mr-2 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                </svg>
                Terms & Additional Information
            </h3>
            
            <div class="grid grid-cols-1 gap-6">
                <div>
                    <label for="terms" class="block text-sm font-semibold text-gray-700 mb-2">Terms & Conditions (Optional)</label>
                    <textarea name="terms" id="terms" rows="4" 
                        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition duration-200 @error('terms') border-red-500 @enderror"
                        placeholder="Include payment terms, maintenance responsibilities, property usage rules, renewal options, and any other specific conditions...">{{ old('terms') }}</textarea>
                    <p class="mt-1 text-xs text-gray-500">Specify payment schedules, maintenance responsibilities, property usage rules, renewal options, and any other lease conditions</p>
                    @error('terms')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="notes" class="block text-sm font-semibold text-gray-700 mb-2">Internal Notes (Optional)</label>
                    <textarea name="notes" id="notes" rows="3" 
                        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition duration-200 @error('notes') border-red-500 @enderror"
                        placeholder="Document tenant background, property inspection notes, special arrangements, or important reminders for future reference...">{{ old('notes') }}</textarea>
                    <p class="mt-1 text-xs text-gray-500">Internal notes for company administrators only - useful for tracking tenant history, property details, and important reminders</p>
                    @error('notes')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>
            </div>
        </div>

        <!-- Action Buttons -->
        <div class="flex justify-end space-x-4 pt-6 border-t border-gray-200">
            <a href="{{ route('company.leases.index') }}" 
               class="px-6 py-3 border border-gray-300 text-gray-700 font-semibold rounded-lg hover:bg-gray-50 transition duration-200">
                Cancel
            </a>
            <button type="submit" 
                    class="px-6 py-3 bg-gradient-to-r from-green-600 to-emerald-600 text-white font-semibold rounded-lg hover:from-green-700 hover:to-emerald-700 transition duration-200 shadow-lg hover:shadow-xl">
                <span class="flex items-center">
                    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                    </svg>
                    Create Lease Agreement
                </span>
            </button>
        </div>
    </form>
</div>

<script>
function updatePropertyDetails(propertyId) {
    const select = document.getElementById('property_id');
    const option = select.options[select.selectedIndex];
    const detailsDiv = document.getElementById('property-details');
    
    if (propertyId && option.value) {
        const price = option.getAttribute('data-price');
        const type = option.getAttribute('data-type');
        const status = option.getAttribute('data-status');
        const hasActiveLease = option.getAttribute('data-has-active-lease') === '1';
        
        document.getElementById('property-type').textContent = type ? type.charAt(0).toUpperCase() + type.slice(1) : 'N/A';
        document.getElementById('property-status').textContent = status ? status.charAt(0).toUpperCase() + status.slice(1) : 'N/A';
        document.getElementById('property-price').textContent = price ? new Intl.NumberFormat().format(price) + ' {{ $currency ?? "TZS" }}' : 'N/A';
        document.getElementById('property-leases').textContent = hasActiveLease ? 'Yes' : 'No';
        
        // Auto-fill monthly rent if property has a price
        if (price && !document.getElementById('monthly_rent').value) {
            document.getElementById('monthly_rent').value = price;
        }
        
        // Show warning if property is not available or has active lease
        const warningEl = document.getElementById('property-warning');
        detailsDiv.classList.remove('hidden');
        
        if (status !== 'available') {
            warningEl.textContent = 'Warning: This property is marked as ' + status + '. Make sure this is correct.';
            warningEl.className = 'text-xs text-yellow-700 mt-2 font-semibold';
        } else if (hasActiveLease) {
            warningEl.textContent = 'Warning: This property already has an active lease. Creating another lease may cause conflicts.';
            warningEl.className = 'text-xs text-yellow-700 mt-2 font-semibold';
        } else {
            warningEl.textContent = 'Property is available and ready for lease.';
            warningEl.className = 'text-xs text-green-700 mt-2 font-semibold';
        }
    } else {
        detailsDiv.classList.add('hidden');
    }
}

function updateTenantDetails(tenantId) {
    const select = document.getElementById('tenant_id');
    const option = select.options[select.selectedIndex];
    const detailsDiv = document.getElementById('tenant-details');
    
    if (tenantId && option.value) {
        const email = option.getAttribute('data-email');
        const phone = option.getAttribute('data-phone');
        const hasActiveLease = option.getAttribute('data-has-active-lease') === '1';
        const activeLeaseProperty = option.getAttribute('data-active-lease-property');
        
        document.getElementById('tenant-email').textContent = email || 'N/A';
        document.getElementById('tenant-phone').textContent = phone || 'N/A';
        
        // Show warning if tenant has active lease
        const warningEl = document.getElementById('tenant-warning');
        detailsDiv.classList.remove('hidden');
        
        if (hasActiveLease) {
            warningEl.textContent = 'Warning: This tenant already has an active lease for: ' + activeLeaseProperty + '. Creating another lease may cause conflicts.';
            warningEl.className = 'text-xs text-yellow-700 mt-2 font-semibold';
        } else {
            warningEl.textContent = 'Tenant is available and can be assigned to a new lease.';
            warningEl.className = 'text-xs text-green-700 mt-2 font-semibold';
        }
    } else {
        detailsDiv.classList.add('hidden');
    }
}

// Initialize on page load if values are preselected
document.addEventListener('DOMContentLoaded', function() {
    const propertyId = document.getElementById('property_id').value;
    const tenantId = document.getElementById('tenant_id').value;
    
    if (propertyId) {
        updatePropertyDetails(propertyId);
    }
    if (tenantId) {
        updateTenantDetails(tenantId);
    }
});
</script>
@endsection