@extends('front.layouts.main')

{{-- Set the page title dynamically based on the lead's name --}}
@section('title')
Lead: {{ $lead->lead_type == 'individual' ? $lead->customer_name : $lead->business_name }}
@endsection

@section('content')
<main class="job-detail-page"> {{-- Reusing class for layout consistency --}}
    <section class="section pt-0">
        <div class="container">
            <div class="w-100">
                <div class="col-lg-12 col-md-8 mt-3 mt-md-0">
                    <div class="main-content">
                        <div class="box white job-detail"> {{-- Reusing class for styling --}}
                            <div class="title-wrapper">
                                {{-- Display the primary name of the lead --}}
                                <h2 class="box-title medium-font-size">
                                    {{ $lead->lead_type == 'individual' ? $lead->customer_name : $lead->business_name }}
                                </h2>
                            </div>

                            {{-- This section displays the core lead info with icons, similar to the job detail page --}}

                            <div class="col-xl-12 d-flex flex-column">
                                <div class="row tags pt-2">

                                    <p class="col-sm-6 col-lg-4 mr-0 mb-3">
                                        <i class="material-icons mr-2">apartment</i>
                                        {{ optional($lead->kuaCompany)->name ?? 'N/A' }}
                                    </p>
                                    <p class="col-sm-6 col-lg-4 mr-0 mb-3">
                                        <i class="material-icons mr-2">widgets</i>
                                        {{ optional($lead->kuaProduct)->product_name ?? 'N/A' }}
                                    </p>
                                    <p class="col-sm-6 col-lg-4 mr-0 mb-3">
                                        <i class="material-icons mr-2">tag</i>
                                        <span class="em-chip">{{ ucfirst($lead->lead_type) }} Lead</span>
                                    </p>
                                    <p class="col-sm-6 col-lg-4 mr-0 mb-3">
                                        <i class="material-icons mr-2">phone</i>
                                        {{ $lead->phone_number ?? 'Not Provided'}}
                                    </p>
                                    <p class="col-sm-6 col-lg-4 mr-0 mb-3">
                                        <i class="material-icons mr-2">email</i>
                                        {{ $lead->email ?? 'Not Provided' }}
                                    </p>
                                    <p class="col-sm-6 col-lg-4 mr-0 mb-3">
                                        <i class="material-icons mr-2">room</i>
                                        {{ ucfirst(optional($lead->kuaRegion)->region_name ?? 'N/A') }}

                                    </p>
                                    <p class="col-sm-6 col-lg-4 mr-0 mb-3">
                                        <i class="material-icons mr-2">event</i>
                                        Closes:
                                        {{ \Carbon\Carbon::parse($lead->expected_closure_date)->format('d M, Y') }}
                                    </p>

                                    @if($lead->lead_type == 'business')
                                    <p class="col-sm-12 mr-0 mb-3">
                                        <i class="material-icons mr-2">person</i>
                                        Contact: {{ $lead->contact_person_name ?? 'Not Provided' }}
                                    </p>
                                    @else
                                    <p class="col-sm-12 mr-0 mb-3">
                                        <i class="material-icons mr-2">work</i>
                                        Occupation: {{ $lead->occupation ?? 'Not Provided' }}
                                    </p>
                                    @endif
                                </div>
                            </div>


                            {{-- Tab-like structure to separate details --}}
                            <ul class="nav nav-tabs d-none d-md-flex mt-4" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active" data-toggle="tab" href="#lead-details">Details</a>
                                </li>
                            </ul>

                            <!-- Tab panes -->
                            <div class="tab-content">
                                <div id="lead-details" class="gray tab-pane fade show active">
                                    @if($lead->lead_type == 'business' && $lead->business_description)
                                    <h3 class="h3 mt-0">Business Description</h3>
                                    <p>{{ $lead->business_description ?? 'Not Provided' }}</p>
                                    @endif

                                    @if($lead->notes)
                                    <h3 class="h3 mt-4">Notes</h3>
                                    <p>{!! nl2br(e($lead->notes)) !!}</p>
                                    @endif

                                    @if(!$lead->notes && !($lead->lead_type == 'business' &&
                                    $lead->business_description))
                                    <p class="mt-3">No additional details or notes were provided for this lead.</p>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </section>
</main>
@endsection

@push('pageJs')
{{-- No specific JS needed for this simple view page, so this section can be empty or removed. --}}
<script>
// Simple script to make tabs functional on mobile view if needed
$(document).ready(function() {
    $('.toggle-tab').on('change', function() {
        var targetTab = $(this).val();
        $('.nav-tabs a[href="#' + targetTab + '"]').tab('show');
    });
});
</script>
@endpush