@extends('admin.admin_app')

@section('content')

<div class="content-wrapper">
    <div class="container-xxl flex-grow-1 container-p-y">
        <h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-light">Account Settings /</span> My Account</h4>

        <div class="row">
            <div class="col-md-12">
                <div class="card mb-4">
                    <h5 class="card-header">Profile Details </h5> 
                    <div class="card-body">
                        <form action="{{ route('myaccount.edit_account') }}" autocomplete="off" id="formAccount" method="POST" enctype="multipart/form-data">
                            @csrf
                            @method('POST')
                            <div class="d-flex align-items-start align-items-sm-center gap-4">
                                <img src="{{ asset('uploads/'.Session::get('profile_image')) }}/{{auth()->guard('admin')->user()->profile_image }}" alt="user-avatar" class="d-block rounded" height="100" width="100" id="uploadedAvatar" />
                                <div class="button-wrapper">
                                    <input class="form-control account-file-input" type="file" id="upload" name="profile_image" value="" autofocus />
                                </div>
                            </div>
                            </div>
                            <div class="card mb-4">
                            <!-- Account -->
                            <div class="card-body">
                            <hr class="my-0" />
                            <div class="card-body">

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

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

                            <div class="row">
                                <div class="mb-3 col-md-6">
                                    <label for="firstName" class="form-label">First Name</label>
                                    <input class="form-control" type="text" id="full_name" name="full_name" value="{{ auth()->guard('admin')->user()->full_name }}" autofocus />
                                </div>
                                <div class="mb-3 col-md-6">
                                    <label for="email" class="form-label">E-mail</label>
                                    <input class="form-control" type="text" id="email" name="email" value="{{ auth()->guard('admin')->user()->email }}" />
                                </div>
                                <div class="mb-3 col-md-6">
                                    <label class="form-label" for="phoneNumber">Phone Number</label>
                                    <div class="input-group input-group-merge">
                                        <input type="text" id="phoneNumber" name="phoneNumber" class="form-control"  value="{{ auth()->guard('admin')->user()->contact_no }}"/>
                                    </div>
                                </div>
                                <hr class="my-0">
                                <h5 class="card-header"> Change Password </h5> 
                                <div class="mb-3 col-md-6">
                                    <label for="Oldpass" class="form-label">Old Password</label>
                                    <input class="form-control" type="password" id="oldpass" name="oldpass" autocomplete="new-password"/>
                                </div>
                                <div class="mb-3 col-md-6">
                                    <label for="newpass" class="form-label">New Password</label>
                                    <input class="form-control" type="password" id="newpass" name="newpass" autocomplete="off"/>
                                </div>
                                <div class="mt-2">
                                    <button type="submit" name="submit" class="btn btn-primary me-2">Save changes</button>
                                    <!-- <button type="reset" class="btn btn-outline-secondary">Cancel</button> -->
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script>
    var currentRequest = null;
    $("#formAccount").validate({
        rules:{
            email :{
            required: true,
            email : true
            }
        },
        messages:{
            email:{
            required: 'Please enter an email address',
            email : 'Please enter valid email address'
            }
        },
        submitHandler:function(form){
            var formData = new FormData(form);
            currentRequest = jQuery.ajax({
            type : 'POST',
            data : formData,
            url : '{{ route("myaccount.edit_account") }}',
            dataType : 'JSON',
            contentType : false,
            processData : false,
            beforeSend : function(){
                if(currentRequest != null){
                currentRequest.abort();
                }
            },
            success:function(data){
                $("#login_success").html('');
                $("#login_error").html('');
                if(data.status == '1'){
                    $('#login_success').html('<div class="alert alert-success" role="alert">'+data.message+'</div>');
                    location.reload();
                }
                else{
                  $('#login_error').html('<div class="alert alert-danger" role="alert">'+data.message+'</div>');
                  location.reload();
                }
                setTimeout(() => {
                    $('#login_errors').html('');
                    $('#login_success').html('');
                }, 3000);
            }
            });
        }
    });
</script>
@endsection