@extends('layouts.app')

@section('title', 'Vendor 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 text-center" style="padding-top: 20px;">
                    <h3 class="page-title ">Create new vendor <small>(Vendor detail)</small> </h3>
                  </div>
                </div>
              </div>
              <!-- /Page Header -->
              
              <form method="post" action="{{route('/vendor/save')}}">
                @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-md-6">
                      <div class="form-group">
                        <label>Vendor Category <span class="text-danger">*</span></label>
                        <select class="select" name="vendor_category">
                          <option value="">-Select-</option>
                          @if(count($v_category) > 0)
                          @foreach($v_category as $item)
                          <option value="{{$item->id}}">{{$item->title}}</option>
                          @endforeach
                          @endif
                        </select>

                      </div>
                    </div>
                    <div class="col-md-6">
                      
                    </div>
                  </div>
                <div class="row">
                  <div class="col-sm-6">
                    <div class="form-group">
                      <label>First Name <span class="text-danger">*</span></label>
                      <input class="form-control" type="text"  name="first_name" value="{{old('first_name')}}">
                    </div>
                  </div>
                  <div class="col-sm-6">
                    <div class="form-group">
                      <label>Last Name </label>
                      <input class="form-control" type="text" name="last_name" value="{{old('last_name')}}">
                    </div>
                  </div>
                </div>

                <div class="row">
                  <div class="col-sm-6">
                    <div class="form-group">
                      <label>Email <span class="text-danger">*</span></label>
                      <input class="form-control" type="email" name="email" value="{{old('email')}}">
                    </div>
                  </div>
                  <div class="col-sm-6">
                    <div class="form-group">
                      <label>Phone Number <span class="text-danger">*</span></label>
                      <input type="hidden"  id="code" name ="primary_phone_code" value="971" >
                      <input type="hidden"  id="iso" name ="primary_phone_iso" value="ae" >
                      <input type="tel" name ="phone_number" id="phone1" value="" style='display:block'>
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col-sm-6">
                    <div class="form-group">
                      <label>Other Contact Number </label>
                      <input type="hidden"  id="code2" name ="other_phone_code" value="971" >
                      <input type="hidden"  id="iso2" name ="other_phone_iso" value="ae" >
                      <input type="tel" name ="other_phone_number" id="phone2" value="" style='display:block'>
                    </div>
                  </div>
                  <div class="col-sm-6">
                    <div class="form-group">
                      <label>Company name <small>(if any)</small> </label>
                      <input class="form-control " type="text" name="company_name" value="{{old('company_name')}}">
                    </div>
                  </div>
                  
                </div>

                <div class="row">
                  <div class="col-sm-6">
                    <div class="form-group">
                      <label>Address</label>
                      <input class="form-control "  name="street_address" type="text" value="{{old('street_address')}}">
                    </div>
                  </div>                  

                </div>
                <div class="row">
                  <div class="col-sm-6 col-md-6 col-lg-3" >
                    <div class="form-group" >
                      <label>Country</label>
                      <select class="form-control select " name="country">
                        <option value="">-Select a country-</option>
                        @foreach($countries as $item)
                          <option value="{{$item->id}}" >{{$item->country_name}}</option>                            
                        @endforeach
                      </select>
                    </div>
                  </div>
                  <div class="col-sm-6 col-md-6 col-lg-3">
                    <div class="form-group">
                      <label>City</label>
                      <input class="form-control" name="city"  type="text" value="{{old('city')}}">
                    </div>
                  </div>
                  <div class="col-sm-6 col-md-6 col-lg-3" >
                    <div class="form-group" >
                      <label>State/Province</label>                     
                      <input class="form-control" name="state"  type="text" value="{{old('state')}}">
                    </div>
                  </div>
                  <div class="col-sm-6 col-md-6 col-lg-3">
                    <div class="form-group">
                      <label>Postal Code</label>
                      <input class="form-control" maxlength="6" name="zipcode"  type="text" value="{{old('zipcode')}}">
                    </div>
                  </div>
                </div>
                
                <!-- attachment -->
                <div class="row">
                    <div class="col-sm-12">
                      <p style="font-size: 18px;">Attachment</p>
                      <hr>
                      <a class="btn-link" id="clickSelectFile" 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="fileUploadProcess" style="min-height: 20px;">
                          
                        </div>
          
                      <div class="row" id="fileResult" style="min-height: 60px; margin-top: 20px;">
                                                  
                      </div>
                    </div>
                </div>

                <div class="submit-section">                  
                  <button type="submit" class="btn btn-primary submit-btn">Submit</button>
                </div>
              </form>
            </div>
          </div>
      </div>


@stack('scripts')

<script type="text/javascript">

$("#phone1").intlTelInput({
    initialCountry: "ae",
    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);
    
});
//
// phone2
$("#phone2").intlTelInput({
  initialCountry: "ae",
    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 PHONE2 INPUT (when document ready and when changing flag) FOR A BETTER USER EXPERIENCE */

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

$(document).ready(function () {
    $('#phone2').mask(mask2);
});

$("#phone2").on("countrychange", function (e, countryData) {
    $("#phone2").val('');
    var mask2 = $("#phone2").attr('placeholder').replace(/[0-9]/g, 0);
    $('#phone2').mask(mask2);
    $('#code2').val($("#phone2").intlTelInput("getSelectedCountryData").dialCode);
    $('#iso2').val($("#phone2").intlTelInput("getSelectedCountryData").iso2);
});
//
$(document).ready(function() {
//
$(document).on('click','#clickSelectFile',function(){ 
    $('#fileupload').trigger('click');
});

$(document).on('click','.remove-image',function(){ 
    $('#fileupload').val("");
    $(this).parent('.image-area').detach();
});

$(document).on('change','#fileupload',function(e){ 
// alert('test');
//show process 
// $("").html("Uploading...");
$("#fileUploadProcess").html("<img src='{{asset('images/process-horizontal.gif')}}' >"); 

var fd = new FormData();
var inputFile = $('#fileupload')[0].files[0];
fd.append('file',inputFile);
fd.append('_token', '{{csrf_token()}}');
//

  $.ajax({
          type: 'POST',
          url: "{{ url('/vendor/upload/file') }}",
          data: fd,
          processData: false,
          contentType: false,
          success: function(data) {
            console.log(data);
            if (data.fail == false) {
            
            //reset data
            $('#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>");

            } else {

              $("#fileUploadProcess").html("");
              alert("please upload valida file! allowed file type , Image, PDF, Doc, Xls and txt ");
              console.log("file error!");
              
            }
          },
          error: function(error) {
              console.log(error);
              // $(".preview_image").attr("src","{{asset('images/file-preview.png')}}"); 
          }
      }); 
    return false;

});


});
                  
</script>    
@endsection