@extends('layouts.backend.app')

@section('content')
    <!-- Start right Content here -->
    <div class="main-content">
        <div class="page-content">

            <div class="container-fluid">
                <div class="page-title-box">
                    <div class="row align-items-center">

                        <div class="col-md-8">
                            <h6 class="page-title">Mobile List</h6>
                            <ol class="breadcrumb m-0">
                                <li class="breadcrumb-item"><a href="{{ dashboardurl() }}">Home </a></li>
                                <li class="breadcrumb-item active" aria-current="page">Mobile List</li>
                            </ol>
                        </div>

                        <div class="col-md-4">
                            <a class="btn btn-primary button-1 float-right " href="{{ route('service-products') }}">
                                <span class="pe-1 color-primary"><i class="ti-angle-left"></i></span> Back</a>
                        </div>

                    </div>
                </div>
            </div>

            <div class="row product-row ">
                <div class="col-md-12">
                    <div class="col-md-12 mobile-table-column stock-table">
                        <div class="card">
                            <div class="card-body">

                                <div class="card mb-4 shadow-none">

                                    <div class="mobileinfo d-flex pt-3 justify-content-between">
                                        <div class="mobileinfrigh ">
                                            <p class="card-text mb-1"> <span class="h6">Admin Name : </span>
                                                @if (!empty($usersname->AdmName->name))
                                                    {{ $usersname->AdmName->name }}
                                                @endif
                                            </p>
                                            <p class="card-text mb-1"> <span class="h6">Lot Number : </span>
                                                @if (!empty($usersname->lot_no))
                                                    {{ $usersname->lot_no }}
                                                @endif
                                            </p>
                                            <p class="card-text mb-1"> <span class="h6">Number of Product : </span>
                                                @if (!empty($nocount))
                                                    {{ $nocount }}
                                                @endif
                                            </p>
                                        </div>
                                        <div>

                                            <button class="btn btn-primary me-3 acptcl" data-bs-toggle="modal"
                                                data-bs-target="#testedMobile">Accept</button>
                                            <button class="btn btn-danger retncl" data-bs-toggle="modal"
                                                data-bs-target="#testedMobile">Return</button>

                                        </div>
                                    </div>
                                </div>

                                <table class="display" style="width:100%" id="dataList">
                                    <thead>
                                        <tr>
                                            <th>Temp Bar Code</th>
                                            <th>Product Name</th>
                                            <th>IMEI</th>
                                            <th>Quality Checking</th>
                                            <th>Accept Status</th>
                                            <th>Returned</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>

                            </div>
                        </div>
                        <input type="hidden" id="previewImg">

                    </div>
                </div>
            </div>



            <!-- Accept Modal HTML -->
            <div id="acceptModal" class="modal fade" data-backdrop="static" data-keyboard="false">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title">Accept Status</h4>
                            <button type="button" class="closebtn close" data-dismiss="modal"
                                aria-hidden="true">&times;</button>
                        </div>
                        <div class="modal-body">
                            <p>Are you sure you want to accept these Records?</p>
                            <p class="text-warning"><small>This action cannot be undone.</small></p>
                        </div>
                        <input type="hidden" id="accept_id">
                        <div class="modal-footer">
                            <input type="button" class="btn btn-default closebtn" data-dismiss="modal" value="Cancel">
                            <input type="button" class="btn btn-danger" onclick="acceptrecord()" value="Accept">
                        </div>
                    </div>
                </div>
            </div>


            <!-- Returned Modal HTML -->
            <div id="returnedModal" class="modal fade" data-backdrop="static" data-keyboard="false">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title">Returned Status</h4>
                            <button type="button" class="rclosebtn close" data-dismiss="modal"
                                aria-hidden="true">&times;</button>
                        </div>
                        <div class="modal-body">
                            <p>Are you sure you want to Returned these Records?</p>
                            <p class="text-warning"><small>This action cannot be undone.</small></p>
                        </div>
                        <input type="hidden" id="returned_id">
                        <div class="modal-footer">
                            <input type="button" class="btn btn-default rclosebtn" data-dismiss="modal" value="Cancel">
                            <input type="button" class="btn btn-danger" onclick="returnedrecord()" value="Returned">
                        </div>
                    </div>
                </div>
            </div>



            <!--==== verified modal ==-->
            <!-- Modal -->
            <div class="modal fade stock-modal" id="testedMobile" tabindex="-1" aria-labelledby="exampleModalLabel"
                aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title fs-5" id="exampleModalLabel">Tested Mobile</h1>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="container">
                                <!-- Mobile visible table  -->
                                <div class="row stock-row">
                                    <div class="col-md-12">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class=" mb-3" style="max-width: 540px;">
                                                    <div class="">

                                                        <div class="mb-3 selectdraf">

                                                            <label for="exampleFormControlInput1"
                                                                class="form-label w-100 d-flex justify-content-between">Add
                                                                Barcode <span class="barcode_count">0</span></label>

                                                            <textarea class="form-control w-100 w-100 tags" id="barcodescd" name="barcodescd" rows="7" placeholder=""></textarea>

                                                        </div>
                                                        <input type="hidden" id="slotno" name="slotno"
                                                            value="@if (!empty($usersname->lot_no)) {{ $usersname->lot_no }} @endif">
                                                        <input type="hidden" id="selectdv" name="selectdv"
                                                            value="">
                                                        <div class="d-flex justify-content-between align-items-center">
                                                            <button class="btn btn-success gebarcode" type="button">
                                                                Submit </button>

                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <!-- <div class="modal-footer">
       <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
       <button type="button" class="btn btn-primary">Save changes</button>
       </div> -->
                    </div>
                </div>
            </div>
        @endsection

        @section('scripts')
            <script type="text/javascript">
                $(document).ready(function() {
                    $(window).keydown(function(event) {
                        const key = event.originalEvent.key;
                        if (event.keyCode == 13) {


                            var count = $("#barcodescd").tagsinput('items').length;
                            $('.barcode_count').html(count + 1);

                        }
                    });
                });

                $(document).on("click", ".label-info", function() {
                    var count = $("#barcodescd").tagsinput('items').length;
                    $('.barcode_count').html(count);
                })



                //Tested Mobile
                $(document).on("click", ".gebarcode", function() {

                    var err = true;

                    var input = $("#barcodescd");
                    var urlvl = $("#barcodescd").val();
                    if (urlvl == '') {
                        input.removeClass("valid").addClass("invalid");
                        $("#nmb").remove();
                        $('<div id="nmb" class="text-danger">Please scan barcode and try again!</div>').insertAfter(
                            "#barcodescd");
                        $("#barcodescd").focus();
                        err = false;
                    } else {
                        input.removeClass("invalid").addClass("valid");
                        $("#nmb").remove();
                    }
                    if (err == true) {

                        var pathn = $('meta[name="base_url"]').attr("content") + '/scanbarcode-acceptd';
                        var token = $('meta[name="csrf-token"]').attr("content");
                        var rid = $('#barcodescd').val();
                        var slotno = $('#slotno').val();
                        var acceptst = $('#selectdv').val();

                        $.ajax({
                            url: pathn,
                            type: "POST",
                            data: {
                                _token: token,
                                scanbarcode: rid,
                                acceptst: acceptst,
                                slotno: slotno
                            },
                            success: function(data) {
                                $('#dataList').DataTable().ajax.reload();
                                if (data.status == true) {
                                    custom_noty("success", data.msg);
                                     location.reload();
                                } else {
                                    custom_noty("error", data.msg);
                                }
                                $(".btn-close").click();
                            }
                        });
                    }
                });
                $(document).on("click", ".acptcl", function() {
                    $('#selectdv').val('');
                    $("#barcodescd").val('');
                    var element = $('.bootstrap-tagsinput');
                    element.find("span").remove();
                    var rid = $('#selectdv').val('acceptd');
                });
                $(document).on("click", ".retncl", function() {
                    $('#selectdv').val('');
                    $("#barcodescd").val('');
                    var element = $('.bootstrap-tagsinput');
                    element.find("span").remove();
                    var rid = $('#selectdv').val('return');
                });
                
                
                $("#barcodescd").on("change", function(event) {
	var input = $("#barcodescd");
	var urlvl = $("#barcodescd").val();
	var selectdv = $('#selectdv').val();
	var temcodeValue = $(this).val().trim(); // Get the value of the temcode field

	if (temcodeValue !== '') {
		// Make an AJAX request to check if the temcode is already assigned
		$.ajax({
		
			url: "{{route('check-service-accept')}}",
			method: 'POST',
			data: {
				_token: '{{ csrf_token() }}', // Include CSRF token
				temcode: temcodeValue,
				selectdv : selectdv
			},
			success: function(response) {
			    
				if (response.isAssigned == false) {
					input.removeClass("valid").addClass("invalid");
					$("#ltdt").remove();
					$('<div id="ltdt" class="text-danger">'+response.msg +'</div>').insertAfter("#barcodescd");
					$("#barcodescd").focus();
					$(".gebarcode").prop("disabled", true);
				} else {
					input.removeClass("invalid").addClass("valid");
					$("#ltdt").remove();
					$(".gebarcode").prop("disabled", false);
				}
			},
			error: function(xhr, status, error) {
				// Handle errors
				console.error(error);
			}
		});
	}
	if(urlvl==''){
		input.removeClass("valid").addClass("invalid");
		$("#ltdt").remove();
		$('<div id="ltdt" class="text-danger">Temporary code is required</div>').insertAfter("#temcode");
		$("#temcode").focus();
	} else {
		input.removeClass("invalid").addClass("valid");
		$("#ltdt").remove();
	}
});
                
                
                
            </script>

            <script type="text/javascript">
                //Returned Record
                $(document).on("click", ".rclosebtn", function() {
                    var rid = $('#returned_id').val();
                    if ($('.rvd_' + rid).is(':checked')) {
                        $('.rvd_' + rid).prop('checked', false);
                    }
                });
                //Returned Record
                $(document).on("click", ".returnedcheck", function() {
                    var rid = $(this).data("id");
                    $('#returned_id').val(rid);
                });

                //Returned Record
                function returnedrecord() {

                    var rid = $('#returned_id').val();
                    var pathn = $('meta[name="base_url"]').attr("content") + '/product-eng-returned';
                    var token = $('meta[name="csrf-token"]').attr("content");

                    if ($('.rvd_' + rid).is(':checked')) {
                        var acceptst = 'Yes';
                    } else {
                        var acceptst = 'No';
                    }

                    $.ajax({
                        url: pathn,
                        type: "POST",
                        data: {
                            _token: token,
                            user_id: rid,
                            acceptst: acceptst
                        },
                        success: function(data) {

                            if (data.status == true) {
                                custom_noty("success", data.msg);
                                $(".rclosebtn").click();
                                 location.reload();
                                if (acceptst == 'Yes') {
                                    $('.rvd_' + rid).prop('checked', true);
                                } else {
                                    $('.rvd_' + rid).prop('checked', false);
                                }
                            } else {
                                custom_noty("error", data.msg);
                                
                            }
                            $('#dataList').DataTable().ajax.reload();
                        }
                    });
                }
            </script>

            <script type="text/javascript">
                //Accept Record
                $(document).on("click", ".closebtn", function() {
                    var rid = $('#accept_id').val();
                    if ($('.vd_' + rid).is(':checked')) {
                        $('.vd_' + rid).prop('checked', false);
                    }
                });
                //Accept Record
                $(document).on("click", ".acceptcheck", function() {
                    var rid = $(this).data("id");
                    $('#accept_id').val(rid);
                });

                //Accept Record
                function acceptrecord() {

                    var rid = $('#accept_id').val();
                    var pathn = $('meta[name="base_url"]').attr("content") + '/product-eng-accept';
                    var token = $('meta[name="csrf-token"]').attr("content");

                    if ($('.vd_' + rid).is(':checked')) {
                        var acceptst = 'Yes';
                    } else {
                        var acceptst = 'No';
                    }

                    $.ajax({
                        url: pathn,
                        type: "POST",
                        data: {
                            _token: token,
                            user_id: rid,
                            acceptst: acceptst
                        },
                        success: function(data) {

                            if (data.status == true) {
                                custom_noty("success", data.msg);
                                $(".closebtn").click();
                                if (acceptst == 'Yes') {
                                    $('.vd_' + rid).prop('checked', true);
                                } else {
                                    $('.vd_' + rid).prop('checked', false);
                                }
                            } else {
                                custom_noty("error", data.msg);
                            }
                            $('#dataList').DataTable().ajax.reload();
                        }
                    });
                }
            </script>

            <script>
                $(document).ready(function() {

                    var token = $('meta[name="csrf-token"]').attr("content");
                    var pathn = $('meta[name="base_url"]').attr("content") + '/product-data-serv';

                    var reporttables = $('#dataList').DataTable({
                        "order": [
                            [0, "desc"]
                        ],
                        "serverSide": true,
                        "stateSave": true,
                        'processing': true,
                        "pageLength": 20,
                        "lengthMenu": [
                            [20, 50, 75, 100, 125, 150, 175, 200, 225, 250, 275, 300, 325, 350, 375, 400, 420,
                                450, 475, 500
                            ],
                            [20, 50, 75, 100, 125, 150, 175, 200, 225, 250, 275, 300, 325, 350, 375, 400, 420,
                                450, 475, 500
                            ]
                        ],
                        oLanguage: {
                            sProcessing: '<div class="lds-css"><div style="width:100%;height:100%" class="lds-eclipse"><div></div><p>Please wait while we are processing your request.</p></div></div>'
                        },
                        "ajax": {
                            'type': 'GET',
                            'url': pathn,
                            '_token': token,
                            'beforeSend': function(request) {
                                request.setRequestHeader("X-CSRF-TOKEN", '{{ csrf_token() }}');
                            },
                            "data": function(d) {
                                d.pagenme = '{{ basename(url()->current()) }}',
                                    d.lot_no = $("#lot_no").val(),
                                    d.no_pro = $("#no_pro").val(),
                                    d.sup_name = $("#sup_name").val(),
                                    d.pay_status = $("#pay_status").val()
                            }
                        },
                        searching: true,
                        "iDisplayLength": 20,
                        "columnDefs": [{
                                'targets': 0,
                                'searchable': false,
                                'orderable': false,
                                'className': 'dt-body-center text-center',
                                "render": function(data, type, row, meta) {
                                    return row.barcode;
                                }
                            },
                            {
                                "targets": 1,
                                orderable: true,
                                className: "text-center",
                                "render": function(data, type, row, meta) {
                                    return row.product_name;
                                }
                            },
                            {
                                "targets": 2,
                                orderable: true,
                                "render": function(data, type, row, meta) {
                                    return row.imei;
                                }
                            },
                            {
                                "targets": 3,
                                orderable: true,
                                "render": function(data, type, row, meta) {
                                    var tbl = '';
                                    if (row.check == 'Okay') {

                                        tbl +=
                                            "<div class='verified pending'><a href='#'><img src='{{ asset('backend/assets/images/verified.png') }}' alt=''></a>";
                                        tbl += '<a href="#"><p>Ok</p></a>';
                                        tbl += '</div>';

                                    } else if (row.check == 'Not Okay') {

                                        tbl +=
                                            "<div class='verified pending' ><a href='#'><img src='{{ asset('backend/assets/images/not-verified.png') }}' alt=''></a><a href='#'><p>Not Okay</p></a></div>";

                                    } else {
                                        tbl += "-";
                                    }
                                    return tbl;
                                }
                            },
                            {
                                "targets": 4,
                                orderable: true,
                                "render": function(data, type, row, meta) {
                                    var tbl = '';
                                    tbl += '<label class="switch">';
                                    if (row.accept_status == 'Yes') {
                                        tbl +=
                                            '<input type="checkbox" disabled checked="checked" href="#acceptModal" data-toggle="modal" data-id="' +
                                            row.id + '" class="acceptcheck vd_' + row.id + '">';
                                    } else {
                                        tbl +=
                                            '<input type="checkbox" disabled href="#acceptModal" data-toggle="modal" data-id="' +
                                            row.id + '" class="acceptcheck vd_' + row.id + '">';
                                    }
                                    tbl += '<span class="slider round"></span></label>';
                                    return tbl;
                                }
                            },
                            {
                                "targets": 5,
                                orderable: true,
                                "render": function(data, type, row, meta) {
                                    var tbl = '';
                                    tbl += '<label class="switch">';
                                    if (row.returned_status == 'Yes') {
                                        tbl +=
                                            '<input type="checkbox" disabled checked="checked" href="#returnedModal" data-toggle="modal" data-id="' +
                                            row.id + '" class="returnedcheck rvd_' + row.id + '">';
                                    } else {
                                        tbl +=
                                            '<input type="checkbox" disabled href="#returnedModal" data-toggle="modal" data-id="' +
                                            row.id + '" class="returnedcheck rvd_' + row.id + '">';
                                    }
                                    tbl += '<span class="slider round"></span></label>';
                                    return tbl;
                                }
                            },
                            {
                                "targets": 6,
                                orderable: true,
                                className: "text-center",
                                "render": function(data, type, row, meta) {

                                    var tbl = '';
                                    tbl += '<div class="action bank d-flex justify-content-start">';

                                   	if(row.sales_status == '') {

					tbl +='<a href="'+row.editurl+'" class="edit text-info btn btn-sm btn-success text-white">';
						tbl +='<i class="fas fa-edit"></i>';
					tbl +='</a>';
					}
					else{
					    tbl +='<a href="'+row.editurl+'" class="edit text-info btn btn-sm btn-danger text-white"  style="pointer-events: none; cursor: default;">';
						tbl +='<i class="fas fa-eye-slash"></i>';
					tbl +='</a>'; 
					    
					}

                                    tbl += '</div>';
                                    return tbl;
                                }
                            }
                        ]
                    });
                });

                function vldfn() {
                    $('#dataList').DataTable().ajax.reload();
                }
            </script>


            <style>
                .pending {
                    display: flex;
                    align-items: center;
                    justify-content: start;
                }
            </style>
        @endsection