@extends('layouts.app')
@section('title', $viewData["title"])
@section('subtitle', $viewData["subtitle"])
@section('content')

<div class="card mb-4">
    <div class="card-header">
        Add a new user
    </div>
    <div class="card-body">
        @if($errors->any())
        <ul class="alert alert-danger list-unstyled">
            @foreach($errors->all() as $error)
            <li>- {{ $error }}</li>
            @endforeach
        </ul>
        @endif
        <form method="POST" action="{{ route('user_management.save_user') }}">
            @csrf
            <div class="row">
                <div class="col">
                    <div class="input-group mb-3">
                        <label class="input-group-text">Firstame</label>
                        <input name="firstname" value="{{ old('firstname') }}" type="text" class="form-control">
                    </div>
                </div>
                <div class="col">
                    <div class="input-group mb-3">
                        <label class="input-group-text">Lastname</label>
                        <input name="lastname" value="{{ old('lastname') }}" type="text" class="form-control">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <div class="input-group mb-3">
                        <label class="input-group-text">Email</label>
                        <input name="email" value="{{ old('email') }}" type="text" class="form-control">
                    </div>
                </div>
                <div class="col">
                    <div class="input-group mb-3">
                        <label class="input-group-text">Directory</label>
                        <input name="directory" value="{{ old('directory', 'BDL_USERS') }}" type="text" class="form-control">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <div class="input-group mb-3">
                        <label class="input-group-text">Licence</label>
                        <input name="licence" value="{{ old('licence','CAPACITY') }}" type="text" class="form-control">
                    </div>
                </div>
                <div class="col">
                    <div class="input-group mb-3">
                        <label class="input-group-text">Customer</label>
                        <select class="form-select form-control" aria-label="customer_id" name="customer_id">
                            <option selected>Please choose</option>
                            @foreach ($viewData["all_customers"] as $customer)
                                <option value="{{ $customer->get_id()  }}">{{ $customer->get_customer_name() }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>            
            <div class="row">
                <div class="col">
                    <div class="form-check mb-3">
                        <input class="form-check-input" type="checkbox" value="" id="automaticaly_send_email"
                            name="automaticaly_send_email" checked>
                        <label class="form-check-label" for="automaticaly_send_email">
                            Automaticaly send en email to the user with the connection details
                        </label>
                    </div>
                </div>
            </div>
            <button type="submit" class="btn btn-primary">Add user</button>
        </form>
    </div>
</div>

<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Edit user</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="modal_body">
                ...
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header">
        Last created users
    </div>
    <div class="card-body">
        <table class="table table-hover">
            <thead>
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">First</th>
                    <th scope="col">Last</th>
                    <th scope="col">Email</th>
                    <th scope="col">Customer</th>
                    <th scope="col">Directory</th>
                    <th scope="col">Licence</th>
                    <th scope="col">Password</th>            
                    <th scope="col">Link</th>       
                    <th scope="col">Last modification date</th>    
                    <th scope="col">Edit</th>
                    <th scope="col" title="Send an email with the connection details">Send email</th>

                </tr>
            </thead>
            <tbody>
                @foreach ($viewData["all_users"] as $user)
                <tr>
                    <th scope="row">{{ $user->get_id() }}</th>
                    <td>{{ $user->get_firstname()  }}</td>
                    <td>{{ $user->get_lastname() }}</td>
                    @if (null !== $user->get_email())
                        <td title="{{ $user->get_email() }}">{{ substr($user->get_email(),0,6)  }}...</td>  
                    @else
                        <td></td>
                    @endif                    
                    <td>{{ $user->get_customer()->get_customer_name() }}</td>
                    <td>{{ $user->get_directory() }}</td>
                    <td>{{ $user->get_licence() }}</td>

                    @if (null !== $user->get_password())
                        <td title="{{ $user->get_password() }}">{{ substr($user->get_password(),0,6)  }}...</td>  
                    @else
                        <td></td>
                    @endif

                    @if (null !== $user->get_link())
                        <td title="{{ $user->get_link() }}">{{ substr($user->get_link(),0,6)  }}...</td>  
                    @else
                        <td></td>
                    @endif
                             
                    @if (null !== $user->get_updated_at())
                        <td title="{{ $user->get_updated_at() }}">{{ substr($user->get_updated_at(),0,6)  }}...</td>  
                    @else
                        <td></td>
                    @endif                          
                    <td>
                        <a class="btn btn-primary" id="open_link"
                            data-attr="{{route('user_management.edit_user_modal', ['id'=> $user->get_id()])}}"
                            title="Edit the user">
                            <i class="bi-pencil"></i>
                        </a>
                    </td>
                    <td>
                        <a class="btn btn-primary" id="open_link"
                            data-attr="{{route('emails.user_created', ['id'=> $user->get_id()])}}" title="Send an email with the connection details">
                            <i class="bi-envelope"></i>
                        </a>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

<script>
$(document).on('click', '#open_link', function(event) {
    event.preventDefault();
    let href = $(this).attr('data-attr');
    $.ajax({
        url: href,
        beforeSend: function() {
            $('#loader').show();
        },
        // return the result
        success: function(result) {
            $('#myModal').modal("show");
            $('#modal_body').html(result).show();
        },
        complete: function() {
            $('#loader').hide();
        },
        error: function(jqXHR, testStatus, error) {
            console.log(error);
            alert("Page " + href + " cannot open. Error:" + error);
            $('#loader').hide();
        },
        timeout: 8000
    })
});
</script>
@endsection