@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;
    }

    .hideClass {
        display: none !important;
    }

    /* 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 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">
                @if ($qrCodeType == '1')
                    Generate Your Dynamic QR Code
                @else
                    Generate Your Static QR Code
                @endif
        </h4>

        <div class="row">
            <div class="col-xl">
                <div class="card mb-4">
                    <div class="card-body">
                        <div class="hideClass alert alert-success success_msg msg_padding" role="alert">
                            Test
                        </div>
                        <div class="hideClass alert alert-danger danger_alert_msg msg_padding" role="alert">
                            Test
                        </div>
                        <div id="step1">
                            @if ($qrCodeType == '1')
                                <h6>Note*: The dynamic QR code will first redirect to our domain before redirecting to the final destination website.</h6>
                            @else
                                <h6>Note*: The static QR code will directly redirect to the destination website..</h6>
                            @endif
                            <form method="POST" action="javascript:void(0)" id="editQrForm">
                                @csrf
                                {{-- <input type="hidden" name="uuid" value="{{ (isset($qr->uuid))?$qr->uuid:'' }}" id="qrUuid"> --}}
                                <div style="display: none;">
                                    <input type="radio" class="pointerEventNone" name="qr_type" id="dynamic_qr"
                                        value="1" @if ($qrCodeType == '1') checked @endif> Dynamic QR&nbsp;
                                    &nbsp;&nbsp;&nbsp;&nbsp;
                                    <input type="radio" class="pointerEventNone" name="qr_type" id="static_qr"
                                        value="0" @if ($qrCodeType == '0') checked @endif> Static QR
                                </div>
                                <div class="mb-3"></div>

                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="mb-3">
                                            <label for="title" class="form-label">Unique ID</label>
                                            <input type="text"
                                                class="form-control {{ $errors->has('uuid') ? 'is-invalid' : '' }}"
                                                value="{{ isset($qr->uuid) ? $qr->uuid : Str::uuid() }}"
                                                id="uuid" name="uuid" placeholder="Enter your UUID">
                                        </div>
                                        <span style="color: red;">
                                            @error('title')
                                                {{ $message }}
                                            @enderror
                                        </span>
                                    </div>
                                    <!-- Title input -->
                                    <div class="col-md-4">
                                        <div class="mb-3">
                                            <label for="title" class="form-label">Title</label>
                                            <input type="text"
                                                class="form-control {{ $errors->has('title') ? 'is-invalid' : '' }}"
                                                value="{{ isset($qr->title) ? $qr->title : '' }}" id="title"
                                                name="title" placeholder="Enter your URL title">
                                        </div>
                                        <span style="color: red;">
                                            @error('title')
                                                {{ $message }}
                                            @enderror
                                        </span>
                                    </div>
                                    <!-- URL input -->
                                    <div class="col-md-4">
                                        <div class="mb-3">
                                            <label for="url" class="form-label">URL</label>
                                            <input type="text"
                                                class="form-control {{ $errors->has('url') ? 'is-invalid' : '' }}"
                                                id="url" name="url"
                                                value="{{ isset($qr->url) ? $qr->url : 'https://' }}"
                                                placeholder="Enter your URL">
                                        </div>
                                        <span style="color: red;">
                                            @error('url')
                                                {{ $message }}
                                            @enderror
                                        </span>
                                    </div>
                                </div>
                                <hr>
                                <!-- Buttons -->
                                <div class="row">
                                    <div class="col-md-2 text-end">
                                        <button class="btn btn-primary w-100 signInButton" type="submit">
                                            <span class="spinner-border spinner-border-sm hideClass" role="status"
                                                aria-hidden="true"></span>
                                            <p class="loadingText" style="display: contents;">Next</p>
                                        </button>
                                    </div>
                                </div>


                            </form>
                        </div>
                        <div id="step2" class="step2" style="display: none">   
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endsection
    @section('script')
        <script>
            var createQRCodeGnrtrUrl = "{{ route('admin.createQRCodeGnrtr') }}";
        </script>
        <script src="{{ asset('assets/js/qrcodegenerator.js') }}"></script>
    @endsection