@extends('company-admin-dashboard')

@section('title', $data['title'])
@section('dashboard-content')

<div class="page-content" style="padding: 25px calc(24px / 2) 60px calc(24px / 2); background-color: #f7f7f9;">
    <div class="container-fluid">
            <div class="card">
                <div class="card-header bg-white d-flex justify-content-between align-items-center"
                    style="padding: 10px 7px 10px 27px !important;">
                    <div class="d-flex align-items-center">
                        <img class="favicon-logo" src="{{ getCompanyFavicon() }}"  alt="Company Logo"  width="40px">
                        &nbsp;
                        <h5 class="mb-0"><b>Printer Management</b></h5>
                    </div>
                     @if (in_array('create', $data['printerPermissions']))
                    <div class="header-buttons d-flex align-items-center" style="gap: 10px;">
                        <button class="btn-custom" id="OpenPrinterModal" onclick="openprinteroffcanavse()">
                            <i class="fas fa-plus font-size-16 align-middle me-2"></i> Add Printer
                        </button>
                    </div>
                    @endif
                </div>
                <div class="card-body" style="padding: 20px 0;">
                    @if (in_array('list', $data['printerPermissions']))
                    <div class="table-responsive table-card table-nowrap custom-table">
                        <table id="printerdetail" class="table table-striped table-bordered dataTable no-footer dtr-inline"
                            style="width: 100%;">
                            <thead>
                                <th>Id</th>
                                <th>Name</th>
                                <th>Printer code</th>
                                <th>IP Address</th> 
                                <th>Remark</th>
                                <th>Status</th>
                                <th>Action</th>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                    @endif
                </div>
            </div>
    </div>
</div>
<div class="modal fade" id="printermodel" tabindex="-1"  aria-labelledby="staticBackdropLabel"
        data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog modal-dialog-centered modal-md"> 
            <div class="modal-content">
                <div class="modal-header">
                    <span class="d-flex align-items-center w-100">
                        <div class="d-flex align-items-center">
                         <img class="favicon-logo" src="{{ getCompanyFavicon() }}"  alt="Company Logo"  width="40px">
                        </div>
                        <h5 class="modal-title ms-2" id="companyCouponModalLabel">Add Printer</h5>
                    </span>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                    <div class="modal-body">
                        <form id="printerform" action="{{ route('printer.store') }}" method="POST"  class="needs-validation mb-0">
                            @csrf
                            <div class="row">
                            <input type="hidden" id="printer_id" name="printer_id" value="0" class="printerid">
                            <div class="col-md-12">
                            <div class="float-label-group">
                                <input type="text" id="printer_name" name="printer_name" placeholder="Enter Printer Name" required
                                    class="form-control printername">
                                <label for="printer_name">Name<font color="red"> *</font></label>
                            </div>
                            </div>
                            <div class="col-md-12">
                            <div class="float-label-group has-value">
                                <input type="text" class="form-control mb-2 bg-readonly printercode" name="printer_code" id="printer_code"
                                 placeholder="Printer Code Here..." readonly="">
                                <label for="printer_code" >Code<font color="red"> *</font></label>
                                </div>
                            </div>
                            <div class="col-md-12">
                            <div class="float-label-group">
                                <input type="text" id="ip_address" name="ip_address" placeholder="Enter IP Address" required
                                    class="form-control">
                                <label for="address">Ip Address<font color="red"> *</font></label>
                            </div>
                            </div>
                            <div class="col-md-12">
                            <div class="float-label-group has-value">
                                <select class="form-select printerstatus" id="printerstatus" name="printerstatus">
                                    <option value='1'>Active</option>
                                    <option value='0'>Inactive</option>
                                </select>
                                <label id="printerstatus" name="printerstatus">Status<font color="red"> *</font></label>
                            </div>
                            </div>
                            <div class="col-md-12">
                            <div class="float-label-group">
                                <input type="text" id="printer_remark" name="printer_remark" placeholder="Enter Printer Remark" 
                                    class="form-control printerremark">
                                <label for="printer_remark">Remark</label>

                            </div>
                            </div>
                            </div>
                    </div>
                    <div class="modal-footer">
                        <button type="reset" class="btn-custom-secondary" id="printreset" onclick="printerreset()">Reset</button>
                        <button type="submit" class="btn-custom" id="saveprinter">
                            <span id="printer_loader" class="bx bx-loader bx-spin font-size-22 align-middle me-2"
                                role="status" aria-hidden="true" style="display:none;"></span>
                            <span id="printer_btnText">Save</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
