@extends('app')

@section('page_title')
  Profile
@endsection

@push('styles')
  <link rel="stylesheet" href="{{asset('assets/examples/css/pages/profile.min3f0d.css?v2.2.0')}}">
@endpush

@section('page_content')
  <div class="page-content container-fluid">
    <div class="row">
      @include('includes.side_profile')

      <div class="col-md-9">
        <!-- Panel -->
        <div class="panel">
          <div class="panel-body nav-tabs-animate nav-tabs-horizontal">
            <ul class="nav nav-tabs nav-tabs-line" data-plugin="nav-tabs" role="tablist">

                @if(count($errors)>0)
                    <div class="alert alert-danger">
                        <ul>
                            @foreach($errors->all() as $error)
                                <li>{{$error}}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
                @if(session('success'))
                    <div class="alert alert-success">
                        <ul>
                            <li>{{ session('success') }}</li>
                        </ul>
                    </div>
                @endif


                    @php     $dynamic = request()->session()->get('dynamic_user')
                    @endphp


                    @if($dynamic)

                        <li role="presentation"><a data-toggle="tab" href="#pwd" aria-controls="messages" role="tab">Password</a></li>

                    @else

                        <li class="{{empty($panel) ? 'active' : ''}}" role="presentation"><a data-toggle="tab" href="#profile" aria-controls="activities" role="tab">Profile</a></li>

                        <li class="{{!empty($panel)  && $panel == 'sender_id' ? 'active' : ''}}" role="presentation"><a data-toggle="tab" href="#sender_id" aria-controls="messages" role="tab">Sender IDs</a></li>


                        <li class="{{!empty($panel) && $panel == 'email' ? 'active' : ''}}" role="presentation"><a data-toggle="tab" href="#policy_tab" aria-controls="messages" role="tab">Terms & Conditions</a></li>

                        <li class="{{!empty($panel) && $panel == 'saved' ? 'active' : ''}}" role="presentation"><a data-toggle="tab" href="#saved_messages" aria-controls="messages" role="tab">Saved Messages</a></li>


                        <li class="dropdown" role="presentation" style="display: none;">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false"><span class="caret"></span>Menu </a>
                            <ul class="dropdown-menu" role="menu">
                                <li role="presentation" style="display: none;"><a data-toggle="tab" href="#profile" aria-controls="activities" role="tab">Profile</a></li>
                                <li role="presentation"><a data-toggle="tab" href="#pwd" aria-controls="messages" role="tab">Password</a></li>
                                <li role="presentation"><a data-toggle="tab" href="#sender_id" aria-controls="messages" role="tab">Sender IDs</a></li>
                            </ul>
                        </li>

                        <li role="presentation"git ><a data-toggle="tab" href="#pwd" aria-controls="messages" role="tab">Password</a></li>

                    @endif
            </ul>

            <div class="tab-content">
                @if(!$dynamic)
              <div class="tab-pane {{empty($panel)  ? 'active' : ''}} animation-slide-left" id="profile" role="tabpanel">
                <br />
                <form method="post" id="profile_form" enctype="multipart/form-data">
                  @csrf
                  <div class="form-group">
                    <label class="control-label" for="first_name">Username</label>
                    <input type="text" class="form-control round" id="username" name="username" value="{{$user->username}}" disabled="disabled">
                  </div>


                    <div class="form-group">
                        <label class="control-label" for="first_name">Business Logo</label>
                        <input type="file" class="form-control round"  id="logo" name="business_logo">
                    </div>
{{--                  <div class="form-group">--}}
{{--                    <label class="control-label" for="first_name">First Name</label>--}}
{{--                    <input type="text" class="form-control round" id="first_name" name="first_name" value="{{empty(old('first_name')) ? $user->first_name : old('first_name')}}">--}}
{{--                  </div>--}}
{{--                  <div class="form-group">--}}
{{--                    <label class="control-label" for="last_name">Last Name</label>--}}
{{--                    <input type="text" class="form-control round" id="last_name" name="last_name" value="{{empty(old('last_name')) ? $user->last_name : old('last_name')}}">--}}
{{--                  </div>--}}
                  <div class="form-group">
                    <label class="control-label" for="organisation">Organisation</label>
                    <input type="text" class="form-control round" id="organisation" name="organisation" value="{{empty(old('organisation')) ? $user->organisation : old('organisation')}}" readonly disabled>
                  </div>
{{--                  <div class="form-group">--}}
{{--                    <label class="control-label" for="picture">Picture/Logo</label>--}}
{{--                    <input type="file" class="form-control round" id="picture" name="picture">--}}
{{--                  </div>--}}
                  <div class="form-group">
                    <label class="control-label" for="phone_number">Contact Person Phone</label>
                    <input type="text" class="form-control round" id="phone_number" name="contact_person_phone" value="{{empty(old('contact_person_phone')) ? $user->company->contact_person_phone : old('contact_person_phone')}}">
                  </div>


                <div class="form-group">
                    <label class="control-label" for="phone_number">Contact Person Email</label>
                    <input type="text" class="form-control round" id="phone_number" name="contact_person_email" value="{{empty(old('contact_person_email')) ? $user->company->contact_person_email : old('contact_person_email')}}" readonly>
                </div>

                    <div class="form-group">
                        <label class="control-label" for="phone_number">Mobile Money</label>
                        <input type="text" class="form-control round" id="phone_number" name="mobile_money_number" value="{{empty(old('mobile_money_number')) ? $user->company->mobile_money_number : old('mobile_money_number')}}">
                    </div>
{{--                  <div class="form-group">--}}
{{--                    <label class="control-label" for="website_url">Website URL</label>--}}
{{--                    <input type="text" class="form-control round" id="website_url" name="website_url" value="{{empty(old('website_url')) ? $user->website_url : old('website_url')}}">--}}
{{--                  </div>--}}

                  <div class="form-group">
                      <div id="otpForm1">
                      </div>
                    <input type="hidden" name="saveChanges" value="Verify Account & Save Changes">
                    <input type="submit" name="saveChanges" class="btn btn-primary btn-block verifyAccount" value="Verify Account Save Changes">
{{--                    <input type="submit" id="btnSubmit" name="btnSubmit" class="btn btn-primary btn-block" value="Save Changes">--}}
                  </div>
                </form>
              </div>


              <div class="tab-pane animation-slide-left  {{!empty($panel) && $panel == 'sender_id' ? 'active' : ''}}" id="sender_id" role="tabpanel">

             <br>
                <form class="form-inline" method="post" action="{{route('user.sender-id.submit')}}">
                  @csrf
                  <label class="sr-only" for="inlineFormInputName2">Add New Sender Id </label>
                  <input type="text" maxlength="11" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" name="sender_id" placeholder="Add New Sender Id" required>

                  <button type="submit" class="btn btn-primary mb-2">Submit</button>
                </form>

                <br>
                <table class="table table-bordered table-hover">
                  <thead>
                    <tr>
                      <th>Sender_Id</th>
                      <th>Status</th>
                      <th>Comment</th>
                      <th>Action</th>
                    </tr>
                  </thead>
                  <tbody>
                      @foreach($sender_ids as $ids)
                            <form class="form-inline" method="post" action="{{route('user.sender-id.edit',['id'=>$ids->id])}}">
                              @csrf
                              <tr>
                                  <td><input type="text" maxlength="11" class="form-control mb-2 mr-sm-2" name="sender_id" value="{{$ids->sender_id}}" required/></td>
                                  <td><input type="text" class="form-control mb-2 mr-sm-2" id="" value="{{$ids->status  == false ? 'pending approval' : ($ids->status == 1 ? 'Approved' : 'Rejected')}}" readonly></td>
                                  <td><textarea type="text" class="form-control mb-2 mr-sm-2" readonly>{{$ids->comment}}</textarea></td>
                                  <td><button type="submit" class="btn btn-sm btn-primary mb-2">Save</button><a type="submit" href="{{route('user.sender-id.destroy',['id'=>$ids->id])}}" onclick="return confirm('Do you want to delete this sender ID ?')" class="btn btn-danger btn-sm"><i class="fa fa-trash"></i></a></td>
                             </tr>
                            </form>
                        @endforeach




                  </tbody>
                </table>
              </div>

              <div class="tab-pane animation-slide-left" id="policy_tab" role="tabpanel">
                <br>
                <a type="button" href="#" data-toggle="modal" data-target="#conditions">View Terms & Agreement</a>
              </div>


              <div class="tab-pane animation-slide-left" id="saved_messages" role="tabpanel">
                <br>
                <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>Type</th>
                                <th>Message Content</th>
                                <th>Name</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                        @foreach($saved_messages as $messages)
                        <tr>
                            <td>{{$messages->type}}</td>
                            <td>{{$messages->message}}</td>
                            <td>{{$messages->name}}</td>
                            <td>
{{--                                <a class="btn btn-primary btn-sm"><i class="fa fa-pencil"></i></a>--}}
                                <a class="btn btn-danger btn-sm" onclick="return confirm('Are you sure you want delete this message ?')" href="{{route('profile.edit.saved.message',$messages->id)}}"><i class="fa fa-trash"></i></a>
                            </td>
                        </tr>
                        @endforeach
                        </tbody>
                </table>
              </div>

              <div class="tab-pane animation-slide-left active" id="pwd" role="tabpanel">
                        <br />
                        <form method="post" id="password_form">
                            @if(count($errors)>0)
                                <div class="alert alert-danger">
                                    <ul>
                                        @foreach($errors->all() as $error)
                                            <li>{{$error}}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif
                            @if(session('success'))
                                <div class="alert alert-success">
                                    <ul>
                                        <li>{{ session('success') }}</li>
                                    </ul>
                                </div>
                            @endif
                            @csrf
                            <div class="form-group">
                                <label class="control-label" for="current_password">Current Password</label>
                                <input type="password" class="form-control round" id="current_password" name="current_password" value="">
                            </div>
                            <div class="form-group">
                                <label class="control-label" for="new_password">New Password</label>
                                <input type="password" class="form-control round" id="new_password" name="new_password" value="">
                            </div>
                            <div class="form-group">
                                <label class="control-label" for="confirm_password">Confirm New Password</label>
                                <input type="password" class="form-control round" id="confirm_password" name="confirm_password" value="">
                            </div>
                            <div class="form-group">
                                <div id="otpForm2">
                                </div>
                                <input type="hidden" name="btnPassword" value="Verify Account & Update">
                                <input type="submit" name="btnPassword" class="btn btn-primary btn-block verifyAccount" value="Verify Account & Update">
                            </div>
                        </form>
                    </div>

                @else
                    <div class="tab-pane animation-slide-left active" id="pwd" role="tabpanel">
                        <br />
                        <form method="post" id="password_form">
                            @if(count($errors)>0)
                                <div class="alert alert-danger">
                                    <ul>
                                        @foreach($errors->all() as $error)
                                            <li>{{$error}}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif
                            @if(session('success'))
                                <div class="alert alert-success">
                                    <ul>
                                        <li>{{ session('success') }}</li>
                                    </ul>
                                </div>
                            @endif
                            @csrf
                            <div class="form-group">
                                <label class="control-label" for="current_password">Current Password</label>
                                <input type="password" class="form-control round" id="current_password" name="current_password" value="">
                            </div>
                            <div class="form-group">
                                <label class="control-label" for="new_password">New Password</label>
                                <input type="password" class="form-control round" id="new_password" name="new_password" value="">
                            </div>
                            <div class="form-group">
                                <label class="control-label" for="confirm_password">Confirm New Password</label>
                                <input type="password" class="form-control round" id="confirm_password" name="confirm_password" value="">
                            </div>
                            <div class="form-group">
                                <div id="otpForm3">
                                </div>
                                <input type="hidden" name="btnPassword" value="Verify Account & Update">
                                <input type="submit" name="btnPassword" class="btn btn-primary btn-block verifyAccount" value="Verify Account & Update">
                            </div>
                        </form>
                    </div>
              @endif

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

    </div>
  </div>



