@if (!isset($readOnly))
        <h5>Customise QR Code</h5>
    @else
        <h5>View QR Code</h5>
    @endif
    <form method="POST" action="javascript:void(0)" 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">
            <form method="POST" action="javascript:void(0)" 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">
                                @if (!isset($readOnly))
                                    <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>
                                @endif
                            </div>
                        </div> --}}
                <div class="row">
                    <div class="col-md-6">
                        <div class="row g-2">
                            <div class="col-md-12">
                                <label class="form-label" for="customise-style">Shape</label>
                                <div style="gap: 1rem;display: flex;">
                                    <button id="customise-shape"
                                        class="style-button patterns @if ($qr->shape == 'square') {{ 'selected' }} @endif"
                                        data-shape="square"><img class="patterns-thumbnail" alt="temp-patterns-icon"
                                            src="{{ asset('qr_pattern/default.png') }}"></button>
                                    <button id="customise-shape"
                                        class="style-button patterns @if ($qr->shape == 'round') {{ 'selected' }} @endif"
                                        data-shape="round"><img class="patterns-thumbnail" alt="temp-patterns-icon"
                                            src="{{ asset('qr_pattern/roundness.png') }}"></button>
                                    <button id="customise-shape"
                                        class="style-button patterns @if ($qr->shape == 'dot') {{ 'selected' }} @endif"
                                        data-shape="dot"><img class="patterns-thumbnail" alt="temp-patterns-icon"
                                            src="{{ asset('qr_pattern/dots.png') }}"></button>

                                    <input type="hidden" id="selected-shape" name="shape"
                                        value="{{ $qr->shape }}">
                                </div>
                                {{-- <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>
                                <div style="display: flex; gap: 1rem">
                                    <button
                                        class="style-button eye @if ($qr->eye == 'square') {{ 'selected' }} @endif"
                                        data-eye="square">
                                        <img class="patterns-thumbnail eye" alt="temp-patterns-icon"
                                            src="{{ asset('qr_pattern/square_eye.png') }}">
                                    </button>
                                    <button
                                        class="style-button eye @if ($qr->eye == 'circle') {{ 'selected' }} @endif"
                                        data-eye="circle">
                                        <img class="patterns-thumbnail eye" alt="temp-patterns-icon"
                                            src="{{ asset('qr_pattern/round_eye.png') }}">
                                    </button>
                                    <input type="hidden" id="selected-eye" name="eye" value="{{ $qr->eye }}">
                                </div>
                                {{-- <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-12">
                                <label class="form-label" for="customise-colour">Color (1)</label>
                                <br>
                                <button
                                    class="style-button color-1 @if ($qr->color1 == '#000000') {{ 'selected' }} @endif"
                                    id="colorpicker1" data-color-1="#000000">
                                    <img class="patterns-thumbnail color-1" alt="temp-patterns-icon"
                                        src="{{ asset('qr_pattern/8.png') }}">
                                </button>
                                <button
                                    class="style-button color-1 @if ($qr->color1 == '#D84280') {{ 'selected' }} @endif"
                                    id="colorpicker1" data-color-1="#D84280">
                                    <img class="patterns-thumbnail color-1" alt="temp-patterns-icon"
                                        src="{{ asset('qr_pattern/7.png') }}">
                                </button>
                                <button
                                    class="style-button color-1 @if ($qr->color1 == '#6B52D1') {{ 'selected' }} @endif"
                                    id="colorpicker1" data-color-1="#6B52D1">
                                    <img class="patterns-thumbnail color-1" alt="temp-patterns-icon"
                                        src="{{ asset('qr_pattern/6.png') }}">
                                </button>
                                <button
                                    class="style-button color-1 @if ($qr->color1 == '#2A5BD7') {{ 'selected' }} @endif"
                                    id="colorpicker1" data-color-1="#2A5BD7">
                                    <img class="patterns-thumbnail color-1" alt="temp-patterns-icon"
                                        src="{{ asset('qr_pattern/5.png') }}">
                                </button>
                                <button
                                    class="style-button color-1 @if ($qr->color1 == '#229CE0') {{ 'selected' }} @endif"
                                    id="colorpicker1" data-color-1="#229CE0">
                                    <img class="patterns-thumbnail color-1" alt="temp-patterns-icon"
                                        src="{{ asset('qr_pattern/4.png') }}">
                                </button>
                                <button
                                    class="style-button color-1 @if ($qr->color1 == '#198639') {{ 'selected' }} @endif"
                                    id="colorpicker1" data-color-1="#198639">
                                    <img class="patterns-thumbnail color-1" alt="temp-patterns-icon"
                                        src="{{ asset('qr_pattern/3.png') }}">
                                </button>
                                <button
                                    class="style-button color-1 @if ($qr->color1 == '#EF8000') {{ 'selected' }} @endif"
                                    id="colorpicker1" data-color-1="#EF8000">
                                    <img class="patterns-thumbnail color-1" alt="temp-patterns-icon"
                                        src="{{ asset('qr_pattern/2.png') }}">
                                </button>
                                <button
                                    class="style-button color-1 @if ($qr->color1 == '#DE3121') {{ 'selected' }} @endif"
                                    id="colorpicker1" data-color-1="#DE3121">
                                    <img class="patterns-thumbnail color-1" alt="temp-patterns-icon"
                                        src="{{ asset('qr_pattern/1.png') }}">
                                </button>
                                <input type="hidden" id="selected_colorpicker1" name="color1"
                                    value="{{ $qr->color1 }}">
                            </div>
                            {{-- <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 class="col-md-12">
                                <label class="form-label" for="customise-colour-2">Color (2)</label>
                                <br>
                                <button
                                    class="style-button color-2 @if ($qr->color2 == '#908989') {{ 'selected' }} @endif"
                                    id="colorpicker2" data-color-2="#908989">
                                    <img class="patterns-thumbnail color-2" alt="temp-patterns-icon"
                                        src="{{ asset('qr_pattern/9.png') }}">
                                </button>
                                <button
                                    class="style-button color-2 @if ($qr->color2 == '#8C75A9') {{ 'selected' }} @endif"
                                    id="colorpicker2" data-color-2="#8C75A9">
                                    <img class="patterns-thumbnail color-2" alt="temp-patterns-icon"
                                        src="{{ asset('qr_pattern/10.png') }}">
                                </button>
                                <button
                                    class="style-button color-2 @if ($qr->color2 == '#8E6B7B') {{ 'selected' }} @endif"
                                    id="colorpicker2" data-color-2="#8E6B7B">
                                    <img class="patterns-thumbnail color-2" alt="temp-patterns-icon"
                                        src="{{ asset('qr_pattern/11.png') }}">
                                </button>
                                <button
                                    class="style-button color-2 @if ($qr->color2 == '#8AC0DB') {{ 'selected' }} @endif"
                                    id="colorpicker2" data-color-2="#8AC0DB">
                                    <img class="patterns-thumbnail color-2" alt="temp-patterns-icon"
                                        src="{{ asset('qr_pattern/14.png') }}">
                                </button>
                                <button
                                    class="style-button color-2 @if ($qr->color2 == '#968DDD') {{ 'selected' }} @endif"
                                    id="colorpicker2" data-color-2="#968DDD">
                                    <img class="patterns-thumbnail color-2" alt="temp-patterns-icon"
                                        src="{{ asset('qr_pattern/13.png') }}">
                                </button>
                                <input type="hidden" id="selected_colorpicker2" name="color2"
                                    value="{{ $qr->color2 }}">
                                {{-- <input type="color" id="colorpicker2" name="color2"
                                            value="{{ $qr->color2 }}"> --}}
                            </div>
                            <div class="col-md-12">
                                <label class="form-label" for="customise-style">Gradient Type</label>
                                <div>
                                    <button
                                        class="style-button gradiant @if ($qr->gradient_type == 'vertical') {{ 'selected' }} @endif"
                                        data-gradient="vertical">
                                        <img class="patterns-thumbnail gradiant" alt="temp-patterns-icon"
                                            src="{{ asset('qr_pattern/vertical.png') }}">
                                    </button>
                                    <button
                                        class="style-button gradiant @if ($qr->gradient_type == 'horizontal') {{ 'selected' }} @endif"
                                        data-gradient="horizontal">
                                        <img class="patterns-thumbnail gradiant" alt="temp-patterns-icon"
                                            src="{{ asset('qr_pattern/horizontal.png') }}">
                                    </button>
                                    <button
                                        class="style-button gradiant @if ($qr->gradient_type == 'diagonal') {{ 'selected' }} @endif"
                                        data-gradient="diagonal">
                                        <img class="patterns-thumbnail gradiant" alt="temp-patterns-icon"
                                            src="{{ asset('qr_pattern/diagonal.png') }}">
                                    </button>
                                    <button
                                        class="style-button gradiant @if ($qr->gradient_type == 'inverse_diagonal') {{ 'selected' }} @endif "
                                        data-gradient="inverse_diagonal">
                                        <img class="patterns-thumbnail gradiant" alt="temp-patterns-icon"
                                            src="{{ asset('qr_pattern/inverse_diagonal.png') }}">
                                    </button>
                                    <button
                                        class="style-button gradiant @if ($qr->gradient_type == 'radial') {{ 'selected' }} @endif"
                                        data-gradient="radial">
                                        <img class="patterns-thumbnail gradiant" alt="temp-patterns-icon"
                                            src="{{ asset('qr_pattern/radial.png') }}">
                                    </button>
                                    <input type="hidden" id="selected_gradient" name="gradient"
                                        value="{{ $qr->gradient_type }}">
                                </div>
                                {{-- <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-6 d-flex">
                        <div class="text-center m-auto">
                            <label class="text-dark">Preview</label>
                            <br />
                            <img src="{{ asset('Blocks-1s-200px.gif') }}" class="img-fluid" alt="Image Viewer"
                                width="50" height="50" id="loader" style="display:none;">
                            <img src="{{ 'data:image/png;base64,' . base64_encode($qr_code) }}" class="img-fluid"
                                alt="Image Viewer" width="300" id="qrViewer">
                        </div>
                    </div>

                </div>

                @if (!isset($readOnly))
                    <hr>
                    <!-- Buttons -->
                    <div class="row">
                        <div class="col-md-6">
                            <button type="button" class="btn btn-primary btn-md"
                                onclick="prevStep(1)">Previous</button>
                        </div>
                        <div class="col-md-6 text-end">
                            <button class="btn btn-primary signInButton" type="submit" id="customizeQrBtn">
                                <span class="spinner-border spinner-border-sm hideClass" role="status"
                                    aria-hidden="true"></span>
                                <p class="loadingText" style="display: contents;">Save</p>
                            </button>
                        </div>
                    </div>
                @endif
            </form>
            <script>
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                // Get the loader and content divs
                var loader = $("#loader");
                var content = $("#qrViewer");
                var currentRequest = null;

                // Hide remove logo button if no logo is present
                var logoFile = $('#imageInput')[0].files[0];
                if (!logoFile) {
                    $('#remove_logo_btn').hide();
                }

                if (document.getElementById('imagePreview').getAttribute('src')) {
                    $('#remove_logo_btn').hide();
                }

                $(document).on('change',
                    '#colorpicker1, #colorpicker2, #customise-shape, #customise-eye, #imageInput, #customise-gradient, #customise-correction',
                    function(e) {
                        e.preventDefault();
                        var logoFile = $('#imageInput')[0].files[0];
                        if (logoFile) {
                            $("#old_logo").val("");
                            $('#remove_logo_btn').show();
                        } else {
                            $('#remove_logo_btn').hide();
                        }
                        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();
                    $('#imagePreview').attr("src", "");
                    $('#imageInput').val("");
                    $('#remove_logo_btn').hide();
                    $('#old_logo').val("");
                    updateQrCodeImage();
                });

                $(document).ready(function() {
                    $(".style-button.patterns").click(function() {
                        $(".style-button.patterns").removeClass("selected");
                        $(this).addClass("selected");
                        let selectedShape = $(this).data("shape");
                        $("#selected-shape").val(selectedShape);
                        updateQrCodeImage();
                    });

                    $(".style-button.eye").click(function() {
                        $(".style-button.eye").removeClass("selected");
                        $(this).addClass("selected");
                        let selectedEye = $(this).data("eye");
                        $("#selected-eye").val(selectedEye);
                        updateQrCodeImage();
                    });

                    $(".style-button.color-1").click(function() {
                        $(".style-button.color-1").removeClass("selected");
                        $(this).addClass("selected");
                        let selectedColor1 = $(this).data("color-1");
                        $("#selected_colorpicker1").val(selectedColor1);
                        updateQrCodeImage();
                    });

                    $(".style-button.color-2").click(function() {
                        $(".style-button.color-2").removeClass("selected");
                        $(this).addClass("selected");
                        let selectedColor2 = $(this).data("color-2");
                        $("#selected_colorpicker2").val(selectedColor2);
                        updateQrCodeImage();
                    });

                    $(".style-button.gradiant").click(function() {
                        $(".style-button.gradiant").removeClass("selected");
                        $(this).addClass("selected");
                        let selectedGradiant = $(this).data("gradient");
                        $("#selected_gradient").val(selectedGradiant);
                        updateQrCodeImage();
                    });
                });

                function updateQrCodeImage(logoDataUrl) {
                    let selectedColor1 = $('#selected_colorpicker1').val() || '#000000';
                    let selectedColor2 = $('#selected_colorpicker2').val() || '#908989';
                    let selectedShape = $('#selected-shape').val() || 'square';
                    let selectedEye = $('#selected-eye').val() || 'square';
                    let selectedGradient = $('#selected_gradient').val() || 'vertical';
                    let selectedCorrection = $('#customise-correction').val();
                    var qrUuid = $('#qrUuid').val();
                    var imagePreviewSrc = $('#imagePreview').attr("src");

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

                    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() {
                            $('#loader').show();
                            content.hide();
                        },
                        success: function(response) {
                            setTimeout(function() {
                                $('#loader').hide();
                                content.show();
                            }, 1000);
                            content.attr("src", 'data:image/png;base64,' + response.new_image);
                        },
                        complete: function(response) {}
                    });
                }

                function prevStep(stepNumber) {
                    var currentStep = "#step" + (stepNumber + 1);
                    var nextStep = "#step" + stepNumber;
                    $(currentStep).hide();
                    $(nextStep).show();
                }

                $('#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);
                    $(".signInButton").prop("disabled", true);
                    $(".spinner-border").removeClass("hideClass");
                    $.ajax({
                        type: 'POST',
                        "_token": "{{ csrf_token() }}",
                        url: "{{ route('admin.qr.update') }}",
                        data: data,
                        processData: false,
                        contentType: false,
                        success: function(response) {
                            $(".signInButton").prop("disabled", false);
                            $(".spinner-border").addClass("hideClass");
                            console.log(response);
                            if (response.status == 200) {
                                $(".success_msg").removeClass("hideClass");
                                $(".success_msg").html("Data Updated Successfully.");

                                setTimeout(function() {
                                    $(".success_msg").addClass("hideClass");
                                    $(".success_msg").html("");
                                    var ViewPageUrl = "{{ route('admin.qr.view_all') }}";
                                    window.location.href = ViewPageUrl;
                                }, 1000);
                            } else {
                                return 'Something went wrong';
                            }
                        }
                    })
                });

                $('#CardImageInput').on('change', function() {
                    const file = this.files[0];
                    if (file) {
                        const reader = new FileReader();
                        reader.onload = function(e) {
                            $('#CardImagePreview').attr('src', e.target.result);
                            $('#CardImagePreview').show();
                        }
                        reader.readAsDataURL(file);
                    } else {
                        $('#CardImagePreview').hide();
                    }
                });
            </script>