@extends('layouts.new-app')
@section('content')
<div class="container-fluid">
    <div class="col-md-12 col-sm-12 col-lg-12">
        <div class="row">
            <div class="col-md-9 col-sm-9 col-lg-9 breadcrumbcustomize">
                <div class="row">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ url('/home') }}">Home</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Edit Profile</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="container h-100">
    <div class="row d-flex justify-content-center  h-100">
        <div class="col-md-12 col-xs-12 col-sm-12 col-lg-12 chapterscontainer">
            <div class="row">
                <div class="col-md-12 col-xs-12 col-sm-12 col-lg-6">
                    <div class="row d-flex justify-content-center  h-100">
                        <div class="col-md-12 col-xs-12 col-sm-12 col-lg-12">
                            <div class="row">
                                <h4>Edit Profile</h4>
                                <div style="width: 100%;">
                                {{ Form::model($user, ['route'=>['profile.update'], 'method'=>'POSt', 'autoComplete'=>'off', 'files'=>'true', 'id'=>'editProfile']) }}
                                {{ Form::hidden('user_id', $user->id) }}
                                    <div class="col-lg-12 col-md-12 col-lg-12" style="width: 100%">
                                        <div class="input-group" style="width: 100%">
                                            <div class="form-group label-floating" style="width: 100%">
                                                <label class="control-label">First Name</label>
                                                <input name="name" type="text" class="form-control" value="{{ $user->name }}">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-12 col-md-12 col-lg-12" style="width: 100%">
                                        <div class="input-group" style="width: 100%">
                                            <div class="form-group label-floating" style="width: 100%">
                                                <label class="control-label">Last Name</label>
                                                <input name="last_name" type="text" class="form-control" value="{{ $user->last_name }}">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-12 col-md-12 col-lg-12" style="width: 100%">
                                        <div class="input-group" style="width: 100%">
                                            <div class="form-group label-floating" style="width: 100%">
                                                <label class="control-label">Phone</label>
                                                <input name="phone" type="text" class="form-control" value="{{ $user->phone }}">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-12 col-md-12 col-lg-12" style="width: 100%">
                                        <div class="input-group" style="width: 100%">
                                            <div class="form-group label-floating" style="width: 100%">
                                                <label class="control-label">Email / User Name</label>
                                                <input name="email" type="text" class="form-control" value="{{ $user->email }}" readonly>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-12 col-lg-12">
                                        <div class="form-group label-floating">
                                            <label class="control-label">UST Operator Training State</label>
                                            {{ Form::select('state', \App\Classes\CommonSelects::states(), $user->state_id, ['class'=>'form-control', 'style'=>'-webkit-appearance: none; ', 'id'=>'stateSelect']) }}
                                        </div>
                                    </div>
                                    <div class="col-lg-12 col-md-12 col-lg-12" style="width: 100%">
                                        <label class="control-label" style="font-size: 14px; margin-bottom: 20px;">Profile Pic</label>
                                        <div style="width: 100%">
                                            <input type="file" id="myFile" name="pic">
                                        </div>
                                    </div>
                                    <div class="col-lg-12 col-md-12 col-lg-12" style="width: 100%">
                                        <div class="form-group">
                                            <label>Address</label>
                                            <textarea class="form-control" name="address" placeholder="" style="height: 100px">{{ $user->address }}</textarea>
                                        </div>
                                    </div>
                                    <div class="text-center" style="margin-bottom: 20px;">
                                        <button type="submit" class="btn buttonorange">Update</button>
                                    </div>
                                    {{ Form::close() }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 col-xs-12 col-sm-12 col-lg-6">
                    <div class="row d-flex justify-content-center  h-100">
                        <div class="col-md-12 col-xs-12 col-sm-12 col-lg-12">
                            <div class="row">
                                <h4>Change Password</h4>
                                </h4>
                                <div style="width: 100%;">
                                {{ Form::model($user, ['route'=>['profile.changepassword'], 'method'=>'POSt', 'autoComplete'=>'off', 'id'=>'changePassword']) }}
                                {{ Form::hidden('user_id', $user->id) }}
                                    <div class="col-lg-12 col-md-12 col-lg-12" style="width: 100%">
                                        <div class="input-group" style="width: 100%">
                                            <div class="form-group label-floating" style="width: 100%">
                                                <label class="control-label">Email</label>
                                                <input name="email" type="text" class="form-control" value="{{ auth()->user()->email }}" readonly>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-12 col-md-12 col-lg-12" style="width: 100%">
                                        <div class="input-group" style="width: 100%">
                                            <div class="form-group label-floating" style="width: 100%">
                                                <label class="control-label">Password</label>
                                                <input name="password" type="password" class="form-control" id="password">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-12 col-md-12 col-lg-12" style="width: 100%">
                                        <div class="input-group" style="width: 100%">
                                            <div class="form-group label-floating" style="width: 100%">
                                                <label class="control-label">Confirm Password</label>
                                                <input name="confirmpassword" type="password" class="form-control">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="text-center" style="margin-bottom: 20px;">
                                        <button type="submit" class="btn buttonorange">Update</button>
                                    </div>
                                    {{ Form::close() }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $("#stateSelect").on('change', function(){
        var id = $(this).val();
        if(id != 'OH') {
            swal({
                title: 'Presently we are availlable only in Ohio State'
            });
            $("#stateSelect").val('OH');
        }
    });
    
    $(function() {
        $("#editProfile").validate({
            rules: {
                'email': {
                    required: true,
                    email: true,
                },
                'phone': {
                    number: true,
                }
            }
        })
    });
    
    $(function() {
        $("#changePassword").validate({
            rules: {
                'password': {
                    required: true,
                    minlength: 8,
                },
                'confirmpassword': {
                    required: true,
                    minlength: 8,
                    equalTo: "#password"
                },
            },
            highlight: function (input) {
                $(input).parents('.form-line').addClass('error');
            },
            unhighlight: function (input) {
                $(input).parents('.form-line').removeClass('error');
            },
            errorPlacement: function (error, element) {
                $(element).parents('.input-group').after(error);
            },
        })
    });
</script>
@endsection