@extends('layouts.dashboard')

@section('section-main')
    <div class="row">
        <div class="col alerts-section">
            
        </div>
    </div>
    
    <div class="row">
        <div class="col-md-12">
            <div class="card card-table">
                <div class="card-header">
                    <h5>Configuración de lectores</h5>
                    <div class="botones">
                        <!-- Button trigger modal -->
                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalEventDevice">
                            <i class="fa fa-plus" aria-hidden="true"></i>
                            ASOCIAR DISPOSITIVO
                        </button>
                        <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#modalDevice">
                            <i class="fa fa-mobile" aria-hidden="true"></i>
                            AGREGAR DISPOSITIVO
                        </button>
                    </div>
                </div>
                <div class="table-data full-height no-footer fields">
                    <table class="table table-striped DataTable" id="tbl-event-devices">
                        <thead class="thead-dark">
                            <tr>
                                <th>NOMBRE</th>
                                <th>DISPOSITIVO</th>
                                <th>UID</th>
                                <th>PUERTA</th>
                                <th>ACTIVO</th>
                                <th>SINCRONIZADO</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($event_devices as $key => $device)
                                <tr>
                                    <td>{{ $device->person->name }} {{ $device->person->lastname }}</td>
                                    <td>{{ $device->device->name }}</td>
                                    <td>{{ $device->device->uuid }}</td>
                                    <td>{{ $device->gate }}</td>
                                    <td>
                                        <div class="form-check check-square">
                                            <input type="checkbox" class="form-check-input" name="active[]" id="active-{{ $key }}" 
                                                value="1" {{ $device->active ? 'checked' : '' }} data-url="{{ route('admin.dashboard.device.active', [$device->id]) }}">
                                            <label class="form-check-label" for="active-{{ $key }}"></label>
                                        </div>
                                    </td>
                                    <td>
                                        {{-- <div class="form-check check-square">
                                            <input type="checkbox" class="form-check-input" name="sincronizado[]" id="sincronizado-" value="1">
                                            <label class="form-check-label" for="sincronizado-"></label>
                                        </div> --}}
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('modals')
    {{-- SINCRONIZAR DISPOSITIVO --}}
    <div class="modal fade" id="modalEventDevice" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <form id="frm-modal-event-device"  method="POST" class="form-ajax"
                    action="{{ route('admin.dashboard.device.store', [$event->id]) }}">
                    @csrf

                    <div class="modal-header">
                        <h5 class="modal-title">Asociar Dispositivo</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-12">
                                <label for="person_id">Nombre</label>
                                <select name="person_id" id="person_id" class="form-control selectpicker" data-live-search="true" title="Seleccione el usuario" required>
                                    @foreach ($users as $item)
                                        <option data-tokens="{{ $item->name }}" value="{{ $item->id }}">{{ $item->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group form-default col-md-12">
                                <label for="device_id">Dispositivo</label>
                                <select name="device_id" id="device_id" class="form-control" required>
                                    <option value="">Seleccione</option>
                                    @foreach ($devices as $item)
                                        <option value="{{ $item->id }}">{{ $item->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group form-default col-md-12">
                                <label for="gate">Puerta</label>
                                <input type="text" class="form-control" name="gate" id="gate" placeholder="" value="" required>
                            </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>
    
    {{-- AGREGAR DISPOSITIVO --}}
    <div class="modal fade" id="modalDevice" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <form id="frm-modal-device"  method="POST" class="form-ajax"
                    action="{{ route('admin.devices.store') }}">
                    @csrf

                    <div class="modal-header">
                        <h5 class="modal-title">Agregar Dispositivo</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-12">
                                <label for="device_name">Nombre</label>
                                <input type="text" class="form-control" name="name" id="device_name" required maxlength="50">
                            </div>
                            <div class="form-group form-default col-md-12">
                                <label for="device_uuid">UUID</label>
                                <input type="text" class="form-control" name="uuid" id="device_uuid" required maxlength="50">
                            </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/devices.js') }}"></script>
@endsection