@extends('voyager::master')

@section('page_title', 'Facturar')

@section('head')
    <style>
        .table-1.table-hover>tbody>tr:hover {
            background-color: initial !important;
        }

        .voyager .table-1.table>thead>tr>th {
            background-color: #e6e6e6 !important;
        }

        .table-1.table>tbody>tr>td {
            border-top: none;
        }

        .cantInput input {
            width: 50px;
        }

        .precioInput input {
            width: 120px;
        }

        .bonifInput input {
            width: 40px;
        }

        .discount-container {
            width: 100%;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ddd;
            background-color: #f9f9f9;
        }

        .header {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }

        .header .icon {
            width: 24px;
            height: 24px;
            margin-right: 10px;
        }

        h3 {
            font-size: 18px;
            margin: 0;
        }

        .discount-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 15px;
        }

        .discount-row label {
            font-size: 14px;
            flex: 1;
        }

        .discount-row input {
            width: 50px;
            padding: 5px;
            text-align: right;
            border: 1px solid #ddd;
            border-radius: 4px;
            margin-right: 5px;
        }

        .discount-row span {
            font-size: 14px;
        }

        .button-container {
            display: flex;
            justify-content: space-between;
        }

        .btn-close {
            background-color: #337ab7;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .btn-close:hover {
            background-color: #286090;
        }

        .btn-edit {
            background-color: #5cb85c;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .btn-edit:hover {
            background-color: #4cae4c;
        }



        /* Estilos para el loader */
        #loader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.8);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }

        .spinner {
            border: 4px solid rgba(0, 0, 0, 0.1);
            width: 36px;
            height: 36px;
            border-radius: 50%;
            border-top-color: #000;
            animation: spin 1s ease-in-out infinite;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }
    </style>
@endsection

@section('page_header')
    <div class="d-flex justify-between items-center">
        <div class="d-flex header-title">
            <img src="{{ voyager_asset('images/iconos/nota_venta.webp') }}" alt="">
            <h1 class="page-title">
                Facturar nota de venta: {{ $nota->numero_nota }} (06/08/2024)
            </h1>
        </div>
    </div>
@stop

