@extends('voyager::master')

@section('page_title', 'Listado de Clientes')

@section('head')
    <style>
        .tab-pane h2 {
            color: #657686 !important;
            font-size: 1.3rem;
        }

        hr {
            margin: 7px !important;
        }

        tr {
            border-bottom: 1px solid #6576863f;
        }

        p {
            margin: 5px 0px;
        }

        table {
            width: 100%;
        }

        .td-bold {
            font-weight: bold;
        }

        h3 {
            margin-bottom: 0px !important;
        }

        td {
            width: 50%;
        }

        .act-disp {
            gap: 10px;
            padding: 10px;
            border: 1px solid #ccc;
        }

        .act-disp:hover {
            background: #cfd9e2;
        }

        input {
            margin: 7px 0px;
            border: 1px solid #657686 !important;
        }
    </style>
@endsection

@section('page_header')
    <h1 class="page-title">
        <img src="{{ voyager_asset('images/iconos/reg_cobranza.webp') }}" alt="">
        Registro de cobranza (imputación):
    </h1>
@stop

@section('content')
    <div class="page-content container-fluid">
        @include('voyager::alerts')
        <div class="row">
            <div class="col-md-12">

                <div class="col-md-6">
                    <form action="/cliente/reg-cobranza" method="POST">
                        @csrf
                        <div class="panel panel-bordered">
                            <div class="panel-body tab-pane">
                                <!-- Datos de cuenta -->
                                <table>
                                    <thead>
                                        <tr>
                                            <th>
                                                <h2>Datos de cuenta</h2>
                                            </th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td class="td-bold">
                                                <p>Cliente:</p>
                                            </td>
                                            <td>
                                                <p>{{ $cliente->name }}</p>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="td-bold">
                                                <p>Saldo cta cte:</p>
                                            </td>
                                            <td>
                                                <p>$ {{ number_format($cliente->saldo, 2, ',', '.') }}</p>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="td-bold">
                                                <p>Cobrador:</p>
                                            </td>
                                            <td>
                                                <select name="vendedor_id" id="vendedor_id">
                                                    <option value="">Seleccionar vendedor</option>
                                                    @foreach ($vendedores as $vendedor)
                                                        <option value="{{ $vendedor->id }}">{{ $vendedor->name }}</option>
                                                    @endforeach
                                                </select>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>

                                <!-- Forma de cobro -->
                                <table style="margin-top: 50px;">
                                    <thead>
                                        <tr>
                                            <th>
                                                <h2>Registro de valores recibidos</h2>
                                            </th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td class="td-bold">
                                                <p>Forma de cobro:</p>
                                            </td>
                                            <td>
                                                <select name="forma_cobro" id="forma_cobro"
                                                    onchange="handleFormaCobroChange()">
                                                    <option value="">Seleccionar</option>
                                                    <option value="efectivo">Efectivo</option>
                                                    <option value="transferencia">Deposito / Transferencia bancaria</option>
                                                    <option value="cheque">Cheque</option>
                                                    <option value="electronico">Electrónico</option>
                                                </select>
                                            </td>
                                        </tr>

                                        <!-- Campos adicionales para Transferencia y Cheque -->
                                        <tr id="tr_nro_comprobante" style="display:none;">
                                            <td class="td-bold">
                                                <p>Nro. comprobante:</p>
                                            </td>
                                            <td>
                                                <input type="text" name="nro_comprobante" id="nro_comprobante">
                                            </td>
                                        </tr>
                                        <tr id="tr_fecha_deposito" style="display:none;">
                                            <td class="td-bold">
                                                <p>Fecha de depósito:</p>
                                            </td>
                                            <td>
                                                <input type="date" name="fecha_deposito" id="fecha_deposito">
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="td-bold">
                                                <p>Importe:</p>
                                            </td>
                                            <td>
                                                <input type="text" name="importe" id="importe">
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="td-bold">
                                                <p>Observaciones:</p>
                                            </td>
                                            <td>
                                                <textarea name="observaciones" id="observaciones" cols="40" rows="5" style="resize: none;"></textarea>
                                                
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>

                                <!-- Datos del cheque -->
                                <table id="table_cheque" style="margin-top: 50px; display:none;">
                                    <thead>
                                        <tr>
                                            <th>
                                                <h2>Datos del cheque</h2>
                                            </th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td class="td-bold">
                                                <p>Banco:</p>
                                            </td>
                                            <td>
                                                <input type="text" name="banco" id="banco">
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="td-bold">
                                                <p>Número de cheque:</p>
                                            </td>
                                            <td>
                                                <input type="text" name="numero_cheque" id="numero_cheque">
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="td-bold">
                                                <p>Fecha de emisión:</p>
                                            </td>
                                            <td>
                                                <input type="date" name="fecha_emision" id="fecha_emision">
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="td-bold">
                                                <p>CUIT:</p>
                                            </td>
                                            <td>
                                                <input type="text" name="cuit" id="cuit">
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="td-bold">
                                                <p>Firmante:</p>
                                            </td>
                                            <td>
                                                <input type="text" name="firmante" id="firmante">
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="td-bold">
                                                <p>Es a la orden?</p>
                                            </td>
                                            <td>
                                                <input type="checkbox" name="es_a_la_orden" id="es_a_la_orden">
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                <input type="hidden" name="cliente_id" id="cliente_id" value="{{$cliente->id}}">
                                <div>
                                    <a href="" class="btn btn-primary">Volver</a>
                                    <button class="btn btn-success">Guardar</button>
                                </div>
                            </div>
                        </div>
                    </form>

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

    <script>
        function handleFormaCobroChange() {
            var formaCobro = document.getElementById("forma_cobro").value;

            document.getElementById("tr_nro_comprobante").style.display = (formaCobro === "transferencia" || formaCobro ===
                "electronico") ? "" : "none";
            document.getElementById("tr_fecha_deposito").style.display = (formaCobro !== "") ? "" : "none";
            document.getElementById("table_cheque").style.display = (formaCobro === "cheque") ? "" : "none";
        }
    </script>
@endsection