@extends('layouts.dashboard')

@section('dashboard')

<ul class="breadcrumb m-0 p-0">
    <li><a href="/dashboard">Home</a></li>
    <li><strong>Orden de compra N° </strong>{{$ordenDeCompra->folio_interno}}</li>
</ul>

<div class="row align-items-center mb-4">
    <div class="col-md-auto">
        <h1 class="titulo-h1 mb-0">Orden de compra N° {{$ordenDeCompra->folio_interno}}</h1>
    </div>
</div>


<div class="card">
    <div class="card-body text-center">
        @php
            $estado = $ordenDeCompra->estado;
            $claseEstado = match($estado) {
                'pendiente' => 'badge-warning',
                'rechazada', 'anulada' => 'badge-danger',
                default => 'badge-success',
            };
        @endphp

        {{-- badge text-white py-2 px-3 rounded-0 font-weight-normal p-075 --}}

        <span id="span-estado" class="badge {{ $claseEstado }} text-white py-2 px-3 rounded-0 font-weight-normal p-075 text-capitalize" style="font-size: 14px;">
            {{ $estado }}
        </span>
        {{-- <span class="badge badge-success text-white py-2 px-3 rounded-0 font-weight-normal p-075">Aceptado</span> --}}
                                               
    </div>
</div>

<div class="card mt-3" >
    <div class="card-body">
        <div class="row justify-content-center">
            <div class="col-12 text-center">
                <div class="row justify-content-center">
                    <div class="col-auto">
                        <a href="{{ route('orden-de-compra') }}" target="_blank" class="btn btn-success btn-sm"> Nuevo +</a>
                    </div>
                    <div class="col-auto">
                        <button type="button" onclick="abrirModalEnviarCorreo({{ $ordenDeCompra->id }})" class="btn btn-info btn-sm"> Enviar a correo electronico</a>
                    </div>
                    <div class="col-auto">
                        <a href="{{ route('descargar-pdf-orden-de-compra', ['id' => $ordenDeCompra->id]) }}" class="btn btn-danger btn-sm" target="_blank">
                            Descargar PDF
                        </a>
                    </div>
                    <div class="col-auto">
                        <button onclick="abrirModalActualizarEstado({{$ordenDeCompra->id}})" type="button" class="btn btn-secondary btn-sm"> Actualizar estado</a>
                    </div>
                </div>
            </div>

            <div class="col-12 mt-3" id="iframe-pdf">
                <iframe src="{{ route('ver-pdf-orden-de-compra', ['id' => $ordenDeCompra->id]) }}" style="width:100%; height:700px;" frameborder="0" ></iframe>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    function abrirModalActualizarEstado(ordenDeCompraId){
        fetch("/dashboard/modal-actualizar-estado-orden-de-compra", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "X-CSRF-TOKEN": '{{ csrf_token() }}'
            },
            body: JSON.stringify({
                ordenDeCompraId: ordenDeCompraId,
                modalActualizarEstado: true
            })
        
        })
        .then(response => response.json())
        .then(data => {
            
            if(data.success){
                // Insertar el contenido en el modal
                document.getElementById("modal-ajax").innerHTML = data.viewModalActualizarEstado;
                const modalElement = document.getElementById("modal-subajax");
                const bootstrapModal = new bootstrap.Modal(modalElement, {
                    backdrop: "static"
                });
                bootstrapModal.show();
                $(".select2").select2();
            }
            
        
        })
        .catch(error => {
            console.error("Error al cargar el modal:", error);
        });
    }

    function editarEstadoOrdenDeCompra(ordenDeCompraId){

        var inputEstado = document.getElementById('estado-orden-de-compra');
        var estado      = inputEstado.value;

        var data = new URLSearchParams();
        data.append('ordenDeCompraId', ordenDeCompraId);
        data.append('estado', estado);

        modalCargando();
        //Enviar la solicitud fetch
        fetch('/dashboard/editar-estado-orden-de-compra', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                'X-CSRF-TOKEN': '{{ csrf_token() }}' //Añade el token CSRF para la protección contra ataques CSRF
            },
            body: data.toString()
        })
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json(); //Parsear la respuesta JSON
        })
        .then(data => {
            cerrarCargando();
            if (data.success) {
                
                simpleAlert(data.message);
                cerrarModal();

               cambiarEstadoOc(estado)

            } else {
                alert(data.message)
                console.log(data.error)
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Ocurrió un error al cargar la informacion. Por favor, inténtelo de nuevo.');
        });

        return false;
    }

    function abrirModalEnviarCorreo(ordenDeCompraId){

        fetch("/dashboard/modal-correo-orden-de-compra", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "X-CSRF-TOKEN": '{{ csrf_token() }}'
            },
            body: JSON.stringify({
                ordenDeCompraId: ordenDeCompraId,
                modalCorreo: true
            })
        
        })
        .then(response => response.json())
        .then(data => {
            
            if(data.success){
                // Insertar el contenido en el modal
                
                
                document.getElementById("modal-ajax").innerHTML = data.viewModalCorreo;
                const modalElement = document.getElementById("modal-subajax");
                const bootstrapModal = new bootstrap.Modal(modalElement, {
                    backdrop: "static"
                });
                bootstrapModal.show();
                $(".select2").select2();
                $(".jqte-test").jqte();
            }
            
        
        })
        .catch(error => {
            console.error("Error al cargar el modal:", error);
        });
    }

    function enviarCorreoOrdenDeCompra(ordenDeCompraId){

        var inputResponderA     = document.getElementById('responder-a');
        var responderA          = inputResponderA.value;

        var inputPara           = document.getElementById('para');
        var para                = inputPara.value;

        var inputAsunto         = document.getElementById('asunto');
        var asunto              = inputAsunto.value;

        var textAreaMensaje     = document.getElementById('mensaje');
        var mensaje             = textAreaMensaje.value;

        var data = new URLSearchParams();
        data.append('ordenDeCompraId', ordenDeCompraId);
        data.append('responderA', responderA);
        data.append('para', para);
        data.append('asunto', asunto);
        data.append('mensaje', mensaje);

        modalCargando();
        //Enviar la solicitud fetch
        fetch('/dashboard/enviar-correo-orden-de-compra', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                'X-CSRF-TOKEN': '{{ csrf_token() }}' //Añade el token CSRF para la protección contra ataques CSRF
            },
            body: data.toString()
        })
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json(); //Parsear la respuesta JSON
        })
        .then(data => {
            cerrarCargando();
            if (data.success) {
                
                simpleAlert(data.message);
                cerrarModal();
                cambiarEstadoOc('enviada')

               

            } else {
                alert(data.message)
                cerrarModal();
                console.log(data.error)
            }
        })
        .catch(error => {
            console.error('Error:', error);
            cerrarCargando();
            cerrarModal();
            alert('Ocurrió un error al cargar la informacion. Por favor, inténtelo de nuevo.');
        });

        return false;
    }

    function cambiarEstadoOc(estado){

        const span = document.querySelector('#span-estado');
        span.className = 'badge text-white py-2 px-3 rounded-0 font-weight-normal p-075 text-capitalize'; 
        if (['rechazada', 'anulada'].includes(estado)) {
            span.classList.add('badge-danger');
        } else if (estado === 'pendiente') {
            span.classList.add('badge-warning');
        } else {
            span.classList.add('badge-success');
        }

        span.textContent = estado;
    }
</script>
@endsection