@extends('admin.layouts.contentLayoutMaster')

@section('title', $title)

    @section('vendor-style')
    {{-- vendor css files --}}
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/datatables.min.css')) }}">
    @endsection
<style>
    .profile-picture{
        border-radius: 10px;
        height: 20%;
        weight: 20%;
    }

    td{
        padding: 0 10px 20px 10px;
    }
</style>
@section('content')

  <section class="users-list-wrapper">
    <!-- users filter start -->
    <div class="card">
      <div class="card-header">
      <h4 class="card-title">Akun</h4>
        <a class="heading-elements-toggle"><i class="fa fa-ellipsis-v font-medium-3"></i></a>
      </div>
      <div class="card-content collapse show">
        <div class="card-body">
          @include('admin.layouts.error-message')
          <div class="users-list-filter">
            <div class="container m-1">
                <div class="row">
                        <img style="width: 20%" class="profile-picture" src="{{ asset('images/portrait/small/avatar.svg')}}" alt="Avatar">
                        <table class="row m-3">
                            <tr>
                                <td>NIK</td>
                                <td>: {{ $user->nik }}</td>
                            </tr>
                            <tr>
                                <td>Nama</td>
                                <td>: {{ $user->name }}</td>
                            </tr>
                            <tr>
                                <td>Nomor Telepon</td>
                                <td>: {{ $user->phone_number }} </td>
                            </tr>
                            <tr>
                                <td>Email</td>
                                <td>: {{ $user->email }} </td>
                            </tr>
                        </table>
                        <table class="row m-3">
                          <tr>
                              <td>Role</td>
                              <td>: {{ $user->role }}</td>
                          </tr>
                          <tr>
                              <td>Agent/Cabang</td>
                              <td>: {{ auth()->user()->userable ? (auth()->user()->userable->status_agent ? auth()->user()->userable->agent->name : 'Head Office') : 'Head Office' }}</td>
                          </tr>
                          <tr>
                              <td>Alamat</td>
                              <td>: {{ $user->address }}</td>
                          </tr>
                          <tr>
                              <td>Kota</td>
                              <td>: {{ $user->city }}</td>
                          </tr>
                      </table>
                    </div>
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#editPasswordModal">Ubah Kata Sandi</button>
                    {{-- Modal --}}
                    <div class="modal fade" id="editPasswordModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                      <div class="modal-dialog" role="document">
                        <div class="modal-content">
                          <form id="updatePasswordForm"
                                method="POST"
                                action="{{ route('admin.update-password') }}"
                          >
                          @csrf
                          <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">Ubah Kata Sandi</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                              <span aria-hidden="true">&times;</span>
                            </button>
                          </div>

                          <div class="modal-body">
                            <div class="form-group">
                              <label for="oldPassword">Kata Sandi Lama Anda</label>
                              <input type="password" class="form-control" name="old_password">
                              @if ($errors->has('old_password'))
                                  <span class="invalid-feedback" role="alert">
                                    <strong>{{ $errors->first('old_password') }}</strong>
                                  </span>
                              @endif
                            </div>
                            <div class="form-group">
                              <label for="newPassword">Kata Sandi Baru Anda</label>
                              <input type="password" class="form-control" name="password">
                              @if ($errors->has('password'))
                                  <span class="invalid-feedback" role="alert">
                                    <strong>{{ $errors->first('password') }}</strong>
                                  </span>
                              @endif
                            </div>
                            <div class="form-group">
                              <label for="repeatNewPassword">Ulangi Kata Sandi Baru Anda</label>
                              <input type="password" class="form-control" name="password_confirmation">
                              @if ($errors->has('password_confirmation'))
                                  <span class="invalid-feedback" role="alert">
                                    <strong>{{ $errors->first('password_confirmation') }}</strong>
                                  </span>
                              @endif
                            </div>
                          </div>
                          <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                            <button type="submit" class="btn btn-primary">Save</button>
                          </div>
                        </form>
                        </div>
                      </div>
                    </div>
                    {{-- End Modal --}}
                </div>
            </div>
        </div>
      </div>
    </div>
  </section>
@endsection
@section('vendor-script')
  {{-- vendor files --}}
  <script src="{{ asset(mix('vendors/js/tables/datatable/pdfmake.min.js')) }}"></script>
  <script src="{{ asset(mix('vendors/js/tables/datatable/vfs_fonts.js')) }}"></script>
  <script src="{{ asset(mix('vendors/js/tables/datatable/datatables.min.js')) }}"></script>
  <script src="{{ asset(mix('vendors/js/tables/datatable/datatables.buttons.min.js')) }}"></script>
  <script src="{{ asset(mix('vendors/js/tables/datatable/buttons.html5.min.js')) }}"></script>
  <script src="{{ asset(mix('vendors/js/tables/datatable/buttons.print.min.js')) }}"></script>
  <script src="{{ asset(mix('vendors/js/tables/datatable/buttons.bootstrap.min.js')) }}"></script>
  <script src="{{ asset(mix('vendors/js/tables/datatable/datatables.bootstrap4.min.js')) }}"></script>
@endsection
@section('page-script')
  {{-- Page js files --}}
  <script src="{{ asset(mix('js/scripts/datatables/datatable.js')) }}"></script>

  <script>
    $(document).ready(function(){
      function alignModal(){
          var modalDialog = $(this).find(".modal-dialog");
          /* Applying the top margin on modal dialog to align it vertically center */
          modalDialog.css("margin-top", Math.max(0, ($(window).height() - modalDialog.height()) / 2));
      }
      // Align modal when it is displayed
      $(".modal").on("shown.bs.modal", alignModal);

      // Align modal when user resize the window
      $(window).on("resize", function(){
          $(".modal:visible").each(alignModal);
      });

      // $('#updatePasswordForm').submit(function(e) {
      //     e.preventDefault();
      //     console.log("hshshshshsh")
      // });

    });

</script>
@endsection