@extends('layouts.admin')

@section('styles')
    <style>
        .events-grid {
            max-height: 200px;
            overflow-y: auto;
            border: 1px solid #ced4da;
            border-radius: 0.25rem;
            padding: 10px;
            background: #f8f9fa;
        }
        .events-grid .form-check {
            margin-bottom: 5px;
        }
        .events-grid .form-check-label {
            font-size: 0.9rem;
        }
    </style>
@endsection

@section('section-title')
    <h2>Usuarios</h2>
@endsection

@section('content')
    <main class="maestros">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="card card-table">
                        <div class="card-header">
                            <div class="botones">
                                <!-- Button trigger modal -->
                                <button type="button" class="btn btn-primary btn-add-modal" data-action="{{ route('admin.users.store') }}" data-toggle="modal" data-target="#modalForm">
                                    <i class="fa fa-plus" aria-hidden="true"></i>
                                    AGREGAR REGISTRO
                                </button>
                            </div>
                        </div>
                        <div class="table-data no-footer">
                            <table class="table table-striped DataTable">
                                <thead class="thead-dark">
                                    <tr>
                                        <th>Nombre</th>
                                        <th>e-mail</th>
                                        <th>Rol</th>
                                        <th>Eventos</th>
                                        <th style="width:75px;">Activo</th>
                                        <th style="width:75px;">ID.</th>
                                        <th style="width:75px;">
                                            <i class="fa fa-cog" aria-hidden="true"></i>
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($lista as $item)
                                        <tr>
                                            <td>
                                                {{ $item->person->name }} {{ $item->person->lastname }}
                                            </td>
                                            <td>
                                                <a href="mailto:{{ $item->email }}">{{ $item->email }}</a>
                                            </td>
                                            <td>
                                                @if ($item->type == 'admin')
                                                    Administrador
                                                @else
                                                    Consulta
                                                @endif
                                            </td>
                                            <td>
                                                @if ($item->type == 'owner' && $item->events->count() > 0)
                                                    <small>{{ $item->events->pluck('name')->implode(', ') }}</small>
                                                @elseif ($item->type == 'admin')
                                                    <small class="text-muted">Todos</small>
                                                @else
                                                    <small class="text-muted">Sin asignar</small>
                                                @endif
                                            </td>
                                            <td>
                                                @if ($item->active)
                                                    <i class="fa fa-check text-success" aria-hidden="true"></i>
                                                @endif
                                            </td>
                                            <td>{{ $item->id }}</td>
                                            <td>
                                                <a href="{{ route('admin.users.edit', [$item->id]) }}" class="btn-edit-modal"
                                                    data-action="{{ route('admin.users.update', [$item->id]) }}">
                                                    <i class="fa fa-pencil text-secondary" aria-hidden="true"></i>
                                                </a>
                                                @php
                                                    $person = $item->person;
                                                    $company = $person ? $person->company : null;
                                                    $companyPersonsCount = $company ? $company->persons->count() : 0;
                                                    $companyOrdersCount = $company ? $company->orders->count() : 0;
                                                    $personOrdersCount = $person ? $person->orders->count() : 0;
                                                    $personTicketsCount = $person ? $person->tickets->count() : 0;
                                                    $personAccessesCount = $person ? $person->event_accesses->count() : 0;
                                                @endphp
                                                @if ($item->id != 1 && $companyPersonsCount == 0 && $companyOrdersCount == 0
                                                    && $personOrdersCount == 0 && $personTicketsCount == 0 && $personAccessesCount == 0)
                                                    <a href="{{ route('admin.users.destroy', [$item->id]) }}" class="btn-destroy">
                                                        <i class="fa fa-trash text-danger" aria-hidden="true"></i>
                                                    </a>
                                                @endif
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
@endsection

@section('modals')
    {{-- FORMULARIO --}}
    <div class="modal fade" id="modalForm" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                <form id="frm-modal" method="POST" class="form-ajax" action="" data-return="">
                    @csrf
                    @method('')
                    <input type="hidden" name="id" value="">

                    <div class="modal-header">
                        <h5 class="modal-title"></h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-row">
                            <div class="form-group form-default col-md-6">
                                <label for="name">Nombre</label>
                                <input type="text" class="form-control" name="name" placeholder="" required>
                            </div>
                            <div class="form-group form-default col-md-6">
                                <label for="lastname">Apellido</label>
                                <input type="text" class="form-control" name="lastname" placeholder="" required>
                            </div>
                            <div class="form-group form-default col-md-6">
                                <label for="email">e-mail</label>
                                <input type="email" class="form-control" name="email" placeholder="" required>
                            </div>
                            <div class="form-group form-default col-md-6">
                                <label for="type">Rol</label>
                                <select class="form-control" name="type" id="type" required>
                                    <option value="admin">Administrador</option>
                                    <option value="owner">Consulta</option>
                                </select>
                            </div>
                            <div class="form-group form-default col-md-12" id="events-container" style="display: none;">
                                <label>Eventos Asociados</label>
                                <div class="mb-2">
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input" id="select-all-events">
                                        <label class="form-check-label" for="select-all-events"><strong>Seleccionar todos</strong></label>
                                    </div>
                                </div>
                                <div class="events-grid">
                                    @foreach ($events as $event)
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" name="events[]" value="{{ $event->id }}" id="event-{{ $event->id }}">
                                            <label class="form-check-label" for="event-{{ $event->id }}">{{ $event->name }}</label>
                                        </div>
                                    @endforeach
                                </div>
                                <small class="form-text text-muted">Seleccione los eventos a los que tendrá acceso este usuario</small>
                            </div>
                            <div class="form-group form-default col-md-6">
                                <label for="password">Password</label>
                                <input type="password" class="form-control" name="password" placeholder="" required>
                            </div>
                            <div class="form-group form-default col-md-6">
                                <label for="password_confirmation">Confirmar Password</label>
                                <input type="password" class="form-control" name="password_confirmation" placeholder="" required>
                            </div>
                            <div class="form-group form-default col-md-12 text-right">
                                <a href="javascript:" id="btn-change-password">Cambiar password</a>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">
                            <i class="ico-check-wh"></i>
                            Guardar
                        </button>
                        <a href="javascript:" class="btn btn-secondary" data-dismiss="modal">
                            <i class="ico-chevron-left-wh"></i>
                            Regresar
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="{{ asset('js/admin/maestros/users.js') }}"></script>
@endsection