@extends('voyager::master')

@section('page_title', 'Crear nota')

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

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

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

        .table-add {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
        }

        .table-add th,
        .table-add td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }

        .table-add th {
            background-color: #f2f2f2;
        }

        input[type="text"],
        select {
            width: 200px;
            padding: 6px;
            margin-right: 5px;
            box-sizing: border-box;
        }

        input[type="number"] {
            width: 60px;
            padding: 6px;
            box-sizing: border-box;
        }

        .button-container {
            margin-top: 10px;
        }

        .button-container button {
            padding: 8px 16px;
            margin-right: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }
    </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/crear_nota_de_venta.webp') }}" alt="">
            <h1 class="page-title">
                Crear nota de venta
            </h1>
        </div>
    </div>
@stop

@section('content')
    <div class="page-content container-fluid">
        @include('voyager::alerts')
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-bordered">
                    <div class="panel-body">
                        <table id="dataTable" class="table table-hover">
                            <thead>
                                <tr>
                                    <th style="width: 10%;">Datos de cliente</th>
                                    <th></th>
                                    <th style="width: 15%;">Datos de la operación</th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Cliente:</td>
                                    <td>

                                        <select name="cliente" id="cliente-select">
                                            <option value="">Seleccionar Cliente</option>
                                            @foreach ($clientes as $cliente)
                                                <option value="{{ $cliente->id }}"
                                                    data-precio="{{ $cliente->lista_precios }}"
                                                    {{ $cliente && $cliente->id == $cliente->id ? 'selected' : '' }}>
                                                    {{ $cliente->fantasia_name }}
                                                </option>
                                            @endforeach
                                        </select>

                                    </td>
                                    <td>Lista de precios</td>
                                    <td>
                                        <select name="lista_precios" id="lista-precios-select">
                                            <option value="">Seleccionar Lista</option>
                                            <option value="1"
                                                {{ $cliente && $cliente->lista_precios == 1 ? 'selected' : '' }}>
                                                Lista 1</option>
                                            <option value="2"
                                                {{ $cliente && $cliente->lista_precios == 2 ? 'selected' : '' }}>
                                                Lista 2</option>
                                            <option value="3"
                                                {{ $cliente && $cliente->lista_precios == 3 ? 'selected' : '' }}>
                                                Lista 3</option>
                                            <option value="4"
                                                {{ $cliente && $cliente->lista_precios == 4 ? 'selected' : '' }}>
                                                Lista 4</option>
                                        </select>
                                    </td>
                                    <td></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>DNI:</td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>Cond IVA:</td>
                                    <td>Consumidor Final</td>
                                </tr>
                            </tbody>
                        </table>
                        <div>
                            <form action="/guardar-datos" method="POST">
                                @csrf
                                <input type="hidden" name="cliente_id" id="cliente_id"
                                    value="{{ $cliente ? $cliente->id : '' }}">
                                <input type="hidden" name="lista_precios" id="lista_precios"
                                    value="{{ $cliente ? $cliente->lista_precios : '' }}">
                                <button type="submit" class="btn btn-primary">Siguiente</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            const clienteSelect = $('#cliente-select');
            const listaPreciosSelect = $('#lista-precios-select');
            const clienteIdInput = $('#cliente_id');
            const listaPreciosInput = $('#lista_precios');

            clienteSelect.change(function() {
                const selectedOption = $(this).find('option:selected');
                const listaPrecio = selectedOption.data('precio');

                // Setea el valor del select de lista de precios según el cliente seleccionado
                listaPreciosSelect.val(listaPrecio);

                // Setea los valores de los inputs hidden
                clienteIdInput.val($(this).val());
                listaPreciosInput.val(listaPreciosSelect.val());
            });

            listaPreciosSelect.change(function() {
                // Actualiza el input hidden cuando el usuario cambie manualmente la lista de precios
                listaPreciosInput.val($(this).val());
            });
        });
    </script>

@endsection