@extends('admin.layout.master') <!-- Extend the layout -->

@section('content')

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

    <div class="">

        <div class="row">
            <div class="col-md-12 grid-margin stretch-card">
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title">Update Profile</h4>

                        <form class="forms-sample row" method="POST" action="{{ route('admin.update_profile') }}"
                            enctype="multipart/form-data">
                            @csrf

                            <div class="col-md-6 form-group">
                                <label for="exampleInputUsername1">Name</label>
                                <input type="text" class="form-control" id="exampleInputUsername1" name="name"
                                    value="{{ $user->name }}" placeholder="Name">
                            </div>
                            <div class="col-md-6  form-group">
                                <label for="exampleInputEmail1">Email address</label>
                                <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"
                                    value="{{ $user->email }}" disabled>
                            </div>
                            <div class="col-md-6  form-group">
                                <label for="exampleInputUsername1">Phone</label>
                                <input type="text" class="form-control" id="exampleInputUsername1" name="phone"
                                    value="{{ $user->phone }}" placeholder="Name" onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))" maxlength="10">
                            </div>
                            <div class="col-md-6  form-group">
                                <label for="exampleInputUsername1">Profile Picture</label>
                                <input type="file" class="form-control" id="exampleInputUsername1" name="profile_image"
                                    value="" placeholder="Name">
                            </div>
                            <div class="col-md-6  form-group">
                                <label for="exampleInputPassword1">Password</label>
                                <input type="password" name="password" class="form-control" id="exampleInputPassword1"
                                    placeholder="Password" >
                                <i class="bi bi-eye-slash" id="togglePassword" style="
                                        float: right;
                                        margin-top: -34px;
                                        margin-right: 9px;
                                    "></i>

                                @if ($errors->has('password'))
                                    <div class="error" style="color: red;">{{ $errors->first('password') }}</div>
                                @endif

                            </div>
                            <div class=" col-md-6 form-group">
                                <label for="exampleInputConfirmPassword1">Confirm Password</label>
                                <input type="text" name="confirm_password" class="form-control"
                                    id="exampleInputConfirmPassword1" placeholder="Confirm Password">

                                @if ($errors->has('confirm_password'))
                                    <div class="error" style="color: red;">{{ $errors->first('confirm_password') }}</div>
                                @endif
                            </div>
                           
                            <div class="col-md-12 mb-3 ">
                                <button type="submit" class="btn btn-primary mr-2">Submit</button>
                                <a href="{{url('admin/dashboard')}}" class="btn btn-light" >Cancel</a>

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

    </div>
    <script>
        const togglePassword = document
            .querySelector('#togglePassword');
        const password = document.querySelector('#exampleInputPassword1');
        togglePassword.addEventListener('click', () => {
            // Toggle the type attribute using
            // getAttribure() method
            const type = password
                .getAttribute('type') === 'password' ?
                'text' : 'password';
            password.setAttribute('type', type);
            if(password.getAttribute('type') === 'password'){
            // Toggle the eye and bi-eye icon
            $('#togglePassword').removeClass("bi bi-eye");
            $('#togglePassword').addClass("bi bi-eye-slash");
            }else{
                $('#togglePassword').removeClass("bi bi-eye-slash");
            $('#togglePassword').addClass("bi bi-eye");
            }

        });

       
    </script>
@endsection