@extends('layouts.app')

@section('title', 'Client Details | ')

@section('content')

<div class="content container-fluid">
          <div class="row">
            <div class="col-md-8 offset-md-2">
            
              <!-- Page Header -->
              <div class="page-header">
                <div class="row">
                  <div class="col-sm-12">
                    <h3 class="page-title">Company's Document</h3>
                  </div>
                </div>
              </div>
              <!-- /Page Header -->
              
              <form method="post" action="{{route('client/update')}}">
                @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
                @csrf
                <div class="row">
                  <div class="col-sm-6">
                    <div class="form-group">
                      <label>Company name <span class="text-danger">*</span></label>
                      <input class="form-control" type="text" value="{{$data->company_name}}" name="company_name">
                    </div>
                  </div>
                  <div class="col-sm-6">
                    <div class="form-group">
                      <label>Website url </label>
                      <input class="form-control " value="{{$data->website_url}}" type="text" name="website_url">
                    </div>
                  </div>
                </div>

                <div class="row">
                  <div class="col-sm-6">
                    <div class="form-group">
                      <label>Contact Number </label>
                      <input type="hidden"  id="code" name ="primary_phone_code" value="@if($data->contact_code == null) 971 @else {{$data->contact_code}} @endif" >
                      
                      <input type="hidden"  id="iso" name ="contact_iso" value="@if($data->contact_iso == null) ae @else {{$data->contact_iso}} @endif" >
                      
                      <input type="tel" name ="contact_number" id="phone1" value="{{$data->contact_number}}" style='display:block'>
                    </div>
                  </div>
                  <div class="col-sm-6">
                    <div class="form-group">
                      <label>Fax Number </label>
                      <input type="text" class="form-control only_number" name ="fax_number" value="{{$data->fax_number}}" >
                    </div>
                  </div>
                </div>
                              
                 <!-- attachment -->
                <div class="row">
                    <div class="col-sm-12">
                      <p style="font-size: 18px;">Documents</p>
                      <hr style="">
                      <a class="btn-link" id="openFileModal" style="color: #0056b3; font-size: 16px; " href="javascript:;"><i class="fa fa-plus"></i> Add file</a>

                      <input type="file" id="fileupload" name="file" style="display:none"/> 
                                                            
                      <div class="row" id="fileResult" style="min-height: 60px; margin-top: 20px;">
                        @if(count($files) > 0)

                          @foreach($files as $item)                          
                             
                            <div class='image-area'>
                              <a  href="{{ url('/').'/upload/company-file/'.$item->file_name }}" download>
                                <img src="{{Techsaga::getFilePrev($item->file_name,'company-file/')}}"  alt='Preview'>
                              </a>
                              <a class='remove-image' href='javascript:;' data-id="{{$item->id}}" style='display: inline;'>&#215;</a>
                              <p style='font-size:12px;'>{{$item->file_title}}</p>
                              <p>Start Date - {{date('d-m-Y',strtotime($item->start_date))}} </p>
                              <p>End Date - {{date('d-m-Y',strtotime($item->end_date))}} </p>
                            </div>                          

                          @endforeach

                        @endif 
                      </div>
                    </div>
                </div>
                                
                <div class="submit-section">
                  <input type="hidden" name="user_id" value="{{  Request::segment(3)}}">
                  <button type="submit" class="btn btn-primary submit-btn">Save</button>
                </div>
              </form>
            </div>
          </div>
      </div>
   
<!-- file Modal -->
  <div id="fileModal" class="modal custom-modal fade" role="dialog">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Upload Document</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form method="post" id="client_file_form" action="{{route('/company/document/upload')}}" enctype="multipart/form-data">
            @csrf
            <div class="form-scroll">                           
            <div class="card">
                <div class="card-body">
                  <h3 class="card-title">Upload File/Document </h3>
                  <div class="row">
                    <div class="col-md-12">
                      <div class="form-group ">
                        <label class="label">File Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control file_name" id="file_name" name="file_name" >
                        <p style="margin-bottom: 2px;" class="text-danger" id="error-file_name"></p>
                        <small class="text-muted"></small>
                      </div>
                    </div>
                  </div>

                  <div class="row">
                  <div class="col-sm-6">
                    <div class="form-group">
                      <label> Start date <span class="text-danger">*</span></label>
                      <input class="form-control commonDatepicker" type="text" name="start_date">
                    </div>
                  </div>
                  <div class="col-sm-6">
                    <div class="form-group">
                      <label> Expire Date <span class="text-danger">*</span></label>
                      <input class="form-control commonDatepicker"  type="text" name="end_date">
                    </div>
                  </div>
                </div>    
                
                  <div class="row">
                    <div class="col-md-12">
                      <div class="form-group ">
                        <label class="label">Select a file <span class="text-danger">*</span></label>
                        <input type="file" class="form-control " id="clientFile" name="clientFile" >          
                        <p style="margin-bottom: 2px;" class="text-danger" id="error-clientFile"></p>              
                      </div>
                    </div>                    
                  </div>

                  <div class="row" id="fileUploadProcess" style="min-height: 20px;"></div>
                  
                </div>
              </div>
            </div>
            <div class="submit-section">
               <input type="hidden" name="company_id" value="{{Request::segment(4)}}">
              <button type="submit" class="btn btn-primary submit-btn" id="uploadFileBtn">Upload</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  <!-- /file upload -->
