@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">
            Leads
        </h3>
        <button data-bs-toggle="modal" data-bs-target="#addleadModal" class="btn btn-sm btn-primary">
            <i class="ti ti-plus"></i>
            Add Lead
        </button>

    </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">
                    Leads 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="leadSearch"
                           class="form-control form-control-sm"
                           placeholder="Search Leads..."
                           style="width:100%; max-width:300px;">

                </div>

            </div>

        </div>


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

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

                <thead>

                    <tr>

                        <th>#</th>

                        <th>DATE</th>

                        <th>NAME</th>

                        <th>Query</th>
                        <th>MOBILE</th>

                        <th>FOLLOW-UP DATE</th>

                        <th>STATUS</th>

                        <th>ACTION</th>

                    </tr>

                </thead>

                <tbody></tbody>

            </table>

        </div>

    </div>

</div>





{{-- =========================================================
     DATATABLE CSS
========================================================= --}}
<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 JS
========================================================= --}}
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>



<script>

$(document).ready(function () {


    /* =====================================================
       LEADS DATA
    ===================================================== */

    const data = [

        {
            id: 1,
            date: '06 Oct 2026',
            name: 'Arun Kumar',
            query:"Gold Loan",
            mobile: '9876543210',
            follow_up_date: '2026-10-08',
            status: 'New',
            remark: ''
        },

        {
            id: 2,
            date: '05 Oct 2026',
            name: 'Priya',
            mobile: '9876501234',
                        query:"Gold Loan",

            follow_up_date: '2026-10-07',
            status: 'Follow Up',
            remark: 'Call tomorrow'
        },

        {
            id: 3,
            date: '04 Oct 2026',
            name: 'Karthik',
            mobile: '9898989898',
                        query:"Gold Loan",

            follow_up_date: '2026-10-10',
            status: 'Interested',
            remark: 'Interested in gold loan'
        },

        {
            id: 4,
            date: '03 Oct 2026',
            name: 'Suresh',
            mobile: '9123456789',
                        query:"Gold Loan",

            follow_up_date: '-',
            status: 'Converted',
            remark: 'Customer converted'
        },

        {
            id: 5,
            date: '02 Oct 2026',
            name: 'Divya',
            mobile: '9000011111',
                        query:"Gold Loan",

            follow_up_date: '2026-10-09',
            status: 'Contacted',
            remark: 'Need to follow up'
        }

    ];



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

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

        data: data,

        pageLength: 10,

        lengthChange: false,

        searching: true,

        ordering: true,

        order: [],

        info: true,

        autoWidth: false,

        dom: 'rtip',


        columns: [


            /* =================================================
               SNO
            ================================================= */

            {
                data: null,

                orderable: false,

                searchable: false,

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

                    return meta.row + 1;

                }

            },


            /* =================================================
               DATE
            ================================================= */

            {
                data: 'date'
            },


            /* =================================================
               NAME
            ================================================= */

            {
                data: 'name',

                render: function (data) {

                    return `
                        <span class="fw-semibold">
                            ${data}
                        </span>
                    `;

                }

            },
            {
                data: 'query',

                render: function (data) {

                    return `
                        <span class="fw-semibold">
                            ${data}
                        </span>
                    `;

                }
            },


            /* =================================================
               MOBILE + CALL ICON
            ================================================= */

            {
                data: 'mobile',

                render: function (data) {

                    return `

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

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

                            ${data}

                        </a>

                    `;

                }

            },


            /* =================================================
               FOLLOW UP DATE
            ================================================= */

            {
                data: 'follow_up_date',

                render: function (data) {

                    if (!data || data === '-') {

                        return `
                            <span class="text-muted">
                                No Follow-up
                            </span>
                        `;

                    }

                    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>

                    `;

                }

            },


            /* =================================================
               STATUS
            ================================================= */

            {
                data: 'status',

                render: function (data) {

                    let badge = 'bg-secondary';

                    if (data === 'New') {

                        badge = 'bg-primary';

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

                        badge = 'bg-info text-dark';

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

                        badge = 'bg-warning text-dark';

                    }
                    else if (data === 'Follow Up') {

                        badge = 'bg-warning text-dark';

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

                        badge = 'bg-success';

                    }
                    else if (data === 'Not Interested') {

                        badge = 'bg-danger';

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

                        badge = 'bg-dark';

                    }

                    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-status-btn"
                                data-id="${row.id}">

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

                            Update

                        </button>

                    `;

                }

            }

        ]

    });



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

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

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

    });



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

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

        const value = this.value;

        if (value === 'all') {

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

        } else {

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

        }

    });



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

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

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

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

            return item.id == id;

        });


        if (!lead) {

            return;

        }


        $('#leadId').val(lead.id);

        $('#modalLeadName').val(lead.name);

        $('#leadStatus').val(lead.status);

        $('#followUpDate').val(
            lead.follow_up_date !== '-'
                ? lead.follow_up_date
                : ''
        );

        $('#leadRemark').val(lead.remark || '');


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


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


        modal.show();

    });



    /* =====================================================
       SAVE / UPDATE STATUS
    ===================================================== */

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

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

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

            return item.id == id;

        });


        if (!lead) {

            return;

        }


        /* Update local data */

        lead.status = $('#leadStatus').val();

        lead.follow_up_date =
            $('#followUpDate').val() || '-';

        lead.remark =
            $('#leadRemark').val();


        /* Refresh DataTable */

        leadTable.clear();

        leadTable.rows.add(data);

        leadTable.draw(false);


        /* Close modal */

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


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


        modal.hide();


        /* Optional toast */

        if (typeof window.showToast === 'function') {

            window.showToast(
                'Lead status updated successfully.',
                'success'
            );

        }

    });


});

</script>

@endsection