@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">
            In / Out List
        </h3>

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

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

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

            In/ Out Report

        </a>
       </div>

    </div>


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

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

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

                <h5 class="text-white mb-0">
                   In / Out List
                </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>DATE</th>

                        <th>CUSTOMER NAME</th>

                        <th>MOBILE</th>

                        <th>TYPE</th>

                        <th>NET WEIGHT</th>

                        <th>DESCRIPTION</th>

                        <th>STATUS</th>

                        <th>ACTION</th>

                    </tr>

                </thead>

                <tbody></tbody>

            </table>

        </div>

    </div>

</div>


{{-- =========================================================
     UPDATE STATUS MODAL
========================================================= --}}

<div class="modal fade"
     id="updateStatusModal"
     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-refresh me-2 text-primary"></i>

                    Update Status

                </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">


                {{-- CUSTOMER --}}
                <div class="mb-3">

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

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

                </div>


                {{-- STATUS --}}
                <div class="mb-3">

                    <label for="modalStatus"
                           class="form-label text-white">

                        Status
                        <span class="text-danger">*</span>

                    </label>

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

                        <option value="In">
                            In
                        </option>

                        <option value="Out">
                            Out
                        </option>

                    </select>

                </div>

            </div>


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

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

                    Cancel

                </button>


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

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

                    Update Status

                </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 JS --}}

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


<script>

$(document).ready(function () {


    /* =====================================================
       REMINDER DATA
    ===================================================== */

    const data = [

        {
            id: 1,
            in_datetime: '06 Oct 2026, 10:05 AM',
            customer_name: 'Arun Kumar',
            mobile: '9876543210',
            type: 'Gold',
            net_weight: '12.500',
            description: 'Gold reminder - customer needs to collect gold.',
            status: 'In'
        },


     

    ];


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

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

        data: data,

        pageLength: 10,

        lengthChange: false,

        searching: true,

        ordering: true,

        order: [],

        info: true,

        autoWidth: false,

        dom: 'rtip',


        columns: [

            /* S.NO */

            {
                data: null,

                orderable: false,

                searchable: false,

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

                    return meta.row + 1;

                }

            },


            /* DATE */

            {
                data: 'in_datetime',

                render: function (data) {

                    return `

                        <span>

                            <i class="ti ti-calendar-event me-1 text-warning"></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>

                    `;

                }

            },


            /* 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>

                    `;

                }

            },


            /* 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 Status

                        </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 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;

        }


        /* Only status is modified */

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


        /* 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