@include('header')
<div class="container-fluid flex-grow-1 container-p-y">
    <h4 class="font-weight-bold py-2 mb-3">My Profile</h4>

    <div id="profile_alert"></div>

    <div class="row">
        <div class="col-xl-8">
            <div class="card mb-3">
                <div class="card-body">
                    <h5 class="card-title mb-3">Profile details</h5>
                    <form id="profile-form" method="POST">
                        @csrf
                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label class="floating-label" for="ProfileName">Name</label>
                                <input type="text" class="form-control" id="ProfileName" name="Name"
                                    value="{{ $user->Name }}" required>
                            </div>
                            <div class="form-group col-md-6">
                                <label class="floating-label" for="ProfileUsername">User name</label>
                                <input type="text" class="form-control" id="ProfileUsername"
                                    value="{{ $user->Username }}" readonly>
                            </div>
                            <div class="form-group col-md-4">
                                <label class="floating-label" for="ProfileType">Type</label>
                                <input type="text" class="form-control" value="{{ $user->Type }}" readonly>
                            </div>
                            <div class="form-group col-md-4">
                                <label class="floating-label" for="ProfilePhone">Mobile</label>
                                <input type="text" class="form-control" id="ProfilePhone" name="Phone"
                                    value="{{ $user->Phone }}">
                            </div>
                            <div class="form-group col-md-4">
                                <label class="floating-label" for="ProfileInputStyle">Input style (all forms)</label>
                                <select class="form-control vn-input-style-select" id="ProfileInputStyle" name="InputStyle">
                                    <option value="line" @if($inputStyle === 'line') selected @endif>Line</option>
                                    <option value="square" @if($inputStyle === 'square') selected @endif>Square</option>
                                </select>
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary btn-finish" id="profile_submit">Save profile</button>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-xl-4">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title mb-3">Change password</h5>
                    <p class="text-muted small mb-2">Update your login password.</p>
                    <a href="{{ url('changePassword') }}" class="btn btn-primary btn-finish">Change password</a>
                </div>
            </div>
        </div>
    </div>
</div>

@include('footerscript')
<script>
(function () {
    function applyGlobalInputStyle(style) {
        style = (style === 'square') ? 'square' : 'line';
        if (typeof window.applyGlobalInputStyleClass === 'function') {
            window.applyGlobalInputStyleClass(style);
            return;
        }
        document.documentElement.classList.remove('vn-input-line', 'vn-input-square');
        document.body.classList.remove('vn-input-line', 'vn-input-square');
        var cls = (style === 'square') ? 'vn-input-square' : 'vn-input-line';
        document.documentElement.classList.add(cls);
        document.body.classList.add(cls);
    }

    function showAlert(type, msg) {
        $('#profile_alert').removeClass('alert-success alert-danger')
            .addClass('alert alert-' + type).html(msg).show();
        setTimeout(function () { $('#profile_alert').fadeOut('slow'); }, 2500);
    }

    $('#ProfileInputStyle').on('change', function () {
        var style = this.value;
        applyGlobalInputStyle(style);
        $.post("{{ url('saveInputStyle') }}", {
            _token: '{{ csrf_token() }}',
            style: style
        });
    });

    $('#profile-form').on('submit', function (e) {
        e.preventDefault();
        $.ajax({
            url: "{{ url('updateMyProfile') }}",
            method: 'POST',
            data: new FormData(this),
            contentType: false,
            processData: false,
            beforeSend: function () {
                $('#profile_submit').prop('disabled', true).text('Please wait...');
            },
            success: function (res) {
                $('#profile_submit').prop('disabled', false).text('Save profile');
                if (res && res.ok) {
                    applyGlobalInputStyle($('#ProfileInputStyle').val());
                    showAlert('success', 'Profile updated successfully.');
                } else {
                    showAlert('danger', (res && res.message) ? res.message : 'Could not save profile.');
                }
            },
            error: function () {
                $('#profile_submit').prop('disabled', false).text('Save profile');
                showAlert('danger', 'Could not save profile.');
            }
        });
    });

})();
</script>