@push('js')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        initCanvas();
    });


    Livewire.on('init-canvas', function(target){
        initCanvas();
        console.log('init-canvas');
    });

    function sleep(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
    }

    Livewire.on('guardar-firma', function(target){
        const canvas = document.getElementById('drawingCanvas');
        const dataUrl = canvas.toDataURL('image/png');
        window.Livewire.dispatch('saveSign', [dataUrl]);
    });

    function cleanCanvas(){
        console.log('cleanCanvas');
        const canvas = document.getElementById('drawingCanvas');
        const ctx = canvas.getContext('2d');
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        initCanvas();
    }

    function initCanvas(){
        const canvas = document.getElementById('drawingCanvas');
        if (!canvas){
            console.log('No existe el canvas');
            return;
        }
        const ctx = canvas.getContext('2d');

        // Ajusta el tamaño del canvas
        // canvas.width = window.innerWidth * 0.5;
        // canvas.height = window.innerHeight * 0.5;
        canvas.height = 350;
        canvas.width = 600;

        // Variables para el dibujo
        let drawing = false;

        function startDrawing(e) {
            e.preventDefault(); // Previene el comportamiento predeterminado
            drawing = true;
            draw(e); // Llama a la función draw para comenzar a dibujar de inmediato
        }

        function stopDrawing(e) {
            e.preventDefault(); // Previene el comportamiento predeterminado
            drawing = false;
            ctx.beginPath(); // Comienza un nuevo trazo
        }

        function getEventPosition(e) {
            const rect = canvas.getBoundingClientRect();
            return {
                x: e.clientX !== undefined ? e.clientX - rect.left : e.touches[0].clientX - rect.left,
                y: e.clientY !== undefined ? e.clientY - rect.top : e.touches[0].clientY - rect.top
            };
        }

        function draw(e) {
            if (!drawing) return;

            e.preventDefault(); // Previene el comportamiento predeterminado
            ctx.lineWidth = 3;
            ctx.lineCap = 'round';
            ctx.strokeStyle = 'black';

            const {
                x,
                y
            } = getEventPosition(e);

            ctx.lineTo(x, y);
            ctx.stroke();
            ctx.beginPath();
            ctx.moveTo(x, y);
        }

        function downloadCanvas() {
            // const link = document.createElement('a');
            // link.href = canvas.toDataURL('image/png');
            // link.download = 'canvas-image.png';
            // link.click();

            const dataUrl = canvas.toDataURL('image/png');
            window.Livewire.dispatch('setCanvas', dataUrl);

        }

        async function saveCanvas() {
            const dataUrl = canvas.toDataURL('image/png');
            const response = await fetch('https://your-api-endpoint.com/save-image', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    image: dataUrl
                })
            });

            if (response.ok) {
                alert('Imagen guardada exitosamente!');
            } else {
                alert('Error al guardar la imagen.');
            }
        }

        // Event Listeners
        canvas.addEventListener('mousedown', startDrawing);
        canvas.addEventListener('mouseup', stopDrawing);
        canvas.addEventListener('mousemove', draw);

        canvas.addEventListener('touchstart', startDrawing);
        canvas.addEventListener('touchend', stopDrawing);
        canvas.addEventListener('touchmove', draw);
    }


</script>
@endpush

<div class="p-5 mx-5">

    @push('css')
        <link rel="stylesheet" href="{{ asset('vendor/ion-range-slider/css/ion.rangeSlider.min.css') }}">
        <style>
            .layer {
                align-items: center;
                justify-content: center;
                /* margin: 10px; */
                /* height: 70vh; */
            }

            h1 {
                margin-bottom: 20px;
            }

            canvas {
                border: 1px solid #000;
                /* width: 100%; */
                /* height: 60vh; */
            }
        </style>
    @endpush








    <div class="row">
        <div class="col-sm-8">
          <div class="layer">
            <center>
              <h2 class="text-center">Firma: {{$this->entrada->cliente->nombre}}</h2>
              <div wire:ignore>
                <canvas id="drawingCanvas"></canvas>
              </div>
              <br>
              <a href="/servicios/inventarios/{{$this->inventario->id}}/tomar-fotos" class="btn btn-lg btn-warning"><i class="fa fa-camera"></i> Fotos ({{$this->entrada->photos->count()}})</a>
              <button class="ml-3 btn btn-lg btn-secondary" onclick="cleanCanvas()"><i class="fa fa-eraser"></i> Limpiar Firma</button>
              <button wire:click="guardarFirma" class="ml-3 btn btn-lg btn-success"><i class="fa fa-check"></i> Aceptar</button>


            </center>
          </div>
        </div>

        <div class="col-sm-4">
          @php
            $inv = json_decode($this->entrada->inventario->inventario);
            $testigos = json_decode($this->entrada->inventario->testigos);
          @endphp
          <h3 class="mt-5 mb-4"><u>Inventario: {{$this->entrada->vehiculo}}</u></h3>
          <h3 class="mb-4">Estereo: {{$inv->estereo}}</h3>
          <h3 class="mb-4">Tapetes: {{$inv->tapetes}}</h3>
          <h3 class="mb-4">Parabrisas: {{$inv->parabrisas}}</h3>
          <h3 class="mb-4">Gato: {{$inv->gato}}</h3>
          <h3 class="mb-4">Extra: {{$inv->extra}}</h3>
          <h3 class="mb-4">Herramientas: {{$inv->herramientas}}</h3>
          <h3 class="mb-4">Cables: {{$inv->cables}}</h3>
        </div>
    </div>

    <div class="row">
        <div class="col">
            <h3 class="mt-5 mb-4"><u>Fotos</u></h3>
            @foreach ($this->entrada->photos as $item)
                <img style="width: 200px; height: 150px;" src="{{$item->url}}" alt="" class="img-fluid">
            @endforeach

        </div>
    </div>



</div>