@php 
$additionalTab = 0;
$employmentTab = 0;
$genTab = 0;
$noteTab = 0;
$taskTab = 0;
if(isset($_GET['notes'])){
    $noteTab = 1;  
}
if(isset($_GET['task'])){
    $taskTab = 1;  
}
@endphp

<div class="row px-4">
    <div class="col-10 text-left">
        <h2 class="text-900 text-uppercase">
            @if($people->first_name)
            {{$people->first_name}}&nbsp;
            @endif
            @if($people->last_name)
            {{$people->last_name}}
            @endif
        </h2>

        <h4>
            <span class="text-bolder text-uppercase">
                @if($people->job_title)
                {{$people->job_title}} &nbsp;&nbsp;&middot;&nbsp;&nbsp;
                @endif
            </span>
            <span class="text-lighter text-uppercase">
                {{$people->city.', '.$people->state_province}}
            </span>
        </h4>

        <div class="row pt-3 border-top">
            @if($people->work_status)
            <div class="col-2 text-bold">Work Authorization</div>
            <div class="col-4">:
                {{$people->work_status}}
            </div>
            @endif

            @if($people->email)
            <div class="col-2 text-bold">Email</div>
            <div class="col-4">:
                {{$people->email}}
            </div>
            @endif

            @if($people->mobile_phone)
            <div class="col-2 text-bold">Phone</div>
            <div class="col-4">:
                {{$people->mobile_phone}}
            </div>
            @endif

            @if($people->available_date)
            <div class="col-2 text-bold">Date Available</div>
            <div class="col-4">:
             
                {{showTimeFormat($people->available_date, 'M d, Y')}}
            </div>
            @endif

            @if($people->hourly_rate)
            <div class="col-2 text-bold">Compensation</div>
            <div class="col-4">:
                ${{$people->hourly_rate}}
            </div>
            @endif

            <div class="col-2 text-bold">Gigminds.com Link</div>
            <div class="col-4">:
                <i class="cil-external-link"></i> <a href="https://app.gigminds.com/person/{{$people->uuid}}" target="_new">Click to open (in new window)<a/>
            </div>

            <div class="col-sm-12 pt-4">
                <a href="{{ route('peopleDelete', $people->id) }}" onclick="return confirm('Are you sure to delete?')" class="btn btn-sm nav-item btn-warning"><span class="cil-trash btn-icon mr-2 pt-1"></span>Delete</a>
                <a class="btn btn-sm btn-primary" onclick="candidateFrom()" href="javascript:;" role="button" aria-haspopup="true" aria-expanded="false">Associate Job</a>
        
            </div>

        </div>
    </div>
    <div class="col-2">
        <div class="text-right">
            <img src="{{$people->profile_photo}}" width="150" height="150" class="rounded-circle mb-0 bg-primary" />
        </div>
    </div>
</div>

<div class="row pt-4 px-4 mt-2">
    <div class="col-12">
        <nav>
            <div class="nav nav-pills" id="nav-tab" role="tablist" style="border-bottom: 0px;">
                <a class="nav-item nav-link @if($additionalTab == 0 && $taskTab == 0 && $employmentTab == 0 && $genTab == 0 && $noteTab == 0){{'active'}}@endif" id="nav-tab-1" data-toggle="tab" href="#nav-tab1" role="tab" aria-controls="nav-tab1" aria-selected="false">
                    Incoming Requests
                    <span class="badge badge-pill badge-success" style="font-size: 13px; font-weight: normal;">
                        {{count($myPeopleIncomingRequests)}}
                    </span>
                </a>
                <a class="nav-item nav-link" id="nav-tab-2" data-toggle="tab" href="#nav-tab2" role="tab" aria-controls="nav-tab2" aria-selected="false">
                    Best Matches
                    <span class="badge badge-pill badge-success" style="font-size: 13px; font-weight: normal;">
                        {{count($matches)}}
                    </span>
                </a>
                <a class="nav-item nav-link" id="nav-tab-3" data-toggle="tab" href="#nav-tab3" role="tab" aria-controls="nav-tab3" aria-selected="false">
                     Job Applications
                    <span class="badge badge-pill badge-success" style="font-size: 13px; font-weight: normal;">
                        {{count($myPeopleSubmissions)}}
                    </span>
                </a>
                <a class="nav-item nav-link  @if($genTab == 1){{'active'}}@endif" id="nav-tab-4" data-toggle="tab" href="#nav-tab4" role="tab" aria-controls="nav-tab4" aria-selected="false">
                    <span class="cil-pencil btn-icon mr-2 pt-1"></span>Candidate Profile
                </a>
                <a class="nav-item nav-link @if($noteTab == 1){{'active'}}@endif" id="nav-tab-7" data-toggle="tab" href="#nav-tab7" onclick="getNotes()" role="tab" aria-controls="nav-tab7" aria-selected="true">
                    Notes
                </a>
                <a class="nav-item nav-link @if($taskTab == 1){{'active'}}@endif" onclick="getTasks()" id="nav-tab-tasks" data-toggle="tab" href="#nav-tabtasks" role="tab" aria-controls="nav-tabtasks" aria-selected="true">
                    Tasks
                    <span class="badge badge-pill badge-success taskCount" style="font-size: 13px; font-weight: normal;">
                        {{$taskCount}}
                    </span>
                </a>
                <a class="nav-item nav-link" onclick="getAttachments()" id="nav-tab-attachment" data-toggle="tab" href="#nav-tabattachment" role="tab" aria-controls="nav-tabattachment" aria-selected="true">
                    Attachments
                    <span class="badge badge-pill badge-success attachmentCount" style="font-size: 13px; font-weight: normal;">
                        {{$attachmentCount}}
                    </span>
                </a>
            </div>
        </nav>
    </div>
