@extends('layouts.dashboard')

@section('title', __('messages.lease_details'))
@section('header', __('messages.lease_details'))

@section('sidebar')
@include('tenant.partials.sidebar')
@endsection

@section('content')
<!-- Page Header -->
<div class="mb-6">
    <div class="flex items-center justify-between">
        <div>
            <h2 class="text-3xl font-bold bg-gradient-to-r from-gray-900 to-gray-700 bg-clip-text text-transparent">Lease Details</h2>
            <p class="text-sm text-gray-500 mt-1">Complete information about your lease agreement</p>
        </div>
        <a href="{{ route('tenant.leases') }}" 
           class="inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50">
            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
            </svg>
            Back to Leases
        </a>
    </div>
</div>

<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
    <div class="md:col-span-2">
        <div class="bg-white rounded-2xl shadow-lg border border-gray-100 mb-6 overflow-hidden">
            <div class="bg-gradient-to-r from-blue-600 to-indigo-600 px-6 py-4">
                <h3 class="text-lg font-bold text-white 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="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>
                    {{ __('messages.lease_information') }}
                </h3>
            </div>
            <div class="p-6">
                <p class="text-sm text-gray-600 mb-6">This is your complete lease agreement documentation. Review all details below including monthly rent amount, lease period dates, payment schedule, security deposit, property terms and conditions, and all other relevant lease information.</p>
                <dl class="grid grid-cols-1 gap-4">
                    <div>
                        <dt class="text-sm font-medium text-gray-500">{{ __('messages.lease_number') }}</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ $lease->lease_number }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">{{ __('messages.property') }}</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ $lease->property->title }}</dd>
                        <dd class="mt-1 text-xs text-gray-500">{{ $lease->property->address }}, {{ $lease->property->city }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">{{ __('messages.monthly_rent') }}</dt>
                        <dd class="mt-1 text-lg font-semibold text-gray-900">{{ number_format($lease->monthly_rent, 0) }} {{ $lease->currency }}</dd>
                    </div>
                    @if($lease->security_deposit)
                    <div>
                        <dt class="text-sm font-medium text-gray-500">{{ __('messages.security_deposit') }}</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ number_format($lease->security_deposit, 0) }} {{ $lease->currency }}</dd>
                    </div>
                    @endif
                    <div>
                        <dt class="text-sm font-medium text-gray-500">{{ __('messages.lease_period') }}</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ \Carbon\Carbon::parse($lease->start_date)->format('M d, Y') }} - {{ \Carbon\Carbon::parse($lease->end_date)->format('M d, Y') }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">{{ __('messages.payment_day') }}</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ $lease->payment_day }}th of each month</dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">{{ __('messages.status') }}</dt>
                        <dd class="mt-1">
                            <span class="px-3 py-1 text-xs font-semibold rounded-full 
                                {{ $lease->status === 'active' ? 'bg-green-100 text-green-800' : 
                                   ($lease->status === 'expired' ? 'bg-gray-100 text-gray-800' : 'bg-red-100 text-red-800') }}">
                                {{ ucfirst($lease->status) }}
                            </span>
                        </dd>
                    </div>
                    @if($lease->terms)
                    <div>
                        <dt class="text-sm font-medium text-gray-500">{{ __('messages.terms') }}</dt>
                        <dd class="mt-1 text-sm text-gray-900 whitespace-pre-line">{{ $lease->terms }}</dd>
                    </div>
                    @endif
                    @if($lease->notes)
                    <div>
                        <dt class="text-sm font-medium text-gray-500">{{ __('messages.notes') }}</dt>
                        <dd class="mt-1 text-sm text-gray-900 whitespace-pre-line">{{ $lease->notes }}</dd>
                    </div>
                    @endif
                </dl>
            </div>
        </div>

        @if($lease->payments->count() > 0)
        <div class="bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden">
            <div class="bg-gradient-to-r from-green-600 to-emerald-600 px-6 py-4">
                <h3 class="text-lg font-bold text-white 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="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>
                    {{ __('messages.payment_history') }}
                </h3>
            </div>
            <div class="p-6">
                <p class="text-sm text-gray-600 mb-4">Complete payment history for this lease agreement, including all completed payments, pending transactions, and payment details. Each entry shows the payment amount, date, status, and transaction reference.</p>
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gradient-to-r from-gray-800 to-gray-900">
                            <tr>
                                <th class="px-6 py-4 text-left text-xs font-bold text-white uppercase tracking-wider">{{ __('messages.payment_number') }}</th>
                                <th class="px-6 py-4 text-left text-xs font-bold text-white uppercase tracking-wider">{{ __('messages.date') }}</th>
                                <th class="px-6 py-4 text-left text-xs font-bold text-white uppercase tracking-wider">{{ __('messages.amount') }}</th>
                                <th class="px-6 py-4 text-left text-xs font-bold text-white uppercase tracking-wider">{{ __('messages.status') }}</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-100">
                            @foreach($lease->payments as $payment)
                            <tr class="hover:bg-blue-50/50 transition-colors duration-150">
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ $payment->payment_number }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ \Carbon\Carbon::parse($payment->payment_date)->format('M d, Y') }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold text-gray-900">{{ number_format($payment->amount, 0) }} {{ $payment->currency }}</td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold border
                                        {{ $payment->status === 'completed' ? 'bg-green-50 text-green-800 border-green-200' : 
                                           ($payment->status === 'pending' ? 'bg-yellow-50 text-yellow-800 border-yellow-200' : 
                                           ($payment->status === 'overdue' ? 'bg-red-50 text-red-800 border-red-200' : 'bg-gray-50 text-gray-800 border-gray-200')) }}">
                                        <span class="w-1.5 h-1.5 rounded-full mr-2 {{ $payment->status === 'completed' ? 'bg-green-500' : ($payment->status === 'pending' ? 'bg-yellow-500' : ($payment->status === 'overdue' ? 'bg-red-500' : 'bg-gray-500')) }}"></span>
                                        {{ ucfirst($payment->status) }}
                                    </span>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        @endif
    </div>

    <div>
        @if($lease->property->images->count() > 0)
        <div class="bg-white rounded-2xl shadow-lg border border-gray-100 mb-6 overflow-hidden">
            <div class="bg-gradient-to-r from-purple-600 to-pink-600 px-6 py-4">
                <h3 class="text-lg font-bold text-white 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="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                    </svg>
                    {{ __('messages.property_images') }}
                </h3>
            </div>
            <div class="p-6">
                <div class="space-y-4">
                    @foreach($lease->property->images as $image)
                    <img src="{{ $image->url }}" 
                         alt="{{ $lease->property->title }}" 
                         class="w-full h-48 object-cover rounded">
                    @endforeach
                </div>
            </div>
        </div>
        @endif

        <div class="bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden">
            <div class="bg-gradient-to-r from-indigo-600 to-purple-600 px-6 py-4">
                <h3 class="text-lg font-bold text-white 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="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>
                    {{ __('messages.property_details') }}
                </h3>
            </div>
            <div class="p-6">
                <dl class="space-y-3">
                    <div>
                        <dt class="text-sm font-medium text-gray-500">{{ __('messages.type') }}</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ ucfirst($lease->property->type) }}</dd>
                    </div>
                    @if($lease->property->bedrooms)
                    <div>
                        <dt class="text-sm font-medium text-gray-500">{{ __('messages.bedrooms') }}</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ $lease->property->bedrooms }}</dd>
                    </div>
                    @endif
                    @if($lease->property->bathrooms)
                    <div>
                        <dt class="text-sm font-medium text-gray-500">{{ __('messages.bathrooms') }}</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ $lease->property->bathrooms }}</dd>
                    </div>
                    @endif
                    @if($lease->property->area)
                    <div>
                        <dt class="text-sm font-medium text-gray-500">{{ __('messages.area') }}</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ number_format($lease->property->area, 0) }} {{ $lease->property->area_unit ?: 'sqm' }}</dd>
                    </div>
                    @endif
                </dl>
            </div>
        </div>
    </div>
</div>
@endsection