@extends('layouts.acorn.acorn_frontend_app')
@section('header_styles')
    <style>
        .sm-link {
            margin-left: 10px !important;
            font-size: 13px
        }
    </style>
@endsection
@section('content')
    <div class="row">
        <div class="col-auto d-none d-lg-flex">
            <div class="nav flex-column sw-25 mt-n2" id="settingsColumn">
            </div>
        </div>

        <div class="col">
            <div class="page-title-container">
                <div class="row">
                    <div class="col">
                        <h1 class="mb-0 pb-0 display-4" id="title">Profile</h1>
                    </div>

                    @include('frontend.profile.component.menu')

                </div>
            </div>

            <h2 class="small-title">Personal Details</h2>
            <div class="card mb-5">
                <div class="card-body">
                    <form id="update_profile_details_form" class="needs-validation" novalidate>
                        <input type="hidden" type="text" name="user_id" value="{{ $personal_details->id }}" />
                        <div class="mb-3 row">
                            <label class="col-lg-2 col-md-3 col-sm-4 col-form-label">First Name</label>
                            <div class="col-sm-8 col-md-9 col-lg-10">
                                <input type="text" name="first_name" id="first_name" class="form-control"
                                    value="{{ $personal_details->name }}" />
                                <div id="first_name_err" class="profile-details"></div>
                            </div>
                        </div>
                        <div class="mb-3 row">
                            <label class="col-lg-2 col-md-3 col-sm-4 col-form-label">Last Name</label>
                            <div class="col-sm-8 col-md-9 col-lg-10">
                                <input type="text" name="last_name" id="last_name" class="form-control"
                                    value="{{ $personal_details->last_name }}" />
                                <div id="last_name_err" class="profile-details"></div>
                            </div>
                        </div>
                        {{-- <div class="mb-3 row">
                            <label class="col-lg-2 col-md-3 col-sm-4 col-form-label">Company</label>
                            <div class="col-sm-8 col-md-9 col-lg-10">
                                <input type="text" class="form-control" value="Colored Strategies" />
                            </div>
                        </div>
                        <div class="mb-3 row">
                            <label class="col-lg-2 col-md-3 col-sm-4 col-form-label">Location</label>
                            <div class="col-sm-8 col-md-9 col-lg-10">
                                <input type="text" class="form-control" />
                            </div>
                        </div>
                        <div class="mb-3 row">
                            <label class="col-lg-2 col-md-3 col-sm-4 col-form-label">Birthday</label>
                            <div class="col-sm-8 col-md-9 col-lg-10">
                                <input type="text" class="form-control date-picker-close" id="birthday"
                                    value="08/08/1988" />
                            </div>
                        </div>
                        <div class="mb-3 row">
                            <label class="col-lg-2 col-md-3 col-sm-4 col-form-label">Gender</label>
                            <div class="col-sm-8 col-md-9 col-lg-10">
                                <select class="select-single-no-search" data-width="100%" id="genderSelect">
                                    <option label="&nbsp;"></option>
                                    <option value="1">Female</option>
                                    <option value="2">Male</option>
                                    <option value="3">Other</option>
                                    <option value="4">None</option>
                                </select>
                            </div>
                        </div>
                        <div class="mb-3 row">
                            <label class="col-lg-2 col-md-3 col-sm-4 col-form-label">Bio</label>
                            <div class="col-sm-8 col-md-9 col-lg-10">
                                <textarea class="form-control" rows="3">I'm a Cyborg, But That's OK</textarea>
                            </div>
                        </div> --}}
                        <div class="mb-3 row">
                            <label class="col-lg-2 col-md-3 col-sm-4 col-form-label">Email</label>
                            <div class="col-sm-8 col-md-9 col-lg-10">
                                <input type="email" name="email" id="email" class="form-control"
                                    value="{{ $personal_details->email }}" />
                                <div id="email_err" class="profile-details"></div>
                            </div>
                        </div>
                        <div class="mb-3 row">
                            <label class="col-lg-2 col-md-3 col-sm-4 col-form-label">Phone</label>
                            <div class="col-sm-8 col-md-9 col-lg-10">
                                <input type="text"name="mobile" id="mobile" class="form-control"
                                    value="{{ $personal_details->mobile }}" />
                                <div id="mobile_err" class="profile-details"></div>
                            </div>
                        </div>
                        <div class="mb-3 row mt-5">
                            <div class="col-sm-8 col-md-9 col-lg-10 ms-auto">
                                <button id="profile_details_update_btn" type="submit"
                                    class="btn btn-primary">Update</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        $(document).ready(function() {});

        $('#update_profile_details_form').submit(function(event) {
            event.preventDefault();
            document.body.classList.add('spinner');
            $('#profile_details_update_btn').prop("disabled", true);
            let formData = new FormData(this);

            $(".form-control").removeClass("is-invalid");
            $(".profile-details").text('');
            $(".profile-details").removeClass("invalid-feedback");
            $(".profile-details").css("display", "none");

            $.ajax({
                type: "POST",
                url: frontendURL + 'client/profile-details/update',
                data: formData,
                contentType: false,
                processData: false,
                success: function(data) {
                    document.body.classList.remove('spinner');
                    if (data.status != 0) {

                        swal({
                                title: data.msg,
                                type: "success",
                                icon: "success",
                                position: 'center-start',
                                showConfirmButton: false,
                                timer: 3000
                            })
                            .then(() => {
                                location.reload();
                            });
                    } else {
                        swal({
                            title: data.msg,
                            type: "error",
                            icon: "error",
                            showConfirmButton: false,
                        });
                        document.body.classList.remove('spinner');
                    }
                },
                error: function(response) {
                    document.body.classList.remove('spinner');
                    var errorJson = JSON.parse(response.responseText);
                    displayFormFieldErrors('update_profile_details_form', errorJson.errors);
                    $('#profile_details_update_btn').prop("disabled", false);
                }
            });

            return false;
        });

    </script>
@endsection
@section('footer_scripts')
    <script src="{{ asset('acorn/js/pages/profile.settings.js') }}"></script>
    <script src="{{ asset('acorn/js/vendor/movecontent.js') }}"></script>
@endsection