@extends('layouts.head')

@section('content')
<style>
        canvas {
            background: #ffffff;
            border: 2px solid #333;
            border-radius: 8px;
        }

    </style>
    <div class="content-wrapper">
        <section class="content">
            <div class="container-fluid">
                <div class="row ">
                    <div class="col-md-12">
                        <div class="card card-color row">
                                <div class="card-header" >
                                    <h3 style="color:white" class="card-title"><b>REGISTRO DE ORDEN @if(auth()->user()['tipo']!='AD') | <small>{{session('descripcion_local')}} @endif</small> </b> </h3>
                                </div>
                                <div id='div_form'>
                                    <form id="form_orden" style='font-size:12px'  method="POST" enctype="multipart/form-data">
                                        {{ csrf_field() }}
                                        <div class="card-body">
                                            @if(auth()->user()['tipo']=='AD')
                                                <div class='row'>
                                                    <div class='col-md-6'>
                                                        <div class="form-group">
                                                            <div class="row">
                                                                <div class="col-md-12 d-flex align-items-center">
                                                                    <div class='col-md-1'>
                                                                        <label for="estado" class="mr-2">Local: </label>
                                                                    </div>
                                                                    <div class='col-md-6'>
                                                                        <select    name="local" id="local" class="form-control chosen-select select">
                                                                            @if(isset($locales))
                                                                                @foreach($locales as $value)
                                                                                    <option class="optionlocal" value="{{encrypt($value['id'])}}">{{$value['descripcion']}} - {{$value['direccion']}}</option>
                                                                                @endforeach
                                                                            @endif
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            <hr>
                                            @endif
                                            <b>Información del cliente</b>
                                            <hr>
                                            <div class="form-group">
                                                <div class="row">
                                                    <div class="col-md-3">
                                                        <label for="cedula">Cédula *</label>
                                                        <input type="hidden" id='idcliente_encrypt' name='idcliente_encrypt'>
                                                        <input type="text" class="form-control" id="cedula" name="cedula" placeholder="Ingrese cédula" required>
                                                    </div>
                                                    <div class="col-md-2">
                                                        <label >&nbsp;</label>
                                                        <button onclick="buscar_cliente($('#cedula').val())" type='button' class='btn btn-primary form-control'><i class='fa fa-search'></i> Buscar</button>
                                                    </div>
                                                    <div class="col-md-1">
                                                        <label for="cedula">&nbsp;</label>
                                                        <button onclick='modal_clientes()'  type='button' class='btn btn-success form-control'><i class='fa fa-user'></i> Cliente</button>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <label for="nombre">Nombre y apellidos *</label>
                                                        <input disabled type="text" class="form-control" id="nombres" name="nombres" placeholder="Ingrese nombre y apellidos" required>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="row">
                                                    <div class="col-md-3">
                                                        <label for="celular">Celular</label>
                                                        <input type="text" disabled class="form-control" id="celular" name="celular" placeholder="Celular">
                                                    </div>
                                                    <div class="col-md-3">
                                                        <label for="correo">Correo *</label>
                                                        <input type="email" disabled class="form-control" id="correo" name="correo" placeholder="ejemplo@gmail.com" required>
                                                    </div> 
                                                    <!-- <div class="col-md-3">
                                                        <label for="fecha_recibe">Fecha recibe</label>
                                                        <input type="date" value="@php echo date('Y-m-d'); @endphp"  class="form-control" id="fecha_recibe" name="fecha_recibe" placeholder="ejemplo@gmail.com" required>
                                                    </div>  
                                                    <div class="col-md-3">
                                                        <label for="hora_recibe">Hora recibe</label>
                                                        <input type="time" value="@php echo date('H:i'); @endphp"   class="form-control" id="hora_recibe" name="hora_recibe" placeholder="ejemplo@gmail.com" required>
                                                    </div>                                            -->
                                                </div>
                                            </div>
                                            <hr>
                                            <b>Información del equipo</b>
                                            <hr>
                                            <div class='row'>
                                                <div class='col-md-6'>
                                                    
                                                    <div class="form-group">
                                                        <div class="row">
                                                            <div class="col-md-4">
                                                                <label for="modelo">Modelo</label>
                                                                <input type="text" class="form-control" id="modelo" name="modelo" placeholder="Ingrese el modelo" required>
                                                            </div>
                                                            <div class="col-md-4">
                                                                <label for="imei">ESN o IMEI</label>
                                                                <input  type="text" class="form-control" id="imei" name="imei" placeholder="Ingrese ESN o IMEI" required>
                                                            </div>
                                                            <div class="col-md-4">
                                                                <label for="estado">Estado</label>
                                                                <select   name="estado" id="estado" class="form-control chosen-select ">
                                                                        <option value="Bueno">Bueno</option>
                                                                        <option value="Malo">Malo</option>
                                                                        <option value="Regular">Regular</option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <div class="row">
                                                            <div class="col-md-6">
                                                                <label for="Local">Accesorios incluidos</label>
                                                                <select  data-placeholder="Seleccione accesorios" multiple name="accesorios[]" id="accesorios" class="form-control chosen-select select">
                                                                    @if(isset($accesorios))
                                                                        <option value=""></option>
                                                                        @foreach($accesorios as $value)
                                                                            <option class="optionlocal" value="{{$value['id']}}">{{$value['descripcion']}} </option>
                                                                        @endforeach
                                                                    @endif
                                                                </select>
                                                            </div>
                                                            <div class="col-md-6">
                                                                <label for="estado">Estado encendido</label>
                                                                <select   name="estado_encendido" id="estado_encendido" class="form-control chosen-select ">
                                                                        <option value="En">Encendido</option>
                                                                        <option value="Ap">Apagado</option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    

                                                    <div class="form-group">
                                                        <div class="row">
                                                            <div class="col-md-6">
                                                                <label for="observacion">Observación general</label>
                                                                <textarea placeholder='Ingrese observación' name="observacion" id="observacion" class='form-control' required ></textarea>
                                                            </div>
                                                            <div class="col-md-6">
                                                                <label for="observacion_tecnico">Observación al técnico</label>
                                                                <textarea placeholder='Ingrese observación' name="observacion_tecnico" id="observacion_tecnico" class='form-control' required ></textarea>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <div class="row">
                                                            <div class="col-md-12">
                                                                <div class="row">
                                                                    <div class="col-md-2">
                                                                        <label>Tipo orden:</label>
                                                                    </div>
                                                                    <div class="col-md-3">
                                                                        <input style="cursor:pointer" checked name="tipo_orden" id="d" value="d" type="radio" required>
                                                                        <label style="cursor:pointer" for="d" class="form-check-label">Diagnósito</label>
                                                                    </div>
                                                                    <div class="col-md-3">
                                                                        <input style="cursor:pointer" name="tipo_orden" id="r" value="r" type="radio" required>
                                                                        <label style="cursor:pointer" for="r" class="form-check-label">Reparación</label>
                                                                    </div>
                                                                    
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <div class="row">
                                                            <div class="col-md-12">
                                                                <div class="row">
                                                                    <div class="col-md-2">
                                                                        <label>Validación de garantía:</label>
                                                                    </div>
                                                                    <div class="col-md-3">
                                                                        <input style="cursor:pointer" checked name="tipo_garantia" id="na" value="NA" type="radio" required>
                                                                        <label style="cursor:pointer" for="na" class="form-check-label">No aplica</label>
                                                                    </div>
                                                                    <div class="col-md-3">
                                                                        <input style="cursor:pointer" name="tipo_garantia" id="serviciotecnico" value="st" type="radio" required>
                                                                        <label style="cursor:pointer" for="serviciotecnico" class="form-check-label">Servicio técnico</label>
                                                                    </div>
                                                                    <div class="col-md-3">
                                                                        <input style="cursor:pointer" name="tipo_garantia" id="compra" value="co" type="radio" required>
                                                                        <label style="cursor:pointer" for="compra" class="form-check-label">Equipo vendido</label>
                                                                    </div>
                                                                    
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class='col-md-6'>
                                                    <div class="form-group">
                                                        <div class="row">
                                                            <div class="col-md-6">
                                                                <canvas id="patternCanvas" name='patternCanvas' width="230" height="230"></canvas>
                                                            </div>
                                                            
                                                            <div class="col-md-6">
                                                                <div class="form-group">
                                                                    <div class="row">
                                                                        <div class="col-md-12">
                                                                            <label for="pin">PIN o Clave</label>
                                                                            <input  type="text" class="form-control" id="pin" name="pin" placeholder="Ingrese PIN">
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="form-group">
                                                                    <div class="row">
                                                                        <div class="col-md-12" style='text-align:left !important'>
                                                                            <label >No tiene seguridad</label>
                                                                            <input style='cursor:pointer'  type="checkbox" class="form-control col-md-1" id="notiene_clave" name="notiene_clave">
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                              
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        
                                        </div>
                                        <div class="card-footer" id="btn_footer">
                                            <button type="submit" class="btn btn-color"> <i class="fa fa-save"></i> Registrar orden</button>
                                        </div>
                                    </form>
                                </div>
                                <div id='div_result' style='display:none'>
                                        <div class='col-md-12' align='center'>
                                            <div  id='img_qr'>

                                            </div>
                                        </div>
                                </div>
                           
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
    </div>

    <!-- Modal clientes -->
    <div class="modal fade" id="modal_clientes" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" data-bs-backdrop="static" >
        <div class="modal-dialog  modal-dialog-scrollable modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel"><i class='fa fa-user'></i> Registro de clientes</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" data-bs-dismiss="modal">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="form_clientes" style='font-size:12px'  method="POST" enctype="multipart/form-data">
                        {{ csrf_field() }}
                        <div class="card-body">
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-4">
                                        <label for="cedula">Cédula *</label>
                                        <input type="text" class="form-control" id="cedula_clientes" name="cedula_clientes" placeholder="Ingrese cédula" required>
                                    </div>
                                    
                                    <div class="col-md-8">
                                        <label for="nombre">Nombre y apellidos *</label>
                                        <input  type="text" class="form-control" id="nombres_clientes" name="nombres_clientes" placeholder="Ingrese nombre y apellidos" required>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-4">
                                        <label for="celular_clientes">Celular</label>
                                        <input type="text" class="form-control" id="celular_clientes" name="celular_clientes" placeholder="Ingrese celular" >
                                    </div>
                                    
                                    <div class="col-md-4">
                                        <label for="correo_clientes">Correo</label>
                                        <input  type="text" class="form-control" id="correo_clientes" name="correo_clientes" placeholder="Ingrese correo" >
                                    </div>
                                    <div class="col-md-4">
                                        <label for="direccion_clientes">Dirección</label>
                                        <input  type="text" class="form-control" id="direccion_clientes" name="direccion_clientes" placeholder="Ingrese direccion" >
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-12" >
                                        <label ></label>
                                        <button type="submit" class="btn btn-success"> <i class="fa fa-save"></i> Registrar cliente</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default cerrar_modal">Cerrar</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        const canvas = document.getElementById('patternCanvas');
        const ctx = canvas.getContext('2d');

        const circles = [];
        const radius = 20;
        const selectedCircles = [];
        let isDrawing = false;

        // Botón de limpiar
        const button = {
            x: canvas.width / 2 - 50,
            y: canvas.height - 30,
            width: 100,
            height: 25,
            text: "Limpiar",
        };

        // Crear puntos del patrón
        function createPattern() {
            const gap = canvas.width / 4; // Espacio entre círculos
            for (let row = 1; row <= 3; row++) {
                for (let col = 1; col <= 3; col++) {
                    const x = col * gap;
                    const y = row * gap;
                    circles.push({ x, y, selected: false });
                }
            }
        }

        // Dibujar el patrón inicial y el botón
        function drawPattern() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // Dibujar círculos
            circles.forEach((circle, index) => {
                ctx.beginPath();
                ctx.arc(circle.x, circle.y, radius, 0, Math.PI * 2);
                ctx.fillStyle = circle.selected ? '#4caf50' : '#ddd';
                ctx.fill();
                ctx.strokeStyle = '#333';
                ctx.stroke();

                // Dibujar números en el centro de cada círculo
                ctx.fillStyle = '#333'; // Color del número
                ctx.font = '16px Arial';
                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle';
                ctx.fillText(index + 1, circle.x, circle.y); // El número del círculo
            });

            // Dibujar líneas entre los círculos seleccionados
            if (selectedCircles.length > 1) {
                ctx.beginPath();
                ctx.moveTo(selectedCircles[0].x, selectedCircles[0].y);
                for (let i = 1; i < selectedCircles.length; i++) {
                    ctx.lineTo(selectedCircles[i].x, selectedCircles[i].y);
                }
                ctx.strokeStyle = '#4caf50';
                ctx.lineWidth = 3;
                ctx.stroke();
            }

            // Dibujar la secuencia de números seleccionados
            const sequence = selectedCircles.map(c => circles.indexOf(c) + 1).join('-');
            ctx.fillStyle = '#000'; // Color de la secuencia
            ctx.font = '18px Arial';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'top';
            ctx.fillText( sequence, canvas.width / 2, 10); // Coloca la secuencia en la parte superior

            // Dibujar botón de "Limpiar"
            ctx.fillStyle = '#4caf50'; // Color de fondo del botón
            ctx.fillRect(button.x, button.y, button.width, button.height); // Dibuja el fondo del botón
            ctx.fillStyle = '#fff'; // Color del texto del botón
            ctx.font = '16px Arial';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.fillText(button.text, button.x + button.width / 2, button.y + button.height / 2); // Texto del botón
        }

        // Verificar si el punto está dentro de un círculo
        function getCircleAtPoint(x, y) {
            return circles.find(circle => {
                const distance = Math.hypot(circle.x - x, circle.y - y);
                return distance < radius;
            });
        }

        // Verificar si el clic está sobre el botón
        function isClickOnButton(x, y) {
            return (
                x >= button.x &&
                x <= button.x + button.width &&
                y >= button.y &&
                y <= button.y + button.height
            );
        }

        // Eventos de interacción
        function handleStart(e) {
            e.preventDefault();
            const rect = canvas.getBoundingClientRect();
            const x = e.touches ? e.touches[0].clientX - rect.left : e.clientX - rect.left;
            const y = e.touches ? e.touches[0].clientY - rect.top : e.clientY - rect.top;

            if (isClickOnButton(x, y)) {
                // Si se hace clic en el botón, limpiar el patrón
                circles.forEach(circle => (circle.selected = false));
                selectedCircles.length = 0;
                drawPattern();
                return;
            }

            isDrawing = true;
            const circle = getCircleAtPoint(x, y);
            if (circle && !circle.selected) {
                circle.selected = true;
                selectedCircles.push(circle);
                drawPattern();
            }
        }

        function handleMove(e) {
            if (isDrawing) {
                const rect = canvas.getBoundingClientRect();
                const x = e.touches ? e.touches[0].clientX - rect.left : e.clientX - rect.left;
                const y = e.touches ? e.touches[0].clientY - rect.top : e.clientY - rect.top;

                const circle = getCircleAtPoint(x, y);
                if (circle && !circle.selected) {
                    circle.selected = true;
                    selectedCircles.push(circle);
                    drawPattern();
                }
            }
        }

        function handleEnd() {
            isDrawing = false;
            console.log('Patrón:', selectedCircles.map(c => circles.indexOf(c) + 1).join('-'));
        }

        // Agregar eventos para dispositivos móviles y de escritorio
        canvas.addEventListener('mousedown', handleStart);
        canvas.addEventListener('mousemove', handleMove);
        canvas.addEventListener('mouseup', handleEnd);

        canvas.addEventListener('touchstart', handleStart);
        canvas.addEventListener('touchmove', handleMove);
        canvas.addEventListener('touchend', handleEnd);

        // Inicialización
        createPattern();
        drawPattern();
    </script>
    <script src="{{asset('js/gestiones/ordenes/index.js?v='.rand())}}"></script>

@endsection