@extends('partials.main')


@section('title')

    Qr Code

@endsection


@section('content')
<style>
    .theme_color {
        background: #29aae3;
    }

    .theme_color1 {
        background: #29aae3;
        color: white;
    }
    .plus{
        background: white;
        color:#29aae3;
        height:433px;
        font-size:1660%;
    }
    .plus:hover{
        background: #29aae3;
        color:white;
    }

    .page-item.next a {
        width: 64px;
    }
    .page-item.prev a {
        width: 64px;
    }

    .centered {
        position: absolute;
        top: 54%;
        left: 53%;
        transform: translate(-50%, -50%);
        color: black;
        text-shadow: blue;
        width: 200px;
        font-weight: 900;
        font-size: 24px;
    }


    .blur img {
        -webkit-filter: blur(4px);
        filter: blur(7px);
    }
</style>

@php
    $login_user = auth()->user();
    $user_state = $login_user->state_id;
    $user_position = $login_user->position_id;
@endphp

<!-- breadcrumb -->
<div class="breadcrumb-header justify-content-between">
    <nav class="breadcrumb-4">
        <ol class="breadcrumb breadcrumb-style1">
            @if($login_user->roles[0]->name == 'Admin')
            <li class="breadcrumb-item">
                <a href="{{ route('dashboard') }}">Dashboard</a>
            </li>
            @elseif($login_user->roles[0]->name == 'Client')
              <li class="breadcrumb-item">
                <a href="{{ route('client-dashboard') }}">Dashboard</a>
            </li>
            @endif
            <li class="breadcrumb-item active">QR Code</li>
        </ol>
    </nav>
</div>
<!-- breadcrumb -->

@if($login_user->roles[0]->name == 'Client')
    <div class="row row-sm"  >
        <div class="col-xl-3 col-lg-3" >
            <div class="card mg-b-20 rounded-buttom-10">
                <div class="card-body p-0">
                        <div class="todo-widget-header d-flex pb-0 pd-20">
                            <div >
                                <h6 class="main-content-label mg-t-4">Add QR Code </h6>
                            </div>
                        </div>
                        <a  data-bs-target="#addQRmodal" data-bs-toggle="modal"
                        href="">
                        <div class="pt-5 plus rounded-5">
                            <div class="row">
                                <div class="col-lg-12 text-center">
                                    <i class="si si-plus" style=""></i>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>

        <div class="col-xl-9 col-lg-9" >
            <div class="row row-sm text-center pt-5" id="divLoaders" style="display:block;height:300px;">
                <span>
                    <i class="fas fa-spinner fa-spin"></i> Codes are being loading..
                </span>
            </div>
            <!-- row closed -->

            <!-- row opened cards-->
            <div class="row row-sm text-center pt-5 text-danger" id="divDefaults" style="display:block;height:300px;">
                <span>
                    <i class="fas fa-exclamation"></i> No Codes are found!
                </span>
            </div>
            <div class="row row-sm d-flex" id="qrData">

            </div>
        </div>
    </div>
@else

<div class="row row-sm">
    <div class="col-xl-3 col-lg-3" >
        <div class="card mg-b-20 rounded-buttom-10">
            <div class="card-body p-0">
                    <div class="todo-widget-header d-flex pb-0 pd-20">
                        <div >
                            <h6 class="main-content-label mg-t-4">Add QR Code </h6>
                        </div>
                    </div>
                    <a  data-bs-target="#addQRmodal" data-bs-toggle="modal"
                    href="">
                    <div class="pt-5 plus rounded-5">
                        <div class="row">
                            <div class="col-lg-12 text-center">
                                <i class="si si-plus" style=""></i>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>

    <div class="col-xl-9 col-lg-9" >
        <div class="row row-sm text-center pt-5" id="divLoaders" style="display:block;height:300px;">
            <span>
                <i class="fas fa-spinner fa-spin"></i> Codes are being loading..
            </span>
        </div>
        <!-- row closed -->

        <!-- row opened cards-->
        <div class="row row-sm text-center pt-5 text-danger" id="divDefaults" style="display:block;height:300px;">
            <span>
                <i class="fas fa-exclamation"></i> No Codes are found!
            </span>
        </div>
        <div class="row row-sm d-flex" id="qrData" >
        </div>
    </div>
</div>

