@extends('staff.layout')

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


@section('content')

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

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

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

            <i class="ti ti-arrow-left"></i>

        </a>

        <h3 class="mb-0 text-white fw-bold">
                      In/Out Report

        </h3>

    </div>

    <div class="card bank-card p-3 p-md-4 w-100">

        <!-- Header -->
        <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">

                    <!-- Page Length -->
                    <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>

                    <!-- Search -->
                    <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>IN DATE & TIME</th>
                        <th>CUSTOMER NAME</th>
                        <th>MOBILE</th>
                        <th>TYPE</th>
                        <th>NET WEIGHT</th>
                        <th>DESCRIPTION</th>
                        <th>OUT DATE & TIME</th>
                        <th>STATUS</th>
                    </tr>
                </thead>

                <tbody></tbody>

            </table>

        </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 data = [


        {
            id: 2,
            date: '06 Oct 2026',
            customer_name: 'Priya',
            mobile: '9876501234',
            type: 'Cheque',
            net_weight: '-',
            description: 'Cheque is ready for collection.',
            in_datetime: '06 Oct 2026, 10:05 AM',
            out_datetime: '06 Oct 2026, 11:20 AM',
            status: 'Out'
        },

        {
            id: 4,
            date: '08 Oct 2026',
            customer_name: 'Suresh',
            mobile: '9123456789',
            type: 'Gold',
            net_weight: '8.750',
            description: 'Gold item pending collection.',
            in_datetime: '08 Oct 2026, 10:10 AM',
            out_datetime: '08 Oct 2026, 12:30 PM',
            status: 'Out'
        },


        {
            id: 6,
            date: '10 Oct 2026',
            customer_name: 'Mohan',
            mobile: '9012345678',
            type: 'Cheque',
            net_weight: '-',
            description: 'Cheque collection reminder.',
            in_datetime: '10 Oct 2026, 11:00 AM',
            out_datetime: '10 Oct 2026, 01:15 PM',
            status: 'Out'
        }

    ];


  

    function getCurrentDateTime() {

        const now = new Date();

        const date = now.toLocaleDateString('en-GB', {
            day: '2-digit',
            month: 'short',
            year: 'numeric'
        });

        const time = now.toLocaleTimeString('en-US', {
            hour: '2-digit',
            minute: '2-digit',
            hour12: true
        });

        return `${date}, ${time}`;
    }


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

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

        data: data,

        pageLength: 10,

        lengthChange: false,

        searching: true,

        ordering: true,

        order: [],

        info: true,

        autoWidth: false,

        dom: 'rtip',


        columns: [

            /* # */

            {
                data: null,

                orderable: false,

                searchable: false,

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

                    return meta.row + 1;

                }
            },


          

            /* IN DATE & TIME */

            {
                data: 'in_datetime',

                render: function (data) {

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

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

                    }


                    return `
                        <span class="text-success fw-semibold">

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

                            ${data}

                        </span>
                    `;

                }
            },
            /* CUSTOMER NAME */

            {
                data: 'customer_name',

                render: function (data) {

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

                }
            },


            /* MOBILE */

            {
                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>
                    `;

                }
            },


            /* TYPE */

            {
                data: 'type',

                render: function (data) {

                    let icon = 'ti-file';

                    if (data === 'Gold') {

                        icon = 'ti-coins';

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

                        icon = 'ti-file-invoice';

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

                        icon = 'ti-file-text';

                    }


                    return `
                        <span class="fw-semibold">

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

                            ${data}

                        </span>
                    `;

                }
            },


            /* NET WEIGHT */

            {
                data: 'net_weight',

                render: function (data, type, row) {

                    if (row.type !== 'Gold') {

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

                    }


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

                }
            },


            /* DESCRIPTION */

            {
                data: 'description',

                render: function (data) {

                    return `
                        <span>
                            ${data || '-'}
                        </span>
                    `;

                }
            },




            /* OUT DATE & TIME */

            {
                data: 'out_datetime',

                render: function (data) {

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

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

                    }


                    return `
                        <span class="text-danger fw-semibold">

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

                            ${data}

                        </span>
                    `;

                }
            },


            /* STATUS */

            {
                data: 'status',

                render: function (data) {

                    let badge = 'bg-secondary';

                    if (data === 'In') {

                        badge = 'bg-success';

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

                        badge = 'bg-danger';

                    }


                    return `
                        <span class="badge ${badge}">
                            ${data}
                        </span>
                    `;

                }
            },


          

        ]

    });


    /* =========================================
       CUSTOM 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 STATUS MODAL
    ========================================= */

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

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


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

            return item.id == id;

        });


        if (!reminder) {
            return;
        }


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

        $('#modalCustomerName')
            .val(reminder.customer_name);

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


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


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


        modal.show();

    });


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

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

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


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

            return item.id == id;

        });


        if (!reminder) {
            return;
        }


        const oldStatus = reminder.status;

        const newStatus = $('#modalStatus').val();


        /* =====================================
           IN → OUT
        ===================================== */

        if (
            oldStatus === 'In' &&
            newStatus === 'Out'
        ) {

            reminder.out_datetime =
                getCurrentDateTime();

        }


        /* =====================================
           OUT → IN
        ===================================== */

        if (
            oldStatus === 'Out' &&
            newStatus === 'In'
        ) {

            reminder.in_datetime =
                getCurrentDateTime();

        }


        /* Update Status */

        reminder.status = newStatus;


        /* Refresh DataTable */

        reminderTable.clear();

        reminderTable.rows.add(data);

        reminderTable.draw(false);


        /* Close Modal */

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


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


        modal.hide();

    });

});

</script>

@endsection