{{--  <div class="modal fade" tabindex="-1" role="dialog" id="otpModal">--}}
{{--    <div class="modal-dialog" role="document">--}}
{{--      <div class="modal-content">--}}
{{--        <div class="modal-header" style="background: #485563;background: -webkit-linear-gradient(to bottom, #29323c, #485563);background: linear-gradient(to bottom, #29323c, #485563);">--}}
{{--          <button type="button" class="close" data-dismiss="modal" aria-label="Close" ><span aria-hidden="true" style="color:#fff !important;">&times;</span></button>--}}
{{--            <h4 class="modal-title" id="myModalLabel" style="color:white">--}}
{{--                </h4>--}}
{{--        </div>--}}
{{--        <div class="modal-body">--}}

{{--            <div class="panel">--}}
{{--                <div class="panel-body nav-tabs-animate nav-tabs-horizontal">--}}
{{--                    <ul class="nav nav-tabs nav-tabs-line" data-plugin="nav-tabs" role="tablist">--}}

{{--                        @if(count($errors)>0)--}}
{{--                            <div class="alert alert-danger">--}}
{{--                                <ul>--}}
{{--                                    @foreach($errors->all() as $error)--}}
{{--                                        <li>{{$error}}</li>--}}
{{--                                    @endforeach--}}
{{--                                </ul>--}}
{{--                            </div>--}}
{{--                        @endif--}}
{{--                        @if(session('success'))--}}
{{--                            <div class="alert alert-success">--}}
{{--                                <ul>--}}
{{--                                    <li>{{ session('success') }}</li>--}}
{{--                                </ul>--}}
{{--                            </div>--}}
{{--                        @endif--}}