<script type="text/javascript">
var notificationTimeout;

//Shows updated notification popup 
var updateNotification = function(task, notificationText, newClass){
    var notificationPopup = $('.notification-popup ');
    notificationPopup.find('.task').text(task);
    notificationPopup.find('.notification-text').text(notificationText);
    notificationPopup.removeClass('hide success');
    // If a custom class is provided for the popup, add It
    if(newClass)
        notificationPopup.addClass(newClass);
    // If there is already a timeout running for hiding current popup, clear it.
    if(notificationTimeout)
        clearTimeout(notificationTimeout);
    // Init timeout for hiding popup after 3 seconds
    notificationTimeout = setTimeout(function(){
        notificationPopup.addClass('hide');
    }, 5000);
};


var ios2Country = "{{$data->contact_iso}}";
if(ios2Country == null)
{
   ios2Country='ae';
}
$("#phone1").intlTelInput({
    initialCountry: ios2Country,
    separateDialCode: true,
    preferredCountries: ["ae", "in", "sa"],
    geoIpLookup: function (callback) {
        $.get('https://ipinfo.io', function () {
        }, "jsonp").always(function (resp) {
            var countryCode = (resp && resp.country) ? resp.country : "";
            callback(countryCode);
        });
    },
    utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.14/js/utils.js"
});


/* ADD A MASK IN PHONE1 INPUT (when document ready and when changing flag) FOR A BETTER USER EXPERIENCE */

var mask1 = $("#phone1").attr('placeholder').replace(/[0-9]/g, 0);

$(document).ready(function () {
    $('#phone1').mask(mask1)
});

$("#phone1").on("countrychange", function (e, countryData) {
    $("#phone1").val('');
    var mask1 = $("#phone1").attr('placeholder').replace(/[0-9]/g, 0);
    $('#phone1').mask(mask1);
    $('#code').val($("#phone1").intlTelInput("getSelectedCountryData").dialCode);
    $('#iso').val($("#phone1").intlTelInput("getSelectedCountryData").iso2);
    
});
//

$(document).ready(function (e) {

$(document).on('click','.remove-image',function(){ 
    
    if(confirm("are you sure?")){
    $('#fileupload').val("");
    $(this).parent('.image-area').detach();
    var file_id = $(this).attr('data-id'); 
    
    $.ajax({
            url:"{{ url('/company/document/remove') }}",
            type:'POST',
            data:{"file_id":file_id,"_token": "{{ csrf_token() }}"},   
            success: function(data) {
                //update users
                console.log(data);    
                if(data.status == 'ok')
                {
                   
                }
            }
    });

    }

});

// open file upload model
$('#openFileModal').click(function(){
      $('#fileModal').modal({
        backdrop: 'static',
        keyboard: false
      });

      $('form#client_file_form')[0].reset();
});        

// submit form
$(document).on('submit', 'form#client_file_form', function (event) {
    event.preventDefault();
    
    $("#fileUploadProcess").html("<img src='{{asset('images/process-horizontal.gif')}}' >");

    var form = $(this);
    var data = new FormData($(this)[0]);
    var url = form.attr("action");
    $.ajax({
        type: form.attr('method'),
        url: url,
        data: data,
        cache: false,
        contentType: false,
        processData: false,
        success: function (data) {
            
            if (data.fail) {
              updateNotification(data.errors); 
                $("#fileUploadProcess").html("");             
            } else {
              $('#fileModal').modal('hide');                
              // 
            $('#fileupload').val("");
            $("#fileUploadProcess").html("");
            //append result
            $("#fileResult").prepend("<div class='image-area'><img src='"+data.filePrev+"'  alt='Preview'><a class='remove-image' href='javascript:;' style='display: inline;'>&#215;</a><input type='hidden' name='fileID[]' value='"+data.file_id+"'><p style='font-size:12px;'>"+data.filename+"</p></div>");
            }
        },
        error: function (xhr, textStatus, errorThrown) {
            alert("Error: " + errorThrown);
        }
    });
    return false;
});
//
});


</script>
  
@endsection