</div>


<div class="tab-content py-4 px-4 bg-light" id="nav-tabContent">

    <!-- TAB - INCOMING REQUESTS -->
    <div class="tab-pane fade show @if($additionalTab == 0 && $taskTab == 0 && $employmentTab == 0 && $genTab == 0  && $noteTab == 0){{'active'}}@endif" id="nav-tab1" role="tabpanel" aria-labelledby="nav-tab-1">
      

        <div class="card my-1">
            <div class="card-body p-3">
            @include('private.people.jobApplicationListing')


            </div>
        </div>

    </div>

    <!-- TAB - BEST MATCHES -->
    <div class="tab-pane fade show" id="nav-tab2" role="tabpanel" aria-labelledby="nav-tab-2">
       

        <div class="card my-1">
            <div class="card-body p-3">


            <table class="table table-hover pdatatable table-sm">
                    <thead>
                        <tr>
                            <th>Title</th>
                            <th>Location</th>
                            <th>Start Date</th>
                            <th>Term</th>
                            <th>Experience</th>
                            <th>Rate</th>
                            <th>Preferred Employment</th>
                        </tr>
                    </thead>
                    <tbody>
                    @foreach($matches as $match)
                        <tr>
                            <td style="width:15%;"><strong><a href="{{ route('jobViewMarketPlace', $match->id) }}">{{$match->title}}</a></strong></td>
           
                            <td style="width:10%;">{{$match->city.' '.$match->state_province}} </td>
                            <td style="width:10%;">{{showTimeFormat($match->start_date, 'm/d/Y')}}</td>
                            <td style="width:10%;">{{$match->duration}}</td>
                            <td style="width:10%;"> {{$match->experience_level}}</td>
                            <td style="width:10%;">{{$match->hourly_rate}}</td>
                            <td style="width:25%;">
                            @php $employments = explode(',',$match->preferred_employment); @endphp
                                @foreach($employments as $employment)
                                <span class="badge badge-pill badge-secondary px-2 pb-1">{{$employment}}</span>
                                &nbsp;
                                @endforeach
                                </td>
    
                        </tr>
                        @endforeach
                    </tbody>
                </table>
               
            </div>
        </div>

    </div>

    <!-- TAB - CANDIDATE SUBMISSIONS -->
    <div class="tab-pane fade show" id="nav-tab3" role="tabpanel" aria-labelledby="nav-tab-3">
       
        <div class="card my-1">
            <div class="card-body p-3">

            <table class="table table-hover pdatatable table-sm">
                    <thead>
                        <tr>
                           <th>Job Title</th>
                            <th>Candidate Name</th>
                            <th>Sourcer</th>
                            <th>Disposition</th>
                            <th># of Eval</th>
                            <th>Date Created</th>
                            <th>Created By</th>
                            <th>Application Status</th>
                            <th>Next Steps</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                  
                        @foreach($myPeopleSubmissions as $application)
                            <tr>
                                <td><strong> <a href="{{ route('applications.show', $application->id)  }}">{{$application->title}}</a></strong></td>
                                <td><a href="{{ route('applications.show', $application->id)  }}">{{$application->name}}</a></td>
                                <td>@if($application->sourcerDetail){{$application->sourcerDetail->name}}@endif</td>
                                <td>{{$application->disposition}}</td>
                                <td>{{$application->disposition_count}}</td>
                                <td>{{showTimeFormat($application->created_at, 'm/d/Y')}}</td>
                                <td>@if($application->userDetail){{$application->userDetail->name}}@endif</td>
                                <td>{{$application->application_status}}</td>
                                <td>{{$application->next_steps}}</td>
                                <td>
                                <label class="c-switch c-switch-label c-switch-pill c-switch-success">
                                    <input class="c-switch-input" value="{{$application->id}}" onchange="updateStatus(this)" type="checkbox" @if( $application->status == "Active"){{'checked=""'}}@endif><span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
                                </label>  
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>

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

    <!-- TAB - PROFILE -->
    <div class="tab-pane fade show @if($genTab == 1){{'active'}}@endif" id="nav-tab4" role="tabpanel" aria-labelledby="nav-tab-4">
 
    @include('private.people.candidateForm', ['people' => $people])     
    </div>
           
    <!-- TAB - NOTES -->
    <div class="tab-pane fade show " id="nav-tab7" role="tabpanel" aria-labelledby="nav-tab-7">
        <div class="row">
            <div class="col-2">
                <div class="nav flex-column nav-pills nav-success" id="v-pills-tab-n" role="tablist" aria-orientation="vertical">
                    <a class="nav-link " id="v-pills-home-tab-n" data-toggle="pill" href="#v-pills-home-n" role="tab" aria-controls="v-pills-home" aria-selected="true"><i class="c-icon cil-library-add"></i> Add Notes</a>
                    <a class="nav-link active" id="v-pills-profile-tab-n" data-toggle="pill" href="#v-pills-profile-n" role="tab" aria-controls="v-pills-profile" aria-selected="false" onclick="getNotes()"><i class="c-icon cil-notes"></i> Notes History</a>
                </div>
            </div>
            <div class="col-10">
                <div class="tab-content" id="v-pills-tabContent-n">
                    <div class="tab-pane fade show " id="v-pills-home-n" role="tabpanel" aria-labelledby="v-pills-home-tab-n">
                   
                        <form method="post" >
                            @csrf
                          
                            <div class="card-body">
                                <div class="form-group">
                                    {!! Form::textarea('notes', null, array('placeholder' => 'Notes', 'class' => 'form-control','rows' => 5)) !!}
                                </div>
                                <button class="btn btn-primary btn-lg btn-block" type="button" onclick="saveNotes()">Add Note</button>
                            </div>
                        </form>

                    </div>
  
                    <div class="tab-pane fade show active" id="v-pills-profile-n"  role="tabpanel" aria-labelledby="v-pills-profile-tab-n">
                       <ul class="timeline" id="noteListing">
            
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
     <!-- TAB - TASKS -->
     <div class="tab-pane fade show w-100 @if($taskTab == 1){{'active'}}@endif" id="nav-tabtasks" role="tabpanel" aria-labelledby="nav-tab-tasks">
        <div class="row">
            <div class="col-2">
                <div class="nav flex-column nav-pills nav-success" role="tablist" aria-orientation="vertical">
                    <a class="nav-link " id="v-pills-home-tab-addtasks" data-toggle="pill" href="#v-pills-home-addtasks" role="tab" aria-controls="v-pills-home" aria-selected="true"><i class="c-icon cil-library-add"></i> Add Tasks</a>
                    <a class="nav-link active" id="v-pills-profile-tab-addtasks" data-toggle="pill" href="#v-pills-profile-addtasks" role="tab" aria-controls="v-pills-profile" aria-selected="false" onclick="getTasks()"><i class="c-icon cil-notes"></i> Tasks History</a>
                </div>
            </div>
            <div class="col-10">
                <div class="tab-content " id="v-pills-tabContent-addtasks">
                    <div class="tab-pane fade show " id="v-pills-home-addtasks" role="tabpanel" aria-labelledby="v-pills-home-tab-addtasks">
                        @include('private.tasks.addForm')
                    </div>

                    <div class="tab-pane fade show active" id="v-pills-profile-addtasks" role="tabpanel" aria-labelledby="v-pills-profile-tab-addtasks">
                        <ul id="tasksListing">

                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- TAB - Attachment -->
    <div class="tab-pane fade show " id="nav-tabattachment" role="tabpanel" aria-labelledby="nav-tab-attachment">
        <div class="row">
            <div class="col-2">
                <div class="nav flex-column nav-pills nav-success" role="tablist" aria-orientation="vertical">
                    <a class="nav-link " id="v-pills-home-tab-addattachment" data-toggle="pill" href="#v-pills-home-addattachment" role="tab" aria-controls="v-pills-home" aria-selected="true"><i class="c-icon cil-library-add"></i> Add Attachment</a>
                    <a class="nav-link active" id="v-pills-profile-tab-addattachment" data-toggle="pill" href="#v-pills-profile-addattachment" role="tab" aria-controls="v-pills-profile" aria-selected="false" onclick="getAttachments()"><i class="c-icon cil-notes"></i> Attachments History</a>
                </div>
            </div>
            <div class="col-10">
                <div class="tab-content " id="v-pills-tabContent-addattachment">
                    <div class="tab-pane fade show " id="v-pills-home-addattachment" role="tabpanel" aria-labelledby="v-pills-home-tab-addattachment">
                        @include('private.attachments.addForm')
                    </div>

                    <div class="tab-pane fade show active" id="v-pills-profile-addattachment" role="tabpanel" aria-labelledby="v-pills-profile-tab-addattachment">
                        <ul id="attachmentsListing">

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

