@extends('dashboard.layout.base')

@section('content')

      <div class="slim-mainpanel">
        <div class="container">
          <div class="slim-pageheader">
            <ol class="breadcrumb slim-breadcrumb">
              <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
              <li class="breadcrumb-item"><a href="#">Configuration</a></li>
              <li class="breadcrumb-item active" aria-current="page">Modifier votre Mot de pass</li>
            </ol>
            <h6 class="slim-pagetitle">Modifier votre Mot de passe</h6>
          </div><!-- slim-pageheader -->

          <div class="section-wrapper">
            <form action="{{ route('admin.config.changePasswordPost') }}" method="post" enctype="multipart/form-data">

              @include('dashboard.component.dashboard_error')
              @include('dashboard.component.notifications')

              <div class="form-layout">
                  @csrf
                  <div class="row mg-b-25">
                    <div class="col-lg-8">
                      <div class="form-group">
                        <label class="form-control-label">Ancien mot de passe: <span class="tx-danger">*</span></label>
                        <input id="an_pass" class="form-control" type="password" minlength="8" name="old_pass" placeholder="Ancien mot de passe:" value="" required>
                      </div>
                    </div>
                    <div class="col-lg-8">
                        <div class="form-group">
                          <label class="form-control-label">Nouveau mot de passe: <span class="tx-danger">*</span></label>
                          <input id="pass" class="form-control" type="password" minlength="8" name="new_pass" placeholder="Nouveau mot de passe: " value="" required>
                        </div>
                    </div>
                    <div class="col-lg-8">
                        <div class="form-group">
                          <label class="form-control-label">Confirmer votre mot de passe <span class="tx-danger">*</span></label>
                          <input id="confirm_pass" class="form-control" type="password" minlength="8" name="v_new_pass" placeholder="Enter le nom du Categorie" value="" required  onkeyup="validate_password()">
                          <span id="wrong_pass_alert"></span>
                        </div>
                    </div>
                  </div>
                <div class="form-layout-footer d-flex justify-content-end">
                  <button class="btn btn-outline-secondary bd-0 mx-1"><i class="fa fa-reply mg-r-5"></i> Reteur</button>
                  <button id="send" type="submit" class="btn btn-outline-primary bd-0"><i class="fa fa-plus mg-r-5"></i> Enregistrer</button>
                </div><!-- form-layout-footer -->

              </div>
            </form>

          </div>
        @if (auth()->user()->role == 'superadmin')
            <div class="section-wrapper mg-t-20 mg-b-20">
                <label class="section-title">Réinitialiser le mot de passe d'un autre utilisateur</label>
                <div class="form-layout form-layout-2">
                    <div class="row no-gutters">
                        @if(count($admins) > 0)
                            <div class="table-responsive">
                                <table class="table mg-b-0 tx-12">
                                <thead>
                                    <tr class="tx-10">
                                    <th class="pd-y-5">Utilisateur</th>
                                    <th class="pd-y-5 text-center">Réinitialiser le mot de passe</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($admins as $admin)
                                    <tr>
                                        <td class="valign-middle">{{ $admin->name }}</td>
                                        <td class="valign-middle text-center">
                                            <a href="" class="btn btn-warning" data-toggle="modal" data-target="#modaldemo6" onclick="setData({{$admin->id}},'{{$admin->name}}')">Modifier</a>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                                </table>
                            </div><!-- table-responsive -->
                        @else
                        <p>Vous n'avez aucune admin</p>
                        @endif
                    </div>
                </div>
            </div>
            <div id="modaldemo6" class="modal fade" style="display: none;" aria-hidden="true">
                <div class="modal-dialog modal-lg" role="document">
                  <div class="modal-content bd-0 bg-transparent rounded overflow-hidden">
                    <div class="modal-body pd-0">
                      <div class="row no-gutters">
                        <div class="col-lg-12 bg-white">
                          <div class="pd-y-30 pd-xl-x-30">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                              <span aria-hidden="true">×</span>
                            </button>
                            <form id="change_other" action="" method="post" enctype="multipart/form-data">
                                @csrf
                                <div class="pd-x-30 pd-y-10">
                                <h3 class="tx-gray-800 tx-normal mg-b-5">Réinitialiser le mot de passe</h3>
                                <br>
                                <div class="form-group">
                                    <input id="user_name" type="text" name="user_name" class="form-control pd-y-12" readonly>
                                </div><!-- form-group -->
                                <div class="form-group mg-b-20">
                                    <div class="row">
                                        <div class="col-lg-8">
                                            <input id="pass_log_id" type="password" name="new_user_pass" class="form-control pd-y-12" minlength="8" placeholder="Saisi un nouveau mot de passe">
                                            <span toggle="#password" class="fa fa-fw fa-eye field_icon toggle-password"></span>
                                        </div>
                                        <div class="col-lg-4">
                                            <a class="btn btn-secondary text-white" onclick="generatePW()">Générer</a>
                                        </div>
                                    </div>
                                </div><!-- form-group -->
                                <button type="submit" class="btn btn-primary pd-y-12 btn-block">Enregistrer</button>
                                </div>
                            </form>
                          </div><!-- pd-20 -->
                        </div><!-- col-6 -->
                      </div><!-- row -->
                    </div><!-- modal-body -->
                  </div><!-- modal-content -->
                </div><!-- modal-dialog -->
              </div>
        @endif


        </div><!-- container -->

        @include('dashboard.component.copyright')

      </div><!-- slim-mainpanel -->
    </div><!-- slim-body -->
