@extends(session('staff_logged_in') ? 'Staff.layout' : 'Admin.layout')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">

@section('content')
    <div class="row align-items-center justify-content-between mb-3 mt-3">
        <div class="col-auto">
            <h5>
                <button type="button" class="btn btn-icon bg-white me-2" style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                    <a href="{{ route('follow_ups') }}">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                            stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                            class="icon icon-tabler">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path d="M15 6l-6 6l6 6" />
                        </svg>
                    </a>
                </button>
                Follow Up Report
            </h5>
        </div>
    </div>

    {{-- Summary Cards --}}
    <div class="row g-3 mb-4" id="summaryCards">
        <div class="col-md-3">
            <div class="card border-0 shadow-sm text-center p-3">
                <div class="fw-bold fs-4 text-warning" id="totalCount">-</div>
                <div class="text-muted small">Total</div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-0 shadow-sm text-center p-3">
                <div class="fw-bold fs-4 text-warning" id="pendingCount">-</div>
                <div class="text-muted small">Pending</div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-0 shadow-sm text-center p-3">
                <div class="fw-bold fs-4 text-success" id="completedCount">-</div>
                <div class="text-muted small">Completed</div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-0 shadow-sm text-center p-3">
                <div class="fw-bold fs-4 text-danger" id="overdueCount">-</div>
                <div class="text-muted small">Overdue</div>
            </div>
        </div>
    </div>

    <div class="card p-0">
        <div class="row mb-3 align-items-center p-3 g-2">
            <div class="col-auto">
                <select id="pageLength" class="form-select">
                    <option value="10">10</option>
                    <option value="25">25</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                    <option value="All">All</option>
                </select>
            </div>
            <div class="col-auto ms-auto">
                <div class="d-flex align-items-center gap-2">
                    <input type="text" id="customSearch" class="form-control" placeholder="Search..." style="width:180px;">
                    <button class="btn btn-label-secondary">Export</button>
                </div>
            </div>
        </div>

        <div class="table-responsive pt-0 pb-2">
            <table class="table" id="reportTable">
                <thead>
                    <tr>
                        <th>S.No</th>
                        <th>Sheet ID</th>
                        <th>Patient Name</th>
                        <th>Phone</th>
                        <th>Follow Up Date</th>
                        <th>Reason</th>
                        <th>Status</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script>
    $(document).ready(function() {

        const table = $('#reportTable').DataTable({
            ajax: {
                url: '{{ route("follow_up_data") }}',
                dataSrc: function(json) {
                    const today = new Date().toISOString().split('T')[0];
                    const data  = json.data;

                    $('#totalCount').text(data.length);
                    $('#pendingCount').text(data.filter(d => d.status === 'Pending').length);
                    $('#completedCount').text(data.filter(d => d.status === 'Completed').length);
                    $('#overdueCount').text(data.filter(d => d.followup_date < today && d.status === 'Pending').length);

                    return data;
                }
            },
            pageLength: 10,
            lengthChange: false,
            order: [[4, 'asc']],
            columns: [
                {
                    data: null,
                    render: function(data, type, row, meta) { return meta.row + 1; }
                },
                {
                    data: 'sheet_id',
                    render: function(data, type, row) {
                        if (row.patient_id) {
                            return '<a href="{{ url("admin/patient") }}/' + row.patient_id + '" class="fw-semibold text-decoration-none">' + data + '</a>';
                        }
                        return '<span class="fw-semibold">' + data + '</span>';
                    }
                },
                { data: 'patient_name' },
                { data: 'phone' },
                {
                    data: 'followup_date',
                    render: function(data) {
                        if (!data || data === '-') return '-';
                        const today = new Date().toISOString().split('T')[0];
                        if (data === today) {
                            return '<span class="fw-semibold text-warning">' + data + ' <span class="badge bg-label-warning">Today</span></span>';
                        } else if (data < today) {
                            return '<span class="fw-semibold text-danger">' + data + ' <span class="badge bg-label-danger">Overdue</span></span>';
                        }
                        return '<span class="fw-semibold">' + data + '</span>';
                    }
                },
                { data: 'reason' },
                {
                    data: 'status',
                    render: function(data) {
                        const cls = data === 'Completed' ? 'bg-label-success' : data === 'Cancelled' ? 'bg-label-danger' : 'bg-label-warning';
                        return '<span class="badge ' + cls + '">' + data + '</span>';
                    }
                }
            ]
        });

        $('#customSearch').on('keyup', function() {
            table.search(this.value).draw();
        });

        $('#pageLength').on('change', function() {
            let length = $(this).val();
            table.page.len(length === 'All' ? -1 : parseInt(length)).draw();
        });

    });
    </script>
@endsection