<!-------------- popup starts -------------->
<div class="modal fade" id="associatePopup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="display: none;" aria-hidden="true">
      <div class="modal-dialog modal-lg" role="document">
         <div class="modal-content">
            <div class="modal-header"> 
               <h4 class="modal-title">Associate Job</h4>
               <button class="close" type="button" onclick="closePopup('associatePopup')"><span aria-hidden="true">×</span></button>
            </div>
            <div class="modal-body">
               <div class="row">
                  <div class="col-md-12">
                
                    
                        <form id="candidateJobFrom" novalidate="novalidate" method="post" enctype="multipart/form-data">
                     
                      </form>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <link rel="stylesheet" href="{{ asset('css/jquery-ui.css') }}">
<script>
    
 $('.pdatatable').dataTable({
    "bLengthChange": false});
    $('.pdatatable').attr('style', 'border-collapse: collapse !important');
   var placesAutocomplete = places({
    appId: "{{config('app.placeAppId')}}",
    apiKey: "{{config('app.placeApiKey')}}",
    container: document.querySelector('#address-input')
  });
    placesAutocomplete.on('change', handleOnChange);

function handleOnChange(e) {
	console.log(e.suggestion);
	$('#city').val(e.suggestion.name);
	$('#state_province').val(e.suggestion.administrative);
	$('#country').val(e.suggestion.country);
}
$( function() {


    $( ".datepicker" ).datepicker({ dateFormat: 'mm/dd/yy' });
    $("#due_date").datepicker({
            dateFormat: 'mm/dd/yy'
        }).datepicker("setDate", new Date());
  } );

  var options = {
        toolbarGroups: [{
                "name": "basicstyles",
                "groups": ["bold"]
            },
            {
                "name": "links",
                "groups": ["links"]
            },

        ],

        removeButtons: 'insert,Strike,Subscript,Italic,Superscript,Anchor,Styles,Specialchar'
    };
  CKEDITOR.replace('notes', options);
  CKEDITOR.replace('tasks', options);
  CKEDITOR.replace('description', options);


  function saveTasks() {
     var formData = $('#tasksInfo').serializeArray();
        formData.push({
            name: 'person-id',
            value: '{{$people->personid}}'
        }, {
            name: 'type',
            value: 'Person'
        }, {
            name: 'description',
            value: CKEDITOR.instances.tasks.getData()
        });

       
        $.post("{{route('tasks.store')}}", formData, function(data) {
            toastr.success(data.message);
            document.getElementById("tasksInfo").reset();
            var today = new Date();
                var dd = String(today.getDate()).padStart(2, '0');
                var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
                var yyyy = today.getFullYear();

                today = mm + '/' + dd + '/' + yyyy;
             $("#due_date").val(today);
            CKEDITOR.instances.tasks.setData('');
            $(".taskCount").html(data.count);
        }).fail(function(response) {
            var errors = response.responseJSON.errors;

            var msg = '';
            $.each(errors, function( index, value ) {
                toastr.error(errors[index][0]);
                });
            
        });
    }
    $("#attachmentInfo").on('submit', function(e){
    e.preventDefault();
  

      var formData = new FormData(this);
      formData.append('description', CKEDITOR.instances.description.getData());
      formData.append('person-id', '{{$people->personid}}');
      formData.append('type', 'Person');

      $.ajax({
          type: 'POST',
          url: '{{ route("attachments.store") }}',
          data: formData,
          contentType: false,
          processData:false,
          beforeSend: function(XMLHttpRequest)
            {
                $('#attachmentedButton').html('Saving..')
            },
          success: function (data) {
          toastr.success(data.message);
            document.getElementById("attachmentInfo").reset();
            CKEDITOR.instances.description.setData('');
            $('#attachmentedButton').html('Add Attachment')

            $(".attachmentCount").html(data.count);

          },
      }).fail(function(response) {
            var errors = response.responseJSON.errors;

            var msg = '';
            $.each(errors, function(index, value) {
                toastr.error(errors[index][0]);
            });
            $('#attachmentedButton').html('Add Attachment')

        });
  });
    function getTasks(event) {

        var formData = {
            'id': '{{$people->personid}}',
            'type': 'Person'
        };
        $.post("{{route('tasksList')}}", formData, function(data) {
            $("#tasksListing").html(data.html);

        })
    }
    function getAttachments() {
        var formData = {
            'id': '{{$people->personid}}',
            'type': 'Person'
        };
        $.post("{{route('attachmentsListing')}}", formData, function(data) {
            $("#attachmentsListing").html(data.html);

        })
    }
  function updateStatus(event){
    var value = 'Inactive';
        if(event.checked) {
             value = 'Active';
        }
        $.post("{{route('applicationStatus')}}", {'status': value, 'id': $(event).val()}, function(data) {
            toastr.success('Status updated successfully');
        });
        
      
    }
    function updateAuthorizationForm(){
        var formData = $('#authorizationForm').serializeArray();
        $.post("{{route('updateProfileEmploymentInfo',$people->id)}}", formData, function(data) {
          toastr.success(data.message);
        })
    }
    function updateAdditionalInfoForm(){
        var formData = $('#additionalInfoForm').serializeArray();
        $.post("{{route('updateProfileAdditionalInfo',$people->id)}}", formData, function(data) {
          toastr.success(data.message);
        })
    } 
    function saveNotes(event) {

        var formData = {
            'person-id': '{{$people->personid}}',
            'type': 'My Candidates',
            'notes': CKEDITOR.instances.notes.getData(),
        };
        $.post("{{route('profileNotes')}}", formData, function(data) {
            toastr.success(data.message);
            CKEDITOR.instances.notes.setData('');

        }).fail(function (response) {
            var errors = response.responseJSON.errors;
                toastr.error(errors.notes[0]);
            });
    }
    
    function getNotes(event) {
        
        var formData = {
            'id': '{{$people->personid}}',
            'type': 'My Candidates',
        };
        $.post("{{route('peopleGetNotes')}}", formData, function(data) {
            $("#noteListing").html(data.html);

        })
    }
    $("#updateProfileForm").on('submit', function(e){
    e.preventDefault();
      $.ajax({
          type: 'POST',
          headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
              },
          url: "{{route('updateProfileGenInfo', $people->id)}}",
          data: new FormData(this),
          contentType: false,
          processData:false,
          success: function (data) {
          toastr.success(data.message);

          },
      });
  });
  function candidateFrom() {
      
      $.post("{{route('associateJobRecords', $people->personid)}}", function(data) {
      
         $("#candidateJobFrom").html(data.html);
         $('#associatePopup').modal('show');
       });
   }
   function candidateJobCreate() {
    var formData = $('#candidateJobFrom').serializeArray();
       $.post("{{route('jAssociateCandidate', [$people->personid, $people->id])}}", formData, function(data) {
         toastr.success(data.message);
         $('#associatePopup').modal('hide');
       }).fail(function (response) {
        var errors = response.responseJSON.errors;
               toastr.error(errors.candidate[0]);
       });
   }
</script>
@if($noteTab == 1)<script>getNotes();</script>@endif
@if($taskTab == 1)<script>getTasks();</script>@endif