@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">Country</label>
                        <div class="col-sm-8 col-md-9 col-lg-10">
                            <span class="form-control">{{ $personal_details->Country->country_name }}</span>                            
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="col-lg-2 col-md-3 col-sm-4 col-form-label">{{ $personal_details->Country->country_code == 94 ? "NIC Number" : "Passport Number" }}</label>
                        <div class="col-sm-8 col-md-9 col-lg-10">
                            <input type="text"name="nic_passport" id="nic_passport" class="form-control"
                                   value="{{ $personal_details->nic_passport }}" />
                            <div id="nic_passport_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">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">
                            <div class="input-group mb-3">
                                <span class="input-group-text ">(+{{ $personal_details->Country->country_code }})</span>
                                <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>                    
                    <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