<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
  @include('layout.header')
    <style>
        .center {
            height:100%;
            display:flex;
            align-items:center;
            justify-content:center;

        }
        .form-input {
            width:250px;
            padding:20px;
        }
        .form-input img {
            width:100%;
            display:{{''==''?'none':'block'}};
            margin-bottom:10px;
        }
        .form-input input {
            display:none;
        }

        .form-input label {
            height:25px;
            background:#cdcdcd26;
            color:#c9c9c9;
            cursor:pointer;
            width: 75px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
  <div class="row" id="x" style="display: none;">
    <div class="col-12">
      <span class="d-flex align-items-center purchase-popup">
        <i class="typcn typcn-delete-outline" id="bannerClose"></i>
      </span>
    </div>
  </div>
  <div class="container-scroller">
    @include('layout.navbar')
    <!-- partial -->
    @include('layout.breadscrum')
    <div class="container-fluid page-body-wrapper">

      @include('layout.sidebar')

      <!-- partial -->
      <div class="main-panel">
        <div class="content-wrapper">
          <div class="row">

            <div class="col-md-12 grid-margin stretch-card">

                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title text-bold"><i class="mdi mdi-dots-vertical menu-icon"></i> {{__('general.profile')}}</h4>

                            <div class="row">

                                <!-- Profile Information -->
                                <div class="col-md-12 px-4">
                                    <div class="card shadow-none">

                                        <div class="card-body pb-0">
                                            <x-alert />

                                        <!-- Avatar -->
                                        <div class="mb-3">
                                            <img src="{{ auth()->user()->avatar
                                                ? asset('storage/avatars/'.auth()->user()->avatar)
                                                : 'https://ui-avatars.com/api/?name='.urlencode(auth()->user()->name) }}"
                                                class="rounded-circle"
                                                width="100"
                                                height="100">
                                        </div>
                                        <!-- Name -->
                                        <h6 class="mb-1">{{ auth()->user()->name }}</h6>
                                        <!-- Extra Info -->
                                        <div class="text-start">
                                            <p>
                                                {{__('general.user_name')}} :
                                                <strong>{{ auth()->user()->email }}</strong>
                                            </p>
                                            <p>
                                                {{__('general.user_role')}} :
                                                <strong>{{ auth()->user()->role->name_en }}</strong>
                                            </p>
                                        </div>

                                     </div>

                                    </div>
                                </div>


                                <!-- Upload Signature -->
                                <div class="col-md-6 p-0">
                                    <div class="card shadow-none ml-4 mt-4 p-4 border" style="height: 45vh;">
                                        <h6>{{__('general.upload_signature')}}</h6>
                                        <div class="card-body">

                                            <form method="POST"
                                                action="{{ url('user/profile/signature/upload') }}"
                                                enctype="multipart/form-data">
                                                @csrf

                                                <div class="mb-3">

                                                    <label>{{__('general.signature_image')}}</label>

                                                    <input type="file"
                                                        class="form-control"
                                                        name="signature">

                                                </div>

                                                @if(auth()->user()->signature)
                                                <div class="mb-3">
                                                    <label>{{__('general.current_signature')}}</label><br>

                                                    <img src="{{ asset('storage/images/signature/'.auth()->user()->signature) }}"
                                                        width="200">
                                                </div>
                                                @endif

                                                <button class="btn btn-md btn-inverse-info rounded-25">
                                                    <i class="fa fa-floppy-o"></i>&nbsp;&nbsp;<span class="save">{{__('general.btn_save')}}</span>
                                                </button>

                                            </form>

                                        </div>

                                    </div>
                                </div>

                                <!-- Change Password -->
                                <div class="col-md-6 p-0">
                                    <div class="card shadow-none m-4 p-4 border" style="height: 45vh;">
                                        <h6>{{__('general.change_password')}}</h6>
                                        <div class="card-body">


                                            <form method="POST" action="{{ route('profile.change_password') }}">
                                                @csrf

                                                <div class="mb-3">
                                                    <label>{{__('general.current_password')}}</label>
                                                    <div class="input-group">
                                                        <input type="password"
                                                               id="current_password"
                                                               name="current_password"
                                                               class="form-control rounded-right-0">

                                                        <button class="btn btn-secondary rounded-left-0 btn-sm px-3"
                                                                type="button"
                                                                onclick="togglePassword('current_password')">
                                                            <i class="mdi mdi-looks"></i>
                                                        </button>
                                                    </div>

                                                </div>

                                                <div class="mb-3">
                                                    <label>{{__('general.new_password')}}</label>
                                                    <div class="input-group">
                                                        <input type="password"
                                                               id="new_password"
                                                               name="new_password"
                                                               class="form-control rounded-right-0">

                                                        <button class="btn btn-secondary rounded-left-0 btn-sm px-3"
                                                                type="button"
                                                                onclick="togglePassword('new_password')">
                                                            <i class="mdi mdi-looks"></i>
                                                        </button>
                                                    </div>
                                                </div>

                                                <div class="mb-3">
                                                    <label>{{__('general.confirm_password')}}</label>
                                                    <div class="input-group">
                                                        <input type="password"
                                                               id="new_password_confirmation"
                                                               name="new_password_confirmation"
                                                               class="form-control rounded-right-0">

                                                        <button class="btn btn-sm btn-secondary rounded-left-0 px-3"
                                                                type="button"
                                                                onclick="togglePassword('new_password_confirmation')">
                                                                <i class="mdi mdi-looks"></i>
                                                        </button>
                                                    </div>
                                                </div>

                                                <button class="btn btn-md btn-inverse-info rounded-25">
                                                    <i class="fa fa-floppy-o"></i>&nbsp;&nbsp;<span class="save">{{__('general.btn_save')}}</span>
                                                </button>

                                            </form>

                                        </div>
                                    </div>
                                </div>

                            </div>

                    </div>
                </div>
            </div>

          </div>
        </div>


        @include('layout.footer')
      </div>
    </div>
  </div>
  @include('layout.common_script')

</body>

<script>


    var base_url = "{{url('laboratory-profile')}}";


    $("#btnViewLabData").on('click',function(e){
        e.preventDefault();
        data_id = $('#data-id').val();
        let url = "{{url('laboratory/get-data')}}/"+$('#source-lab').val();
        $.ajax({
            url: url,
            type:"get",
            success:function(res){
                if(res.success){
                    let data = (res.data)
                    data.map(item =>{
                        console.log(item)
                    })
                }
            }
        });
    });

</script>

<script>

function togglePassword(id){

    let input = document.getElementById(id);

    if(input.type === "password"){
        input.type = "text";
    }else{
        input.type = "password";
    }

    }

</script>

</html>

