@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">
<style>
        .toolbar-card {
            border: none;
            border-radius: 14px;
            box-shadow: 0 2px 14px rgba(30, 41, 59, 0.06);
        }

        .toolbar-wrap {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 1rem;
        }

        .search-cluster {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 0.65rem;
            flex: 1 1 auto;
        }

        .search-field {
            display: flex;
            align-items: center;
            gap: 8px;
            flex: 1 1 50px;
            min-width: 150px;
            height: 42px;
            padding: 0 12px;
            border-radius: 10px;
            border: 1px solid #e5e9f0;
            /* background: #f8fafc; */
            transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
        }

        .search-field i {
            flex: 0 0 auto;
            font-size: 15px;
            line-height: 1;
            color: #94a3b8;
            pointer-events: none;
        }

        .search-field input {
            flex: 1 1 auto;
            min-width: 0;
            height: 50px !important;
            border: none;
            background: transparent;
            padding: 0;
            font-size: 0.875rem;
            color: #1e293b;
        }

        .search-field input:focus {
            outline: none;
            box-shadow: none;
        }

        .search-field:focus-within {
            background: #fff;
            border-color: #696cff;
            box-shadow: 0 0 0 3px rgba(105, 108, 255, 0.12);
        }

        .btn-search {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            height: 42px;
            padding: 0 18px;
            border-radius: 10px;
            border: none;
            background: #696cff;
            color: #fff;
            font-size: 0.875rem;
            font-weight: 500;
            white-space: nowrap;
            transition: background 0.15s ease, transform 0.1s ease;
        }

        .btn-search:hover {
            background: #5f61e6;
            color: #fff;
            transform: translateY(-1px);
        }

        .toolbar-divider {
            width: 1px;
            align-self: stretch;
            background: #eceef3;
            margin: 0 0.25rem;
        }

        .btn-add-patient {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            height: 42px;
            padding: 0 20px;
            border-radius: 10px;
            background: #22c55e;
            color: #fff;
            font-size: 0.875rem;
            font-weight: 600;
            white-space: nowrap;
            box-shadow: 0 4px 10px rgba(34, 197, 94, 0.25);
            transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
        }

        .btn-add-patient:hover {
            background: #1eab52;
            color: #fff;
            transform: translateY(-1px);
            box-shadow: 0 6px 14px rgba(34, 197, 94, 0.3);
        }

        /* ---------- Mobile ---------- */
        @media (max-width: 767px) {
            .toolbar-wrap {
                flex-direction: column;
                align-items: stretch;
            }

            .search-cluster {
                flex-direction: column;
                width: 100%;
            }

            .search-field {
                width: 100%;
            }

            .btn-search,
            .btn-add-patient {
                width: 100%;
                justify-content: center;
            }

            .toolbar-divider {
                display: none;
            }
        }

        /* ---------- Tablet ---------- */
        @media (min-width: 768px) and (max-width: 991px) {
            .search-field {
                flex: 1 1 45%;
            }
        }
    </style>