</div>
@endsection('dashboard-content')
@section('custom-scripts')
<script>
    
        var ajaxURL='{{route('printer.ajax')}}';
        var Editprinter='{{Route('printer.edit')}}';
        var Deleteprinter='{{Route('printer.delete')}}';
        var printerstutasupdate='{{Route('printer.status')}}';
        var csrfToken = $("[name=_token").val();

        $(document).ready(function() {
            var options = {
                beforeSubmit: showRequest, // pre-submit callback
                success: showResponse // post-submit callback
            };

            $('#printerform').ajaxForm(options);
        });
        function showRequest(formData, jqForm, options) {
            var queryString = $.param(formData);
            $('#printer_loader').show();
            $("#printer_btnText").html("Saving...");
            $("#saveprinter").prop('disabled', true);
            $("#printerreset").prop('disabled', true);

            return true;
        }

        function showResponse(responseText, statusText, xhr, $form) {
            if ($form[0]['id'] == "printerform") {
                if (responseText['status'] == 1) {
                    flasher.success(responseText['msg'], {
                        timeout: 2500
                    });
                    $('#printermodel').modal('hide');
                    reloadprinterTable();
                    $('#printer_loader').hide();
                    $("#printer_btnText").html("Save");

                } else if (responseText['status'] == 0) {
                    flasher.error(responseText['msg'], {
                        timeout: 2500
                    });

                    $('#printer_loader').hide();
                    $("#printer_btnText").html("Save");
                    $("#saveprinter").prop('disabled', false);
                    $("#printerreset").prop('disabled', false);
                }
            }
        }
             
        function openprinteroffcanavse(){
            $('#printerLabel').html("Add New Printer");

            $("#printer_btnText").html("Save");
            $("#saveprinter").prop('disabled', false);
            $("#printerreset").prop('disabled', false);

            $('#printer_id').val('');
            if ($("#printerform").length) {
                $("#printerform")[0].reset();
            }
            $("#printermodel").modal("show");
            $("#printermodel .modal-body").scrollTop(0);
            $('#printerform').removeClass('was-validated');
        }

        $('#saveprinter').on('click',function(){
            $('#printerform').addClass('was-validated'); 
        });

        function printerreset(){
            // $("#printer_id").val('');
            $("#printer_name").val('');
            $("#ip_address").val('');
            $("#printerstatus").val('1');
            $("#printer_remark").val('');
         }
        $('#printerstatus').select2({
            placeholder: 'search Status',
            dropdownParent: $("#printermodel .modal-content")
        });

        var printertable = $('#printerdetail').DataTable({
            responsive:true,
        "aoColumnDefs": [{
            "bSortable": false,
            "aTargets": [5, 6]
        }], 
        "order": [  
            [0, 'desc']
        ],
        "processing": true,
        "serverSide": true,
        pagingType: "full_numbers",
        "ajax": {
            "url": ajaxURL,
            "type": "GET",
            "data": {
                "_token": csrfToken,
            }
        },
        "aoColumns": [{
                "mData": "id"
            },
            {
                "mData": "name"
            },
            {
                "mData": "code"
            },
            {
                "mData": "ip_address"
            },
            {
                "mData": "remark",orderable:false,
            },
            {
                "mData": "status" ,orderable:false,searchable:false
            },
            {
                "mData": "action" ,orderable:false,searchable:false
            },

        ],
        language: {
            searchPlaceholder: "Search Name, IP, Active / Inactive, Remark",
            paginate: {
                first: '<i class="bx bx-skip-previous"></i>',
                previous: '<i class="bx bx-chevron-left"></i>',
                next: '<i class="bx bx-chevron-right"></i>',
                last: '<i class="bx bx-skip-next"></i>'
            }
        }
    });
    var a = document.querySelector("#printerdetail thead"),
        n = a.querySelector("tr").cloneNode(true);
        a.appendChild(n);

    let searchRowTh = a.querySelectorAll("tr:nth-child(2) th");
    searchRowTh.forEach(th => {
        th.classList.remove("sorting", "sorting_asc", "sorting_desc");
        th.removeAttribute("aria-sort");
    });

    searchRowTh.forEach((e, t) => {
        let skipColumns = [0,5,6];

        if (skipColumns.includes(t)) {
            e.innerHTML = "";
            return;
        }
        var text = e.textContent;
        var input = document.createElement("input");
        input.type = "text";
        input.className = "form-control";
        input.placeholder = "Search " + text;

        e.innerHTML = "";
        e.appendChild(input);

        input.addEventListener("keyup", function() {
            if (printertable.column(t).search() !== this.value) {
                printertable.column(t).search(this.value).draw();
            }
        });

        input.addEventListener("change", function() {
            if (printertable.column(t).search() !== this.value) {
                printertable.column(t).search(this.value).draw();
            }
        });
    });

    $('#profile-pic').on('click', function(e) {
        e.stopPropagation();
        $('#dropdown-menu').toggle();
    });


    function editprinter(id){
        edittablemodel = 1;
        $("#printer_btnText").html("Save");
        $("#saveprinter").prop('disabled', false);
        $("#printerreset").prop('disabled', false);
        $("#printermodel").modal('hide');
        $("#printerLabel").html("Edit Printer");
        $('#printerform').removeClass('was-validated'); 

        $.ajax({
                type:'get',
                url: Editprinter +"?id=" +id,
                success:function(resultData){
                    if(resultData['status'] == 1){
                     
                          $("#printer_id").val(resultData['data']['id']);
                          $(".printername").val(resultData['data']['name']);
                          $(".printercode").val(resultData['data']['code']);
                          $("#ip_address").val(resultData['data']['ip_address']);
                          $(".printerstatus").val(resultData['data']['status']).trigger('change');
                          $(".printerremark").val(resultData['data']['remark']);
                          $('#printermodel').modal("show");
                          $("#printermodel .modal-body").scrollTop(0);
                    }else {    
                        flasher.error(resultData['msg'], { timeout: 2500 });
                }
                }
            });
        }
    function PrinterPrint(id){
        flasher.success('Teasting Print Printed successfully');
    }

        window.PRIMARY_COLOR = "{{ getPrimaryColor() }}";
        window.SECONDARY_COLOR = "{{ getSecondaryColor() }}";
        function deleteprinter(id){

            Swal.fire({
                title: "Are You Sure To Delete This Printer?",
                text: "You won't be able to revert this!",
                icon: "warning",
                showCancelButton: true,
                confirmButtonColor: window.PRIMARY_COLOR,
                cancelButtonColor: window.SECONDARY_COLOR,
                confirmButtonText: "Yes, delete it!"
                }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                    type:"get",
                    url: Deleteprinter +"?id=" +id,
                    success:function(resultData){
                        if(resultData['status']==1){
                        // toastr["success"](resultData['msg']);
                        flasher.success(resultData['msg'], { timeout: 2500 });
                            printertable.ajax.reload();
                        }
                        else {    
                            flasher['error'](resultData['msg'], {
                                    timeout: 2500
                                });


                        }
                    }
            });
                    
             }
        });
   
        }

        function updateprinterstutas(id,checkboxElement){
            var isChecked = $(checkboxElement).is(':checked');
                    var id =id;

                    $.ajax({

                        url: printerstutasupdate,
                        type: 'post',
                        data: {
                            id: id,
                            status: isChecked ? 1 : 0,
                            _token:csrfToken,
                        },
                        success:function(response){
                        if(response['status']==1){
                        // toastr["success"](response['msg']);
                        flasher.success(response['msg'], { timeout: 2500 });
                       // $('#table').DataTable().ajax.reload();
                       
                        }
                        else {    
                            flasher['error']("error updating status", {
                            timeout: 2500
                        });
                        }
                        },
                        error: function (xhr, status, error) {
                            // Handle error
                            // toastr.error("error updating status",error);
                            flasher.error("error updating status", { timeout: 2500 });
                        }
                    });
                  
}

$(".printername").keyup(function() {
    generateprinterCode(this.value);
});

function generateprinterCode(dInput) {
    dInput = dInput.replace(/[_\W]+/g, "_")
    dInput = dInput.toUpperCase();
    $(".printercode").val(dInput);
}
function reloadprinterTable() {
    printertable.ajax.reload(null, false);
}

</script>
@endsection