@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;
        }
    </style>
@endsection


@section('page_header')
    <h1 class="page-title">
        <img src="{{ voyager_asset('images/iconos/clientes.webp') }}" alt="">
        {{ isset($cliente->fantasia_name) ? $cliente->fantasia_name : '' }}

    </h1>
@stop



@section('content')
    <div class="page-content container-fluid">
        @include('voyager::alerts')
        @if (session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        @endif

        @if (session('error'))
            <div class="alert alert-danger">
                {{ session('error') }}
            </div>
        @endif

        <div class="row">
            <div class="col-md-12">

                <div class="col-md-6">
                    <div class="panel panel-bordered">
                        <div class="panel-body">
                            <ul class="nav nav-tabs" id="productTabs" role="tablist">
                                <li class="nav-item active">
                                    <a class="nav-link active" id="general-tab" data-toggle="tab" href="#general"
                                        role="tab" aria-controls="general" aria-selected="true">Cliente</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="domicilios-tab" data-toggle="tab" href="#domicilios"
                                        role="tab" aria-controls="domicilios" aria-selected="false">Domicilios</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="usuarios-tab" data-toggle="tab" href="#usuarios" role="tab"
                                        aria-controls="usuarios" aria-selected="false">Usuarios</a>
                                </li>
                            </ul>
                            <div class="tab-content" id="productTabsContent">
                                <div class="tab-pane fade active in" id="general" role="tabpanel"
                                    aria-labelledby="general-tab">
                                    <div style="display: flex; justify-content: end;">
                                        <a href="/admin/cliente/{{ $cliente->id }}/edit" style="margin: 8px;">
                                            <img src="{{ voyager_asset('images/iconos/lapicito.webp') }}" alt="">
                                            Editar
                                        </a>
                                    </div>
                                    <table>
                                        <thead>
                                            <tr>
                                                <th>
                                                    <h2>Datos de cuenta</h2>
                                                </th>
                                                <th>

                                                </th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td class="td-bold">
                                                    <p>Código del cliente:</p>
                                                </td>
                                                <td>
                                                    <p>{{ $cliente->codigo_cliente ?? 'N/A'}}</p>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="td-bold">
                                                    <p>Tipo de relación:</p>
                                                </td>
                                                <td>
                                                    <p>{{ $cliente->tipo_relacion ?? 'No proporcionado' }}</p>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="td-bold">
                                                    <p>Tipo de cliente:</p>
                                                </td>
                                                <td>
                                                    <p>{{ $cliente->tipo_cliente ?? 'No proporcionado' }}</p>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="td-bold">
                                                    <p>Condición frente al IVA:</p>
                                                </td>
                                                <td>
                                                    <p>{{ $cliente->cond_frente_iva ?? 'No proporcionado' }}</p>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="td-bold">
                                                    <p>DNI/CUIT:</p>
                                                </td>
                                                <td>
                                                    <p>{{ $cliente->numero_doc_cuit ?? 'No proporcionado' }}</p>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="td-bold">
                                                    <p>Razón Social:</p>
                                                </td>
                                                <td>
                                                    <p>{{ $cliente->razon_social ?? 'No proporcionado' }}</p>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="td-bold">
                                                    <p>Nombre y apellido:</p>
                                                </td>
                                                <td>
                                                    <p>{{ $cliente->name ?? 'No proporcionado'}}</p>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>

                                    <table style="margin-top: 50px;">
                                        <thead>
                                            <tr>
                                                <th>
                                                    <h2>Datos Comerciales</h2>
                                                </th>
                                                <th>

                                                </th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td class="td-bold">
                                                    <p>Lista de precios:</p>
                                                </td>
                                                <td>
                                                    <p>Lista de precios {{ $cliente->lista_precios ?? 'no proporcionada'}}</p>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td class="td-bold">
                                                    <p>Vendedor Asignado:</p>
                                                </td>
                                                <td>
                                                    <p>{{ $cliente->vendedor->name ?? 'No proporcionado' }}</p>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td class="td-bold">
                                                    <p>Condición de venta:</p>
                                                </td>
                                                <td>
                                                    <p>{{ $cliente->condicion_venta ?? 'No proporcionado' }}</p>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="td-bold">
                                                    <p>Condición de entrega:</p>
                                                </td>
                                                <td>
                                                    <p>{{ $cliente->condicion_entrega ?? 'No proporcionado' }}</p>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>

                                    <table style="margin-top: 50px;">
                                        <thead>
                                            <tr>
                                                <th>
                                                    <h2>Cuenta corriente:</h2>
                                                </th>
                                                <th>

                                                </th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td class="td-bold">
                                                    <p>Saldo:</p>
                                                </td>
                                                <td>
                                                    <p>$ {{ number_format($cliente->saldo, 2, ',', '.') }}</p>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>

                                    <table style="margin-top: 50px;">
                                        <thead>
                                            <tr>
                                                <th>
                                                    <h2>Observaciones:</h2>
                                                </th>
                                                <th>

                                                </th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>
                                                    @if( $cliente->observaciones && $cliente->observaciones !== '')
                                                        <p>{{ $cliente->observaciones }}</p>
                                                    @else
                                                        <p>No proporcionada</p>
                                                    @endif
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>

                                <div class="tab-pane fade" id="domicilios" role="tabpanel" aria-labelledby="domicilios-tab">
                                    <table>
                                        <thead>
                                            <tr>
                                                <th>
                                                    <h2>Domicilio Fiscal</h2>
                                                </th>
                                                <th></th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td class="td-bold"><label for="direccion_fiscal">Dirección:</label>
                                                </td>
                                                <td>{{ $cliente->direccion ?? 'No proporcionado'}}</td>
                                            </tr>
                                            <tr>
                                                <td class="td-bold"><label for="localidad_fisc">Localidad:</label>
                                                </td>
                                                <td>{{ $cliente->localidad ?? 'No proporcionado'}}</td>
                                            </tr>
                                            <tr>
                                                <td class="td-bold"><label for="cod_postal_fisc">Código postal:</label></td>
                                                <td>{{ $cliente->cod_postal ?? 'No proporcionado' }}</td>
                                            </tr>
                                            <tr>
                                                <td class="td-bold"><label for="provincia_fisc">Provincia:</label>
                                                </td>
                                                <td>{{ $cliente->provincia ?? 'No proporcionado' }}</td>
                                            </tr>
                                        </tbody>
                                    </table>

                                    <table style="margin-top: 50px;">
                                        <thead>
                                            <tr>
                                                <th>
                                                    <h2>Domicilio Comercial</h2>
                                                </th>
                                                <th></th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td class="td-bold"><label for="direccion">Dirección:</label></td>
                                                <td>{{ $cliente->direccion_fiscal ?? 'No proporcionado' }}</td>
                                            </tr>
                                            <tr>
                                                <td class="td-bold"><label for="localidad">Localidad:</label></td>
                                                <td>{{ $cliente->localidad_fisc ?? 'No proporcionado' }}</td>
                                            </tr>
                                            <tr>
                                                <td class="td-bold"><label for="cod_postal">Código postal:</label>
                                                </td>
                                                <td>{{ $cliente->cod_postal_fisc ?? 'No proporcionado' }}</td>
                                            </tr>
                                            <tr>
                                                <td class="td-bold"><label for="provincia">Provincia:</label></td>
                                                <td>{{ $cliente->provincia_fisc ?? 'No proporcionado' }}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>

                                <div class="tab-pane fade" id="usuarios" role="tabpanel" aria-labelledby="usuarios-tab">
                                    @if ($cliente->usuariosAsignados->isNotEmpty()) 
                                        <h2>Detalles de los Usuarios</h2>
                                        @foreach ($cliente->usuariosAsignados as $usuario)
                                        <p>
                                            <strong>Nombre del Usuario:</strong> 
                                            <a href="{{ url('/admin/users/' . $usuario->id) }}">{{ $usuario->name }}</a>
                                        </p>
                                            <p><strong>Email del Usuario:</strong> {{ $usuario->email }}</p>
                                            <hr>
                                        @endforeach
                                    @else
                                        <p>Este cliente no tiene usuarios asociados.</p>
                                    @endif
                                </div>


                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="panel panel-bordered">
                        <div class="panel-body">
                            <h2 style="font-size: 1.3rem; border-bottom: 1px solid #6576863f;">Acciones disponibles:</h2>
                            <div style="margin-bottom: 10px;">
                                <a href="/admin/cliente/{{ $cliente->id }}/movimientos"
                                    class="d-flex align-items-center act-disp">
                                    <div>
                                        <img src="{{ voyager_asset('images/iconos/mov_cta.webp') }}" alt="">
                                    </div>
                                    <div>
                                        <h3>Movimientos de cta. cte.</h3>
                                        <p style="margin: 0px;">Se listan todos los movimientos en la cuenta corriente del
                                            cliente.</p>
                                    </div>
                                </a>
                            </div>
                            <div style="margin-bottom: 10px;">
                                <a href="/admin/cliente/{{$cliente->id}}/facturar" class="d-flex align-items-center act-disp">
                                    <div>
                                        <img src="{{ voyager_asset('images/iconos/facturar.webp') }}" alt="">
                                    </div>
                                    <div>
                                        <h3>Facturación</h3>
                                        <p style="margin: 0px;">Registro de facturación a clientes.</p>
                                    </div>
                                </a>
                            </div>
                            <div style="margin-bottom: 10px;">
                                <a href="/admin/crear-nota/add-products/{{ $cliente->id }}"
                                    class="d-flex align-items-center act-disp">
                                    <div>
                                        <img src="{{ voyager_asset('images/iconos/generar_remito.webp') }}"
                                            alt="">
                                    </div>
                                    <div>
                                        <h3>Generación de ramito</h3>
                                        <p style="margin: 0px;">Registro de remitos de artículos a clientes.</p>
                                    </div>
                                </a>
                            </div>
                            <div style="margin-bottom: 10px;">
                                <a href="/admin/cliente/{{ $cliente->id }}/reg-cobranza"
                                    class="d-flex align-items-center act-disp">
                                    <div>
                                        <img src="{{ voyager_asset('images/iconos/reg_cobranza.webp') }}" alt="">
                                    </div>
                                    <div>
                                        <h3>Registro de cobranza</h3>
                                        <p style="margin: 0px;">Registro de cobranza recibida del cliente.</p>
                                    </div>
                                </a>
                            </div>

                            <div style="margin-bottom: 10px;">
                                <a href="/admin/crear-nota/{{ $cliente->id }}"
                                    class="d-flex align-items-center act-disp">
                                    <div>
                                        <img src="{{ voyager_asset('images/iconos/ingreso_nota.webp') }}" alt="">
                                    </div>
                                    <div>
                                        <h3>Ingreso de nota de venta</h3>
                                        <p style="margin: 0px;">Permite registrar una nota de venta.</p>
                                    </div>
                                </a>
                            </div>

                            <div style="margin-bottom: 10px;">
                                <a href="/admin/crear-nota/add-products/{{ $cliente->id }}"
                                    class="d-flex align-items-center act-disp">
                                    <div>
                                        <img src="{{ voyager_asset('images/iconos/nota_cred.webp') }}" alt="">
                                    </div>
                                    <div>
                                        <h3>Ingreso nota de credito</h3>
                                        <p style="margin: 0px;">Registro de notas de crédito a clientes.</p>
                                    </div>
                                </a>
                            </div>
                            <div style="margin-bottom: 10px;">
                                <a href="/admin/cliente/{{ $cliente->id }}/facturados"
                                    class="d-flex align-items-center act-disp">
                                    <div>
                                        <img src="{{ voyager_asset('images/iconos/art_fact.webp') }}" alt="">
                                    </div>
                                    <div>
                                        <h3>Articulos facturados</h3>
                                        <p style="margin: 0px;">Listado de artículos adquiridos con su importe y fecha de
                                            última venta.</p>
                                    </div>
                                </a>
                            </div>
                            <div style="margin-bottom: 10px;">
                        <a href="javascript:void(0);" 
                        class="d-flex align-items-center act-disp toggle-client" 
                        data-id="{{ $cliente->id }}" 
                        data-status="{{ $cliente->status }}">
                            <div>
                                <img 
                                    src="{{ $cliente->status == 1 ? voyager_asset('images/iconos/deshab_user.webp') : voyager_asset('images/iconos/clientes.webp') }}" 
                                    alt="user_status">
                            </div>
                            <div>
                                <h3>{{ $cliente->status == 1 ? 'Deshabilitar cliente' : 'Habilitar cliente' }}</h3>
                                <p style="margin: 0px;">
                                    {{ $cliente->status == 1 ? 'Se deshabilitará el cliente del sistema.' : 'Se habilitará el cliente en el sistema.' }}
                                </p>
                            </div>
                        </a>
                    </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('javascript')
<script>
document.addEventListener('DOMContentLoaded', () => {
    const toggleClientButtons = document.querySelectorAll('.toggle-client');

    toggleClientButtons.forEach(button => {
        button.addEventListener('click', async () => {
            const clientId = button.getAttribute('data-id');
            const currentStatus = button.getAttribute('data-status');

            // Determinar nueva acción y estado
            const newStatus = currentStatus == '1' ? 0 : 1;
            const url = `/cliente/${clientId}/${newStatus === 1 ? 'enable' : 'disable'}`;

            try {
                // Llamada a la API
                const response = await fetch(url, {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                });

                if (!response.ok) throw new Error('Error al actualizar el estado del cliente.');

                // Actualizar la interfaz dinámica
                button.setAttribute('data-status', newStatus);
                const img = button.querySelector('img');
                const h3 = button.querySelector('h3');
                const p = button.querySelector('p');

                if (newStatus === 1) {
                    img.src = '{{ voyager_asset('images/iconos/deshab_user.webp') }}';
                    h3.textContent = 'Deshabilitar cliente';
                    p.textContent = 'Se deshabilitará el cliente del sistema.';
                } else {
                    img.src = '{{ voyager_asset('images/iconos/hab_user.webp') }}';
                    h3.textContent = 'Habilitar cliente';
                    p.textContent = 'Se habilitará el cliente en el sistema.';
                }
            } catch (error) {
                console.error(error);
                alert('Ocurrió un error al intentar actualizar el estado del cliente.');
            }
        });
    });
});
</script>

@stop