@extends('layouts.user_type.auth')

@section('marketingFunnelReport')
    <div class="container-fluid py-4">
        {{-- KPI Cards Row (The main funnel visualization) --}}
        <div class="row mb-4">
            <div class="col-xl-10 col-lg-9">
                <div class="row">
                    @foreach($funnel_metrics as $metric)
                        @php
                            // Determine icon and color classes
                            $icon_class = '';
                            $text_color = 'text-secondary';
                            $bg_opacity_color = 'rgba(108, 117, 125, 0.1)'; // Default: text-secondary (gray)
                            
                            if ($metric['title'] === 'Emails Sent') { $icon_class = 'fas fa-paper-plane'; $text_color = 'text-primary'; $bg_opacity_color = 'rgba(0, 123, 255, 0.1)'; }
                            elseif ($metric['title'] === 'Delivered') { $icon_class = 'fas fa-truck'; $text_color = 'text-success'; $bg_opacity_color = 'rgba(40, 167, 69, 0.1)'; }
                            elseif ($metric['title'] === 'Opened') { $icon_class = 'fas fa-envelope-open-text'; $text_color = 'text-warning'; $bg_opacity_color = 'rgba(255, 193, 7, 0.1)'; }
                            elseif ($metric['title'] === 'Clicked Link') { $icon_class = 'fas fa-mouse-pointer'; $text_color = 'text-info'; $bg_opacity_color = 'rgba(23, 162, 184, 0.1)'; }
                            elseif ($metric['title'] === 'Responded/Flagged') { $icon_class = 'fas fa-comments'; $text_color = 'text-danger'; $bg_opacity_color = 'rgba(220, 53, 69, 0.1)'; }
                        @endphp
                        
                        {{-- Individual KPI Card --}}
                        <div class="col-xl-2 col-md-4 col-sm-6 mb-4">
                            <div class="card p-3 text-center h-100">
                                <div class="card-body p-2">
                                    {{-- Icon matching the rounded style in the image --}}
                                    <div class="icon icon-shape shadow text-center border-radius-md mx-auto mb-3" 
                                         style="width: 50px; height: 50px; line-height: 50px; background-color: {{ $bg_opacity_color }};">
                                        <i class="{{ $icon_class }} text-lg opacity-10" style="color: {{ $text_color }};"></i>
                                    </div>

                                    <p class="text-sm text-dark font-weight-bolder mb-1">{{ $metric['title'] }}</p>
                                    
                                    {{-- Count and Percentage (bottom aligned) --}}
                                    <div class="d-flex justify-content-center pt-2">
                                        <h5 class="font-weight-bolder mb-0 me-3">{{ number_format($metric['count']) }}</h5>
                                        <p class="text-sm font-weight-bold mb-0 {{ $text_color }}">{{ $metric['percentage_of_total'] }}%</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
            
            {{-- FINAL DESIGN: Total Labs Targeted Card (Simplified, matching the red-boxed area) --}}
            <div class="col-xl-2 col-lg-3 mb-4">
                 <div class="card p-3 h-100 d-flex flex-column justify-content-start">
                    <div class="card-body p-2 text-center">
                        {{-- Title and Total Count (Bolder text) --}}
                        <p class="text-sm text-dark font-weight-bolder mb-1">Total Labs Targeted</p>
                        <h4 class="font-weight-bolder mb-3">{{ number_format($total_labs_targeted) }}</h4>
                        
                        {{-- Simple List of Funnel Stages (Plain text as requested) --}}
                        <div class="text-xs text-muted text-start ps-3">
                            <p class="mb-0">Sent</p>
                            <p class="mb-0">Delivered</p>
                            <p class="mb-0">Opened</p>
                            <p class="mb-0">Clicked Link</p>
                            <p class="mb-0">Responded</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {{-- END: KPI Cards Row --}}


        {{-- Detailed Email Log Table --}}
        <div class="row mt-4">
            <div class="col-12">
                <div class="card mb-4">
                    <div class="card-header pb-0">
                        <h6 class="font-weight-bolder mb-0">Detailed Email Log</h6>
                    </div>
                    <div class="card-body px-0 pt-0 pb-2">
                        <div class="table-responsive p-0">
                            <table class="table align-items-center mb-0">
                                <thead>
                                    <tr>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-4">Sr. No.</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Customer Name</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Email</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Sent Date</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Subject</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Current Progress</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-center">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($log_entries as $index => $log)
                                        <tr>
                                            <td class="ps-4">
                                                <p class="text-xs font-weight-bold mb-0">{{ $index + 1 }}</p>
                                            </td>
                                            <td>
                                                <div class="d-flex px-2 py-1">
                                                    <h6 class="mb-0 text-sm">{{ $log['lab_name'] }}</h6>
                                                </div>
                                            </td>
                                            <td>
                                                <p class="text-xs font-weight-bold mb-0">{{ $log['email'] }}</p>
                                            </td>
                                            <td>
                                                <p class="text-xs font-weight-bold mb-0">{{ $log['sent_date'] }}</p>
                                            </td>
                                            <td>
                                                <p class="text-xs font-weight-bold mb-0">{{ $log['subject'] }}</p>
                                            </td>
                                            <td>
                                                @php
                                                    // Determine badge color based on progress
                                                    $badge_color = 'primary';
                                                    if (str_contains($log['progress'], 'Clicked')) $badge_color = 'info';
                                                    elseif (str_contains($log['progress'], 'Opened')) $badge_color = 'warning';
                                                    elseif (str_contains($log['progress'], 'Delivered')) $badge_color = 'success';
                                                @endphp
                                                <span class="badge badge-sm bg-gradient-{{ $badge_color }}">{{ $log['progress'] }}</span>
                                            </td>
                                            <td class="align-middle text-center">
                                                <a href="#" class="btn btn-link text-info text-gradient px-3 mb-0">View Log</a>
                                                <button class="btn btn-sm {{ $log['action_flag'] ? 'bg-gradient-danger' : 'bg-gradient-secondary' }} mb-0">
                                                    {{ $log['action_flag'] ? 'Flagged' : 'Flag Lab' }}
                                                </button>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="7" class="text-center py-5">
                                                <i class="fas fa-search-minus text-muted text-lg"></i>
                                                <p class="mt-2 text-muted">No email logs found for the selected filters.</p>
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection