@extends('layout.layout')
@section('title','Manage')
@section('content')
    <section class="content-header">
        <div class="container-fluid">
            <h5>Manage</h5>
        </div>
    </section>
    <section class="content">
        <div class="container-fluid">
            <div class="callout callout-info m-3" style="background-color: #FFFFFF; padding: 25px;">
                <div class="row">
                    <div class="col-lg-4">
                        <center>
                            <img src="/res/blank.webp" class="mt-5 rounded-circle"
                                 style="width: 200px;height: 200px" id="file-ip-1-preview">
                        </center>
                        <center class="mt-2">
                            <label for="file-ip-1" class="mt-2 btn btn-primary btn-sm br-15" style="width:150px">
                                Upload
                            </label><br>
                            <button class="btn btn-outline-secondary btn-sm br-15" style="width:150px"
                                    onclick="dropImage()">
                                Remove
                            </button>
                        </center>
                    </div>
                    <div class="col-lg-8 p-4">
                        <h5 class="font-weight-bold">Personal Information</h5>
                        <p>
                            You can edit your information here and change your password.</p>
                        <hr>
                        <form id="form" enctype="multipart/form-data">
                            @csrf
                            <div class="form-row">
                                <div class="form-group col-md-4">
                                    <label for="">Last Name</label>
                                    <input type="text" class="form-control" id="lastname" name="lastname"
                                           placeholder="Last Name" required>
                                </div>
                                <div class="form-group col-md-4">
                                    <label for="">First Name</label>
                                    <input type="text" class="form-control" id="firstname" name="firstname"
                                           placeholder="First Name"
                                           required>
                                </div>
                                <div class="form-group col-md-4">
                                    <label for="">Middle Name</label>
                                    <input type="text" class="form-control" id="middlename" name="middlename"
                                           placeholder="Middle Name">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="">Email</label>
                                <input type="text" class="form-control" id="email" name="email"
                                       onkeyup="inputDescription('#email')" placeholder="jdelacruz@rgoc.com.ph"
                                       required>

                                <div class="" id="email_validation"></div>
                                <small class="text-muted" id="email_description">You will received notification from the
                                    email
                                    you have
                                    provided.</small>
                            </div>
                            <div class="form-group">
                                <label for="">Username</label>
                                <input type="text" class="form-control" id="username" name="username"
                                       placeholder="jdelacruz"
                                       onkeyup="inputDescription('#username')" readonly required>
                                <div class="" id="username_validation"></div>

                                <small class="text-muted" id="username_description">This will be your access key to
                                    access the
                                    system</small>
                            </div>
                            <div class="form-group">
                                <label for="">Password</label>
                                <input type="password" class="form-control" id="password" name="password"
                                       placeholder="password">
                                <small class="text-muted">Leave it blank if you want to wish to use the old
                                    password</small>
                            </div>

                            <input type="text" class="form-control" id="reset_profile_picture"
                                   name="reset_profile_picture"
                                   placeholder="reset" value="0" hidden>
                            <input type="file" id="file-ip-1" name="image" accept="image/*"
                                   onchange="showPreview(event);"
                                   hidden>
                            <button type="submit" class="btn btn-success br-15 mt-2"><i class="fas fa-save mr-2"></i>
                                Update
                                Profile
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('modal-title')
    <i class="fas fa-bell mt-1 mr-2"></i> System Notification
@endsection

@section('modal-content')
    <h4>Hi {{Auth::user()->firstname}}!</h4>
    <p>
        This is your first time logging in to our system. Please fill out the required information, including a profile
        picture of yourself. You can also change your password if you'd like.
    </p>
@endsection

@section('scripts')
    @include('account-settings.script')
    @include('account-settings.validations')

    <script>
        let isLogin = @json(Auth::user()->is_login);
        const modal = $("#modal");
        const modalFoot = $(".modal-footer");

        if (isLogin == 0) {
            modal.modal('toggle');
            modalFoot.hide();
        }
    </script>
@endsection