@extends('layouts.dashboard')

@section('title', 'Contract Details')
@section('header', 'Rental Agreement Details')

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

@section('content')
<!-- Page Header -->
<div class="mb-6">
    <div class="flex items-center justify-between">
        <a href="{{ route('company.contracts.index') }}" 
           class="inline-flex items-center text-teal-600 hover:text-teal-800 transition-colors duration-200">
            <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="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
            </svg>
            Back to Contracts
        </a>
        <div class="flex gap-3">
            @if($contract->status === 'draft')
            <form action="{{ route('company.contracts.activate', $contract) }}" method="POST" class="inline">
                @csrf
                <button type="submit" 
                        class="px-6 py-2.5 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-md">
                    Activate Contract
                </button>
            </form>
            @endif
            <a href="{{ route('company.contracts.pdf', $contract) }}" target="_blank"
               class="px-6 py-2.5 bg-gradient-to-r from-blue-600 to-indigo-600 text-white font-semibold rounded-lg hover:from-blue-700 hover:to-indigo-700 transition duration-200 shadow-md inline-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 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 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>
                Download PDF
            </a>
        </div>
    </div>
</div>

<!-- Status Badge -->
<div class="mb-6">
    @if($contract->status === 'active')
        <span class="inline-flex items-center px-4 py-2 rounded-lg text-sm font-semibold bg-green-50 text-green-700 border border-green-200">
            <span class="w-2 h-2 rounded-full bg-green-500 mr-2 animate-pulse"></span>
            Active
        </span>
    @elseif($contract->status === 'draft')
        <span class="inline-flex items-center px-4 py-2 rounded-lg text-sm font-semibold bg-gray-50 text-gray-700 border border-gray-200">
            <span class="w-2 h-2 rounded-full bg-gray-500 mr-2"></span>
            Draft
        </span>
    @elseif($contract->status === 'completed')
        <span class="inline-flex items-center px-4 py-2 rounded-lg text-sm font-semibold bg-blue-50 text-blue-700 border border-blue-200">
            <span class="w-2 h-2 rounded-full bg-blue-500 mr-2"></span>
            Completed
        </span>
    @else
        <span class="inline-flex items-center px-4 py-2 rounded-lg text-sm font-semibold bg-red-50 text-red-700 border border-red-200">
            <span class="w-2 h-2 rounded-full bg-red-500 mr-2"></span>
            Terminated
        </span>
    @endif
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <!-- Main Contract Details -->
    <div class="lg:col-span-2 space-y-6">
        <!-- Contract Information -->
        <div class="bg-white rounded-2xl shadow-lg border border-gray-100 p-6">
            <h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
                <svg class="w-6 h-6 mr-2 text-teal-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>
                Contract Information
            </h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <p class="text-sm text-gray-500">Contract Number</p>
                    <p class="text-lg font-bold text-gray-900">{{ $contract->contract_number }}</p>
                </div>
                <div>
                    <p class="text-sm text-gray-500">Contract Type</p>
                    <p class="text-lg font-semibold capitalize">{{ $contract->contract_type }}</p>
                </div>
                <div>
                    <p class="text-sm text-gray-500">Total Amount</p>
                    <p class="text-lg font-bold text-teal-600">{{ number_format($contract->total_amount, 0) }} {{ $contract->currency }}</p>
                </div>
                <div>
                    <p class="text-sm text-gray-500">Payment Type</p>
                    <p class="text-lg font-semibold capitalize">{{ $contract->payment_type }}</p>
                </div>
                @if($contract->payment_type === 'installment')
                <div>
                    <p class="text-sm text-gray-500">Installment Count</p>
                    <p class="text-lg font-semibold">{{ $contract->installment_count ?? '-' }}</p>
                </div>
                <div>
                    <p class="text-sm text-gray-500">Installment Amount</p>
                    <p class="text-lg font-semibold">{{ number_format($contract->installment_amount ?? 0, 0) }} {{ $contract->currency }}</p>
                </div>
                @endif
                <div>
                    <p class="text-sm text-gray-500">Start Date</p>
                    <p class="text-lg font-semibold">{{ \Carbon\Carbon::parse($contract->start_date)->format('M d, Y') }}</p>
                </div>
                <div>
                    <p class="text-sm text-gray-500">End Date</p>
                    <p class="text-lg font-semibold">{{ \Carbon\Carbon::parse($contract->end_date)->format('M d, Y') }}</p>
                </div>
                <div>
                    <p class="text-sm text-gray-500">Created At</p>
                    <p class="text-lg font-semibold">{{ $contract->created_at->format('M d, Y H:i') }}</p>
                </div>
                <div>
                    <p class="text-sm text-gray-500">Signed At</p>
                    <p class="text-lg font-semibold">{{ $contract->signed_at ? \Carbon\Carbon::parse($contract->signed_at)->format('M d, Y') : 'Not signed' }}</p>
                </div>
            </div>
            
            @if($contract->terms)
            <div class="mt-6 pt-6 border-t border-gray-200">
                <p class="text-sm font-semibold text-gray-700 mb-2">Terms & Conditions</p>
                <p class="text-sm text-gray-600 whitespace-pre-line">{{ $contract->terms }}</p>
            </div>
            @endif
            
            @if($contract->notes)
            <div class="mt-4 pt-4 border-t border-gray-200">
                <p class="text-sm font-semibold text-gray-700 mb-2">Additional Notes</p>
                <p class="text-sm text-gray-600 whitespace-pre-line">{{ $contract->notes }}</p>
            </div>
            @endif
        </div>

        <!-- Property Details -->
        <div class="bg-white rounded-2xl shadow-lg border border-gray-100 p-6">
            <h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
                <svg class="w-6 h-6 mr-2 text-teal-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 Details
            </h3>
            @if($contract->property)
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="md:col-span-2">
                    <p class="text-sm text-gray-500">Property Name</p>
                    <p class="text-lg font-bold text-gray-900">{{ $contract->property->title }}</p>
                </div>
                <div>
                    <p class="text-sm text-gray-500">Type</p>
                    <p class="text-base font-semibold capitalize">{{ $contract->property->type }}</p>
                </div>
                <div>
                    <p class="text-sm text-gray-500">Status</p>
                    <p class="text-base font-semibold capitalize">{{ $contract->property->status }}</p>
                </div>
                <div class="md:col-span-2">
                    <p class="text-sm text-gray-500">Address</p>
                    <p class="text-base font-semibold">{{ $contract->property->address }}, {{ $contract->property->city }}</p>
                </div>
                @if($contract->property->bedrooms)
                <div>
                    <p class="text-sm text-gray-500">Bedrooms</p>
                    <p class="text-base font-semibold">{{ $contract->property->bedrooms }}</p>
                </div>
                @endif
                @if($contract->property->bathrooms)
                <div>
                    <p class="text-sm text-gray-500">Bathrooms</p>
                    <p class="text-base font-semibold">{{ $contract->property->bathrooms }}</p>
                </div>
                @endif
                @if($contract->property->area)
                <div>
                    <p class="text-sm text-gray-500">Area</p>
                    <p class="text-base font-semibold">{{ $contract->property->area }} m²</p>
                </div>
                @endif
            </div>
            @else
            <p class="text-gray-500 italic">Property information not available</p>
            @endif
        </div>

        <!-- Customer Details -->
        <div class="bg-white rounded-2xl shadow-lg border border-gray-100 p-6">
            <h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
                <svg class="w-6 h-6 mr-2 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                </svg>
                Customer Details
            </h3>
            @if($contract->customer)
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <p class="text-sm text-gray-500">Name</p>
                    <p class="text-lg font-bold text-gray-900">{{ $contract->customer->name }}</p>
                </div>
                <div>
                    <p class="text-sm text-gray-500">Email</p>
                    <p class="text-lg font-semibold">{{ $contract->customer->email }}</p>
                </div>
                @if($contract->customer->phone)
                <div>
                    <p class="text-sm text-gray-500">Phone</p>
                    <p class="text-lg font-semibold">{{ $contract->customer->phone }}</p>
                </div>
                @endif
            </div>
            @else
            <p class="text-gray-500 italic">Customer information not available</p>
            @endif
        </div>
    </div>

    <!-- Sidebar - Payments, Invoices, Receipts -->
    <div class="space-y-6">
        <!-- Payment Summary -->
        <div class="bg-gradient-to-br from-teal-500 to-cyan-500 rounded-2xl shadow-lg p-6 text-white">
            <h3 class="font-bold text-lg mb-4">Payment Summary</h3>
            <div class="space-y-3">
                <div class="flex justify-between items-center">
                    <span class="text-sm opacity-90">Total Amount:</span>
                    <span class="font-bold text-lg">{{ number_format($contract->total_amount, 0) }} {{ $contract->currency }}</span>
                </div>
                <div class="flex justify-between items-center">
                    <span class="text-sm opacity-90">Paid Amount:</span>
                    <span class="font-bold text-lg">{{ number_format($contract->paid_amount ?? 0, 0) }} {{ $contract->currency }}</span>
                </div>
                <div class="flex justify-between items-center">
                    <span class="text-sm opacity-90">Balance:</span>
                    <span class="font-bold text-lg">{{ number_format($contract->balance ?? 0, 0) }} {{ $contract->currency }}</span>
                </div>
                <div class="pt-3 border-t border-white/20">
                    <div class="flex justify-between items-center">
                        <span class="text-sm opacity-90">Payment Status:</span>
                        <span class="font-semibold capitalize">{{ $contract->payment_status }}</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Related Records -->
        <div class="bg-white rounded-2xl shadow-lg border border-gray-100 p-6">
            <h3 class="font-bold text-gray-800 mb-4">Related Records</h3>
            
            <div class="space-y-4">
                <div>
                    <div class="flex items-center justify-between mb-2">
                        <span class="text-sm font-semibold text-gray-600">Invoices</span>
                        <span class="text-xs bg-teal-100 text-teal-700 px-2 py-1 rounded-full">{{ $contract->invoices->count() }}</span>
                    </div>
                    @if($contract->invoices->count() > 0)
                        <ul class="text-sm space-y-1">
                            @foreach($contract->invoices->take(3) as $invoice)
                                <li class="text-gray-700">
                                    <a href="{{ route('company.invoices.show', $invoice) }}" class="hover:text-teal-600">
                                        {{ $invoice->invoice_number }}
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    @else
                        <p class="text-sm text-gray-400 italic">No invoices yet</p>
                    @endif
                </div>

                <div>
                    <div class="flex items-center justify-between mb-2">
                        <span class="text-sm font-semibold text-gray-600">Payments</span>
                        <span class="text-xs bg-green-100 text-green-700 px-2 py-1 rounded-full">{{ $contract->payments->count() }}</span>
                    </div>
                    @if($contract->payments->count() > 0)
                        <ul class="text-sm space-y-1">
                            @foreach($contract->payments->take(3) as $payment)
                                <li class="text-gray-700">
                                    <a href="{{ route('company.payments.show', $payment) }}" class="hover:text-teal-600">
                                        {{ number_format($payment->amount, 0) }} {{ $payment->currency }}
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    @else
                        <p class="text-sm text-gray-400 italic">No payments yet</p>
                    @endif
                </div>

                <div>
                    <div class="flex items-center justify-between mb-2">
                        <span class="text-sm font-semibold text-gray-600">Receipts</span>
                        <span class="text-xs bg-blue-100 text-blue-700 px-2 py-1 rounded-full">{{ $contract->receipts->count() }}</span>
                    </div>
                    @if($contract->receipts->count() > 0)
                        <ul class="text-sm space-y-1">
                            @foreach($contract->receipts->take(3) as $receipt)
                                <li class="text-gray-700">
                                    <a href="{{ route('company.receipts.show', $receipt) }}" class="hover:text-teal-600">
                                        {{ $receipt->receipt_number }}
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    @else
                        <p class="text-sm text-gray-400 italic">No receipts yet</p>
                    @endif
                </div>
            </div>
        </div>

        <!-- Owner Info -->
        <div class="bg-white rounded-2xl shadow-lg border border-gray-100 p-6">
            <h3 class="font-bold text-gray-800 mb-4">Contract Owner</h3>
            @if($contract->owner)
            <div class="flex items-center space-x-3">
                <div class="w-12 h-12 rounded-full bg-gradient-to-br from-teal-500 to-cyan-500 flex items-center justify-center text-white font-bold">
                    {{ substr($contract->owner->name, 0, 1) }}
                </div>
                <div>
                    <p class="font-semibold text-gray-900">{{ $contract->owner->name }}</p>
                    <p class="text-sm text-gray-500">{{ $contract->owner->email }}</p>
                </div>
            </div>
            @else
            <p class="text-sm text-gray-400 italic">Owner information not available</p>
            @endif
        </div>
    </div>
</div>
@endsection