@section('content')
    <div class="row align-items-center justify-content-between mb-3">
        <div class="col-auto">
            <h5>Follow Ups</h5>
        </div>
        <div class="col-auto">
            <a href="{{ route('completed_follow_ups') }}" class="btn btn-primary">
                <i class="ti tabler-file-text me-1"></i> Report
            </a>
        </div>
    </div>

    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif

     {{-- ============ Toolbar Card: Search + Add Patient ============ --}}
    <div class="card toolbar-card mb-4">
        <div class="card-body">
            <div class="toolbar-wrap">

                <div class="search-cluster">
                    <div class="search-field">
                        <i class="ti tabler-hash"></i>
                        <input type="text" id="sheetSearch" placeholder="Sheet ID">
                    </div>

                    <div class="search-field">
                        <i class="ti tabler-user"></i>
                        <input type="text" id="nameSearch" placeholder="Patient Name">
                    </div>

                    <div class="search-field">
                        <i class="ti tabler-phone"></i>
                        <input type="text" id="phoneSearch" placeholder="Phone Number">
                    </div>

                    <button class="btn btn-primary" id="searchBtn" type="button">
                        <i class="ti tabler-search"></i>
                        <span>Search</span>
                    </button>
                </div>

                <div class="toolbar-divider"></div>

                <a href="{{ route('create_patient_full') }}" class="btn btn-primary">
                    <i class="ti tabler-user-plus"></i>
                    <span>Add Patient</span>
                </a>

            </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="followupTable">
                <thead>
                    <tr>
                        <th class="text-nowrap">S.No</th>
                        <th class="text-nowrap">Sheet ID</th>
                        <th class="text-nowrap">Patient Name</th>
                        <th class="text-nowrap">Phone</th>
                        <th class="text-nowrap">Follow Up Date</th>
                        <th class="text-nowrap">Next Follow Up</th>

                        <th class="text-nowrap">Reason</th>
                        <th class="text-nowrap">Status</th>
                        <th class="text-nowrap">Action</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>

    {{-- Update Status Modal --}}
    <div class="modal fade" id="updateStatusModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content" style="border-radius:16px;">
                <div class="modal-header">
                    <h5 class="modal-title">Update Follow Up Status</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form id="updateStatusForm">
                    @csrf
                    <input type="hidden" id="followUpId">
                    <div class="modal-body">
                        <div class="mb-3">
                            <label class="form-label">Status</label>
                            <select class="form-select" id="followUpStatus">
                                <option value="Pending">Pending</option>
                                <option value="Completed">Completed</option>
                                <option value="Cancelled">Cancelled</option>
                                <option value="Book Appointment">Book Appointment</option>
                                <option value="Next Followup Date">Next Followup Date</option>
                            </select>
                        </div>
                      
                        <div class="mb-3">
                            <label class="form-label">Next Follow Up Date</label>
                            <input type="date" class="form-control" id="followUpNextDate">
                        </div>
                          <div class="mb-3">
                            <label class="form-label">Remark</label>
                            <textarea class="form-control" id="followUpRemark" rows="3" placeholder="Enter remark"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Update</button>
                    </div>
                </form>
            </div>
        </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 csrfToken          = '{{ csrf_token() }}';
        const followupDataUrl    = '{{ route("follow_up_data") }}';
        const followupUpdateBase = '{{ url("admin/follow-up") }}';

        const table = $('#followupTable').DataTable({
            ajax: {
                url: followupDataUrl,
                dataSrc: 'data'
            },
            pageLength: 10,
            lengthChange: false,
            columnDefs: [
        {
            targets: '_all',
            className: 'text-nowrap'
        }
    ],
            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',
    render: function(data, type, row) {

        if (row.patient_id) {
            return `
                <a href="{{ url('admin/patient') }}/${row.patient_id}"
                   class="fw-semibold text-primary text-decoration-none">
                    ${data}
                </a>
            `;
        }

        return `<span class="fw-semibold">${data}</span>`;
    }
},                { 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> <span class="badge bg-label-warning">Today</span>';
                        } else if (data < today) {
                            return '<span class="fw-semibold text-danger">' + data + '</span> <span class="badge bg-label-danger">Overdue</span>';
                        }
                        return '<span class="fw-semibold">' + data + '</span>';
                    }
                },
                {
    data: 'next_followup_date',
    render: function(data) {
        if (!data || data === '') return '<span class="text-muted">-</span>';
        return '<span class="fw-semibold text-primary">' + 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>';
                    }
                },
                {
                    data: null,
                    orderable: false,
                    searchable: false,
                    render: function(data, type, row) {
                        return '<button class="btn btn-sm btn-primary update-status-btn" ' +
                               'data-id="' + row.id + '" ' +
                               'data-status="' + row.status + '" ' +
                               'data-remark="' + (row.remark || '') + '" ' +
                               'data-next-date="' + (row.next_followup_date || '') + '">' +
                               'Update Status</button>';
                    }
                }
            ]
        });

        $('#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();
        });

        $(document).on('click', '.update-status-btn', function() {
            $('#followUpId').val($(this).data('id'));
            $('#followUpStatus').val($(this).data('status'));
            $('#followUpRemark').val($(this).data('remark'));
            $('#followUpNextDate').val($(this).data('next-date'));
            $('#updateStatusModal').modal('show');
        });

        $('#updateStatusForm').on('submit', function(e) {
            e.preventDefault();

            const id = $('#followUpId').val();

$.ajax({
    url: followupUpdateBase + '/' + id + '/update',
    method: 'POST',
    data: {
        _token:             csrfToken,
        status:             $('#followUpStatus').val(),
        remark:             $('#followUpRemark').val(),
        next_followup_date: $('#followUpNextDate').val()
    },
               success: function(response) {
    if (response.success) {
        $('#updateStatusModal').modal('hide');
        location.reload();
    }
},
                
                error: function() {
                    alert('Unable to update follow-up status.');
                }
            });
        });

    });
    </script>
@endsection