@extends('layouts.admin')

@section('content')
<!--App-Content-->
<div class="app-content my-3 my-md-5">
    <div class="side-app">
        <x-page.header>Users</x-page.header>
        @include('admin.errors.form-errors')
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">Add User</div>

                    <div class="card-body">
                        <form method="POST" action="{{ route('admin.users.store') }}">
                            @csrf
                            <div class="row mb-3">
                                <label for="first_name" class="col-md-4 col-form-label text-md-end">{{ __('First Name') }}</label>

                                <div class="col-md-6">
                                    <input id="first_name" type="text" class="form-control @error('first_name') is-invalid @enderror" name="first_name" value="{{ old('first_name') }}" required autocomplete="first_name" autofocus>

                                    @error('first_name')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>

                            <div class="row mb-3">
                                <label for="middle_name" class="col-md-4 col-form-label text-md-end">{{ __('Middle Name') }}</label>

                                <div class="col-md-6">
                                    <input id="middle_name" type="text" class="form-control @error('middle_name') is-invalid @enderror" name="middle_name" value="{{ old('middle_name') }}" required autocomplete="middle_name" autofocus>

                                    @error('middle_name')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>

                            <div class="row mb-3">
                                <label for="last_name" class="col-md-4 col-form-label text-md-end">{{ __('Last Name') }}</label>

                                <div class="col-md-6">
                                    <input id="last_name" type="text" class="form-control @error('last_name') is-invalid @enderror" name="last_name" value="{{ old('last_name') }}" required autocomplete="last_name" autofocus>

                                    @error('last_name')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>

                            <div class="row mb-3">
                                <label for="email" class="col-md-4 col-form-label text-md-end">{{ __('E-Mail Address') }}</label>

                                <div class="col-md-6">
                                    <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email" oninput="syncUsername()">

                                    @error('email')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>

                            <div class="row mb-3">
                                <label for="username" class="col-md-4 col-form-label text-md-end">{{ __('Username') }}</label>

                                <div class="col-md-6">
                                    <input id="username" type="text" class="form-control @error('username') is-invalid @enderror" name="username" value="{{ old('username') }}" required autocomplete="username" disabled>

                                    @error('username')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>

                            <div class="row mb-3">
                                <label for="phone" class="col-md-4 col-form-label text-md-end">Phone Number</label>

                                <div class="col-md-6">
                                    <input id="phone" type="phone" class="form-control @error('phone') is-invalid @enderror" name="phone" value="{{ old('phone') }}" required autocomplete="phone">

                                    @error('phone')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>

                            <div class="row mb-3">
                                <label for="nationality" class="col-md-4 col-form-label text-md-end">@lang('auth.nationality')</label>
                                <div class="col-md-6">
                                    <select class="form-control select2-flag-search @error('nationality') is-invalid @enderror"
                                        name="nationality" data-placeholder="@lang('auth.nationality')" required>
                                        @foreach ($countries as $country)
                                        <option value="{{$country->iso}}">{{$country->nicename}}</option>
                                        @endforeach

                                    </select>

                                    @error('nationality')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                    @enderror
                                </div>
                            </div>
                             <!--Country-->
                            <div class="row mb-3">
                                <label class="col-md-4 col-form-label text-md-end">@lang('auth.country'):</label>
                                <div class="col-md-6">
                                    <select class="form-control select2-show-search  @error('country') is-invalid @enderror" name="country"
                                        data-placeholder="Select Country" required>
                                        @foreach ($countries as $country)
                                        <option value="{{$country->id}}">{{$country->nicename}}</option>
                                        @endforeach
                                    </select>

                                    @error('country')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                    @enderror
                                </div>
                            </div>

                            <div class="row mb-3">
                                <label for="gender" class="col-md-4 col-form-label text-md-end">Gender</label>

                                <div class="col-md-6">
                                    <select id="gender" class="form-control select2-show-search  @error('gender') is-invalid @enderror" name="gender"
                                        data-placeholder="Select Country" required>
                                        <option value="m">Male</option>
                                        <option value="f">Female</option>
                                    </select>
                                    @error('gender')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>

                            <div class="row mb-3">
                                <label for="date_of_birth" class="col-md-4 col-form-label text-md-end">Birthdate</label>

                                <div class="col-md-6">
                                    <input type="date" id="date_of_birth" class="form-control  @error('date_of_birth') is-invalid @enderror"
                                    name="date_of_birth" value="{{ old('date_of_birth') }}" required autocomplete="date_of_birth">

                                    @error('date_of_birth')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>

                            {{-- <div class="row mb-3">
                                <label for="password" class="col-md-4 col-form-label text-md-end">{{ __('Password') }}</label>

                                <div class="col-md-6">
                                    <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="new-password">

                                    @error('password')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div> --}}

                            <div class="row mb-3">
                                <label for="role" class="col-md-4 col-form-label text-md-end">Role</label>

                                <div class="col-md-6">
                                    <select id="role" class="form-control select2-show-search  @error('role') is-invalid @enderror" name="role"
                                        data-placeholder="Select Role" required>
                                        <option value="1">Admin</option>
                                        <option value="2">Teacher</option>
                                    </select>
                                    @error('gender')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>

                            <div class="row mb-0">
                                <div class="col-md-6 offset-md-4">
                                    <button type="submit" class="btn btn-primary">
                                       Add User
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Users List</h3>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table
                                id="usersList"
                                class="table table-striped table-bordered table-vcenter text-nowrap">
                                <thead>
                                    <tr>
                                        <th style="text-align: center;">Id</th>
                                        <th>Name</th>
                                        <th style="text-align: center;">Phone</th>
                                        <th style="text-align: center;">Email</th>
                                        <th style="text-align: center;">Type</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @php
                                    $count=0
                                    @endphp
                                   @foreach ($users as $user)
                                    <tr>
                                        <td style="text-align: center;">{{++$count}}</td>
                                        <td style="text-align: center;">{{$user->first_name .' '. $user->last_name}}</td>
                                        <td style="text-align: center;">{{$user->phone}} {!! $user->is_phone_active?  '<i class="text-green las la-check"></i>':'<i class="text-danger las la-times"></i>'!!}</td>
                                        <td style="text-align: center;">{{$user->email}} {!! $user->email_verified_at?  '<i class="text-green las la-check"></i>':'<i class="text-danger las la-times"></i>'!!}</td>
                                        <td style="text-align: center;">
                                            @if ($user->role_id == 1)
                                                <span class="badge badge-primary">Admin</span>
                                            @elseif ($user->role_id == 2)
                                                <span class="badge badge-success">Teacher</span>
                                            @else
                                                <span class="badge badge-danger">No role</span>
                                            @endif
                                        </td>
                                        <td style="text-align: center;" class="d-flex gap-2">
                                            <div data-bs-toggle="tooltip"  data-bs-original-title="Edit">
                                                <button type="button"
                                                    value="{{$user->user_id}}"
                                                    class="modal-effect btn btn-outline-light btn-sm waves-effect waves-light edit"
                                                    data-bs-effect="effect-fall" data-bs-toggle="modal" data-bs-original-title="Edit" data-bs-target="#edit"><i
                                                        class="fa fa-edit fs-16 text-primary"></i></button>
                                            </div>
                                            @if (in_array(auth()->id(),[1,3]))
                                            <div data-bs-toggle="tooltip"  data-bs-original-title="Activate/Deactivate user">
                                                <label class="form-swich">
                                                    <input type="checkbox" onclick="activeInActive('{{ $user->user_id }}')" id="is_active"
                                                        name="is_active" class="form-switch-input" {{ ( $user->is_active  == '1') ? 'checked' : '' }}>
                                                    <span class="form-switch-indicator"></span>
                                                    <span class="form-switch-description-{{ $user->user_id }}">{{ $user->is_active ? 'Active' : 'InActive' }}</span>
                                                </label>
                                            </div>
                                            @endif
                                            {{-- <a href="javascript:void(0)" onClick="confirmDelete(event,{{$user->id}})" class="btn btn-outline-light btn-sm waves-effect waves-light"
                                                        data-bs-toggle="tooltip" data-bs-original-title="Delete"
                                                        title='Delete'>
                                                        <i class="fa fa-trash fs-16"></i>
                                                <form method="POST" action="{{ route('admin.users.destroy', $user->id) }}" id="delete-form-{{$user->id}}">
                                                    @csrf
                                                    <input name="_method" type="hidden" value="DELETE">

                                                </form>
                                            </a> --}}

                                        </td>
                                    </tr>
                                   @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            {{-- {{ $users->links('inc.paginate') }} --}}
        </div>
    </div>
