@extends('master')
@section('title')
    {{ 'Generate Your QR' }}
@endsection
<style>
    .dataTables_length {
        margin-left: 20px;
    }

    .dataTables_info {
        margin-left: 20px;

    }

    .dataTables_filter {
        display: flex;
        justify-content: flex-end;
    }

    .dataTables_filter label {
        margin-right: 20px;

    }

    .dataTables_wrapper .row {
        --bs-gutter-x: 0 !important;
        display: flex;
        align-items: center;
        margin-bottom: 20px;
    }

    .dataTables_paginate {
        display: flex;
        justify-content: flex-end;
        margin-right: 20px;
        margin-top: 20px;
    }

    .dataTables_wrapper {
        width: 100%;
        border-collapse: collapse;
        padding-inline: 20px !important;
        table-layout: fixed !important;

        /* padding-inline: 20px ; */
    }

    .dataTables_length label select {
        width: 40px;
        height: 40px;
        display: inline-block;
    }

    /* .table-responsive {
        overflow-x: auto; */
    /* Add additional styles as needed */
    /* } */

    /* Responsive table layout */
    .qr-table {
        width: 100% !important;
        table-layout: fixed !important;
        /* Prevent individual column widths from affecting layout */
    }

    .product-action {
        position: absolute;
        width: 100;
        height: 100%;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: .5s;
    }

    .product-action a.btn {
        position: relative;
        margin: 0 3px;
        margin-top: 100px;
        opacity: 0;
    }

    .product-item:hover {
        box-shadow: 0 0 30px #DDDDDD;
    }

    .product-item:hover .product-action {
        background: rgb(255, 255, 255);
    }

    .product-item:hover .product-action a.btn:first-child {
        opacity: 1;
        margin-top: 0;
        transition: .3s 0s;
    }

    .product-item:hover .product-action a.btn:nth-child(2) {
        opacity: 1;
        margin-top: 0;
        transition: .3s .05s;
    }

    .product-item:hover .product-action a.btn:nth-child(3) {
        opacity: 1;
        margin-top: 0;
        transition: .3s .1s;
    }

    .product-item:hover .product-action a.btn:nth-child(4) {
        opacity: 1;
        margin-top: 0;
        transition: .3s .15s;
    }
