@extends('layouts.main')

@section('title')
    User Settings
@endsection

@section('style')
    <link rel="stylesheet" type="text/css" href="{{asset('app-assets/vendors/css/toastr.css')}}">
@endsection
@section('content')
    @if($errors->any())
        @foreach ($errors->all() as $error)
            <div class="alert alert-danger mb-2" role="alert">
                <strong>{{$error}}</strong>
            </div>
        @endforeach
    @endif
    @if ($message = Session::get('success'))
        <div class="alert alert-success mb-2" role="alert">
            <strong>{{$message}}</strong>
        </div>
    @endif

    <div class="content-wrapper"><!--Statistics cards Starts-->
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">USER SETTINGS</h4>
                <p>Please change your settings here.</p>
            </div>
            <div class="card-content">
                <div class="card-body">
                    <ul class="nav nav-tabs">
                        <li class="nav-item">
                            <a class="nav-link active" id="base-tab1" data-toggle="tab" aria-controls="tab1" href="#tab1"
                               aria-expanded="true">Personal Info</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="base-tab2" data-toggle="tab" aria-controls="tab2" href="#tab2" aria-expanded="false">Security Info</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="base-tab3" data-toggle="tab" aria-controls="tab3" href="#tab3" aria-expanded="false">Business Info</a>
                        </li>
                    </ul>
                    <div class="tab-content px-1 pt-1">
                        <div role="tabpanel" class="tab-pane active" id="tab1" aria-expanded="true" aria-labelledby="base-tab1">
                            <form class="form" action="{{route('settings_personal_info')}}" method="post" enctype="multipart/form-data" >
                                @csrf
                                <div class="form-body">
                                    <h4 class="form-section"><i class="ft-user"></i> General Info</h4>
                                    <div class="row">
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <label for="photoFile" class="ml-4">Your Photo</label>
                                                @if($user->avatar)
                                                    <img class="media-object d-flex mr-3 round-media" id="photoImage" src="{{asset('uploads/avatars')}}/{{$user->avatar}}" alt="User Avatar" style="width: 150px;height: 150px;border-radius: 50%">
                                                @else
                                                    <img class="media-object d-flex mr-3 round-media" id="photoImage" src="{{asset('app-assets/img/portrait/avatars/default.png')}}" alt="No Avatar" style="width: 150px;height: 150px;border-radius: 50%">
                                                @endif
                                                <button type="button" class="btn btn-danger btn-sm mt-2 ml-2" id="changePhotoButton"><i class="ft-upload mr-1"></i>Upload Photo</button>
                                                <input type="file" class="form-control-file" id="photoFile" name="photoFile" accept="image/x-png,image/gif,image/jpeg" style="display: none" onchange="onLoadPhoto(event)">
                                            </div>
                                        </div>
                                        <div class="col-md-9">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label for="first_name">First Name</label>
                                                        <input type="text" id="first_name" class="form-control" name="first_name" value="{{$user->first_name}}" required>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label for="last_name">Last Name</label>
                                                        <input type="text" id="last_name" class="form-control" name="last_name" value="{{$user->last_name}}" required>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label for="suffix">Suffix</label>
                                                        <input type="text" id="suffix" class="form-control" name="suffix" value="{{$user->suffix}}" required>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label for="gender">Gender</label>
                                                        <select class="form-control" id="gender" name="gender" required>
                                                            <option value="0" @if($user->gender == 0) selected @endif>Male</option>
                                                            <option value="1" @if($user->gender == 1) selected @endif>Female</option>
                                                            <option value="2" @if($user->gender == 2) selected @endif>Other</option>
                                                        </select>

                                                    </div>
                                                </div>

                                            </div>
                                        </div>

                                    </div>

                                    <h4 class="form-section"><i class="ft-mail"></i> Contact Info</h4>
                                    <div class="row">
                                        <div class="col-md-5">
                                            <div class="form-group">
                                                <label for="email">E-mail</label>
                                                <input type="email" id="email" class="form-control" value="{{$user->email}}" readonly>
                                            </div>
                                        </div>
                                        <div class="col-md-3 text-center">
                                            <div class="form-group">
                                                <label for="">Status</label>
                                                <div>
                                                    @if($user->email_verified == true)
                                                        <p class="badge badge-indigo mt-1">Verified</p>
                                                    @else
                                                        <p class="badge badge-secondary mt-1">Not Verified</p>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-2">
                                            <div class="form-group">
                                                <label for=""></label>
                                                <div><button type="button" class="btn btn-primary btn-sm mt-2" onclick="resendEmail()"><i class="ft-refresh-ccw mr-1"></i>Resend</button></div>
                                            </div>
                                        </div>
                                        <div class="col-md-2">
                                            <div class="form-group">
                                                <label for=""></label>
                                                <div><button type="button" class="btn btn-success btn-sm mt-2" onclick="changeEmail()"><i class="ft-external-link mr-1"></i>Change</button></div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-5">
                                            <div class="form-group">
                                                <label for="phone">Mobile Number</label>
                                                <input type="text" id="phone" class="form-control" value="{{$user->phone}}" readonly>
                                            </div>
                                        </div>
                                        <div class="col-md-3 text-center">
                                            <div class="form-group">
                                                <label for="">Status</label>
                                                <div>
                                                    @if($user->phone_verified == true)
                                                        <p class="badge badge-indigo  mt-1">Verified</p>
                                                    @else
                                                        <p class="badge badge-secondary mt-1">Not Verified</p>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-2">
                                            <div class="form-group">
                                                <label for=""></label>
                                                <div><button type="button" class="btn btn-primary btn-sm mt-2"><i class="ft-refresh-ccw mr-1"></i>Resend</button></div>
                                            </div>
                                        </div>
                                        <div class="col-md-2">
                                            <div class="form-group">
                                                <label for=""></label>
                                                <div><button type="button" class="btn btn-success btn-sm mt-2"><i class="ft-external-link mr-1"></i>Change</button></div>
                                            </div>
                                        </div>
                                    </div>

                                </div>

                                <h4 class="form-section"><i class="fa fa-home"></i> Address Info</h4>
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="address">Address</label>
                                            <input type="text" id="address" class="form-control" name="address" value="{{$user->address}}" required>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="country">Country</label>
                                            <select class="form-control" id="country" name="country">
                                                @foreach($countries as $country)
                                                    <option value="{{$country->id}}" @if($user->country == $country->id) selected @endif>{{$country->country_name}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="state">State</label>
                                            <input type="text" id="state" class="form-control" name="state" value="{{$user->state}}" required>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="city">City</label>
                                            <input type="text" id="city" class="form-control" name="city" value="{{$user->city}}" required>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="zip">Zip</label>
                                            <input type="text" id="zip" class="form-control" name="zip" value="{{$user->zip}}" required>
                                        </div>
                                    </div>

                                </div>

                                <h4 class="form-section"><i class="fa fa-info"></i> User Info</h4>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="racial_identity">Racial Identity /diversity status</label>
                                            <select class="form-control" id="racial_identity" name="racial_identity" required>
                                                                                                @foreach($identities as $identity)
                                                    <option value="{{$identity->id}}" @if($user->racial_identity == $identity->id)  selected @endif>{{$identity->name}}</option>
                                                @endforeach
                                                <option value="-1">Other(specify)</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="user_title">User Title</label>
                                            <select class="form-control" id="user_title" name="user_title">
                                                                                                @foreach($user_titles as $title)
                                                    <option value="{{$title->id}}" @if($user->user_title == $title->id)  selected @endif>{{$title->name}}</option>
                                                @endforeach
                                                <option value="-1">Other affiliation (specify)</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-6 form-group" id="racial_identity_row" @if($identity_flag == true) style="display: none;" @endif>
                                        <div class="form-group">
                                            <label for="custom_racial_identity">Custom Racial Identity /diversity status</label>
                                            <input type="text" class="form-control" name="custom_racial_identity" id="custom_racial_identity" placeholder="Enter Custom Racial Identity /diversity status.." @if($identity_flag == false) value="{{$user->racial_identity}}" @endif>
                                        </div>
                                    </div>
                                    <div class="col-sm-6 form-group" id="user_title_row" style="display: none;">
                                        <div class="form-group">
                                            <label for="custom_user_title">Custom User Title</label>
                                            <input type="text" class="form-control" name="custom_user_title" id="custom_user_title" placeholder="Enter Custom User Title..">
                                        </div>
                                    </div>
                                </div>

                                <div class="form-actions text-right">
                                    <button type="submit" class="btn btn-raised btn-raised btn-warning ">
                                        <i class="ft-save mr-1"></i> Save
                                    </button>
                                </div>
                            </form>
                        </div>
                        <div class="tab-pane" id="tab2" aria-labelledby="base-tab2">
                            <form class="form" action="{{route('settings_change_password')}}" method="post">
                                @csrf
                                <div class="form-body">
                                    <h4 class="form-section"><i class="ft-lock"></i> Change Password</h4>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="cur_password">Current Password</label>
                                                <input type="password" id="cur_password" class="form-control" name="cur_password" required>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="new_password">New Password</label>
                                                <input type="password" id="password" class="form-control" name="password" required>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="password_confirmation">Confirm Password</label>
                                                <input type="password" id="password_confirmation" class="form-control" name="password_confirmation" required>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-actions text-right">
                                    <button type="submit" class="btn btn-raised btn-raised btn-warning">
                                        <i class="ft-save mr-1"></i> Save
                                    </button>
                                </div>
                            </form>

                        </div>
                        <div class="tab-pane" id="tab3" aria-labelledby="base-tab3">
                            <form class="form" action="{{route('settings_bus_info')}}" method="post">
                                @csrf
                                <div class="form-body">
                                    <h4 class="form-section"><i class="ft-info"></i> Business Info</h4>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="bus_name">Business Name (including EIN #)</label>
                                                <input type="text" id="bus_name" class="form-control" name="bus_name" value="{{$user->bus_name}}">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="bus_address">Business Address</label>
                                                <input type="text" id="bus_address" class="form-control" name="bus_address" value="{{$user->bus_address}}">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="bus_city">Business City</label>
                                                <input type="text" id="bus_city" class="form-control" name="bus_city" value="{{$user->bus_city}}">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="bus_state">Business State</label>
                                                <input type="text" id="bus_state" class="form-control" name="bus_state" value="{{$user->bus_state}}">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="bus_zip">Business Zip Code</label>
                                                <input type="text" id="bus_zip" class="form-control" name="bus_zip" value="{{$user->bus_zip}}">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <h4 class="form-section"><i class="ft-heart"></i> Business State Info</h4>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="state_of_bus">Select State Of Business</label>
                                            <select class="form-control" name="state_of_bus" id="state_of_bus">
                                                <option value="0" @if($user->state_of_bus == 0) selected @endif>Maryland</option>
                                                <option value="1" @if($user->state_of_bus == 1) selected @endif>District Of Columbia</option>
                                                <option value="2" @if($user->state_of_bus == 2) selected @endif>Virginia</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-actions text-right">
                                    <button type="submit" class="btn btn-raised btn-raised btn-warning">
                                        <i class="fa fa-check-square-o"></i> Save
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade text-left" id="changeEmailModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel9"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header bg-success white">
                    <h4 class="modal-title" id="myModalLabel9"><i class="fa ft-edit"></i> Change E-mail</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form class="form" method="post" action="{{route('change_email_verify')}}">
                    @csrf
                    <div class="modal-body">
                        <div class="form-body">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="new_email">New E-mail</label>
                                        <input type="email" id="new_email" class="form-control" name="new_email" required>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn grey btn-outline-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-outline-success">Submit</button>
                    </div>

                </form>
            </div>
        </div>
    </div>

@endsection

@section('script')
    <script src="{{asset('app-assets/vendors/js/toastr.min.js')}}" type="text/javascript"></script>
    <script>
        $(document).ready(function () {
            $("#racial_identity").change(function () {
                var identity = this.value;
                if (identity == -1){
                    $("#racial_identity_row").show();
                    $("#custom_racial_identity").prop('required',true);

                }else{
                    $("#racial_identity_row").hide();
                    $("#custom_racial_identity").prop('required',false);
                }

            });
            $("#user_title").change(function () {
                var title = this.value;
                if (title == -1){
                    $("#user_title_row").show();
                    $("#custom_user_title").prop('required',true);
                }else{
                    $("#user_title_row").hide();
                    $("#custom_user_title").prop('required',false);
                }

            });

            $("#changePhotoButton").click(function () {
                $("#photoFile").trigger('click');
            });


        });
        var onLoadPhoto = function(event) {
            var image = document.getElementById('photoImage');
            image.src = URL.createObjectURL(event.target.files[0]);
        };
        
        function resendEmail() {
            $.post("{{route('resend_email_verify')}}",{
                _token:'{{csrf_token()}}',
            }).done(
                function (data) {
                    if (data == "success"){
                        toastr.success("Email Sent Successfully!","Server Status")
                    }
                }
            );
        }
        
        function changeEmail() {
            $("#new_email").val();
            $("#changeEmailModal").modal('show');
        }
    </script>
@endsection