@extends('layouts.index')

@section('estilos')
    <link rel="stylesheet" href="{{ asset('css/dataTables/bootstrap.css') }}">
    <link rel="stylesheet" href="{{ asset('css/dataTables/dataTables.bootstrap4.min.css') }}">
    <link rel="stylesheet" href="{{ asset('css/dataTables/responsive.bootstrap4.min.css') }}">
    <link rel="stylesheet" href="{{ asset('css/style.css') }}">
@stop

@section('menu')
    @include('menu.index')
@stop

@section('content')

<h3 class="text-muted color_pag">{{'Clientes'}}</h3>
<!--<a href="acta_entrega/create" class="btn btn-sm btn-primary">Nueva</a>-->
<input type="hidden" id="identificador" value="#clientes" >
<div class="espacio10 color_pag">
    <table id="clientes" class="table table-striped table-bordered shadow-lg mt-4 dt-responsive nowrap" style="width:100%">
        <thead class="bg-primary text-white">
            <tr>
                <th scope="col" width="10%">{{'Rut'}}</th>
                <th scope="col" width="25%">{{'Nombre Completo'}}</th>
                <th scope="col" width="18%">{{'E-mail'}}</th>
                <th scope="col" width="15%">{{'Nro Hijos'}}</th>
                <th scope="col" width="25%">{{'Opciones'}}</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($clientes as $cliente)
                @php $index=1 @endphp
                <tr>
                    <td>{{$cliente->rut."-".digito_verificador($cliente->rut)}}</td>
                    <td>{{$cliente->nombres." ".$cliente->apellido_paterno." ".$cliente->apellido_materno}}</td>
                    <td>{{$cliente->email}}</td>
                    <td>{{$cliente->nro_hijos}}</td>
                    <td>
                        <form action="{{ route ('user.destroy',$cliente->id)}}" method="POST">
                            <a id="modal-datos{{$cliente->id}}" onclick="datos_cliente(this)" value="{{$cliente->id}}" href="#datos{{$cliente->id}}" class='btn btn-sm btn-success' data-toggle='modal'> Datos</a>
                            <a href="/user/{{$cliente->id}}/hijos" class="btn btn-sm btn-primary">{{'Hijos'}}</a>
                            <a href="/user/{{$cliente->id}}/certificados" class="btn btn-sm btn-info">{{'Certificados'}}</a>
                            <a href="/user/{{$cliente->id}}/recetas" class="btn btn-sm btn-warning">{{'Recetas'}}</a>
                            <a href="/user/{{$cliente->id}}/documentos" class="btn btn-sm btn-secondary">{{'Documentos'}}</a>
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-sm btn-danger">Borrar</button>
                        </form>
                    </td>
                </tr>
                @php $index++ @endphp
            @endforeach
        </tbody>
    </table>
</div>

<!-- Modales -->

@foreach ($clientes as $cliente)
    <div class="modal fade" id="datos{{$cliente->id}}" role="dialog" aria-labelledby="modal_datos" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title color_pag" id="modal_datos">
                        Datos Usuario
                    </h5>
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="container-fluid color_pag">
                        <div class="row">
                            <div class="col-lg-4 col-12">
                                <label class="form-label">Nombre Usuario</label>
                                <input type="text" readonly value="{{$cliente->username}}" class="form-control form-control-sm espaciomenos7 bg-fondo-ip" >
                            </div>
                            <div class="col-lg-4 col-6">
                                <label class="form-label">Fecha Nacimiento</label>
                                <input type="text" readonly value="{{date("d-m-Y",strtotime($cliente->fecha_nacimiento))}}" class="form-control form-control-sm espaciomenos7 bg-fondo-ip" >
                            </div>
                            <div class="col-lg-4 col-6">
                                <label class="form-label">Nacionalidad</label>
                                <input type="text" readonly value="{{$cliente->nacionalidad}}" class="form-control form-control-sm espaciomenos7 bg-fondo-ip" >
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-6 col-7">
                                <label class="form-label">Direccion</label>
                                <input type="text" readonly value="{{$cliente->direccion}}" class="form-control form-control-sm espaciomenos7 bg-fondo-ip" >
                            </div>
                            <div class="col-lg-4 col-5">
                                <label class="form-label">Comuna</label>
                                <input type="text" readonly value="{{$cliente->comuna}}" class="form-control form-control-sm espaciomenos7 bg-fondo-ip" >
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-6 col-7">
                                <label class="form-label">E-mail</label>
                                <input type="text" readonly value="{{$cliente->email}}" class="form-control form-control-sm espaciomenos7 bg-fondo-ip" >
                            </div>
                            <div class="col-lg-4 col-5">
                                <label class="form-label">Telefono</label>
                                <input type="text" readonly value="{{$cliente->telefono}}" class="form-control form-control-sm espaciomenos7 bg-fondo-ip" >
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <!--<button type="button" class="btn btn-primary">Asignar</button>-->
                    <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">Cerrar</button>
                </div>
            </div>
        </div>
    </div>
@endforeach

@stop

@section('scripts')
    <script src="{{ asset('js/dataTables/jquery-3.5.1.js') }}" defer></script>
    <script src="{{ asset('js/dataTables/jquery.dataTables.min.js') }}" defer></script>
    <script src="{{ asset('js/dataTables/dataTables.bootstrap4.min.js') }}" defer></script>
    <script src="{{ asset('js/dataTables/dataTables.responsive.min.js') }}" defer></script>
    <script src="{{ asset('js/dataTables/responsive.bootstrap4.min.js') }}" defer></script>
    <script src="{{ asset('js/dataTables/config-dt.js') }}" defer></script>
@stop