@extends('admin.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 */
    }

    input[type="color"] {
        border: none;
        padding: 0;
        width: 30px;
        /* Adjust this as needed */
        height: 30px;
        /* Adjust this as needed */
        border-radius: 50%;
        /* Make it round */
        cursor: pointer;
    }
</style>
@section('qr-form')
    <div id="notfound_message"></div>


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



        <div id="qr_generated">

        </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 Code3
        </h4>

        <div class="row">
            <div class="col-xl">                
                <div class="card mb-4">
                    <div class="card-body">
                        <div id="step1">
                            <h5>Update Basic Details</h5>
                            <form method="POST" action="" id="editQrForm">
                                @csrf
                                <input type="hidden" name="user_id" value="{{ auth()->guard('admin')->user()->id }}">
                                <input type="hidden" name="uuid" value="{{ $qr->uuid }}" id="qrUuid">
                                <div class="row">
                                    <!-- Title input -->
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="edit_title" class="form-label">Title</label>
                                            <input type="text" class="form-control {{ $errors->has('edit_title') ? 'is-invalid' : '' }}" id="edit_title" name="edit_title" value="{{ old('edit_title', $qr->title) }}" placeholder="Enter your URL title">
                                        </div>
                                        <span style="color: red;">
                                            @error('edit_title')
                                                {{ $message }}
                                            @enderror
                                        </span>
                                    </div>
                                    <!-- URL input -->
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="edit_url" class="form-label">URL</label>
                                            <input type="text" class="form-control {{ $errors->has('url') ? 'is-invalid' : '' }}" id="edit_url" name="edit_url" value="{{ old('url', $qr->url) }}" placeholder="Enter your URL">
                                        </div>
                                        <span style="color: red;">
                                            @error('edit_url')
                                                {{ $message }}
                                            @enderror
                                        </span>
                                    </div>
                                </div>
                                <hr>
                                <!-- Buttons -->
                                <div class="row">
                                    <div class="col-md-6">
                                        <button type="submit" class="btn btn-primary btn-md mt-4" id="updateUrlBtn">Update</button>
                                    </div>
                                    <div class="col-md-6 text-end">
                                        <button type="button" class="btn btn-primary btn-md mt-4" onclick="nextStep(2)">Next</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div id="step2" class="step" style="display: none;">
                            <h5>Customise QR Code</h5>
                            <form method="POST" action="" id="qrCostomize">
                                @csrf
                                <input type="hidden" name="user_id" value="{{ auth()->guard('admin')->user()->id }}">
                                <input type="hidden" name="uuid" value="{{ $qr->uuid }}" id="qrUuid">

                                <div class="row">
                                    <div class="col-md-8">
                                        <p class=" p-3 rounded alert-danger font-weight-normal" style="font-weight:100;">
                                            Customizing your QR
                                            code can
                                            cause your QR code to stop
                                            working. Verify your QR code works before distributing. </p>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="row g-2">
                                            <div class="col-md-6">
                                                <label class="form-label" for="customise-style">Shape</label>
                                                <select id="customise-shape" class="form-select" name="shape">
                                                    <option value="square"
                                                        @if ($qr->shape == 'square') {{ 'selected' }} @endif>Default
                                                    </option>
                                                    <option value="round"
                                                        @if ($qr->shape == 'round') {{ 'selected' }} @endif>Roundness
                                                    </option>
                                                    <option value="dot"
                                                        @if ($qr->shape == 'dot') {{ 'selected' }} @endif>Dots
                                                    </option>
                                                    <option value="square"
                                                        @if ($qr->shape == 'square') {{ 'selected' }} @endif>Square
                                                    </option>
                                                </select>
                                            </div>
                                            <div class="col-md-6">
                                                <label class="form-label" for="customise-eye">Eye</label>
                                                <select id="customise-eye" class="form-select" name="eye">
                                                    <option value="square"
                                                        @if ($qr->eye == 'square') {{ 'selected' }} @endif>Default
                                                    </option>
                                                    <option value="square"
                                                        @if ($qr->eye == 'square') {{ 'selected' }} @endif>Square
                                                    </option>
                                                    <option value="circle"
                                                        @if ($qr->eye == 'circle') {{ 'selected' }} @endif>Circle
                                                    </option>
                                                </select>
                                            </div>
                                            <div class="col-md-6">
                                                <label class="form-label" for="customise-colour">Color (1)</label>
                                                <br>
                                                <input type="color" id="colorpicker1" name="color1"
                                                    value="{{ $qr->color1 }}">
                                                {{-- <input type="text" id="color-picker-input-1" readonly> --}}
                                                {{-- <input type="text" id="color-code-1"> --}}
                                            </div>
                                            <div class="col-md-6">
                                                <label class="form-label" for="customise-colour-2">Color (2)</label>
                                                <br>
                                                <input type="color" id="colorpicker2" name="color2"
                                                    value="{{ $qr->color2 }}">
                                            </div>
                                            <div class="col-6">
                                                <label class="form-label" for="customise-style">Gradient Type</label>
                                                <select id="customise-gradient" class="form-select" name="gradient">
                                                    <option value="vertical"
                                                        @if ($qr->gradient_type == 'vertical') {{ 'selected' }} @endif>Vertical
                                                    </option>
                                                    <option value="horizontal"
                                                        @if ($qr->gradient_type == 'horizontal') {{ 'selected' }} @endif>Horizontal
                                                    </option>
                                                    <option value="diagonal"
                                                        @if ($qr->gradient_type == 'diagonal') {{ 'selected' }} @endif>Diagonal
                                                    </option>
                                                    <option value="inverse_diagonal"
                                                        @if ($qr->gradient_type == 'inverse_diagonal') {{ 'selected' }} @endif>Inverse
                                                        Diagonal</option>
                                                    <option value="radial"
                                                        @if ($qr->gradient_type == 'radial') {{ 'selected' }} @endif>Radial
                                                    </option>
                                                </select>
                                            </div>
                                            <div class="col-6">
                                                <label class="form-label" for="customise-style">Error Correction</label>
                                                <select id="customise-correction" class="form-select" name="correction">
                                                    <option value="L"
                                                        @if ($qr->error_correction == 'L') {{ 'selected' }} @endif>Low (7%
                                                        loss)</option>
                                                    <option
                                                        value="M"@if ($qr->error_correction == 'M') {{ 'selected' }} @endif>
                                                        Medium (15% loss)</option>
                                                    <option
                                                        value="Q"@if ($qr->error_correction == 'Q') {{ 'selected' }} @endif>
                                                        Quartile (25% loss)</option>
                                                    <option
                                                        value="H"@if ($qr->error_correction == 'H') {{ 'selected' }} @endif>
                                                        High (30% loss)</option>
                                                </select>
                                            </div>
                                            <div class="col-12">
                                                <div class="mb-3">
                                                    <label for="" class="form-label">Choose logo</label>
                                                    <input type="file" class="form-control" name="qr_logo"
                                                        id="imageInput" placeholder="" aria-describedby="fileHelpId">

                                                    <a href="#" class="text-danger" id="remove_logo_btn">Remove
                                                        logo</a><br>

                                                    <img id="imagePreview" class="mt-2"
                                                        src="@if ($qr->qr_logo) {{ 'data:image/png;base64,' . base64_encode(file_get_contents($qr->qr_logo)) }} @endif"
                                                        style="max-width: 100%; max-height: 100px; margin:auto;">
                                                    <input type="hidden" name="oqr" id="old_logo"
                                                        value="{{ $qr->qr_logo }}">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="d-flex justify-content-center mt-4">
                                            <div
                                                style="height: 192px; display:flex; justify-content: center; align-items: center;">
                                                <img src="{{ asset('Blocks-1s-200px.gif') }}" class="img-fluid"
                                                    alt="Image Viewer" width="50" height="50" id="loader"
                                                    style="display:none;">
                                            </div>
                                            <img src="{{ 'data:image/png;base64,' . base64_encode($qr_code) }}"
                                                class="img-fluid" alt="Image Viewer" width="192" height="192"
                                                id="qrViewer">
                                        </div>
                                    </div>

                                </div>
                               
                                <hr>
                                <!-- Buttons -->
                                <div class="row">
                                    <div class="col-md-6">
                                    <button type="button" class="btn btn-primary btn-md mt-4" onclick="prevStep(1)">Previous</button>
                                    </div>
                                    <div class="col-md-6 text-end">
                                        
                                        <button type="submit" class="btn btn-primary " id="customizeQrBtn">Save</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endsection
    @section('script')
        <script>
            
        </script>
        <script>
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            // Get the loader and content divs
            var loader = $("#loader");
            var content = $("#qrViewer");

            // Set a timeout to hide the loader and show the content
            var logoFile = $('#imageInput')[0].files[0];

            // console.log(logoFile);


            if (logoFile) {
                $("#old_logo").val("");
            } else {
                $('#remove_logo_btn').hide();
            }

            // console.log($('#imagePreview').attr("src", ""));
            const img = document.getElementById('imagePreview');

            const src = img.getAttribute('src');
            if (!src) {
                $('#remove_logo_btn').hide();
            } else {
                $('#remove_logo_btn').show();
            }

            $(document).on('change',
                '#colorpicker1, #colorpicker2, #customise-shape, #customise-eye, #imageInput, #customise-gradient, #customise-correction',
                function(
                    e) {
                    e.preventDefault();
                    var logoFile = $('#imageInput')[0].files[0];
                    // console.log(logoFile);
                    if (logoFile) {
                        $("#old_logo").val("");
                        $('#remove_logo_btn').show();
                    } else {
                        $('#remove_logo_btn').hide();

                    }
                    // console.log(logoFile);
                    var logoDataUrl = '';
                    if (logoFile) {
                        var reader = new FileReader();
                        reader.onload = function(event) {
                            var logoDataUrl = event.target.result;

                            updateQrCodeImage(logoDataUrl);
                        };
                        reader.readAsDataURL(logoFile);
                    } else {
                        updateQrCodeImage();
                    }
                });

            $(document).on('click',
                '#remove_logo_btn',
                function(
                    e) {
                    e.preventDefault();
                    // alert('fasd');
                    var logoFile = $('#imagePreview').attr("src", "");
                    var logoFileSelect = $('#imageInput').val("");
                    $('#remove_logo_btn').hide();
                    $('#old_logo').val("");
                    // logoFile = null;
                    // console.log(logoFile);

                    if ($('#imagePreview').attr("src") == "") {
                        updateQrCodeImage();
                    }
                });

            var currentRequest = null;


            function updateQrCodeImage(logoDataUrl) {
                let selectedColor1 = $('#colorpicker1').val();
                let selectedColor2 = $('#colorpicker2').val();
                let selectedShape = $('#customise-shape').val();
                let selectedEye = $('#customise-eye').val();
                let selectedGradient = $('#customise-gradient').val();
                let selectedCorrection = $('#customise-correction').val();
                var qrUuid = $('#qrUuid').val();
                var imagePreviewSrc = $('#imagePreview').attr("src");
                // console.log(logoDataUrl);

                var url = "{{ route('admin.qr.customize', ':uuid') }}";

                url = url.replace(':uuid', qrUuid);

                // $('.qr_div').css('display', 'none');
                if (currentRequest !== null) {
                    currentRequest.abort(); // Abort the previous request
                }

                currentRequest = $.ajax({
                    url: url,
                    type: 'POST',
                    data: {
                        "_token": "{{ csrf_token() }}",
                        logoDataUrl: logoDataUrl,
                        color1: selectedColor1,
                        color2: selectedColor2,
                        shape: selectedShape,
                        eye: selectedEye,
                        gradient: selectedGradient,
                        correction: selectedCorrection,
                        imagePreviewSrc: imagePreviewSrc,
                    },
                    beforeSend: function() {
                        if (currentRequest != null) {
                            currentRequest.abort();
                        }
                        $('#loader').show();
                        content.hide();
                    },
                    success: function(response) {
                        // $("#qrShow").hide();
                        setTimeout(function() {
                            $('#loader').hide();
                            content.show();
                        }, 1000);
                        // Set the src of the image to the data returned by the Ajax request
                        content.attr("src", 'data:image/png;base64,' + response.new_image);


                    },
                    complete: function(response) {
                        // $('.qr_div').show();

                        // $("#qrViewer").attr("src", response.new_image);
                        // Hide the loader after the AJAX request is complete
                    }
                });
            }


            $.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);
            }
            // $('#createModalId').on('hidden.bs.modal', function() {
            //     // Get the form element by its ID
            //     var createQrForm = $('#generateQrForm')[0];

            //     // Reset the form
            //     createQrForm.reset();

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

            $("#editQrForm").validate({
                rules: {
                    edit_title: {
                        required: true,

                    },
                    edit_url: {
                        required: true,
                        url: true // Validates URL format
                    }
                },
                messages: {
                    edit_title: {
                        required: "Please enter a title",
                    },
                    edit_url: {
                        required: "Please enter a URL",
                        url: "Please enter a valid URL"
                    }
                },
                submitHandler: function(form) {
                    // If validation passes, submit the form
                    var data = new FormData(form);

                    $.ajax({
                        type: 'POST',
                        data: data,
                        "_token": "{{ csrf_token() }}",
                        url: "{{ route('admin.qrLink.update') }}",
                        processData: false,
                        contentType: false,

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

                                $('#edit_title').val(response.qr.title);
                                $('#edit_url').val(response.qr.url);

                            } else {
                                return 'Something went wrong';
                            }
                        }

                    })
                }
            });

            $('#customizeQrBtn').click(function(e) {
                e.preventDefault();

                var form = $('#qrCostomize')[0];

                var data = new FormData(form);


                const customizedQr = document.getElementById('qrViewer');

                const file = customizedQr.src;

                data.append('customizedQr', file);

                $.ajax({
                    type: 'POST',
                    "_token": "{{ csrf_token() }}",
                    url: "{{ route('admin.qr.update') }}",
                    data: data,
                    processData: false,
                    contentType: false,

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

                            var ViewPageUrl = "{{ route('admin.dashboard') }}";
                            window.location.href = ViewPageUrl;

                        } else {
                            return 'Something went wrong';
                        }
                    }

                })
            });
        </script>
    @endsection