@extends('management.default.default')

@section('title', 'Administrateurs')

@section('content')
    <div class="section-admin container-fluid">
        <div class="row">
            <div class="col-sm-12">
                <div class="portlet portlet-bordered">
                    <div class="portlet-title">
                        <div class="caption caption-lighter">
                            <span class="caption-subject text-uppercase"></span>
                        </div>
                        <div class="actions">
                            <a data-placement="top" class="tip-top text-success "
                               style="cursor: pointer"
                               data-original-title=""
                               data-toggle="modal"
                               data-target="#modalForm">
                                <i class="fa fa-plus"></i> <small class=" mar-right-10">Ajouter un nouveau
                                    administrateur</small>
                            </a>

                        </div>
                    </div>
                    <div class="portlet-body">
                        <div class="table-responsive">
                            <table id="example1" class="table table-theme table-striped">
                                <thead>
                                <tr>
                                    <th>Nom complet</th>
                                    <th>Adresse mail</th>
                                    <th class="text-center">Statut</th>
                                    <th></th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($administrators as $admin)
                                    <tr>
                                        <th><b>{{$admin->name}}</b></th>
                                        <th>{{$admin->email}}</th>
                                        <th class="text-center">
                                            @if($admin->is_enabled)
                                                <span style="background: green"
                                                      class="badge badge-success">Activé</span>
                                            @else
                                                <span style="background: red"
                                                      class="badge badge-danger">Désactivé</span>
                                            @endif
                                        </th>
                                        <th class="text-center">
                                            <a data-toggle="modal" href="" id="edit"
                                               data-target='#editModal' data-id="{{ $admin->id }}"
                                               style="margin-right: 5px"
                                               title="Editer ce compte"><i
                                                    class="fa fa-edit"></i> </a>
                                        </th>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal centered fade" id="modalForm" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content modal-background">
                <div class="modal-body pad-top-50 pad-bot-50 pad-left-50 pad-right-50">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-md-12">
                                <h3 id="LoginPanel"
                                    class="no-margin-top mar-bot-10 text-uppercase text-center letter-spacing-1">
                                    Nouveau administrateur</h3>

                                <form class="form-theme mar-top-30" method="post" action=""
                                      enctype="multipart/form-data">
                                    @csrf

                                    <div class="row">
                                        <div class="col-sm-12">
                                            <div class="form-group">
                                                <label class="text-muted">Nom complet : </label>
                                                <input type="text" class="form-control" name="name"
                                                       placeholder=""/>
                                            </div>
                                        </div>
                                        <br/> <br/>
                                        <div class="col-sm-12">
                                            <div class="form-group">
                                                <label class="text-muted">Adresse mail : <sup
                                                        class="color-red">*</sup></label>
                                                <input type="email" class="form-control" name="email" required
                                                       placeholder=""/>
                                            </div>
                                        </div>
                                        <div class="col-sm-12">
                                            <div class="form-group">
                                                <label class="text-muted">Mot de passe : <sup
                                                        class="color-red">*</sup></label>
                                                <input type="password" class="form-control" name="password" required
                                                       placeholder=""/>
                                            </div>
                                            <br/> <br/>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-sm-12">
                                            <div class="text-center">
                                                <button type="submit" class="btn btn-theme btn-full-width">Ajouter
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal centered fade" id="editModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content modal-background">
                <div class="modal-body pad-top-50 pad-bot-50 pad-left-50 pad-right-50">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-md-12">
                                <h3 id="LoginPanel"
                                    class="no-margin-top mar-bot-10 text-uppercase text-center letter-spacing-1">
                                    Edition administrateur</h3>

                                <form id="formEdit" class="form-theme mar-top-30" method="post" action=""
                                      enctype="multipart/form-data">
                                    @csrf

                                    <div class="row">
                                        <div class="col-sm-12">
                                            <div class="form-group">
                                                <label class="text-muted">Nom complet : </label>
                                                <input type="text" class="form-control" name="name"
                                                       id="name"
                                                       placeholder=""/>
                                            </div>
                                        </div>
                                        <div class="col-sm-12">
                                            <div class="form-group">
                                                <label class="text-muted">Email : </label>
                                                <input type="email" class="form-control" name="email"
                                                       id="email"
                                                       placeholder=""/>
                                            </div>
                                            <br/> <br/>
                                        </div>

                                        <br/> <br/>
                                        <div class="col-sm-12">
                                            <div class="form-group">
                                                <label class="text-muted">Mot de passe : </label>
                                                <input type="password" class="form-control" name="password"
                                                       placeholder=""/>
                                            </div>
                                        </div>

                                        <div class="col-sm-12">
                                            <div class="form-group">
                                                <label class="text-muted">Statut du compte : <sup
                                                        class="color-red">*</sup></label>
                                                <select class="form-control" name="is_enabled" required id="is_enabled">
                                                    <option value="0">Non</option>
                                                    <option value="1">Oui</option>
                                                </select>
                                            </div>
                                            <br/> <br/>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-sm-12">
                                            <div class="text-center">
                                                <button type="submit" class="btn btn-theme btn-full-width">Modifier
                                                </button>
                                                <br/><br/>

                                                <a id="deleteLink" style="color: red" href="">Supprimer ce compte</a>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        $('body').on('click', '#edit', function (event) {
            event.preventDefault();

            var id = $(this).data('id');

            document.getElementById('formEdit').action = '/management/administrators/' + id + '/edit';
            document.getElementById('deleteLink').href = '/management/administrators/' + id + '/delete';

            $.get('/management/administrators/' + id, function (data) {
                $('#name').val(data.data.name);
                $('#email').val(data.data.email);
                $('#is_enabled').val((data.data.is_enabled ? 1 : 0));
            })
        });
    </script>
@endsection