{{--                        <li class="{{empty($panel) ? 'active' : ''}}" role="presentation"><a data-toggle="tab" href="#profile" aria-controls="activities" role="tab">VERIFY ACCOUNT</a></li>--}}
{{--                    </ul>--}}

{{--                    <div class="tab-content">--}}
{{--                        <div class="tab-pane {{empty($panel)  ? 'active' : ''}} animation-slide-left" id="profile" role="tabpanel">--}}
{{--                            <br />--}}
{{--                            <p>6 DIGIT PIN has been sent to the number <em id="contact_person_phone"></em><strong>xxxxx</strong></p>--}}
{{--                            <form method="post" id="profile_form" enctype="multipart/form-data">--}}
{{--                                @csrf--}}
{{--                                <div class="form-group">--}}
{{--                                    <label class="control-label" for="first_name">ENTER 6 DIGIT PIN</label>--}}
{{--                                    <input type="number" class="form-control round" id="otp" name="otp" value="{{$user->username}}" >--}}
{{--                                </div>--}}

{{--                                <div class="form-group">--}}
{{--                                    <input type="submit" id="verifyOtp" name="btnOtp" class="btn btn-primary btn-block" value="VERIFY">--}}
{{--                                </div>--}}
{{--                            </form>--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--            </div>--}}

