@extends('staff.layout')

@section('content')

<div class="page-view w-100">

    {{-- PAGE HEADER --}}
    <div class="d-flex align-items-center justify-content-between gap-2 mb-3">

        <h3 class="mb-0 text-white fw-bold">
            Reminders
        </h3>

        <a href="{{ route('staff.add_reminder') }}" class="btn btn-sm btn-primary">

            <i class="ti ti-plus me-1"></i>
            Add Reminder

        </a>

    </div>


    {{-- TABLE CARD --}}
    <div class="card bank-card p-3 p-md-4 w-100">

        {{-- FILTER CONTROLS --}}
        <div class="row g-3 align-items-center mb-3">

            <div class="col-12 col-md-6">

                <h5 class="text-white mb-0">
                    Reminder Report
                </h5>

            </div>


            <div class="col-12 col-md-6">

                <div class="d-flex flex-column flex-sm-row justify-content-md-end gap-2">

                    <select id="pageLength"
                            class="form-select form-select-sm"
                            style="width:100%; max-width:100px;">

                        <option value="10">10</option>
                        <option value="25">25</option>
                        <option value="50">50</option>
                        <option value="all">All</option>

                    </select>

                    <input type="search"
                           id="reminderSearch"
                           class="form-control form-control-sm"
                           placeholder="Search Reminders..."
                           style="width:100%; max-width:300px;">

                </div>

            </div>

        </div>


        {{-- TABLE --}}
        <div class="table-responsive bank-table-wrapper w-100">

            <table id="reminderTable"
                   class="table align-middle text-nowrap mb-0 w-100">

                <thead>
                    <tr>

                        <th>#</th>

                        <th>REMINDER DATE</th>

                        <th>TYPE</th>

                        <th>NAME</th>

                        <th>DESCRIPTION</th>

                        <th>MOBILE</th>

                        <th>STATUS</th>

                        <th>ACTION</th>

                    </tr>
                </thead>

                <tbody></tbody>

            </table>

        </div>

    </div>

</div>


{{-- =========================================================
     UPDATE REMINDER MODAL
========================================================= --}}

<div class="modal fade"
     id="updateReminderModal"
     tabindex="-1"
     aria-hidden="true">

    <div class="modal-dialog modal-dialog-centered">

        <div class="modal-content bank-card border-0">

            <div class="modal-header border-secondary">

                <h5 class="modal-title text-white">

                    <i class="ti ti-bell me-2 text-warning"></i>

                    Update Reminder

                </h5>

                <button type="button"
                        class="btn-close btn-close-white"
                        data-bs-dismiss="modal">
                </button>

            </div>


            <div class="modal-body">

                <input type="hidden" id="reminderId">


                <div class="mb-3">

                    <label class="form-label text-white">
                        Name
                    </label>

                    <input type="text"
                           id="modalReminderName"
                           class="form-control"
                           readonly>

                </div>


                <div class="mb-3">

                    <label class="form-label text-white">
                        Reminder Type
                    </label>

                    <input type="text"
                           id="modalReminderType"
                           class="form-control"
                           readonly>

                </div>


                <div class="mb-3">

                    <label class="form-label text-white">
                        Reminder Date
                    </label>

                    <input type="date"
                           id="modalReminderDate"
                           class="form-control">

                </div>


                <div class="mb-3">

                    <label class="form-label text-white">
                        Status
                    </label>

                    <select id="reminderStatus"
                            class="form-select">

                        <option value="Pending">
                            Pending
                        </option>

                        <option value="Completed">
                            Completed
                        </option>

                        <option value="Cancelled">
                            Cancelled
                        </option>

                    </select>

                </div>


                <div class="mb-3">

                    <label class="form-label text-white">
                        Remarks
                    </label>

                    <textarea id="reminderRemark"
                              class="form-control"
                              rows="3"
                              placeholder="Enter remarks..."></textarea>

                </div>

            </div>


            <div class="modal-footer border-secondary">

                <button type="button"
                        class="btn btn-secondary"
                        data-bs-dismiss="modal">

                    Cancel

                </button>

                <button type="button"
                        class="btn btn-primary"
                        id="saveReminder">

                    <i class="ti ti-device-floppy me-1"></i>

                    Update Reminder

                </button>

            </div>

        </div>

    </div>

