@extends('admin.master')
@section('title')
    {{ 'Edit Custom Your QR' }}
@endsection
<style>
    .hideClass {
        display: none !important;
    }

    input[type="color"] {
        border: none;
        padding: 0;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        cursor: pointer;
    }

    /* General button styles */
    .style-button {
        position: relative;
        border: 0.1rem solid #dbe0eb;
        border-radius: 0.8rem;
        background-color: #fff;
        cursor: pointer;
        transition: all 0.2s ease-in-out;
        padding: 8px;
    }

    /* QR Shape Buttons */
    .patterns {
        height: 5rem;
        width: 5rem;
        padding: 0rem;
    }

    .patterns-thumbnail {
        width: 4rem;
        height: 4rem;
    }

    .style-button:not(.locked).selected {
        box-shadow: 0 0 0 0.1rem #2a5bd7;
        border-color: #2a5bd7;
        background-color: rgba(42, 91, 215, 0.1);
        pointer-events: none;
    }

    .style-button:not(.locked):not(.selected):hover {
        box-shadow: 0 0 0 0.1rem #96a3bd;
        border-color: #96a3bd;
        background-color: rgba(150, 163, 189, 0.1);
    }

    .style-button.eye {
        border: 1px solid transparent;
        border-radius: 5px;
    }

    .style-button.eye:not(.locked).selected {
        box-shadow: 0 0 0 0.1rem #2a5bd7;
        border-color: #2a5bd7;
        background-color: rgba(42, 91, 215, 0.1);
        pointer-events: none;
    }

    .style-button.eye:not(.locked):not(.selected):hover {
        box-shadow: 0 0 0 0.1rem #96a3bd;
        border-color: #96a3bd;
        background-color: rgba(150, 163, 189, 0.1);
    }

    .patterns-thumbnail.eye {
        width: 28px;
        height: 24px;
    }

    .patterns.eye {
        height: 2rem;
        width: 2rem;
        padding: 0rem;
    }

    .style-button.color-1 {
        border: 1px solid transparent;
        border-radius: 50px;
    }

    .style-button.color-1:not(.locked).selected {
        box-shadow: 0 0 0 0.1rem #2a5bd7;
        border-color: #2a5bd7;
        background-color: rgba(42, 91, 215, 0.1);
        pointer-events: none;
    }

    .style-button.color-1:not(.locked):not(.selected):hover {
        box-shadow: 0 0 0 0.1rem #96a3bd;
        border-color: #96a3bd;
        background-color: rgba(150, 163, 189, 0.1);
    }

    .patterns-thumbnail.color-1 {
        width: 28px;
        height: 28px;
    }

    .patterns.color-1 {
        height: 2rem;
        width: 2rem;
        padding: 0rem;
    }

    .style-button.color-2 {
        border: 1px solid transparent;
        border-radius: 50px;
    }

    .style-button.color-2:not(.locked).selected {
        box-shadow: 0 0 0 0.1rem #2a5bd7;
        border-color: #2a5bd7;
        background-color: rgba(42, 91, 215, 0.1);
        pointer-events: none;
    }

    .style-button.color-2:not(.locked):not(.selected):hover {
        box-shadow: 0 0 0 0.1rem #96a3bd;
        border-color: #96a3bd;
        background-color: rgba(150, 163, 189, 0.1);
    }

    .patterns-thumbnail.color-2 {
        width: 28px;
        height: 28px;
    }

    .patterns.color-2 {
        height: 2rem;
        width: 2rem;
        padding: 0rem;
    }

    .style-button.gradiant {
        border: 1px solid transparent;
    }

    .style-button.gradiant:not(.locked).selected {
        box-shadow: 0 0 0 0.1rem #2a5bd7;
        border-color: #2a5bd7;
        background-color: rgba(42, 91, 215, 0.1);
        pointer-events: none;
    }

    .style-button.gradiant:not(.locked):not(.selected):hover {
        box-shadow: 0 0 0 0.1rem #96a3bd;
        border-color: #96a3bd;
        background-color: rgba(150, 163, 189, 0.1);
    }

    .patterns-thumbnail.gradiant {
        width: 60px;
        height: 60px;
    }

    .patterns.gradiant {
        height: 2rem;
        width: 2rem;
        padding: 0rem;
    }
</style>
@section('qr-form')
    <div class="container-xxl flex-grow-1 container-p-y">
        <h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-bolder">
                @if ($qr->qr_type == '1')
                    Generate Your Dynamic QR Code
                @else
                    Generate Your Static QR Code
                @endif
        </h4>
        <div class="row">
            <div class="card mb-4">
                <div class="card-body">
                    <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-type">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-correction">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 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>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('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");
        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.addEventListener("DOMContentLoaded", function() {
            const buttons = document.querySelectorAll(".style-button.patterns");

            buttons.forEach(button => {
                button.addEventListener("click", function() {
                    buttons.forEach(btn => btn.classList.remove("selected"));
                    this.classList.add("selected");
                });
            });
        });

        $(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);

            $.ajax({
                type: 'POST',
                "_token": "{{ csrf_token() }}",
                url: "{{ route('admin.qr.update') }}",
                data: data,
                processData: false,
                contentType: false,
                beforeSend: function() {
                    $(".loadingText").html("Loading...");
                    $(".spinner-border").removeClass("hideClass");
                },
                success: function(response) {
                    $(".signInButton").prop("disabled", false);
                    $(".spinner-border").addClass("hideClass");
                    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.dashboard') }}";
                            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>
@endsection