{{--        </div>--}}
{{--      </div>--}}
{{--    </div>--}}
{{--  </div>--}}

@endsection

@push('scripts')
{{--  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"   integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="   crossorigin="anonymous"></script>--}}
{{--  <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>--}}
{{--  <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2&appId=2228953320687170&autoLogAppEvents=1"></script>--}}


<script src="{{ elixir('js/all.js') }}"></script>

<script>
    $(document).ready(function () {
        var clickCount = 0;

        $('.verifyAccount').on('click', function (e) {
            e.preventDefault();

            let inputName = $(this).attr('name');
            if (clickCount === 0) {
                $.ajax({
                    url: '{{ route('send_otp_user_profile') }}',
                    method: 'GET',
                }).done(response => {
                    clickCount++;
                    console.log('response => ', response)
                    $('#contact_person_phone').text(response.data.contact_person_phone.substring(0, 7))
                })
            }
            else {
                clickCount = 0;
                if(String(inputName) === 'btnPassword'){
                    $('#password_form').submit();
                }
                else{
                    $('#profile_form').submit();
                }
            }

            let otpForm = `<div class="container-fluid mx-auto" id="otpForm" style="display: none;">
    <div class="col-md-3"></div>
    <div class="col-md-6">
        <p>6 DIGIT PIN has been sent to the number <em id="contact_person_phone"></em><strong>xxxxx</strong></p>
        <div>
            <div class="form-group">
                <label class="control-label" for="first_name">ENTER 6 DIGIT PIN</label>
                <input type="number" class="form-control round" id="otp" name="otp" value="{{ $user->username }}">
            </div>
        </div>
    </div>
</div>`;
            if(String(inputName) === 'btnPassword'){
                $('#otpForm2').html(
                    otpForm
                )

                $('#otpForm3').html(
                    otpForm
                )
            }
            else{
                $('#otpForm1').html(
                    otpForm
                )
            }
            $('#otpForm').show()
        })
    });
</script>
@endpush