@extends('layouts.master_admin')

@section('title')
    Edit User Account
@endsection

@section('users')
    active
@endsection

@section('content')
    <div class="row">
        <div class="col-md-6">
            <div class="block">
                <div class="block-header">
                    <h3 class="block-title">
                        Edit Profile
                    </h3>
                </div>
                <div class="block-content block-content-full">
                    <form class="js-validation-edit-profile" method="POST" action="{{ route('admin.user.update', $user->id) }}">
                        @csrf
                        <div class="row items-push">
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label for="position">Position/Role/Title</label>
                                    <select name="position" id="position" class="form-control form-control-lg form-control-alt" >
                                        <option value="-1">Select Position/Role/Title...</option>
                                        @foreach($titles as $titleID => $title)
                                            <option value="{{ $titleID }}" @if($user->position == $titleID) {{ 'selected' }} @endif>{{ $title }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label for="name">Name</label>
                                    <input type="text" class="form-control form-control-lg form-control-alt" id="name" name="name" value="{{ $user->name }}" >
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label for="organization">Organization</label>
                                    <input type="text" class="form-control form-control-lg form-control-alt" id="organization" name="organization" value="{{ $user->organization }}" >
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label for="industry">Industry / Sector</label>
                                    <select class="form-control form-control-lg form-control-alt" id="industry" name="industry">
                                        <option value="-1">Select Industry / Sector...</option>
                                        @foreach($industries as $industryID => $industry)
                                            <option value="{{ $industryID }}" @if($user->industry == $industryID) {{ 'selected' }} @endif>{{ $industry }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label for="country">Country</label>
                                    <select name="country" id="country" class="form-control form-control-lg form-control-alt" onchange="getCity();">
                                        <option value="-1">Select Country...</option>
                                        @foreach($countries as $country)
                                            <option value="{{ $country->id}}" @if($user->country == $country->id) {{ 'selected' }} @endif>{{ $country->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-12" id="city-section">
                                <div class="form-group">
                                    <label for="city">City</label>
                                    <div class="text-center" id="city-loader" style="display: none;"><i class="fa fa-spinner fa-spin"></i></div>
                                    <select name="city" id="city" class="form-control form-control-lg form-control-alt">
                                        <option value="-1">Select City...</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label for="number_of_employees">No. of Employees</label>
                                    <select class="form-control form-control-lg form-control-alt" id="number_of_employees" name="number_of_employees">
                                        <option value="-1">Select No. of Employees</option>
                                        @foreach($number_of_employees as $number_of_employeeID => $number_of_employee)
                                            <option value="{{ $number_of_employeeID }}" @if($user->number_of_employees == $number_of_employeeID) {{ 'selected' }} @endif>{{ $number_of_employee }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label for="country_code">Country Code</label>
                                    <select name="country_code" id="country_code" class="form-control form-control-lg form-control-alt">
                                        <option value="-1">Select Country Code...</option>
                                        @foreach($countries as $country)
                                            <option value="{{ $country->phone_code }}" @if($user->country_code == $country->phone_code) {{ 'selected' }} @endif>{{ $country->name }} ({{ $country->phone_code }})</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label for="mobile_phone">Contact Phone</label>
                                    <input type="text" class="form-control form-control-lg form-control-alt" id="mobile_phone" name="mobile_phone" value="{{ $user->mobile_phone }}">
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label for="email">Email Address</label>
                                    <input type="email" readonly class="form-control form-control-lg form-control-alt" id="email" name="email" value="{{ $user->email }}"  >
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label for="cpr_number">CPR Number / Referral Code</label>
                                    <input type="text" class="form-control form-control-lg form-control-alt" id="cpr_number" name="cpr_number" value="{{ $cpr_number }}">
                                </div>
                            </div>
                            @if($user->email == 'demo@innoplore.com')
                                <div class="col-lg-12">
                                    <button type="button" disabled class="btn btn-primary">Update Profile</button>
                                </div>
                            @else
                            <div class="col-lg-12">
                                <button type="submit" class="btn btn-primary">Update Profile</button>
                            </div>
                            @endif
                        </div>
                    </form>
                </div>
            </div>
        </div>


        <div class="col-md-6">
            <div class="block">
                <div class="block-header">
                    <h3 class="block-title">
                        Change Password
                    </h3>
                </div>
                <div class="block-content block-content-full">
                    <form class="js-validation-change-password" method="POST" action="{{ route('admin.user.change-password', $user->id) }}">
                        @csrf
                        <div class="row items-push">
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label for="val-new-password">New Password</label>
                                    <input type="password" class="form-control form-control-lg form-control-alt" id="val-new-password" name="new_password">
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label for="val-confirm-password">Confirm New Password</label>
                                    <input type="password" class="form-control form-control-lg form-control-alt" id="val-confirm-password" name="confirm_password">
                                </div>
                            </div>
                            @if($user->email == 'demo@innoplore.com')
                                <div class="col-lg-12">
                                    <button type="button" disabled class="btn btn-primary">Change Password</button>
                                </div>
                            @else
                                <div class="col-lg-12">
                                    <button type="submit" class="btn btn-primary">Change Password</button>
                                </div>
                            @endif
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script src="{{ asset('assets/js/pages/be_forms_account.min.js') }}"></script>
    <script>
        getCity();
        function getCity(){
            var countryId = $('#country').val();
            if(countryId > 0) {
                $.ajax({
                    url: '/city/' + countryId,
                    type:"GET",
                    dataType:"json",
                    beforeSend: function(){
                        $('#city-section').css('display', 'block');
                        $('#city-loader').show();
                        $('select[name="city"]').hide();
                    },
                    success:function(data) {
                        if(data.status == "success") {
                            if(data.data != ""){
                                $('select[name="city"]').empty();
                                $('select[name="city"]').append('<option value="-1" select>Select City...</option>');
                                $.each(data.data, function(key, value){
                                    $('select[name="city"]').append('<option value="'+ value.id +'">' + value.name + '</option>');
                                });
                                @if($user->city != '')
                                    $('select[name="city"]').val('{{ $user->city }}');
                                @endif
                            } else{
                                $('#city-section').css('display', 'none');
                            }
                        }else {
                            alert('failed to retrieve city for selected country');
                        }
                    },
                    complete:function(){
                        $('#city-loader').hide();
                        $('select[name="city"]').show();
                    }
                });
            } else {
                $('select[name="city"]').empty().show();
                $('select[name="city"]').append('<option value="-1">Select City...</option>');
            }
        }
    </script>
@endsection