@endsection

@push('styles')

    <link href="{{ asset('dashboard/lib/bootstrap-tagsinput/css/bootstrap-tagsinput.css') }}" rel="stylesheet">
    <link href="{{ asset('dashboard/lib/jquery-toggles/css/toggles-full.css') }}" rel="stylesheet">
    <link href="{{ asset('dashboard/lib/medium-editor/css/medium-editor.css') }}" rel="stylesheet">
    <link href="{{ asset('dashboard/lib/medium-editor/css/default.css') }}" rel="stylesheet">
    <link href="{{ asset('dashboard/lib/select2/css/select2.min.css') }}" rel="stylesheet">

    <style type="text/css">

      .toggle-modern.indigo .toggle-on.active {
          background-color: #1b84e7 !important;
      }

      .toggle-modern.indigo .toggle-on.active + .toggle-blob {
          border: 3px solid #1b84e7 !important;
      }

      .toggle-wrapper {
        width: unset !important;
      }

      .editabl-wrapper textarea {
        display: none;
      }

      .bootstrap-tagsinput {
          border-radius: 0;
      }

    </style>

@endpush

@push('scripts')

    <script src="{{ asset('dashboard/lib/bootstrap-tagsinput/js/bootstrap-tagsinput.js') }}"></script>
    <script src="{{ asset('dashboard/lib/jquery-toggles/js/toggles.min.js') }}"></script>
    <script src="{{ asset('dashboard/lib/medium-editor/js/medium-editor.js') }}"></script>
    <script src="{{ asset('dashboard/lib/select2/js/select2.full.min.js') }}"></script>
    @if (auth()->user()->role == 'superadmin')
        <script>
    function setData(id,name){
        let user_to_change = {
            id:  id,
            name: name,
        };
        let rout = "{{ route('admin.config.resetUserPw' , ['id' => $admin->id]) }}"
        const result = rout.slice(0, -1) + user_to_change.id;
        $('#user_name').val(user_to_change.name);
        $('#change_other').attr('action',result);
        return user_to_change;

    }

    function generatePW(){
        let randomstring = Math.random().toString(36).slice(-8);
        let input = $("#pass_log_id");
        input.val(randomstring);
        input.attr('type','text')
    }

    $(document).on('click', '.toggle-password', function() {
        $(this).toggleClass("fa-eye fa-eye-slash");
        let input = $("#pass_log_id");
        input.attr('type') === 'password' ? input.attr('type','text') : input.attr('type','password')
    });
        </script>
    @endif

    <script type="text/javascript">
    function validate_password() {

        let an_pass = document.getElementById('an_pass').value;
        let pass = document.getElementById('pass').value;
        let confirm_pass = document.getElementById('confirm_pass').value;
        const button = document.getElementById('send')
        if(pass == "" || confirm_pass == "" || an_pass == ""){
            button.disabled = true
        }
        if(pass == an_pass){
            document.getElementById('wrong_pass_alert').style.color = 'red';
            document.getElementById('wrong_pass_alert').innerHTML
            = '☒ Le nouveau mot de passe ne peut pas être le même que votre mot de passe actuel.';
            button.disabled = true
        }
        if (pass != confirm_pass) {
            document.getElementById('wrong_pass_alert').style.color = 'red';
            document.getElementById('wrong_pass_alert').innerHTML
            = '☒ les mots de passe ne sont pas identiques';
            button.disabled = true
        } else {
            document.getElementById('wrong_pass_alert').style.color = 'green';
            document.getElementById('wrong_pass_alert').innerHTML =
                '🗹 Mot de passe correspondant';
            button.disabled = false

        }
    }

    </script>

@endpush