@extends('layout.app')
@section('content')

    <script type="text/javascript">
        jQuery(document).ready(function ($) {

            // Sparkline - Leads trend
            $('.leads-bar').sparkline('html', {
                type: 'bar',
                barColor: '#ee4749',
                barWidth: 8,
                barSpacing: 2,
                height: '40px'
            });
            // Sparkline - Inquiries trend
            $('.inquiries-bar').sparkline('html', {
                type: 'bar',
                barColor: '#00b19d',
                barWidth: 8,
                barSpacing: 2,
                height: '40px'
            });
            // Sparkline - Properties trend
            $('.properties-bar').sparkline('html', {
                type: 'bar',
                barColor: '#445982',
                barWidth: 8,
                barSpacing: 2,
                height: '40px'
            });
            // Sparkline - Logs trend
            $('.logs-bar').sparkline('html', {
                type: 'bar',
                barColor: '#f0a500',
                barWidth: 8,
                barSpacing: 2,
                height: '40px'
            });

            // Line Chart - Leads vs Inquiries over time
            var line_chart = Morris.Line({
                element: 'line-chart-demo',
                data: [
                        @foreach($chartData as $point)
                    {
                        y: '{{ $point['month'] }}', leads: {{ $point['leads'] }}, inquiries: {{ $point['inquiries'] }}
                    },
                    @endforeach
                ],
                xkey: 'y',
                ykeys: ['leads', 'inquiries'],
                labels: ['Leads', 'Inquiries'],
                lineColors: ['#ee4749', '#00b19d'],
                redraw: true
            });

            // Area Chart - Property Listings over time
            Morris.Area({
                element: 'area-chart-demo',
                data: [
                        @foreach($chartData as $point)
                    {
                        y: '{{ $point['month'] }}', properties: {{ $point['properties'] }}
                    },
                    @endforeach
                ],
                xkey: 'y',
                ykeys: ['properties'],
                labels: ['Properties'],
                lineColors: ['#445982'],
                redraw: true
            });

            // Donut Chart - Lead Status breakdown
            Morris.Donut({
                element: 'donut-chart-demo',
                data: [
                    {label: "New Leads", value: {{ $leadStats['new'] ?? 0 }}},
                    {label: "Contacted", value: {{ $leadStats['contacted'] ?? 0 }}},
                    {label: "Converted", value: {{ $leadStats['converted'] ?? 0 }}}
                ],
                colors: ['#ee4749', '#445982', '#00b19d']
            });

            // Logs Rickshaw - Real-time agent activity
            var seriesData = [[], []];
            var random = new Rickshaw.Fixtures.RandomData(50);
            for (var i = 0; i < 50; i++) {
                random.addData(seriesData);
            }
            var graph = new Rickshaw.Graph({
                element: document.getElementById("rickshaw-chart-demo"),
                height: 193,
                renderer: 'area',
                stroke: false,
                preserve: true,
                series: [
                    {color: '#ee4749', data: seriesData[0], name: 'Calls Made'},
                    {color: '#00b19d', data: seriesData[1], name: 'Logs Generated'}
                ]
            });
            graph.render();
            new Rickshaw.Graph.HoverDetail({graph: graph});
            new Rickshaw.Graph.Legend({graph: graph, element: document.getElementById('rickshaw-legend')});
            setInterval(function () {
                random.removeData(seriesData);
                random.addData(seriesData);
                graph.update();
            }, 500);

        });
    </script>

    {{-- ==================== STAT TILES ==================== --}}
    <div class="row">
        <div class="col-sm-3 col-xs-6">
            <div class="tile-stats tile-red">
                <div class="icon"><i class="entypo-user"></i></div>
                <div class="num" data-start="0" data-end="{{ $totalLeads }}" data-postfix="" data-duration="1500"
                     data-delay="0">0
                </div>
                <h3>Total Leads</h3>
                <p>Captured by AI voice agent.</p>
                <span class="leads-bar">{{ implode(',', $leadsTrend) }}</span>
            </div>
        </div>
        <div class="col-sm-3 col-xs-6">
            <div class="tile-stats tile-green">
                <div class="icon"><i class="entypo-chat"></i></div>
                <div class="num" data-start="0" data-end="{{ $totalInquiries }}" data-postfix="" data-duration="1500"
                     data-delay="400">0
                </div>
                <h3>Total Inquiries</h3>
                <p>Received via agent calls.</p>
                <span class="inquiries-bar">{{ implode(',', $inquiriesTrend) }}</span>
            </div>
        </div>
        <div class="clear visible-xs"></div>
        <div class="col-sm-3 col-xs-6">
            <div class="tile-stats tile-blue">
                <div class="icon"><i class="entypo-home"></i></div>
                <div class="num" data-start="0" data-end="{{ $totalProperties }}" data-postfix="" data-duration="1500"
                     data-delay="800">0
                </div>
                <h3>Property Listings</h3>
                <p>Active listings in system.</p>
                <span class="properties-bar">{{ implode(',', $propertiesTrend) }}</span>
            </div>
        </div>
        <div class="col-sm-3 col-xs-6">
            <div class="tile-stats tile-aqua">
                <div class="icon"><i class="entypo-list"></i></div>
                <div class="num" data-start="0" data-end="{{ $totalLogs }}" data-postfix="" data-duration="1500"
                     data-delay="1200">0
                </div>
                <h3>Agent Logs</h3>
                <p>Total actions logged today.</p>
                <span class="logs-bar">{{ implode(',', $logsTrend) }}</span>
            </div>
        </div>
    </div>

    <br/>

    {{-- ==================== CHARTS ROW ==================== --}}
    <div class="row">
        <div class="col-sm-8">
            <div class="panel panel-primary" id="charts_env">
                <div class="panel-heading">
                    <div class="panel-title">Agent Performance Stats</div>
                    <div class="panel-options">
                        <ul class="nav nav-tabs">
                            <li><a href="#area-chart" data-toggle="tab">Properties</a></li>
                            <li class="active"><a href="#line-chart" data-toggle="tab">Leads & Inquiries</a></li>
                            <li><a href="#pie-chart" data-toggle="tab">Lead Status</a></li>
                        </ul>
                    </div>
                </div>
                <div class="panel-body">
                    <div class="tab-content">
                        <div class="tab-pane" id="area-chart">
                            <div id="area-chart-demo" class="morrischart" style="height: 300px"></div>
                        </div>
                        <div class="tab-pane active" id="line-chart">
                            <div id="line-chart-demo" class="morrischart" style="height: 300px"></div>
                        </div>
                        <div class="tab-pane" id="pie-chart">
                            <div id="donut-chart-demo" class="morrischart" style="height: 300px;"></div>
                        </div>
                    </div>
                </div>
                <table class="table table-bordered table-responsive">
                    <thead>
                    <tr>
                        <th width="50%" class="col-padding-1">
                            <div class="pull-left">
                                <div class="h4 no-margin">Total Leads</div>
                                <small>{{ $totalLeads }} captured</small>
                            </div>
                            <span class="pull-right leads-bar">{{ implode(',', $leadsTrend) }}</span>
                        </th>
                        <th width="50%" class="col-padding-1">
                            <div class="pull-left">
                                <div class="h4 no-margin">Total Inquiries</div>
                                <small>{{ $totalInquiries }} received</small>
                            </div>
                            <span class="pull-right inquiries-bar">{{ implode(',', $inquiriesTrend) }}</span>
                        </th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>

        <div class="col-sm-4">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <div class="panel-title">
                        <h4>Live Agent Activity <br/><small>real-time log stream</small></h4>
                    </div>
                    <div class="panel-options">
                        <a href="#" data-rel="collapse"><i class="entypo-down-open"></i></a>
                        <a href="#" data-rel="reload"><i class="entypo-arrows-ccw"></i></a>
                        <a href="#" data-rel="close"><i class="entypo-cancel"></i></a>
                    </div>
                </div>
                <div class="panel-body no-padding">
                    <div id="rickshaw-chart-demo">
                        <div id="rickshaw-legend"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <br/>

    {{-- ==================== RECENT LEADS + RECENT LOGS ==================== --}}
    <div class="row">
        <div class="col-sm-7">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <div class="panel-title">Recent Leads</div>
                    <div class="panel-options">
                        <a href="{{route('lead')}}" class="btn btn-xs btn-default">View All</a>
                    </div>
                </div>
                <table class="table table-bordered table-responsive">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>Name</th>
                        <th>Phone</th>
                        <th>Source</th>
                        <th>Status</th>
                        <th>Date</th>
                    </tr>
                    </thead>
                    <tbody>
                    @forelse($recentLeads as $i => $lead)
                        <tr>
                            <td>{{ $i + 1 }}</td>
                            <td>{{ $lead->name ?? 'N/A' }}</td>
                            <td>{{ $lead->phone ?? '-' }}</td>
                            <td>{{ $lead->source ?? 'Voice Agent' }}</td>
                            <td>
                                @php $status = $lead->status ?? 'new'; @endphp
                                <span
                                    class="label label-{{ $status == 'converted' ? 'success' : ($status == 'contacted' ? 'warning' : 'danger') }}">
                            {{ ucfirst($status) }}
                        </span>
                            </td>
                            <td>{{ \Carbon\Carbon::parse($lead->created_at)->format('d M Y') }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="text-center">No leads found.</td>
                        </tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <div class="col-sm-5">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <div class="panel-title">Recent Agent Logs</div>
                    <div class="panel-options">
                        <a href="{{route('log')}}" class="btn btn-xs btn-default">View All</a>
                    </div>
                </div>
                <table class="table table-bordered table-responsive">
                    <thead>
                    <tr>
                        <th>Type</th>
                        <th>Number</th>
                        <th>Duration</th>
                        <th>Time</th>
                    </tr>
                    </thead>
                    <tbody>
                    @forelse($recentLogs as $log)
                        <tr>
                            <td>
                                @php $type = $log->type ?? 'info'; @endphp
                                <span
                                    class="label label-{{ $type == 'error' ? 'danger' : ($type == 'warning' ? 'warning' : 'info') }}">
                            {{ ucfirst($type) }}
                        </span>
                            </td>
                            <td>{{ \Illuminate\Support\Str::limit($log->caller_number ?? 'No number', 40) }}</td>
                            <td>{{ $log->duration_seconds ?? 0 }}s</td>
                            <td>{{ \Carbon\Carbon::parse($log->created_at)->diffForHumans() }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="3" class="text-center">No logs found.</td>
                        </tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <br/>

    {{-- ==================== RECENT INQUIRIES + PROPERTIES ==================== --}}
    <div class="row">
        <div class="col-sm-6">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <div class="panel-title">Recent Inquiries</div>
                    <div class="panel-options">
                        <a href="{{route('inquiry')}}" class="btn btn-xs btn-default">View All</a>
                    </div>
                </div>
                <table class="table table-bordered table-responsive">
                    <thead>
                    <tr>
                        <th>Name</th>
                        <th>Property Interest</th>
                        <th>Agreed Rent</th>
                        <th>Status</th>
                        <th>Date</th>
                    </tr>
                    </thead>
                    <tbody>
                    @forelse($recentInquiries as $inquiry)
                        <tr>
                            <td>{{ $inquiry->customer_name ?? 'N/A' }}</td>
                            <td>{{ \Illuminate\Support\Str::limit($inquiry->property_id ?? '-', 30) }}</td>
                            <td>{{ $inquiry->agreed_rent ?? 0.00 }}</td>
                            <td>
                                @php
                                    $s = strtolower($inquiry->status ?? 'pending');
                                    // Color Mapping
                                    $color = 'warning'; // Default (Pending)
                                    if($s == 'scheduled' || $s == 'resolved') $color = 'success';
                                    if($s == 'cancelled' || $s == 'rejected') $color = 'danger';
                                @endphp

                                <span class="label label-{{ $color }} shadow-sm">
                {{ ucfirst($s) }}
            </span>
                            </td>
                            <td>{{ \Carbon\Carbon::parse($inquiry->created_at)->format('d M') }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="4" class="text-center">No inquiries found.</td>
                        </tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <div class="col-sm-6">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <div class="panel-title">Recent Property Listings</div>
                    <div class="panel-options">
                        <a href="{{route('property')}}" class="btn btn-xs btn-default">View All</a>
                    </div>
                </div>
                <table class="table table-bordered table-responsive">
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>Address</th>
                        <th>Type</th>
                        <th>Max Rent</th>
                        <th>Status</th>
                    </tr>
                    </thead>
                    <tbody>
                    @forelse($recentProperties as $property)
                        <tr>
                            <td>{{ $property->_id ?? 'N/A' }}</td>
                            <td>{{ \Illuminate\Support\Str::limit($property->address ?? 'N/A', 25) }}</td>
                            <td>{{ $property->type ?? '-' }}</td>
                            <td>{{ $property->rent_max ? '$'.number_format($property->rent_max) : '-' }}</td>
                            <td>
                                @php $ps = $property->status ?? 'active'; @endphp
                                <span class="label label-{{ $ps == 'active' ? 'success' : 'default' }}">
                            {{ ucfirst($ps) }}
                        </span>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="4" class="text-center">No properties found.</td>
                        </tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

@endsection