@extends('layout.main')

@section('content')
    <div class="container grid px-6 mx-auto">
        <div class="flex items-center justify-between mb-4 mt-4">
            <h4 class="text-lg font-semibold text-gray-600 dark:text-gray-300">
                Loan Collateral Details
            </h4>
            <div class="flex gap-2">
                <x-link route="{{ route('loans.loan-collaterals.edit', [$loan, $loanCollateral]) }}" 
                        class="bg-blue-600" isButton>
                    {{ __('Edit') }}
                </x-link>
                <x-link route="{{ route('loans.show', $loan) }}" 
                        class="bg-gray-600" isButton>
                    {{ __('Back to Loan') }}
                </x-link>
            </div>
        </div>

        <!-- Loan Information Card -->
        <div class="px-4 py-3 mb-6 bg-blue-50 border border-blue-200 rounded-lg dark:bg-blue-900 dark:border-blue-800">
            <h5 class="text-sm font-medium text-blue-800 dark:text-blue-200 mb-3">Related Loan Information</h5>
            <div class="grid grid-cols-1 md:grid-cols-4 gap-4 text-sm">
                <div>
                    <span class="font-medium text-blue-700 dark:text-blue-300">Loan Code:</span>
                    <div class="text-blue-600 dark:text-blue-400 font-mono">{{ $loan->loan_code }}</div>
                </div>
                <div>
                    <span class="font-medium text-blue-700 dark:text-blue-300">Loan Amount:</span>
                    <div class="text-blue-600 dark:text-blue-400">{{ formatCurrencyDecimals($loan->loan_amount) }}</div>
                </div>
                <div>
                    <span class="font-medium text-blue-700 dark:text-blue-300">Client:</span>
                    <div class="text-blue-600 dark:text-blue-400">
                        {{ $loan->individualClient ? $loan->individualClient->client->fullname : 'Group Loan' }}
                    </div>
                </div>
                <div>
                    <span class="font-medium text-blue-700 dark:text-blue-300">Status:</span>
                    <div class="text-blue-600 dark:text-blue-400">{{ ucfirst($loan->finance_status ?? 'Pending') }}</div>
                </div>
            </div>
        </div>

        <!-- Collateral Details Card -->
        <div class="bg-white rounded-lg shadow-md dark:bg-gray-800 overflow-hidden">
            <div class="px-6 py-4 bg-gray-50 dark:bg-gray-700 border-b border-gray-200 dark:border-gray-600">
                <h5 class="text-lg font-medium text-gray-900 dark:text-gray-100">
                    Collateral Information
                </h5>
            </div>

            <div class="p-6">
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                    <!-- Main Details -->
                    <div class="lg:col-span-2 space-y-6">
                        <!-- Basic Information -->
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">
                                    Collateral Type
                                </label>
                                <div class="text-gray-900 dark:text-gray-100 font-medium">
                                    {{ $loanCollateral->type }}
                                </div>
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">
                                    Collateral Name
                                </label>
                                <div class="text-gray-900 dark:text-gray-100">
                                    {{ $loanCollateral->name ?: 'N/A' }}
                                </div>
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">
                                    Identifier
                                </label>
                                <div class="text-gray-900 dark:text-gray-100 font-mono text-sm">
                                    {{ $loanCollateral->identifier }}
                                </div>
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">
                                    Estimated Value
                                </label>
                                <div class="text-gray-900 dark:text-gray-100 font-medium">
                                    @if($loanCollateral->estimated_value)
                                        {{ formatCurrencyDecimals($loanCollateral->estimated_value) }}
                                    @else
                                        <span class="text-gray-500">Not specified</span>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <!-- Description -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
                                Description
                            </label>
                            <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg">
                                @if($loanCollateral->description)
                                    <p class="text-gray-900 dark:text-gray-100 whitespace-pre-wrap">{{ $loanCollateral->description }}</p>
                                @else
                                    <p class="text-gray-500 dark:text-gray-400 italic">No description provided</p>
                                @endif
                            </div>
                        </div>

                        <!-- Timestamps -->
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 pt-4 border-t border-gray-200 dark:border-gray-600">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">
                                    Created At
                                </label>
                                <div class="text-gray-600 dark:text-gray-300 text-sm">
                                    {{ $loanCollateral->created_at->format('M d, Y \a\t g:i A') }}
                                </div>
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">
                                    Last Updated
                                </label>
                                <div class="text-gray-600 dark:text-gray-300 text-sm">
                                    {{ $loanCollateral->updated_at->format('M d, Y \a\t g:i A') }}
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Image Section -->
                    <div class="lg:col-span-1">
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-3">
                            Collateral Image
                        </label>
                        
                        @if($loanCollateral->image)
                            <div class="group relative">
                                <img src="{{ asset('storage/' . $loanCollateral->image) }}" 
                                     alt="Collateral image" 
                                     class="w-full h-64 object-cover rounded-lg border shadow-sm">
                                
                                <!-- Image overlay with view button -->
                                <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-50 transition-all duration-200 rounded-lg flex items-center justify-center">
                                    <button onclick="openImageModal()" 
                                            class="opacity-0 group-hover:opacity-100 bg-white text-gray-800 px-4 py-2 rounded-md text-sm font-medium transition-opacity">
                                        View Full Size
                                    </button>
                                </div>
                            </div>
                        @else
                            <div class="w-full h-64 bg-gray-100 dark:bg-gray-700 rounded-lg border-2 border-dashed border-gray-300 dark:border-gray-600 flex items-center justify-center">
                                <div class="text-center">
                                    <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48">
                                        <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                    </svg>
                                    <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">No image uploaded</p>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <!-- Action Buttons -->
        <div class="flex justify-between items-center mt-6">
            <div class="flex gap-2">
                <x-link route="{{ route('loans.loan-collaterals.edit', [$loan, $loanCollateral]) }}" 
                        class="bg-blue-600" isButton>
                    {{ __('Edit Collateral') }}
                </x-link>
            </div>
            
            <div class="flex gap-2">
                <!-- Delete Button -->
                <form method="POST" 
                      action="{{ route('loans.loan-collaterals.destroy', [$loan, $loanCollateral]) }}" 
                      onsubmit="return confirm('Are you sure you want to delete this collateral? This action cannot be undone.')"
                      class="inline">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="px-4 py-2 text-sm font-medium text-white bg-red-600 border border-transparent rounded-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-colors">
                        {{ __('Delete') }}
                    </button>
                </form>
            </div>
        </div>
    </div>

    <!-- Image Modal -->
    @if($loanCollateral->image)
        <div id="imageModal" class="fixed inset-0 bg-black bg-opacity-75 z-50 hidden flex items-center justify-center p-4">
            <div class="relative max-w-4xl max-h-full">
                <img src="{{ asset('storage/' . $loanCollateral->image) }}" 
                     alt="Collateral image" 
                     class="max-w-full max-h-full object-contain rounded-lg">
                <button onclick="closeImageModal()" 
                        class="absolute top-4 right-4 text-white bg-black bg-opacity-50 rounded-full p-2 hover:bg-opacity-75 transition-all">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
            </div>
        </div>

        <script>
            function openImageModal() {
                document.getElementById('imageModal').classList.remove('hidden');
                document.body.style.overflow = 'hidden';
            }

            function closeImageModal() {
                document.getElementById('imageModal').classList.add('hidden');
                document.body.style.overflow = 'auto';
            }

            // Close modal when clicking outside the image
            document.getElementById('imageModal').addEventListener('click', function(e) {
                if (e.target === this) {
                    closeImageModal();
                }
            });

            // Close modal with Escape key
            document.addEventListener('keydown', function(e) {
                if (e.key === 'Escape') {
                    closeImageModal();
                }
            });
        </script>
    @endif
@endsection