@extends('layout.app')

@section('content')
    <div class="card">
        <div class="card-header">
            <h5 class="mb-0">Recommender Report</h5>
        </div>

        <div class="card-body">
            {{-- Date Range Filter --}}
            <form action="{{ route('recommender.report') }}" method="GET" class="mb-4">
                <div class="row align-items-end">
                    <div class="col-md-3 col-sm-6 mb-2">
                        <label class="mb-1 font-weight-bold" style="font-size:13px">From</label>
                        <input type="date" name="from" class="form-control form-control-sm"
                            value="{{ $from->format('Y-m-d') }}">
                    </div>
                    <div class="col-md-3 col-sm-6 mb-2">
                        <label class="mb-1 font-weight-bold" style="font-size:13px">To</label>
                        <input type="date" name="to" class="form-control form-control-sm"
                            value="{{ $to->format('Y-m-d') }}">
                    </div>
                    <div class="col-md-6 col-sm-6 mb-2 d-flex align-items-end gap-2" style="gap:6px">
                        <button type="submit" class="btn btn-primary btn-sm">
                            <i class="fas fa-search"></i> Search
                        </button>
                        <a href="{{ route('recommender.report') }}" class="btn btn-secondary btn-sm">
                            <i class="fas fa-undo"></i> Reset
                        </a>
                        <a href="{{ route('recommender.report.export', ['from' => $from->format('Y-m-d'), 'to' => $to->format('Y-m-d')]) }}"
                            class="btn btn-success btn-sm">
                            <i class="fas fa-file-excel"></i> Download Excel
                        </a>
                    </div>
                </div>
            </form>

            @php
                $totalClients = $recommenders->sum('clients_count');
                $totalActive  = $recommenders->sum('active_clients_count');
            @endphp

            @if ($recommenders->isEmpty() || $totalClients == 0)
                <div class="alert alert-info">
                    No clients were referred by any recommender in the selected date range
                    ({{ $from->format('d M Y') }} &ndash; {{ $to->format('d M Y') }}).
                </div>
            @else
                <div class="table-responsive">
                    <table class="table table-bordered table-hover table-sm">
                        <thead class="thead-light">
                            <tr>
                                <th style="width:50px">#</th>
                                <th>Recommender Name</th>
                                <th>Code</th>
                                <th>Phone</th>
                                <th class="text-center">Total Clients</th>
                                <th class="text-center">Active Clients</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php $serial = 1; @endphp
                            @foreach ($recommenders as $recommender)
                                @if ($recommender->clients_count > 0)
                                    <tr>
                                        <td>{{ $serial++ }}</td>
                                        <td>{{ $recommender->name }}</td>
                                        <td>
                                            <span class="badge badge-info">{{ $recommender->code }}</span>
                                        </td>
                                        <td>{{ $recommender->phone ?? '-' }}</td>
                                        <td class="text-center">
                                            <a href="#"
                                                class="badge badge-primary load-clients"
                                                data-id="{{ $recommender->id }}"
                                                data-name="{{ $recommender->name }}"
                                                data-from="{{ $from->format('Y-m-d') }}"
                                                data-to="{{ $to->format('Y-m-d') }}"
                                                style="font-size:13px;cursor:pointer">
                                                {{ $recommender->clients_count }}
                                            </a>
                                        </td>
                                        <td class="text-center">
                                            <span class="badge badge-success" style="font-size:13px">
                                                {{ $recommender->clients()->whereBetween('clients.created_at', [$from, $to])->where('clients_status', 'active')->count() }}
                                            </span>
                                        </td>
                                    </tr>
                                @endif
                            @endforeach
                        </tbody>
                        <tfoot>
                            <tr class="bg-light font-weight-bold">
                                <td colspan="4" class="text-right">Total</td>
                                <td class="text-center">{{ $totalClients }}</td>
                                <td class="text-center"></td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            @endif
        </div>
    </div>

    {{-- Client Detail Modal --}}
    <div class="modal fade" id="cxClientModal" tabindex="-1" role="dialog" aria-labelledby="cxClientModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="cxClientModalLabel">Clients</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="cxClientModalBody">
                    <div id="cxModalSpinner" class="text-center py-4">
                        <i class="fas fa-spinner fa-spin fa-2x text-primary"></i>
                        <p class="mt-2 text-muted">Loading...</p>
                    </div>
                    <div id="cxModalContent" style="display:none"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('ajax')
    <script>
        $(document).on('click', '.load-clients', function (e) {
            e.preventDefault();

            var id   = $(this).data('id');
            var name = $(this).data('name');
            var from = $(this).data('from');
            var to   = $(this).data('to');

            $('#cxClientModalLabel').text('Clients referred by: ' + name);
            $('#cxModalSpinner').show();
            $('#cxModalContent').hide().html('');
            $('#cxClientModal').modal('show');

            $.get('{{ route('recommender.report.clients') }}', {
                recommender_id: id,
                from: from,
                to: to
            })
            .done(function (res) {
                var clients = res.clients;
                if (!clients || clients.length === 0) {
                    $('#cxModalContent').html(
                        '<div class="alert alert-info mb-0">No clients found for this recommender in the selected date range.</div>'
                    );
                } else {
                    var html = '<div class="table-responsive">'
                             + '<table class="table table-bordered table-sm table-hover mb-0">'
                             + '<thead class="thead-light"><tr>'
                             + '<th>#</th><th>Username</th><th>Name</th><th>Phone</th>'
                             + '<th>POP</th><th>Status</th><th>Created</th>'
                             + '</tr></thead><tbody>';

                    $.each(clients, function (i, c) {
                        var badgeClass = c.status === 'active' ? 'badge-success'
                                       : (c.status === 'inactive' ? 'badge-warning' : 'badge-secondary');
                        html += '<tr>'
                              + '<td>' + (i + 1) + '</td>'
                              + '<td>' + c.userid + '</td>'
                              + '<td>' + c.name + '</td>'
                              + '<td>' + c.phone + '</td>'
                              + '<td>' + c.pop + '</td>'
                              + '<td><span class="badge ' + badgeClass + '">' + c.status + '</span></td>'
                              + '<td>' + c.created + '</td>'
                              + '</tr>';
                    });

                    html += '</tbody></table></div>';
                    $('#cxModalContent').html(html);
                }

                $('#cxModalSpinner').hide();
                $('#cxModalContent').show();
            })
            .fail(function () {
                $('#cxModalContent').html(
                    '<div class="alert alert-danger mb-0">Failed to load clients. Please try again.</div>'
                );
                $('#cxModalSpinner').hide();
                $('#cxModalContent').show();
            });
        });
    </script>
@endsection