@endif
    <!-- pagination -->
    <div class="row">
    <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-xs-12 mb-2"></div>
        <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-xs-12 mb-2"></div>
        <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-xs-12 mb-2" id="divPagination">
            <ul class="pagination mb-3 flex-wrap" id="content-pagination" style="display:none; float:right">
            </ul>
        </div>
    </div>

    <!-- Add Qr Modal -->
    <div id="addQRmodal" class="modal">
        <div class="modal-dialog wd-xl-400" role="document">
            <div class="modal-content">
                <div class="modal-body pd-20 pd-sm-40">
                    <button type="button" class="close pos-absolute t-15 r-20 tx-26" data-bs-dismiss="modal"
                        aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h5 class="modal-title mg-b-5">Create New QR</h5>
                    <p class="mg-b-20">Please enter all required fields</p>
                    <form action="" id='addQR'>
                        <div class="form-group">
                            <input type="text" class="form-control" name='title' placeholder="Enter title" required>
                        </div><!-- form-group -->
                        <div class="form-group">
                            <input type="text" class="form-control" name='link' placeholder="Enter link" required>
                        </div>
                        <button class="btn theme_color1 btn-block" id="btnSubmit"> <i class="fa fa-spinner qr-spin"
                                style="display:none;"></i> Generate</button>
                    </form>
                </div><!-- modal-body -->
            </div><!-- modal-content -->
        </div><!-- modal-dialog -->
    </div><!-- modal -->

    <!-- Edit QR Modal -->
    <div id="editQRmodal" class="modal">
        <div class="modal-dialog wd-xl-400" role="document">
            <div class="modal-content">
                <div class="modal-body pd-20 pd-sm-40">
                    <button type="button" class="close pos-absolute t-15 r-20 tx-26" data-bs-dismiss="modal"
                        aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h5 class="modal-title mg-b-5">Edit QR</h5>
                    <p class="mg-b-20">Please enter all required fields</p>
                    <form  id='editQR'>
                        <input type="hidden" name="id" id="id">
                        <div class="form-group">
                            <input type="text" class="form-control title" name='title' value="" placeholder="Enter Tiltle" required>
                        </div><!-- form-group -->
                        <div class="form-group">
                            <input type="text" class="form-control link" name='link' value="" placeholder="Enter Website Link" required>
                        </div>
                        <button class="btn btn-block theme_color1" id="btnSubmit"> <i class="fa fa-spinner editqr"
                                style="display:none;"></i> Edit QR</button>
                    </form>
                </div><!-- modal-body -->
            </div><!-- modal-content -->
        </div><!-- modal-dialog -->
    </div><!-- modal -->

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.1.10/dist/sweetalert2.all.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twbs-pagination/1.4.2/jquery.twbsPagination.min.js"></script>