</style>
@section('qr-form')
    <div id="notfound_message"></div>


    <div class="container-xxl flex-grow-1 container-p-y">



        <div id="qr_generated">

            @if (session('qr_generated'))
                {{ session('qr_generated') }}
            @endif

        </div>
        <div id="qr_updated">

        </div>
        <div id="qr_deleted">

        </div>

        <h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-bolder">Generate Your QR Code2
        </h4>

        <div class="row">
            <div class="col-xl">
                <form method="POST" action="" id="generateQrForm">
                <input type="radio" name="qr_type" id="dynamic_qr" value="dynamic" @if($qrCodeType == 'dynamic') checked @endif> Dynamic QR&nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="radio" name="qr_type" id="static_qr" value="static" @if($qrCodeType == 'static') checked @endif> Static QR
                    <div class="mb-3"></div>
                    <div class="card mb-4">
                        <div class="card-body">
                            <div class="col-md-6">
                                @csrf
                                <input type="hidden" name="user_id" value="{{ auth()->user()->id }}">
                                <label for="inputField">Title</label>
                                <div class="mb-3">

                                    <input type="text"
                                        class="form-control {{ $errors->has('title') ? 'is-invalid' : '' }}" id="title"
                                        name="title" value="{{ old('title') }}" placeholder="Enter your URL title">
                                </div>
                                <span style="color: red;">
                                    @error('title')
                                        {{ $message }}
                                    @enderror
                                </span>
                                <label for="inputField">URL</label>
                                <div class="">

                                    <input type="text" class="form-control {{ $errors->has('url') ? 'is-invalid' : '' }}"
                                        id="url" name="url" value="{{ old('url') }}"
                                        placeholder="Enter your URL">
                                    {{-- <div class="input-group-append" style="padding-left: 0.5vw;"> --}}
                                    {{-- </div> --}}
                                </div>
                                <span style="color: red;">
                                    @error('url')
                                        {{ $message }}
                                    @enderror
                                </span>
                            </div>
                        </div>
                    </div>

                    <button type="submit" class="btn btn-primary " id="generateQrBtn">Save</button>
                </form>
            </div>
        </div>
    @endsection
    @section('script')
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const imageInput = document.getElementById('imageInput');
                const imagePreview = document.getElementById('imagePreview');

                imageInput.addEventListener('change', function() {
                    const selectedFile = imageInput.files[0];

                    if (selectedFile) {
                        const reader = new FileReader();

                        reader.onload = function(event) {
                            imagePreview.src = event.target.result;
                        };

                        reader.readAsDataURL(selectedFile);
                    } else {
                        imagePreview.src = '';
                    }
                });
            });
        </script>
        <script>
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            // $(document).ready(function() {


            var table = $('#qr_table').DataTable({
                processing: true,
                serverSide: true,
                stateSave: true,
                "ajax": {
                    "url": "{{ route('view_qr', ['id' => auth()->user()->id]) }} }}",
                },
                order: [],
                columns: [{
                        data: 'qr_code',
                        orderable: false,
                        name: 'qr_code'
                    },
                    {
                        data: 'title',
                        name: 'title'
                    },
                    {
                        data: 'url',
                        name: 'url'
                    },
                    {
                        data: 'status',
                        name: 'status'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    },
                ]
            });

            table.ajax.reload();


            $.validator.methods.url = function(value, element) {
                return this.optional(element) ||
                    /^(https?:\/\/)?(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/gi
                    .test(value);
            }


            $("#generateQrForm").validate({
                rules: {
                    title: {
                        required: true
                    },
                    url: {
                        required: true,
                        url: true
                    }
                },
                messages: {
                    title: {
                        required: "Please enter a title"
                    },
                    url: {
                        required: "Please enter a URL",
                    }
                },
                submitHandler: function(form) {
                    // If validation passes, submit the form
                    var data = new FormData(form);
                    $.ajax({
                        type: 'POST',
                        data: data,
                        url: "{{ route('qr.generate') }}",
                        processData: false,
                        contentType: false,

                        success: function(response) {
                            // $('#editEmployeeModal').modal('hide');
                            // employeeList();
                            // console.log(response);
                            if (response.status == 200) {

                                $('#url-error').html("");
                                $('#title-error').html("");

                                var uuid = response.uuid;
                                var editPageUrl = "{{ route('qr.edit', ':uuid') }}";
                                var editUrl = editPageUrl.replace(':uuid', uuid);
                                window.location.href = editUrl;
                            } else {
                                return 'Something went wrong';
                            }
                        }

                    })


                }
            });

            $(document).on('click', '#editbutton', function(e) {
                e.preventDefault();
                var uuid = $(this).attr('data-bs-uuid');

                var edit_url = "{{ route('qr.edit', ':uuid') }}";
                var editUrl = edit_url.replace(':uuid', uuid);
                window.location.href = editUrl;

            });

            $(document).on('click', '#deletebtn', function(e) {
                e.preventDefault();

                var uuid = $(this).attr('data-bs-uuid');
                var url = "{{ route('qr.delete', ':uuid') }}";
                url = url.replace(':uuid', uuid);

                Swal.fire({
                    title: 'Are you sure?',
                    text: "You want to delete this?",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes, delete it!'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                                type: 'get',
                                // data: data,
                                url: url,
                                processData: false,
                                contentType: false,

                                success: function(response) {
                                    // $('#editEmployeeModal').modal('hide');
                                    // employeeList();
                                    // console.log(response);

                                    if (response.status == 200) {
                                        // $("#activeQr").html("Inactive");
                                        // $("#qr_deleted").addClass(
                                        //     "alert alert-danger");
                                        // $('#qr_deleted').text(response.qr_deleted)
                                        //     .fadeIn();
                                        // setTimeout(function() {
                                        //     $('#qr_deleted').fadeOut();
                                        // }, 5000); // 3000 milliseconds = 3 seconds

                                        table.ajax.reload();
                                    }
                                }

                            }),
                            Swal.fire(
                                'Deleted!',
                                'Your QR Code has been deleted.',
                                'success'
                            )
                    }
                })

            });

            $(document).on('click', '.switch', function(e) {
                e.preventDefault();

                var uuid = $(this).attr('data-bs-uuid');
                var url = "{{ route('qr.status', ':uuid') }}";
                url = url.replace(':uuid', uuid);
                // const newStatus = this.checked ? 'active' : 'inactive';
                $.ajax({
                    type: 'get',
                    // data: newStatus,
                    url: url,
                    // processData: false,
                    // contentType: false,

                    success: function(response) {


                        if (response.status == 200) {
                            table.ajax.reload();
                        }
                    }

                })


            });
            // });
        </script>
    @endsection