@extends('layouts.simple.master')

@section('title', trans(app()->getLocale() . '.investor_details'))

@section('css')
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/animate.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/jquery.dataTables.css') }}">
    <style>
        .investor-details-wrapper .user-filter {
            padding: 8px 16px;
            margin-right: 8px;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: inline-block;
            background-color: #f8f9fa;
            color: #666;
            font-weight: 500;
        }
        .investor-details-wrapper .user-filter:hover {
            background-color: #e9ecef;
            color: var(--theme-default);
        }
        .investor-details-wrapper .user-filter.active {
            background-color: var(--theme-default);
            color: white;
        }
        .offer-card {
            border: 1px solid #e9ecef;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            transition: all 0.3s ease;
        }
        .offer-card:hover {
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            transform: translateY(-2px);
        }
        .offer-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            padding-bottom: 15px;
            border-bottom: 1px solid #e9ecef;
        }
        .offer-status {
            padding: 4px 12px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 600;
        }
        .status-pending {
            background-color: #fff3cd;
            color: #856404;
        }
        .status-accepted {
            background-color: #d4edda;
            color: #155724;
        }
        .status-rejected {
            background-color: #f8d7da;
            color: #721c24;
        }
        .status-countered {
            background-color: #d1ecf1;
            color: #0c5460;
        }
        .company-card {
            border: 1px solid #e9ecef;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 15px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .company-card:hover {
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            transform: translateY(-2px);
        }
        .company-card.active {
            border-color: var(--theme-default);
            background-color: #f0f4ff;
        }
        .company-card .company-logo {
            width: 50px;
            height: 50px;
            border-radius: 8px;
            object-fit: cover;
            flex-shrink: 0;
        }
        .company-card .company-initial {
            width: 50px;
            height: 50px;
            border-radius: 8px;
            background-color: var(--theme-default);
            color: white;
            font-size: 20px;
            font-weight: bold;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .investor-avatar {
            width: 80px;
            height: 80px;
            border-radius: 10px;
            object-fit: cover;
            flex-shrink: 0;
        }
        .investor-initial {
            width: 80px;
            height: 80px;
            border-radius: 10px;
            background-color: var(--theme-default);
            color: white;
            font-size: 32px;
            font-weight: bold;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        /* RTL Support */
        html[dir="rtl"] .company-card .d-flex,
        html[lang="ar"] .company-card .d-flex {
            direction: rtl;
        }
        html[dir="rtl"] .investor-details-wrapper .d-flex,
        html[lang="ar"] .investor-details-wrapper .d-flex {
            direction: rtl;
        }
        html[dir="rtl"] .company-card .flex-grow-1,
        html[lang="ar"] .company-card .flex-grow-1 {
            padding-right: 0;
            padding-left: 0;
        }
    </style>
@endsection

@section('main_content')
    <div class="container-fluid">
        <div class="page-title">
            <div class="row">
                <div class="col-sm-6">
                    <h3>{{ trans(app()->getLocale() . '.investor_details') }}</h3>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}"> <svg class="stroke-icon">
                                    <use href="{{ asset('assets/svg/icon-sprite.svg#stroke-home') }}"></use>
                                </svg></a></li>
                        <li class="breadcrumb-item"><a href="{{ route('admin.investor.index') }}">{{ trans(app()->getLocale() . '.investors') }}</a></li>
                        <li class="breadcrumb-item active">{{ trans(app()->getLocale() . '.investor_details') }}</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <!-- Container-fluid starts-->
    <div class="container-fluid investor-details-wrapper">
        <!-- Investor Info Card -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="d-flex align-items-center">
                                    @if ($investor->image)
                                        <img src="{{ $investor->image->getFileUrl() }}" alt="Investor" class="investor-avatar me-3">
                                    @else
                                        <div class="investor-initial me-3">
                                            {{ strtoupper(substr($investor->name ?? 'N', 0, 1)) }}
                                        </div>
                                    @endif
                                    <div>
                                        <h4 class="mb-1">{{ $investor->name ?? 'N/A' }}</h4>
                                        <p class="text-muted mb-0">{{ $investor->email ?? 'N/A' }}</p>
                                        @if($investor->city)
                                            @php
                                                $locale = app()->getLocale();
                                                $cityName = is_array($investor->city->name) ? ($investor->city->name[$locale] ?? $investor->city->name['en'] ?? $investor->city->name['ar'] ?? 'N/A') : ($investor->city->name ?? 'N/A');
                                            @endphp
                                            <p class="text-muted mb-0"><i class="fa-solid fa-location-dot me-1"></i>{{ $cityName }}</p>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Tabs Section -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header common-space">
                        <div class="common-f-start">
                            <h5 class="mb-0"><i class="fa-solid fa-building me-1"></i> {{ trans(app()->getLocale() . '.companies') }}</h5>
                        </div>
                    </div>
                    <div class="card-body">
                        <!-- Companies Tab -->
                        <div id="tab-companies">
                            <div class="row" id="companies-list">
                                @forelse($companiesWithOffers as $company)
                                    <div class="col-md-4 col-sm-6 mb-3">
                                        <div class="company-card" onclick="showCompanyOffers({{ $company->id }})" data-company-id="{{ $company->id }}">
                                            <div class="d-flex align-items-start">
                                                @if ($company->logo)
                                                    <img src="{{ $company->logo->getFileUrl() }}" alt="Company Logo" class="company-logo me-3">
                                                @else
                                                    <div class="company-initial me-3">
                                                        {{ strtoupper(substr($company->name ?? 'N', 0, 1)) }}
                                                    </div>
                                                @endif
                                                <div class="flex-grow-1">
                                                    <h6 class="mb-1">{{ $company->name ?? 'N/A' }}</h6>
                                                    @if($company->category)
                                                        @php
                                                            $locale = app()->getLocale();
                                                            $categoryName = is_array($company->category->name) ? ($company->category->name[$locale] ?? $company->category->name['en'] ?? $company->category->name['ar'] ?? 'N/A') : ($company->category->name ?? 'N/A');
                                                        @endphp
                                                        <p class="text-muted mb-0" style="font-size: 12px;">{{ $categoryName }}</p>
                                                    @endif
                                                    @if(isset($offersByCompany[$company->id]))
                                                        @php
                                                            $offerCount = count($offersByCompany[$company->id]);
                                                            $offerText = $offerCount == 1 ? trans(app()->getLocale() . '.offer') : trans(app()->getLocale() . '.offers');
                                                        @endphp
                                                        <p class="text-muted mb-0" style="font-size: 11px;">
                                                            {{ $offerCount }} {{ $offerText }}
                                                        </p>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @empty
                                    <div class="col-12">
                                        <div class="text-center py-5">
                                            <i class="fa-solid fa-building" style="font-size: 64px; color: #dee2e6;"></i>
                                            <p class="text-muted mt-3">{{ trans(app()->getLocale() . '.no_companies_found') }}</p>
                                        </div>
                                    </div>
                                @endforelse
                            </div>
                            <div id="company-offers-content" style="display: none;">
                                <div class="mb-3">
                                    <button class="btn btn-sm btn-secondary" onclick="backToCompanies()">
                                        <i class="fa-solid fa-arrow-left me-1"></i> {{ trans(app()->getLocale() . '.back_to_companies') }}
                                    </button>
                                </div>
                                <div id="company-offers-list">
                                    <!-- Company offers will be shown here -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Container-fluid Ends-->
@endsection

@section('scripts')
    <script src="{{ asset('assets/js/counter/counter-custom.js') }}"></script>
    <script>
        const investorId = {{ $investor->id }};
        const offersByCompany = @json($offersByCompany);

        // Show offers for a specific company
        function showCompanyOffers(companyId) {
            // Update active company card
            document.querySelectorAll('.company-card').forEach(card => {
                card.classList.remove('active');
            });
            document.querySelector(`[data-company-id="${companyId}"]`).classList.add('active');

            const contentEl = document.getElementById('company-offers-content');
            const companiesList = document.getElementById('companies-list');
            const offersListEl = document.getElementById('company-offers-list');

            contentEl.style.display = 'block';
            companiesList.style.display = 'none';

            const offers = offersByCompany[companyId.toString()] || [];

            if (offers.length === 0) {
                offersListEl.innerHTML = '<div class="text-center py-5"><p class="text-muted">{{ trans(app()->getLocale() . ".no_offers_found_for_company") }}</p></div>';
                return;
            }

            let html = '';
            offers.forEach(offer => {
                const statusClass = {
                    'pending': 'status-pending',
                    'accepted': 'status-accepted',
                    'rejected': 'status-rejected',
                    'countered': 'status-countered'
                }[offer.status] || 'status-pending';

                const statusLabels = {
                    'pending': '{{ trans(app()->getLocale() . ".status_pending") }}',
                    'accepted': '{{ trans(app()->getLocale() . ".status_accepted") }}',
                    'rejected': '{{ trans(app()->getLocale() . ".status_rejected") }}',
                    'countered': '{{ trans(app()->getLocale() . ".status_countered") }}'
                };
                const statusLabel = statusLabels[offer.status] || offer.status;
                const isFromInvestor = offer.from_user_id === investorId;
                const otherUser = isFromInvestor ? offer.to_user : offer.from_user;
                const sentToText = '{{ trans(app()->getLocale() . ".sent_to") }}';
                const receivedFromText = '{{ trans(app()->getLocale() . ".received_from") }}';
                const investmentAmountText = '{{ trans(app()->getLocale() . ".investment_amount") }}';
                const equityText = '{{ trans(app()->getLocale() . ".equity") }}';
                const valuationText = '{{ trans(app()->getLocale() . ".valuation") }}';
                const dateText = '{{ trans(app()->getLocale() . ".date") }}';
                const useOfFundsText = '{{ trans(app()->getLocale() . ".use_of_funds") }}';
                const commentText = '{{ trans(app()->getLocale() . ".comment") }}';
                const counterOfferText = '{{ trans(app()->getLocale() . ".counter_offer") }}';

                html += `
                    <div class="offer-card">
                        <div class="offer-header">
                            <div>
                                <h6 class="mb-1">${offer.company_name || 'N/A'}</h6>
                                <p class="text-muted mb-0" style="font-size: 12px;">
                                    ${isFromInvestor ? sentToText : receivedFromText}: ${otherUser?.name || 'N/A'}
                                </p>
                            </div>
                            <span class="offer-status ${statusClass}">${statusLabel}</span>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <p class="mb-2"><strong>${investmentAmountText}:</strong> $${offer.investment_amount?.toLocaleString() || 'N/A'}</p>
                                <p class="mb-2"><strong>${equityText}:</strong> ${offer.equity || 'N/A'}%</p>
                            </div>
                            <div class="col-md-6">
                                <p class="mb-2"><strong>${valuationText}:</strong> $${offer.valuation?.toLocaleString() || 'N/A'}</p>
                                <p class="mb-2"><strong>${dateText}:</strong> ${new Date(offer.created_at).toLocaleString()}</p>
                            </div>
                        </div>
                        ${offer.use_of_funds ? `<p class="mb-2"><strong>${useOfFundsText}:</strong> ${offer.use_of_funds}</p>` : ''}
                        ${offer.comment ? `<p class="mb-0"><strong>${commentText}:</strong> ${offer.comment}</p>` : ''}
                        ${offer.parent_offer_id ? `<p class="mb-0 mt-2"><small class="text-muted">${counterOfferText}</small></p>` : ''}
                    </div>
                `;
            });

            offersListEl.innerHTML = html;
        }

        // Back to companies list
        function backToCompanies() {
            document.getElementById('company-offers-content').style.display = 'none';
            document.getElementById('companies-list').style.display = 'block';
            document.querySelectorAll('.company-card').forEach(card => {
                card.classList.remove('active');
            });
        }

        // Initialize on page load
        document.addEventListener('DOMContentLoaded', function() {
            if (typeof feather !== 'undefined') {
                feather.replace();
            }
        });
    </script>
@endsection