@extends('layouts.dashboard_layout')

@section('title', 'QR')

@section('head')
  <link rel="stylesheet" href="{{ asset('css/codigoqr.css') }}">
@endsection

@section('content')
<div class="container-fluid p-3 table-acta">
    <label class="text-align mb-3">Generador de Codigo QR</label>
    <form method="POST" action="{{ route('qr.store') }}" id="formQR">
        <div class="container_formulario">
            <div class="formulario">
                <div class="">
                    <label for="url" class="form-label">URL:</label><br>
                    <input type="text" class="form-control" id="url" name="url" placeholder="https://example.com" value="{{ old('url', $url) }}"><br><br>
                    <div class="mb-2">
                        <label for="text" class="form-label">Nombre:</label><br>
                        <input type="text" class="form-control Inputdate" name="nombre" placeholder="Titulo"><br>
                        <label for="color" class="form-label">Color:</label><br>
                        <input type="color" class="form-control Inputdate" id="color" name="color" value="{{ old('color', '#000000') }}"><br><br>
                        <label for="background_color" class="form-label">Fondo:</label><br>
                        <input type="color" class="form-control Inputdate" id="background_color" name="background_color" value="{{ old('background_color', '#ffffff') }}"><br><br>
                        <label for="logo" class="form-label">Logo:</label><br>
                        <input type="file" class="form-control Inputdate" id="logo" name="logo" accept=".jpeg,.png,.jpg"><br><br>
                    </div>
                </div>
            </div>
            <div class="contenedor_qr" id="qrcode">
                @if(isset($qrCode))
                        <div id="qrcode">
                            <img src="data:image/png;base64,{{ $qrCodeBase64 }}" alt="Imagen de QR" class="qr">
                        </div>
                        <div class="empresa d-flex align-items-center">
                            @if(isset($logoPath))
                            <img src="{{ asset($logoPath) }}" alt="Logo" class="empresa_qr">
                            @endif
                            @if(isset($nombre))
                                <p>{{ $nombre }}</p>
                            @endif
                        </div>
                    
                @else
                    <img src="{{ asset('img/QR.png') }}" alt="Imagen de QR" class="empresa_qr" style="width: 100px; height="100px;">
                @endif
            </div>
                
        
        </div>
        
        <div class="d-grid gap-2 d-md-flex justify-content-md-end">
            <button type="button" class="btn-previos" onclick="window.location.href='/qr'">Cancelar</button>
            <button class="btnNext" id="generateBtn" type="submit">Generar Codigo QR</button>
        </div>
    </form>
</div>
@endsection

@section('scripts')
@include('partials.scripts')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<script src="{{ asset('js/qr/store.js') }}"></script>
@endsection