</div>



<link rel="stylesheet"
      href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">


{{-- JQUERY --}}

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>


{{-- DATATABLE --}}

<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>


<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>


<script>

$(document).ready(function () {



    const data = [

        {
            id: 1,
            reminder_date: '2026-10-08',
            type: 'Lead Follow-up',
            name: 'Arun Kumar',
            description: 'Follow up regarding Gold Loan',
            mobile: '9876543210',
            status: 'Pending',
            remark: ''
        },

        {
            id: 2,
            reminder_date: '2026-10-07',
            type: 'WiFi Payment',
            name: 'Kumar Internet',
            description: 'WiFi payment is due',
            mobile: '9876501234',
            status: 'Pending',
            remark: 'Monthly WiFi payment'
        },

      

        {
            id: 4,
            reminder_date: '2026-10-12',
            type: 'Loan Repayment',
            name: 'Suresh',
            description: 'Loan repayment reminder',
            mobile: '9123456789',
            status: 'Pending',
            remark: ''
        },

        {
            id: 5,
            reminder_date: '2026-10-09',
            type: 'Document Renewal',
            name: 'Divya',
            description: 'Customer document renewal required',
            mobile: '9000011111',
            status: 'Pending',
            remark: ''
        },

        {
            id: 6,
            reminder_date: '2026-10-15',
            type: 'Subscription',
            name: 'ABC Technologies',
            description: 'Software subscription renewal',
            mobile: '9012345678',
            status: 'Pending',
            remark: 'Annual subscription'
        },

        {
            id: 7,
            reminder_date: '2026-10-06',
            type: 'Customer Callback',
            name: 'Priya',
            description: 'Customer requested a callback',
            mobile: '9087654321',
            status: 'Completed',
            remark: 'Customer contacted'
        },

        {
            id: 8,
            reminder_date: '2026-10-20',
            type: 'Agreement Expiry',
            name: 'Karthik',
            description: 'Agreement is approaching expiry',
            mobile: '9876123456',
            status: 'Pending',
            remark: ''
        }

    ];


    /* =====================================================
       DATATABLE
    ===================================================== */

    const reminderTable = $('#reminderTable').DataTable({

        data: data,

        pageLength: 10,

        lengthChange: false,

        searching: true,

        ordering: true,

      

        info: true,

        autoWidth: false,

        dom: 'rtip',


        columns: [

            /* SNO */

            {
                data: null,

                orderable: false,

                searchable: false,

                render: function (data, type, row, meta) {

                    return meta.row + 1;

                }

            },


            /* REMINDER DATE */

            {
                data: 'reminder_date',

                render: function (data) {

                    if (!data) {

                        return '-';

                    }

                    const date = new Date(data);

                    const formattedDate =
                        date.toLocaleDateString('en-GB', {

                            day: '2-digit',
                            month: 'short',
                            year: 'numeric'

                        });

                    return `

                        <span>

                            <i class="ti ti-calendar-event me-1 text-warning"></i>

                            ${formattedDate}

                        </span>

                    `;

                }

            },


            /* TYPE */

            {
                data: 'type',

                render: function (data) {

                    let icon = 'ti-bell';

                    if (data === 'Lead Follow-up') {
                        icon = 'ti-user-check';
                    }
                    else if (data === 'WiFi Payment') {
                        icon = 'ti-wifi';
                    }
                    else if (data === 'Domain Payment') {
                        icon = 'ti-world';
                    }
                    else if (data === 'Loan Repayment') {
                        icon = 'ti-cash';
                    }
                    else if (data === 'Document Renewal') {
                        icon = 'ti-file-text';
                    }
                    else if (data === 'Subscription') {
                        icon = 'ti-refresh';
                    }
                    else if (data === 'Customer Callback') {
                        icon = 'ti-phone';
                    }
                    else if (data === 'Agreement Expiry') {
                        icon = 'ti-file-certificate';
                    }

                    return `

                        <span class="fw-semibold">

                            <i class="ti ${icon} me-1 text-info"></i>

                            ${data}

                        </span>

                    `;

                }

            },


            /* NAME */

            {
                data: 'name',

                render: function (data) {

                    return `

                        <span class="fw-semibold">

                            ${data}

                        </span>

                    `;

                }

            },


            /* DESCRIPTION */

            {
                data: 'description',

                render: function (data) {

                    return `

                        <span>

                            ${data || '-'}

                        </span>

                    `;

                }

            },


            /* MOBILE */

            {
                data: 'mobile',

                render: function (data) {

                    if (!data) {

                        return '-';

                    }

                    return `

                        <a href="tel:${data}"
                           class="text-decoration-none fw-semibold">

                            <i class="ti ti-phone-call me-1 text-success"></i>

                            ${data}

                        </a>

                    `;

                }

            },


            /* STATUS */

            {
                data: 'status',

                render: function (data) {

                    let badge = 'bg-secondary';

                    if (data === 'Pending') {

                        badge = 'bg-warning text-dark';

                    }
                    else if (data === 'Completed') {

                        badge = 'bg-success';

                    }
                    else if (data === 'Cancelled') {

                        badge = 'bg-danger';

                    }

                    return `

                        <span class="badge ${badge}">

                            ${data}

                        </span>

                    `;

                }

            },


            /* ACTION */

            {
                data: null,

                orderable: false,

                searchable: false,

                render: function (data, type, row) {

                    return `

                        <button type="button"
                                class="btn btn-sm btn-outline-primary update-reminder-btn"
                                data-id="${row.id}">

                            <i class="ti ti-edit me-1"></i>

                            Update

                        </button>

                    `;

                }

            }

        ]

    });


    /* =====================================================
       SEARCH
    ===================================================== */

    $('#reminderSearch').on('keyup', function () {

        reminderTable
            .search(this.value)
            .draw();

    });


    /* =====================================================
       PAGE LENGTH
    ===================================================== */

    $('#pageLength').on('change', function () {

        const value = this.value;

        if (value === 'all') {

            reminderTable
                .page
                .len(-1)
                .draw();

        }
        else {

            reminderTable
                .page
                .len(parseInt(value))
                .draw();

        }

    });


    /* =====================================================
       OPEN UPDATE MODAL
    ===================================================== */

    $(document).on('click', '.update-reminder-btn', function () {

        const id = $(this).data('id');

        const reminder = data.find(function (item) {

            return item.id == id;

        });


        if (!reminder) {

            return;

        }


        $('#reminderId').val(reminder.id);

        $('#modalReminderName').val(reminder.name);

        $('#modalReminderType').val(reminder.type);

        $('#modalReminderDate').val(reminder.reminder_date);

        $('#reminderStatus').val(reminder.status);

        $('#reminderRemark').val(reminder.remark || '');


        const modalElement =
            document.getElementById('updateReminderModal');


        const modal =
            bootstrap.Modal.getOrCreateInstance(modalElement);


        modal.show();

    });


    /* =====================================================
       SAVE REMINDER
    ===================================================== */

    $('#saveReminder').on('click', function () {

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

        const reminder = data.find(function (item) {

            return item.id == id;

        });


        if (!reminder) {

            return;

        }


        reminder.reminder_date =
            $('#modalReminderDate').val();

        reminder.status =
            $('#reminderStatus').val();

        reminder.remark =
            $('#reminderRemark').val();


        /* Refresh table */

        reminderTable.clear();

        reminderTable.rows.add(data);

        reminderTable.draw(false);


        /* Close modal */

        const modalElement =
            document.getElementById('updateReminderModal');


        const modal =
            bootstrap.Modal.getOrCreateInstance(modalElement);


        modal.hide();

    });


});

</script>

@endsection