@extends('Admin.layout')

@section('content')

<style>
#liveToast{
    background: #16ce78 !important;
    color: #fff !important;
    border: none !important;
}

#liveToast .toast-body{
    background: transparent !important;
    color: #fff !important;
    font-weight: 500;
}

#liveToast .d-flex{
    background: transparent !important;
}
#toastMessage{
    color: #16ce78 !important;
    font-weight: 600;
}
#liveToast .btn-close{
    filter: invert(1);
}
</style>
<div class="row align-items-center justify-content-between mb-3 mt-3 m-2">

    <div class="col-auto">
        <h5 class="fw-bold">Billing Staff Management</h5>
    </div>

    <div class="col-auto d-flex gap-2 flex-wrap">

        <a href="{{ route('add_billing_staff') }}" class="btn btn-primary">
            Add Billing Staff
        </a>

        <a href="{{ route('billing.login') }}" class="btn btn-success">
            Billing User
        </a>

        <a href="{{ route('cashier.login') }}" class="btn btn-warning text-dark">
            Cashier
        </a>

        <a href="{{ route('delivery.login') }}" class="btn btn-info text-white">
            Delivery
        </a>

    </div>

</div>

<div class="card border-0 shadow-sm m-2">

    <div class="row p-3 g-2 align-items-center">

        <div class="col-md-1">
            <label class="small text-muted d-block">Show</label>

            <select id="pageLength" class="form-select form-select-sm">
                <option value="10">10</option>
                <option value="25">25</option>
                <option value="50">50</option>
            </select>
        </div>

        <div class="col-md-3 ms-auto">
            <input type="text"
                   id="customSearch"
                   class="form-control form-control-sm"
                   placeholder="Search">
        </div>

    </div>

    <div class="table-responsive">

        <table class="table table-hover mb-0" id="billingStaffTable">

            <thead class="bg-light">

            <tr>

                <th>S.No</th>

                <th class="text-center">Date</th>

                <th class="text-center">Branch</th>

                <th class="text-center">Category</th>

                <th class="text-center">Staff</th>

                <th class="text-center">User ID</th>

                <th class="text-center">Status</th>
                 <th class="text-center">Action</th>


            </tr>

            </thead>

            <tbody></tbody>

        </table>

    </div>

        <div class="modal fade" id="statusModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">

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

                <div class="modal-content rounded-4 text-center p-4 py-5">

                    <h5 class="fw-bold mb-2">Change Status</h5>

                    <p class="text-muted" id="statusMessage">
                        Are you sure you want to change status?
                    </p>

                    <div class="d-flex justify-content-center align-items-center gap-3 mt-4">

                        <button type="button" class="btn btn-outline-primary p-3 fw-semibold" data-bs-dismiss="modal">
                            Cancel
                        </button>

                        <button type="button" class="btn btn-success p-3 ms-2 fw-semibold" id="confirmStatusChange">
                            Yes, Change
                        </button>

                    </div>

                </div>
            </div>
        </div>
<div id="liveToast"
     class="toast border-0"
     role="alert">

    <div class="toast-body" id="toastMessage"></div>

</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 src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>

<script>
function showToast(message, type = 'success') {

    let toast = $('#liveToast');

    if(type === 'success'){
        $('#toastMessage').css('color', '#16ce78');
    }else{
        $('#toastMessage').css('color', '#dc3545');
    }

    $('#toastMessage').html(message);

    new bootstrap.Toast(document.getElementById('liveToast'), {
        delay: 3000
    }).show();
}
</script>
<script>

$(function(){

    let table = $('#billingStaffTable').DataTable({

        processing:true,

        serverSide:true,

        ajax:"{{ route('billing_staff_data') }}",

        columns:[

            {
                data:'DT_RowIndex',
                name:'DT_RowIndex',
                searchable:false,
                orderable:false
            },

            {
                data:'date',
                name:'created_at',
                className:'text-center'
            },

            {
                data:'branch_name',
                name:'branch_name',
                className:'text-center'
            },

            {
                data:'category',
                name:'category',
                className:'text-center'
            },

         {
    data:'staff_name',
    name:'staff.name',
    className:'text-center',
    defaultContent:'-'
},
            {
                data:'user_id',
                name:'user_id',
                className:'text-center'
            },

            {
                data:'status',
                name:'status',
                className:'text-center'
            },

            {
        data:'action',
        name:'action',
        className:'text-center',
        orderable:false,
        searchable:false
    }


        ],

        dom:'rt<"d-flex justify-content-between align-items-center p-3"ip>'

    });

    $('#customSearch').keyup(function(){

        table.search($(this).val()).draw();

    });

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

        table.page.len($(this).val()).draw();

    });

});

let selectedId = null;
let selectedStatus = null;

$(document).on('click', '.statusChange', function () {

    selectedId = $(this).data('id');
    selectedStatus = $(this).data('status');

    if(selectedStatus == 1){
        $('#statusMessage').text('Are you sure you want to activate this Billing Staff?');
    }else{
        $('#statusMessage').text('Are you sure you want to deactivate this Billing Staff?');
    }

    $('#statusModal').modal('show');
});

$('#confirmStatusChange').click(function () {

    $.ajax({

        url: "{{ route('billing_changeStatus') }}",
        type: "POST",

        data: {
            id: selectedId,
            status: selectedStatus,
            _token: "{{ csrf_token() }}"
        },

       success: function (res) {

    $('#statusModal').modal('hide');

    $('#billingStaffTable').DataTable().ajax.reload(null, false);

    showToast(res.message, 'success');
},

error: function () {

    $('#statusModal').modal('hide');

    showToast('Error updating status', 'danger');
}

    });

});
</script>


@endsection