@extends('layout.layout')
@section('content')

<div class="user-container">


<div class="table-responsive">

    <div id="success"></div>
    
    @if (session('success'))
    <div class="alert alert-success" id="success-alert">
        {{ session('success') }}
    </div>
    @endif

    @if ($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif

    <button type="button" class="btn btn-primary add-user mb-2 w-100"  data-bs-toggle="modal" data-bs-target="#exampleModal">
        <i class="fas fa-plus"></i> Adaugă user
    </button>

    <form  action="{{route('users.index')}}" method="GET" class="form-search">
        <div class="d-flex">
            <input class="search" type="text" placeholder="Cauta User" name="search" id="search">
            <button class="submit-form-search"type="submit"><i class="fa fa-search"></i></button>
        </div>
        <a href="/users">
                <button type="button" class="btn-for-user-data-reset" onclick="reset()">Reseteaza cautare</button>
        </a>
    </form>

    <table class="table table-light table-hover" id="index_table_id">
        <thead>
            <tr class="text-center text-white">
                <th scope="col">#</th>
                <th scope="col">Nume</th>
                <th scope="col">Rol</th>
                <th scope="col">Categorie</th>
                <th scope="col">Status</th>
                <th scope="col">Actiune</th>
            </tr>
        </thead>
        <tbody>
            @forelse ($users as $user)
            <tr class="text-center" scope="row">
                <td>{{ $user->id }}</td>
                <td>{{ $user->name }}</td>
                <td>{{ $user->role->name }}</td>
                <td>{{$user->categories->toArray()[0]['name']}}</td>
                @if($user->activ)
                <td><span class="active">Activ</span></td>
                @else
                <td><span class="inactive">Inactiv</span></td>
                @endif
                <td>
                    <div class="button-group">
                        <button class="btn btn-danger delete-user"
                        data-bs-toggle="modal"
                        data-bs-target="#DeleteModal{{ $user->id }}"
                        title="Stergere User" >
                        <i class="fas fa-trash-alt" aria-hidden="true" ></i>

                        </button>
                        <button class="btn btn-success edit-user" data-bs-toggle="modal"
                            data-bs-target="#EditModal{{ $user->id }}" title="Editare User">
                            <i class="fas fa-edit"></i></button>

                        @if($user->activ === 0)
                        <button type="button" class="btn btn-primary active-user"
                        title="Activare User"
                         data-id="{{$user->id}}"
                         data-activare='1'
                        onclick="button_enable(this)">
                        <i class="fas fa-toggle-on"></i>
                        </button>
                        @else
                        <button type="button" class="btn btn-warning disable-user" data-id="{{$user->id}}" data-dezactivare='0'
                            onclick="button_disable(this)"
                            title="Dezactivare User">
                            <i class="fas fa-toggle-off"></i>
                        </button>
                        @endif
                    </div>
                </td>
            </tr>

            {{-- start add modal --}}
            <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
            aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Adaugare User</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">

                        <form id="add_form">
                            @csrf
                                <div id="errors-user-add"></div>
                            <div class="mb-2 form-group">
                                <div class="mb-2">
                                    <label for="">Nume</label>
                                    <input type="text" class="form-control" value="" name="surname" required>
                                </div >

                                <div class="mb-2">
                                    <label for="">Prenume</label>
                                    <input type="text" class="form-control" value="" name="name" required>
                                </div >

                                <div class="mb-2">
                                    <label for="">Email</label>
                                    <input type="email" class="form-control" value="" name="email" placeholder="Introduceti email" required>
                                </div>
                            </div>

                        <div class="mb-2">
                            <label for="categories">Categories</label>
                            <select class="form-control" style="width:100%;" data-placeholder="Alegeti Categoria"
                                id="categories" name="category" >
                                <option value="" selected disabled title="departament locuri de munca Moneygold">Alege
                                    categorie
                                </option>
                                @forelse ($categories as $category)
                                    @if($category->activ != 0 )
                                    <option value="{{$category->id}}">{{$category->name}}</option>
                                    @endif
                                @empty
                                <option value="">No record found</option>
                                @endforelse

                            </select>
                        </div>
                            @if(Auth::check() && Auth::user()->role->id == 1)

                            <label for="role_id" class="mt-2">Roles</label>

                            <div>
                                <input type="checkbox" id="role_admin" name="role_id"   value="1" />
                                <label for="role_admin">Administrator</label>
                            </div>

                            <div>
                                <input type="checkbox" id="role_moderator" name="role_id"   value="2" />
                                <label for="role_moderator">Moderator</label>
                            </div>

                            <div>
                                <input type="checkbox" id="role_user" name="role_id"  value="3" />
                                <label for="role_user">User</label>
                            </div>

                            @endif

                            <div class="form-check form-switch mt-3">
                                <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault" value="1"
                                    name="activ" checked>
                                <label class="form-check-label" for="flexSwitchCheckDefault">User activ</label>
                            </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" id="close_btn" class="btn btn-secondary" data-bs-dismiss="modal">Inchide</button>
                        <button type="submit" class="btn btn-success">Salveaza</button>
                    </div>


                    </form>
                </div>
            </div>
        </div>
            {{-- end add modal --}}


            {{--  start Edit modal --}}

            <form action="{{route('users.update', $user)}}" method='post'>
                @csrf
                @method('PUT')
                <div class="modal fade" id="EditModal{{ $user->id }}" tabindex="-1" role="dialog"
                    aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">Editare User {{ $user->name }}</h5>
                                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">

                                <input type="hidden" name="id" id="id" value="{{ $user->id }}">
                                <label for="">Name</label>
                                <input type="text" class="form-control"
                                    value="{!! old('name', optional($user)->name) !!}" name="name">
                                @error('name')
                                <div style="color: red;">{{ $message }}</div>
                                @enderror

                                <label for="">Email</label>
                                <input type="email" class="form-control mb-2"
                                    value="{!! old('email', optional($user)->email) !!}" name="email" required>

                                <label for="roles">Alege rol</label>
                                <select class="form-control" name="role_id">

                                    @forelse ($roles as $role)

                                    <option value="{{$role->id}}" @if($role->id == $user->role->id) style="background:rgb(206, 206, 206);" selected @endif >{{$role->name}}</option>
                                        @empty
                                        <option value="">No record found</option>
                                        @endforelse

                                </select>

                                <label for="categories">Alege categorie</label>
                                <select class="form-control " style="width:100%;"
                                    data-placeholder="Alegeti Categoria" name="category" >
                                    @forelse ($categories as $category)
                                    <option value="{{$category->id}}" @if(in_array($category->id,$user->categories->map->id->toarray()))
                                        style="background:rgb(206, 206, 206);" selected @endif
                                        >{{$category->name}}</option>
                                    @empty
                                    <option value="">No record found</option>
                                    @endforelse
                                </select>

                            </div>

                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Inchide</button>
                                <button type="submit" class="btn btn-success">Editeaza</button>
                            </div>

                        </div>
                    </div>
                </div>
            </form>
            {{-- end edit modal --}}

            {{-- Delete modal --}}
            <form action="{{route('users.destroy', $user)}}" method="POST">
                @csrf
                @method('DELETE')
                <div class="modal fade" id="DeleteModal{{ $user->id }}" tabindex="-1" role="dialog"
                    aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">Delete User</h5>
                                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <input type="hidden" name="id" id="id" value="{{ $user->id }}">
                                Sigur vrei sa stergi userul <b>{{ $user->name }}</b> ?
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Inchide</button>
                                <button type="submit" class="btn btn-danger">Sterge</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
            {{-- end delete modal --}}
              @empty

            <p>Nu sa gasit niciun user</p>

            @endforelse

        </tbody>

    </table>

{{ $users->links() }}
</div>

</div>
@push('js')

<script>

$(function () {


        $("#add_form").on('submit', function (e) {


                var formData = new FormData(this);
                var surname = formData.get('surname');
                var name = formData.get('name');
                e.preventDefault();
                var username = surname+'.'+name;
                formData.append("username", username);
                    $.ajax({
                        url: '/users',
                        method: 'POST',
                        data: formData,
                        processData: false,
                        dataType: 'json',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        contentType: false,

                        success: function (data) {
                                $('#add_form')[0].reset();
                                $("#success").html(data.mesaj);
                                $("#close_btn").trigger("click");
                                $("#index_table_id").load(window.location + " #index_table_id");
                                $("#success").fadeTo(2000, 500).slideUp(500);
                                $("#success").slideUp(500);
                                setTimeout(function(){
                                window.location.reload();
                                },500);
                        },
                        error: function (error) {
                            $("#errors-user-add").html(error.responseJSON.fail);
                            $("#errors-user-add").fadeTo(2000, 500).slideUp(500);
                            $("#errors-user-add").slideUp(500);
                        }

                    });
                });
            });
    $(document).ready(function () {


        $("#success-alert").fadeTo(2000, 500).slideUp(500, function(){
        $("#success-alert").slideUp(500);
    });

        $('.js-example-basic-multiple').select2();

        //un singur role
        $("input:checkbox").on('click', function () {


            var $box = $(this);
            if ($box.is(":checked")) {

                var group = "input:checkbox[id='" + $box.attr("id") + "']";

                $(group).prop("checked", false);
                $box.prop("checked", true);
            } else {
                $box.prop("checked", false);
            }
        });

        $(document).ready(function(){


            $("input:checkbox").on('click', function () {
            var $box = $(this);
            if ($box.is(":checked")) {
                var group = "input:checkbox[name='" + $box.attr("name") + "']";

                $(group).prop("checked", false);
                $box.prop("checked", true);

            } else {

                $box.prop("checked", false);
            }

         });

        });


    });

    // $forLogin = $nume. '.' . $prenume
//

    function button_enable(user) {

        let button_enable = $(user).attr('data-activare');
        let id = $(user).attr('data-id');

        $.ajax({
            url: '/users/enable',
            method: 'POST',
            data: {
                button_enable,
                id,

                "_token": "{{ csrf_token() }}"
            }
        }).done(function (response) {
            $("#index_table_id").load(window.location + " #index_table_id");
        });

    }

    function button_disable(user) {

        let button_disable = $(user).attr('data-dezactivare');
        let id = $(user).attr('data-id');

        $.ajax({
            url: '/users/disable',
            method: 'POST',
            data: {
                button_disable,
                id,

                "_token": "{{ csrf_token() }}"
            }
        }).done(function (response) {
            $("#index_table_id").load(window.location + " #index_table_id");
        });
    }

</script>
@endpush
@endsection