@extends("admin.layout.layout")

@section("styles")
    @php
        $titulo = "Estudiante foto";
        $modulo = "Estudiantes";
        $vista="Subir foto $estudiante->identificacion";
    @endphp
    <title>{{getenv("APP_NAME")}} | {{$titulo }} {{$vista}}</title>
@endsection

@section("contenido")
    @include("estudiante.perfil.components.header")
    <div class="row g-5 g-xxl-12">
        <div class="col-xl-12">
            <div class="card mb-5 mb-xxl-12">
                <div class="card-body pb-0">
                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <h4>El registro tiene los siguientes errores.</h4>
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                    @if (session('success'))
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            <strong>{{ session('success') }}</strong>
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    @endif
                    <form class="form" action="{{route("admin::estudiantes.foto.subir",$estudiante->id)}}" method="post" id="frmFoto" enctype="multipart/form-data">
                        @csrf

                        <!-- Selector para elegir entre cámara o archivo -->
                        <div class="mb-3">
                            <label for="inputOption" class="form-label">Seleccionar método:</label>
                            <select class="form-select" id="inputOption" name="option">
                                <option value="">Seleccionar origen...</option>
                                <option value="camera">Usar cámara web</option>
                                <option value="upload">Subir foto</option>
                            </select>
                        </div>

                        <!-- Contenedor para la cámara -->
                        <div id="cameraContainer" style="display: none">
                            <div class="video-wrap">
                                <video id="video" playsinline autoplay></video>
                            </div>
                            <button id="snap" class="btn btn-light-primary" type="button">Tomar foto</button>
                        </div>

                        <!-- Contenedor para subir archivo -->
                        <div id="uploadContainer" style="display: none;">
                            <input type="file" class="form-control" id="fileInput" name="file" accept="image/*" capture="camera">
                        </div>

                        <div class="text-center mt-5 pt-5 border-top border-secondary" id="diVCanvas" style="display: none">
                            <canvas style="display: none" id="blank" width="1024" height="768"></canvas>
                            <canvas id="canvas" width="1024" height="768" class="border border-secondary"></canvas>
                        </div>

                        <div class="d-flex justify-content-center py-5">
                            <button class="button btn btn-success" id="btn_submit" type="submit"> <i class="ki-solid ki-save-2"></i> Subir foto ahora</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section("scripts")
    <script>
        $(document).ready(function () {
            var video = document.getElementById('video');
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');
            var snapButton = document.getElementById('snap');
            var optionSelector = document.getElementById('inputOption');
            var cameraContainer = document.getElementById('cameraContainer');
            var uploadContainer = document.getElementById('uploadContainer');
            var diVCanvas = document.getElementById('diVCanvas');

            // Alternar entre cámara y subida de archivo
            optionSelector.addEventListener('change', function () {
                if (this.value === 'camera') {
                    cameraContainer.style.display = 'block';
                    uploadContainer.style.display = 'none';
                    diVCanvas.style.display = 'block';

                    // Activar la cámara
                    navigator.mediaDevices.getUserMedia({ video: true })
                        .then(function (stream) {
                            video.srcObject = stream;
                        })
                        .catch(function (error) {
                            console.error('Error al acceder a la cámara:', error);
                        });
                } else {
                    cameraContainer.style.display = 'none';
                    uploadContainer.style.display = 'block';
                    diVCanvas.style.display = 'none';
                    //borrar canva
                    context.clearRect(0, 0, canvas.width, canvas.height);

                    // Detener la cámara si estaba activa
                    if (video.srcObject) {
                        let tracks = video.srcObject.getTracks();
                        tracks.forEach(track => track.stop());
                        video.srcObject = null;
                    }
                }
            });

            // Capturar foto desde la cámara
            snapButton.addEventListener('click', function () {
                context.drawImage(video, 0, 0, canvas.width, canvas.height);
                canvas.style.display = 'block';
                video.style.display = 'none';
            });

            // Enviar formulario con la opción seleccionada
            $(document).on('submit', '#frmFoto', function (e) {
                e.preventDefault();

                var form_data = new FormData(this);

                if (optionSelector.value === 'camera') {
                    var foto = canvas.toDataURL();
                    form_data.append("foto", foto);
                }

                $.ajax({
                    url: this.action,
                    method: $(this).attr('method'),
                    data: form_data,
                    dataType: "json",
                    contentType: false,
                    processData: false,
                })
                    .done(function (response) {
                        location.reload();
                    })
                    .fail(function (error) {
                        let html = '';
                        $.each(error.responseJSON.errors, function (key, value) {
                            html += '<li>' + value + '</li>';
                        });
                        swal.fire({
                            icon: 'error',
                            title: 'Ocurrió un error',
                            html: html,
                        });
                    });
            });
        });
    </script>
@endsection