<script type="text/javascript">

    var filterLength=1;
    var contentPagination=$("#content-pagination")
    function setFilters()
    {
        filterLength = 3 ;
    }

    qrCount()
    function initPagination(totalPages)
    {
        console.log(totalPages)
        if(totalPages > 0){
            contentPagination.show();
            contentPagination.twbsPagination({
                totalPages: totalPages,
                visiblePages: 4,
                onPageClick: function (event, page) {
                    codes((page === 1 ? page - 1 : ((page - 1) * filterLength)),filterLength);
                }
            });
        }else{
            contentPagination.hide();
            $("#qrData").css('display','none');
            $("#divLoaders").css('display','none');
            $("#divDefaults").css('display','block');

        }
    }

    function qrCount(){
        setFilters()
        contentPagination.twbsPagination('destroy');
        $("#qrData").css('display','none');
        $("#divLoaders").css('display','block');
        $("#divDefaults").css('display','none');

        $.ajax({
            url: '/api/qrcode-count/',
            type: "get",
            data:{filterLength:filterLength},
            dataType: "JSON",
            cache: false,
            beforeSend: function () {
            },
            complete: function () {
            },
            success: function (response) {

                if (response["status"] == "success") {
                    total = response["data"];
                    initPagination(Math.ceil(total/filterLength));
                }else if (response["status"] == "fail") {
                    // $("#divNotFound").css('display','block')
                    // $("#divLoader").css('display','none')
                    // $("#divData").css('display','none')
                }
            },
            error: function (error) {
                console.log(error);
            }
        });
    }

    function codes(offset,limit)
    {
        $("#divLoader").css('display', 'block');
        $("#qrData").html('');
        $.ajax({
            url: '/api/loadqrcode',
            headers: {
                "X-CSRF-TOKEN": "{{ csrf_token() }}",
                "Content-Type": "application/json"
            },
            type: "get",
            dataType: "JSON",
            data: {offset:offset,limit:limit},
            beforeSend: function () {
            },
            complete: function () {
            },
            success: function (response)
            {
                if (response["status"] == "fail")
                {
                    $("#divDefaults").css('display','block');
                    toastr.info('Not Found',response["msg"])
                }
                else if (response["status"] == "success")
                {
                    $("#divLoaders").css('display','none');
                    $("#qrData").css('display','flex');
                    $("#qrData").html(response["html"]);
                }
            },
            error: function (error) {
                console.log(error);
            }
        });
    }

    $("#addQR").on('submit', (function (e) {
        e.preventDefault();
        $.ajax({
            url: "api/saveqrcode",
            type: "post",
            data: new FormData(this),
            dataType: "JSON",
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            processData: false,
            contentType: false,
            cache: false,
            beforeSend: function () {
                $("#btnSubmit").attr('disabled', true);
                $(".qr-spin").css('display', 'inline-block');
            },
            complete: function () {
                $("#btnSubmit").attr('disabled', false);
                $(".qr-spin").css('display', 'none');
            },
            success: function (response)
            {
                if (response["status"] == "fail")
                {
                    toastr.error('Failed',response["msg"])
                }
                else if (response["status"] == "success")
                {
                    toastr.success('Success',response["msg"])
                    $("#addQRmodal").modal('hide');
                    $("#addQR")[0].reset();
                    qrCount()
                }
                else if (response["status"] == "server")
                {
                    toastr.error('Warning',response["msg"])
                    $("#addQR")[0].reset();
                }
                else if (response["status"] == "deactive")
                {
                    toastr.error('Not Allowed',response["msg"])
                    $("#addQR")[0].reset();
                }
            },
            error: function (error) {
                console.log(error);
            }
        });
    }));

    function disableAlert(alr) {
        $("#" + alr).css("display", "none");
    }

    $(document).on('click', '.btnDelete', function (e) {
        var id = $(this).attr('id');
        Swal.fire({
                title: "Are you sure?",
                text: "You will not be able to recover this QR code!",
                type: "warning",
                buttons: true,
                confirmButtonColor: "#ff5e5e",
                confirmButtonText: "Yes, delete it!",
                closeOnConfirm: false,
                dangerMode: true,
                showCancelButton: true
            })
            .then((deleteThis) => {
                if (deleteThis.isConfirmed) {
                    $.ajax({
                        url: '/api/delete/'+id,
                        type: "GET",
                        dataType: "JSON",

                        success: function (response) {

                            if (response["status"] == "fail") {
                                Swal.fire("Failed!", "Failed to delete user.", "error");
                            } else if (response["status"] == "success") {
                                Swal.fire("Deleted!", "QR Code has been deleted.",
                                    "success");

                                qrCount()
                            }
                        },
                        error: function (error) {
                            console.log(error);
                        },
                        async: false
                    });
                } else {
                    Swal.close();
                }
            });
    });

    $(document).on('click', '.editBtn', function (e) {
        var id = $(this).attr('id');

            $.ajax({
                url: '/editQrCode/'+id,
                type: "GET",
                dataType: "JSON",
                success: function (response) {

                    if (response["status"] == "fail") {
                        Swal.fire("Failed!", "Failed to Get User.", "error");
                    } else if (response["status"] == "success") {
                        $("#id").val(response["data"]["id"])

                        $(".title").val(response["data"]["title"])
                        $(".link").val(response["data"]["link"])




                    }
                },
                error: function (error) {
                    console.log(error);
                },
                async: false
            });
    });

        // edit QR
    $("#editQR").on('submit', (function (e) {
        // alert('asd');
        e.preventDefault();
        $.ajax({
            url: "/api/UpdateQrCode",
            type: "post",
            data: new FormData(this),
            dataType: "JSON",
            processData: false,
            contentType: false,
            cache: false,
            beforeSend: function () {
                $("#btnSubmit").attr('disabled', true);
                $(".editqr").css('display', 'inline-block');
            },
            complete: function () {
                $("#btnSubmit").attr('disabled', false);
                $(".editqr").css('display', 'none');
            },
            success: function (response) {
                                    if (response["status"] == "fail") {
                    toastr.error('Not Found', response["msg"])
                } else if (response["status"] == "success") {
                    toastr.success('Found', response["msg"])
                    $("#editQRmodal").modal('hide');
                    qrCount()
                }
            },
            error: function (error) {
                console.log(error);
            }
        });
    }));

    function disableAlert(alr) {
        $("#" + alr).css("display", "none");
    }

</script>

@endsection