@section('content')
    <div class="page-content container-fluid">
        @include('voyager::alerts')
        <div class="row">
            <div class="col-md-12">
                <form id="facturaForm" method="POST" action="/facturar-sin-iva/{{ $nota->id }}">
                    @csrf
                    <input type="hidden" name="pedido" id="pedido" value="{{ $nota->id }}">
                    <div class="panel panel-bordered">
                        <div class="panel-body">
                            <div class="card" style="margin-bottom: 10px;">
                                <div class="card-header">
                                    <h5>Facturar nota de venta: {{ $nota->numero_nota }}
                                        ({{ $nota->created_at->format('d/m/Y') }})</h5>
                                </div>
                            </div>
                            <table id="dataTable" class="table table-hover table-1">
                                <thead>
                                    <tr>
                                        <th style="width: 10%;">Datos del cliente:</th>
                                        <th></th>
                                        <th style="width: 15%;">Datos de la operación</th>
                                        <th></th>
                                        <th>Datos de facturación</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td style="font-weight: bold;">Cliente:</td>
                                        <td>{{ $nota->name }}</td>
                                        <td style="font-weight: bold;">Estado: </td>
                                        <td>Ingresada</td>
                                        <td style="font-weight: bold;">Talonario: </td>
                                        <td>
                                            Talonario electronico
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="font-weight: bold;">CUIT: </td>
                                        <td id="numeroDoc">{{ $usuario->numero_doc_cuit }}</td>
                                        <td style="font-weight: bold;">Vendedor: </td>
                                        <td>
                                            @if ($vendedor)
                                                [{{ $vendedor->id ? $vendedor->id : '' }}] {{ $vendedor->name }}
                                            @endif
                                        </td>
                                        <td style="font-weight: bold;">Lista: </td>
                                        <td>[2] Lista de precios (pendiente) (Pesos argentinos)</td>
                                    </tr>
                                    <tr>
                                        <td style="font-weight: bold;">Contacto: </td>
                                        <td>SUSANA RAQUEL MAYENFISCH</td>
                                        <td style="font-weight: bold;">Cond. entrega: </td>
                                        <td>[2] Entrega a domicilio</td>
                                        <td style="font-weight: bold;">Moneda: </td>
                                        <td>[1] Pesos argentinos</td>
                                    </tr>
                                    <tr>
                                        <td style="font-weight: bold;">Cond. IVA: </td>
                                        <td>{{ $usuario->cond_frente_iva }}</td>
                                        <td style="font-weight: bold;">Transporte: </td>
                                        <td>Transporte Interno</td>
                                        <td style="font-weight: bold;">¿Facturar con IVA?:</td>
                                        <td>
                                            <input type="checkbox" id="conIvaCheckbox" name="conIva" value="true">
                                        </td>
                                    </tr>
                                    <tr id="porcentajeRow" style="display: none;">
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td style="font-weight: bold;">Porcentaje en blanco:</td>
                                        <td>
                                            <select name="porcentaje" id="porcentaje">
                                                <option value="100">100%</option>
                                                <option value="75">75%</option>
                                                <option value="50">50%</option>
                                                <option value="25">25%</option>
                                            </select>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>

                            {{-- <table id="dataTable" class="table table-hover table-1">
                                <thead>
                                    <tr>
                                        <th style="width: 10%;">
                                            <input type="checkbox" name="generarRemito" id="generarRemito">
                                            Generar remito
                                        </th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td style="font-weight: bold;">Domicilio:</td>
                                        <td>Carga manual</td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td style="font-weight: bold;">Dirección: </td>
                                        <td>Lavalle 2172 - Ciudad Autónoma de Buenos Aires (1051) Ciudad Autónoma de Buenos
                                            Aires</td>
                                        <td style="font-weight: bold;">Fecha de entrega: </td>
                                        <td>06/08/2024 de 00:00 a 00:00
                                        </td>
                                    </tr>
                                </tbody>
                            </table> --}}
                            <div>
                                <a href="/admin/nota-de-venta/{{ $nota->id }}" class="btn btn-danger">
                                    Cancelar
                                </a>
                                <button type="button" class="btn btn-success" data-toggle="modal"
                                    data-target="#confirmModal">
                                    Generar
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
                <!-- Loader -->
                <div id="loader" style="display:none;">
                    <div class="spinner"></div>
                    <p>Procesando, por favor espera...</p>
                </div>

                <!-- Modal de confirmación -->
                <div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-labelledby="confirmModalLabel"
                    aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="confirmModalLabel">Confirmar facturación</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                ¿Estás seguro de que deseas proceder con la facturación de esta nota de venta?
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                                <button type="button" class="btn btn-primary" id="confirmButton">Confirmar</button>
                            </div>
                        </div>
                    </div>
                </div>

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

    <script>
        document.getElementById('conIvaCheckbox').addEventListener('change', function() {
            const isChecked = this.checked;
            const porcentajeRow = document.getElementById('porcentajeRow');
            const form = document.getElementById('facturaForm');

            if (isChecked) {
                porcentajeRow.style.display = 'table-row';
                form.action = "/facturar/{{ $nota->id }}";
            } else {
                porcentajeRow.style.display = 'none';
                form.action = "/facturar-sin-iva/{{ $nota->id }}";
            }
        });

        // Validación del número de documento o CUIT
        const cuit = "{{ $usuario->numero_doc_cuit }}";
        const conIvaCheckbox = document.getElementById('conIvaCheckbox');
        if (cuit === "20-22-2") {
            conIvaCheckbox.disabled = true;
        }

        // Mostrar el loader al enviar el formulario
        document.getElementById('confirmButton').addEventListener('click', function() {
            document.getElementById('loader').style.display = 'flex';
            document.getElementById('facturaForm').submit();
        });
    </script>
@endsection


{{-- <table id="dataTable" class="table table-hover table-1">
                                <thead>
                                    <tr>
                                        <th style="width: 10%;">
                                            <input type="checkbox" name="generarRemito" id="generarRemito">
                                            Generar remito
                                        </th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td style="font-weight: bold;">Domicilio:</td>
                                        <td>Carga manual</td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td style="font-weight: bold;">Dirección: </td>
                                        <td>Lavalle 2172 - Ciudad Autónoma de Buenos Aires (1051) Ciudad Autónoma de Buenos
                                            Aires</td>
                                        <td style="font-weight: bold;">Fecha de entrega: </td>
                                        <td>06/08/2024 de 00:00 a 00:00
                                        </td>
                                    </tr>
                                </tbody>
                            </table> --}}