</div>
<div class="modal fade" id="edit" tabdocumentation="-1" role="dialog"  aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Update 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">
                <form action="" method="post" id="user_form_update" autocomplete="off">
                    @csrf
                    <div class="form-group">
                        <label for="email_update" class="form-control-label">Email:</label>
                        <input type="text" class="form-control" id="email_update" name="email" required>
                    </div>

                    <div class="form-group">
                        <label for="phone_update" class="form-control-label">Phone:</label>
                        <input type="text" class="form-control" id="phone_update" name="phone" required pattern="^\+?[0-9]{6,15}$">
                    </div>
                    <div class="form-group">
                        <label for="password_update" class="form-control-label">Password:</label>
                        <input type="password" autocomplete="off" class="form-control" name="password"  id="password_update">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection
@section('admin-js')
<script>
    function syncUsername() {
        var emailValue = document.getElementById('email').value;
        document.getElementById('username').value = emailValue;
    }
</script>
<script>
    $(document).ready(function(){

        $(document).ready(function(){
            $('#usersList').dataTable({
                drawCallback: function(settings) {
                },
            })
        })

        // Get Record data using it's id
        jQuery('body').on('click', '.edit', function () {
            var user_id = $(this).val();
            var editurl = "{{ route('admin.users.edit', ":user_id") }}";
            var updateurl = "{{ route('admin.users.update', ":user_id") }}";
            editurl = editurl.replace(':user_id', user_id);

            updateurl = updateurl.replace(':user_id', user_id);
            $.ajax({
            url:editurl,
            success:function(data){
                jQuery('#email_update').val(data.email);
                jQuery('#phone_update').val(data.phone);
                jQuery('#user_form_update').attr('action', updateurl + '#usersList')
            }
        });
        });
    })

    function activeInActive(idVal, activeValue){
        $.ajax({
            url: "{{ route('admin.users.activate_user') }}",
            method: "GET",
            data: {
                id: idVal,
            },
            success: function(result){
                console.log(result)
                notif({
                    type: "success",
                    msg: result.message,
                    position: "center",
                    opacity: 0.8,
                    autohide: true
                });
                $(`.form-switch-description-${idVal}`).text(result.status == 0 ? 'InActive' : 'Active')
            },error:function(e){
                notif({
                    type: "error",
                    msg: "Something went wrong",
                    position: "center",
                    opacity: 0.8,
                    autohide: true
                });
            }
        });
    }
</script>
@endsection