@extends('layouts.front')

@section('scripts')
  @if( Auth::check())
    
      <script src="{{asset('project/resources/assets/js/chat/chatclient.js?v=1.0')}}"></script>
      
  @endif
<script type="text/javascript">

  $(document).ready(function () {
  
    $('#send_promotion').on("click", function () {
      if (validateWizard()) {

        $(this).prop("disabled", true);
        $('#close_modal').prop("disabled", true);
        $('#send_promotion').prop("disabled", true);
        $('#last_back').prop("disabled", true);

        var token = $('input[name=_token]').val();
        var files = $('#product_image')[0].files[0];
        var chk_fb = $('#chk_fb').val();
        var chk_ig = $('#chk_ig').val();
        var state = $('#state').val();
        var city = $('#city').val();
        var distance = $('#distance').val();
        var from_age = $('#from_age').val();
        var to_age = $('#to_age').val();
        var sex = $('#sex').val();
        var interests = $('#interests').val();
        var budget = $('#budget').val();
        var expire_date = $('#datepicker').val();
        var productId = $('#productId').val();

        var fd = new FormData();
        fd.append('_token', token);
        fd.append('file', files);
        fd.append('chk_fb', chk_fb);
        fd.append('chk_ig', chk_ig);
        fd.append('state', state);
        fd.append('city', city);
        fd.append('distance', distance);
        fd.append('from_age', from_age);
        fd.append('to_age', to_age);
        fd.append('sex', sex);
        fd.append('interests', interests);
        fd.append('budget', budget);
        fd.append('expire_date', expire_date);
        fd.append('productId', productId);

        $.ajax({
          url: "{{URL::to('/email/promotion')}}",
          type: 'post',
          data: fd,
          contentType: false,
          processData: false,
          success: function (response) {
            if (response == 'Email Sent Successfully.') {
              $('#send_promotion').prop("disabled", false);
              $('#close_modal').prop("disabled", false);
              $('#last_back').prop("disabled", false);
              $('#createPromotion').modal('toggle');
              alert("Correo enviado correctamente!!");
            }
          }
        });
      }
    });

    $("#createPromotion").on('show.bs.modal', function (event) {

      initializeWizard();

      var data_img = $(event.relatedTarget).data('image');
      var data_name = $(event.relatedTarget).data('name');
      var data_product = $(event.relatedTarget).data('product');

      $('#productId').val(data_product);

      $('[name="product_image"]').append(
              '<div class="container">' +
              '<span>' + data_name + '</span>' +
              '<img src="' + '{{asset('assets/images/products').'/'}}' + data_img + '">' +
              '<hr>' +
              '<div class="row">' +
              '<div class="col-lg-4">' +
              '<i class="far fa-hand-point-up" aria-hidden="true"></i>' +
              '<p style="font-size : 8px">Me gusta</p>' +
              '</div>' +
              '<div class="col-lg-4">' +
              '<i class="far fa-comment-alt" aria-hidden="true"></i>' +
              '<p style="font-size : 8px">Comentar</p>' +
              '</div>' +
              '<div class="col-lg-4">' +
              '<i class="far fa-share-square" aria-hidden="true"></i>' +
              '<p style="font-size : 8px">Compartir</p>' +
              '</div>' +
              '</div>' +
              '</div>');
    });

    $("#datepicker").datepicker({
      dateFormat: 'dd/mm/yy'
    });

    $('input[type="file"]').on('change', function (event) {
      $('#filename').text(event.target.files[0].name);
      validateImage();
    });

    // Country id
    var id = $('#country').val();
    $('#state').find('option').not(':first').remove();
    $.ajax({
      url: '/vendor/states/' + id,
      type: 'get',
      dataType: 'json',
      success: function (response) {
        var len = 0;
        if (response['data'] != null) {
          len = response['data'].length;
        }
        if (len > 0) {
          // Read data and create <option >
          for (var i = 0; i < len; i++) {
            var id = response['data'][i].id;
            var state_name = response['data'][i].state;
            var option = "<option value='" + id + "'>" + state_name + "</option>";
            $("#state").append(option);
          }
        }
      }
    });
    {{-- ENDS STATE SELECT FILLS--}}

    $('#state').change(function () {
      validateState();

      let id = $(this).val();
      $('#city').find('option').not(':first').remove();

      $.ajax({
        url: '/vendor/cities/' + id,
        type: 'get',
        dataType: 'json',
        success: function (response) {
          var len = 0;
          if (response['data'] != null) {
            len = response['data'].length;
          }
          if (len > 0) {
            // Read data and create <option >
            for (var i = 0; i < len; i++) {
              var id = response['data'][i].id;
              var city_name = response['data'][i].city;
              var option = "<option value='" + id + "'>" + city_name + "</option>";
              $("#city").append(option);
            }
          }
        }
      });
    });
    {{-- ENDS CITY SELECT FILLS--}}

    $('#city').change(function() {
      validateCity();
    });

    $('#budget').change(function () {
      validateBudget();
    });

    $('#datepicker').change(function () {
      validateDueDate();
    });

    $("#to_age").change(function() {
      validateRange();
    });

    $("#from_age").change(function() {
      validateRange();
    });

  });
  {{-- ENDS DOCUMENT READY--}}

  function initializeWizard() {
    // Select first tab always when shows modal
    $('[href="#step1"]').parent().next().removeClass('active');
    $('[href="#step1"]').parent().next().next().removeClass('active');
    $('[href="#step1"]').parent().addClass('active');
    $('[href="#step1"]').tab('show');

    // Remove validations highligths
    $("#validate_state").addClass('error');
    $("#validate_city").addClass('error');
    $("#validate_range").addClass('error');
    $("#validate_date").addClass('error');
    $("#validate_budget").addClass('error');
    $("#validation_image").addClass('error');

    // Clean fields
    $('#product_image').val('');
    $('#filename').text('');
    $('#state').val(0);
    $('#state').removeClass('invalid');
    $('#state').removeClass('valid');
    $('#city').val(0);
    $('#city').removeClass('invalid');
    $('#city').removeClass('valid');
    $('#from_age').val(13);
    $('#from_age').removeClass('invalid');
    $('#from_age').removeClass('valid');
    $('#to_age').val(13);
    $('#to_age').removeClass('invalid');
    $('#to_age').removeClass('valid');
    $('#sex').val(1);
    $('#distance').val(1);
    $('#budget').val('');
    $('#budget').removeClass('invalid');
    $('#budget').removeClass('valid');
    $('#datepicker').val('');
    $('#datepicker').removeClass('invalid');
    $('#datepicker').removeClass('valid');
    $('#productId').val('');
    $('#chk_fb').prop('checked', false);
    $('#chk_ig').prop('checked', false);

    //Clean product image
    $('[name="product_image"]').find('div').remove();
  }

  function validateWizard() {
    let isValid = true;
    isValid = validateState() & validateCity() & validateBudget() & validateDueDate() & validateRange() & validateImage();
    return isValid;
  }

  function validateState() {
    if($('#state').val() == 0) {
      $('#state').removeClass('valid');
      $('#state').addClass('invalid');
      $("#validate_state").removeClass("error");
      $("#validate_state").addClass('error_show');
      return false;
    }else{
      $('#state').removeClass('invalid');
      $('#state').addClass('valid');
      $("#validate_state").removeClass("error_show");
      $("#validate_state").addClass('error');
      return true;
    }
  }

  function validateCity() {
    if($('#city').val() == 0) {
      $('#city').removeClass('valid');
      $('#city').addClass('invalid');
      $("#validate_city").removeClass("error");
      $("#validate_city").addClass('error_show');
      return false;
    }else{
      $('#city').removeClass('invalid');
      $('#city').addClass('valid');
      $("#validate_city").removeClass("error_show");
      $("#validate_city").addClass('error');
      return true;
    }
  }

  function validateDueDate() {
    if(!$('#datepicker').val()) {
      $('#datepicker').removeClass('valid');
      $('#datepicker').addClass('invalid');
      $("#validate_date").removeClass("error");
      $("#validate_date").addClass('error_show');
      return false;
    }else{
      $('#datepicker').removeClass('invalid');
      $('#datepicker').addClass('valid');
      $("#validate_date").removeClass("error_show");
      $("#validate_date").addClass('error');
      return true;
    }
  }

  function validateBudget() {
    if(!$('#budget').val()) {
      $('#budget').removeClass('valid');
      $('#budget').addClass('invalid');
      $("#validate_budget").removeClass('error');
      $("#validate_budget").addClass('error_show');
      return false;
    }else{
      $('#budget').removeClass('invalid');
      $('#budget').addClass('valid');
      $("#validate_budget").removeClass("error_show");
      $("#validate_budget").addClass('error');
      return true;
    }
  }

  function validateRange() {
    if($('#from_age').val() < $('#to_age').val()) {
      $('#from_age').removeClass('invalid');
      $('#from_age').addClass('valid');
      $('#to_age').removeClass('invalid');
      $('#to_age').addClass('valid');
      $('#validate_range').removeClass('error_show');
      $('#validate_range').addClass('error');
      return true;
    }else {
      $('#from_age').removeClass('valid');
      $('#from_age').addClass('invalid');
      $('#to_age').removeClass('valid');
      $('#to_age').addClass('invalid');
      $('#validate_range').removeClass('error');
      $('#validate_range').addClass('error_show');
      return false;
    }
  }

  function validateImage() {
    if(!$('#filename').text()) {
      $('#validation_image').removeClass('error');
      $('#validation_image').addClass('error_show');
      return false;
    }else{
      $('#validation_image').removeClass('error_show');
      $('#validation_image').addClass('error');
      return true;
    }
  }

  $('.nav-tabs > li a[title]').tooltip();

  //Wizard
  $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {

    var target = $(e.target);

    if (target.parent().hasClass('disabled')) {
      return false;
    }
  });

  $(".next-step").click(function (e) {
    var active = $('.wizard .nav-tabs li.active');
    active.next().removeClass('disabled');
    nextTab(active);
  });

  $(".prev-step").click(function (e) {
    var active = $('.wizard .nav-tabs li.active');
    prevTab(active);
  });

  function nextTab(elem) {
    $(elem).next().find('a[data-toggle="tab"]').click();
  }

  function prevTab(elem) {
    $(elem).prev().find('a[data-toggle="tab"]').click();
  }

  $('.nav-tabs').on('click', 'li', function() {
    $('.nav-tabs li.active').removeClass('active');
    $(this).addClass('active');
  });

  {{-- ENDS WIZARD SCRIPT --}}

  $(document).on("submit", "#emailreply1", function () {
    var token = $(this).find('input[name=_token]').val();
    var subject = $(this).find('input[name=subject]').val();
    var message = $(this).find('textarea[name=message]').val();
    var $type  = $(this).find('input[name=type]').val();
    $('#subj1').prop('disabled', true);
    $('#msg1').prop('disabled', true);
    $('#emlsub').prop('disabled', true);
    $.ajax({
      type: 'post',
      url: "{{URL::to('/user/admin/user/send/message')}}",
      data: {
        '_token': token,
        'subject': subject,
        'message': message,
        'type'   : $type
      },
      success: function (data) {
        $('#subj1').prop('disabled', false);
        $('#msg1').prop('disabled', false);
        $('#subj1').val('');
        $('#msg1').val('');
        $('#emlsub').prop('disabled', false);
        if(data == 0)
          toastr.error("Oops Something Goes Wrong !!");
        else
          toastr.success("Message Sent !!");
        $('.close').click();
      }

    });
    return false;
   });

</script>


<script type="text/javascript">

  $(document).on("submit", "#emailreply", function () {
    var token = $(this).find('input[name=_token]').val();
    var subject = $(this).find('input[name=subject]').val();
    var message = $(this).find('textarea[name=message]').val();
    var email = $(this).find('input[name=email]').val();
    var name = $(this).find('input[name=name]').val();
    var user_id = $(this).find('input[name=user_id]').val();
    var vendor_id = $(this).find('input[name=vendor_id]').val();
    $('#subj').prop('disabled', true);
    $('#msg').prop('disabled', true);
    $('#emlsub').prop('disabled', true);
    $.ajax({
      type: 'post',
      url: "{{URL::to('/vendor/contact')}}",
      data: {
        '_token': token,
        'subject': subject,
        'message': message,
        'email': email,
        'name': name,
        'user_id': user_id,
        'vendor_id': vendor_id
      },
      success: function () {
        $('#subj').prop('disabled', false);
        $('#msg').prop('disabled', false);
        $('#subj').val('');
        $('#msg').val('');
        $('#emlsub').prop('disabled', false);
        toastr.success("{{ $langg->message_sent }}");
        $('.ti-close').click();
      }
    });
    return false;
  });

</script>

@endsection




@section('content')

  <style>
    @import url('https://fonts.googleapis.com/css?family=Roboto');

    body{
      font-family: 'Roboto', sans-serif;
    }
    * {
      margin: 0;
      padding: 0;
    }
    i {
      margin-right: 10px;
    }

    /*------------------------*/
    input:focus,
    button:focus,
    .form-control:focus{
      outline: none;
      box-shadow: none;
    }
    .form-control:disabled, .form-control[readonly]{
      background-color: #fff;
    }
    /*----------step-wizard------------*/
    .d-flex{
      display: flex;
    }
    .justify-content-center{
      justify-content: center;
    }
    .align-items-center{
      align-items: center;
    }

    /*---------signup-step-------------*/
    .bg-color{
      background-color: #333;
    }
    .signup-step-container{
      padding: 50px 0px;
      padding-bottom: 60px;
    }

    .wizard .nav-tabs {
      position: relative;
      margin-bottom: 0;
      border-bottom-color: transparent;
    }

    .wizard > div.wizard-inner {
      position: relative;
      margin-bottom: 50px;
      text-align: center;
    }

    .connecting-line {
      height: 2px;
      background: #e0e0e0;
      position: absolute;
      width: 65%;
      margin: 0 auto;
      left: 0;
      right: 0;
      top: 15px;
      z-index: 1;
    }

    .wizard .nav-tabs > li.active > a, .wizard .nav-tabs > li.active > a:hover, .wizard .nav-tabs > li.active > a:focus {
      color: #555555;
      cursor: default;
      border: 0;
      border-bottom-color: transparent;
    }

    span.round-tab {
      width: 30px;
      height: 30px;
      line-height: 30px;
      display: inline-block;
      border-radius: 50%;
      background: #fff;
      z-index: 2;
      position: absolute;
      left: 0;
      text-align: center;
      font-size: 16px;
      color: #0e214b;
      font-weight: 500;
      border: 1px solid #ddd;
    }
    span.round-tab i{
      color:#555555;
    }
    .wizard li.active span.round-tab {
      background: #0db02b;
      color: #fff;
      border-color: #0db02b;
    }
    .wizard li.active span.round-tab i{
      color: #5bc0de;
    }
    .wizard .nav-tabs > li.active > a i{
      color: #0db02b;
    }

    .wizard .nav-tabs > li {
      width: 33%;
    }

    .wizard li:after {
      content: "";
      position: absolute;
      left: 46%;
      opacity: 0;
      margin: 0 auto;
      bottom: 0px;
      border: 5px solid transparent;
      border-bottom-color: red;
      transition: 0.1s ease-in-out;
    }

    .wizard .nav-tabs > li a {
      width: 30px;
      height: 30px;
      margin: 20px auto;
      border-radius: 100%;
      padding: 0;
      background-color: transparent;
      position: relative;
      top: 0;
    }
    .wizard .nav-tabs > li a i{
      position: absolute;
      top: -15px;
      font-style: normal;
      font-weight: 400;
      white-space: nowrap;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 12px;
      font-weight: 700;
      color: #000;
    }

    .wizard .nav-tabs > li a:hover {
      background: transparent;
    }

    .wizard .tab-pane {
      position: relative;
      padding-top: 20px;
    }

    .wizard h3 {
      margin-top: 0;
    }
    .prev-step,
    .next-step{
      font-size: 13px;
      padding: 8px 24px;
      border: none;
      border-radius: 4px;
      margin-top: 30px;
    }

    .next-step{
      background-color: #0db02b;
    }

    .btn-input-file {
      font-size: 13px;
      padding: 8px 24px;
      border: none;
      border-radius: 4px;
      background-color: #0db02b;
    }

    .skip-btn{
      background-color: #cec12d;
    }
    .step-head{
      font-size: 20px;
      text-align: center;
      font-weight: 500;
      margin-bottom: 20px;
    }
    .term-check{
      font-size: 14px;
      font-weight: 400;
    }
    .custom-file {
      position: relative;
      display: inline-block;
      width: 100%;
      height: 40px;
      margin-bottom: 0;
    }
    .custom-file-input {
      position: relative;
      z-index: 2;
      width: 100%;
      height: 40px;
      margin: 0;
      opacity: 0;
    }
    .custom-file-label {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      z-index: 1;
      height: 40px;
      padding: .375rem .75rem;
      font-weight: 400;
      line-height: 2;
      color: #495057;
      background-color: #fff;
      border: 1px solid #ced4da;
      border-radius: .25rem;
    }
    .custom-file-label::after {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      z-index: 3;
      display: block;
      height: 38px;
      padding: .375rem .75rem;
      line-height: 2;
      color: #495057;
      content: "Browse";
      background-color: #e9ecef;
      border-left: inherit;
      border-radius: 0 .25rem .25rem 0;
    }
    .footer-link{
      margin-top: 30px;
    }
    .all-info-container{

    }
    .list-content{
      margin-bottom: 10px;
    }
    .list-content a{
      padding: 10px 15px;
      width: 100%;
      display: inline-block;
      background-color: #f5f5f5;
      position: relative;
      color: #565656;
      font-weight: 400;
      border-radius: 4px;
    }
    .list-content a[aria-expanded="true"] i{
      transform: rotate(180deg);
    }
    .list-content a i{
      text-align: right;
      position: absolute;
      top: 15px;
      right: 10px;
      transition: 0.5s;
    }
    .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
      background-color: #fdfdfd;
    }
    .list-box{
      padding: 10px;
    }
    .signup-logo-header .logo_area{
      width: 200px;
    }
    .signup-logo-header .nav > li{
      padding: 0;
    }
    .signup-logo-header .header-flex{
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .list-inline li{
      display: inline-block;
    }
    .pull-right{
      float: right;
    }
    /*-----------custom-checkbox-----------*/
    /*----------Custom-Checkbox---------*/
    input[type="checkbox"]{
      position: relative;
      display: inline-block;
      margin-right: 5px;
    }
    input[type="checkbox"]::before,
    input[type="checkbox"]::after {
      position: absolute;
      content: "";
      display: inline-block;
    }
    input[type="checkbox"]::before{
      height: 16px;
      width: 16px;
      border: 1px solid #999;
      left: 0px;
      top: 0px;
      background-color: #fff;
      border-radius: 2px;
    }
    input[type="checkbox"]::after{
      height: 5px;
      width: 9px;
      left: 4px;
      top: 4px;
    }
    input[type="checkbox"]:checked::after{
      content: "";
      border-left: 1px solid #fff;
      border-bottom: 1px solid #fff;
      transform: rotate(-45deg);
    }
    input[type="checkbox"]:checked::before{
      background-color: #18ba60;
      border-color: #18ba60;
    }

    @media (max-width: 767px){
      .sign-content h3{
        font-size: 40px;
      }
      .wizard .nav-tabs > li a i{
        display: none;
      }
      .signup-logo-header .navbar-toggle{
        margin: 0;
        margin-top: 8px;
      }
      .signup-logo-header .logo_area{
        margin-top: 0;
      }
      .signup-logo-header .header-flex{
        display: block;
      }
    }

    .btn-file {
      position: relative;
      overflow: hidden;
    }

    .btn-file input[type=file] {
      position: absolute;
      top: 0;
      right: 0;
      min-width: 100%;
      min-height: 100%;
      font-size: 100px;
      text-align: right;
      filter: alpha(opacity=0);
      opacity: 0;
      outline: none;
      cursor: inherit;
      display: block;
    }

    .div-border-product {
      border: 1px solid rgba(0, 0, 0, 0.1);
    }

    .error{
      display: none;
      margin-left: 10px;
      margin-top: 3px
    }

    .error_show{
      color: red;
      margin-left: 10px;
    }

    input.invalid, textarea.invalid, select.invalid {
      border: 2px solid red;
    }

    input.valid, textarea.valid, select.valid {
      border: 2px solid green;
    }
    .botonsocial{
      background-color: rgb(1, 187, 210);
      border-bottom-left-radius: 50%;
      border-bottom-right-radius: 50%;
      border-top-left-radius: 50%;
      border-top-right-radius: 50%;
      box-sizing: border-box;
      color: rgb(255, 255, 255);
      display: inline-block;
      font-family: "Roboto", sans-serif;
      font-size: 12px;
      font-weight: 400;
      height: 35px;
      line-height: 30px;
      margin-bottom: 0px;
      margin-left: 2px;
      margin-right: 0px;
      margin-top: 0px;
      outline-color: rgb(255, 255, 255);
      outline-style: none;
      outline-width: 0px;
      padding-bottom: 0px;
      padding-left: 0px;
      padding-right: 0px;
      padding-top: 0px;
      position: relative;
      text-align: center;
      text-decoration: rgb(255, 255, 255);
      text-decoration-color: rgb(255, 255, 255);
      text-decoration-line: none;
      text-decoration-style: solid;
      text-decoration-thickness: auto;
      width: 35px;

      z-index: 0
    }

  </style>

<div class="breadcrumb-area">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <ul class="pages">

          <li><a href="{{route('front.index')}}">{{ $langg->lang17 }}</a></li>
          <li><a href="{{route('front.category',$productt->category->slug)}}">{{$productt->category->name}}</a></li>
          @if(!empty($productt->subcategory))
          <li><a
              href="{{ route('front.subcat',['slug1' => $productt->category->slug, 'slug2' => $productt->subcategory->slug]) }}">{{$productt->subcategory->name}}</a>
          </li>
          @endif
          @if(!empty($productt->childcategory))
          <li><a
              href="{{ route('front.childcat',['slug1' => $productt->category->slug, 'slug2' => $productt->subcategory->slug, 'slug3' => $productt->childcategory->slug]) }}">{{$productt->childcategory->name}}</a>
          </li>
          @endif
          <li><a href="{{ route('front.product', $productt->slug) }}">{{ $productt->name }}</a>

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

<!-- Product Details Area Start -->
<section class="product-details-page">
  <div class="container">
    <div class="row">
    <div class="col-lg-9">
        <div class="row">

            <div class="col-lg-5 col-md-12">

          <div class="xzoom-container">
              <img class="xzoom5" id="xzoom-magnific" src="{{filter_var($productt->photo, FILTER_VALIDATE_URL) ?$productt->photo:asset('assets/images/products/'.$productt->photo)}}" xoriginal="{{filter_var($productt->photo, FILTER_VALIDATE_URL) ?$productt->photo:asset('assets/images/products/'.$productt->photo)}}" />
              <div class="xzoom-thumbs">

                <div class="all-slider">

                    <a href="{{filter_var($productt->photo, FILTER_VALIDATE_URL) ?$productt->photo:asset('assets/images/products/'.$productt->photo)}}">
                  <img class="xzoom-gallery5" width="80" src="{{filter_var($productt->photo, FILTER_VALIDATE_URL) ?$productt->photo:asset('assets/images/products/'.$productt->photo)}}" title="The description goes here">
                    </a>

                @foreach($productt->galleries as $gal)


                    <a href="{{asset('assets/images/galleries/'.$gal->photo)}}">
                  <img class="xzoom-gallery5" width="80" src="{{asset('assets/images/galleries/'.$gal->photo)}}" title="The description goes here">
                    </a>

                @endforeach

                </div>

              </div>
          </div>

            </div>

            <div class="col-lg-7">
              <div class="right-area">
                <div class="product-info">
                  <h4 class="product-name">{{ $productt->name }}</h4>
                  <div class="info-meta-1">
                    <ul>

                      @if($productt->type == 'Physical')
                      @if($productt->emptyStock())
                      <li class="product-outstook">
                        <p>
                          <i class="icofont-close-circled"></i>
                          {{ $langg->lang78 }}
                        </p>
                      </li>
                      @else
                      <li class="product-isstook">
                        <p>
                          <i class="icofont-check-circled"></i>
                          {{ $gs->show_stock == 0 ? '' : $productt->stock }} {{ $langg->lang79 }}
                        </p>
                      </li>
                      @endif
                      @endif
                      <li>
                        <div class="ratings">
                          <div class="empty-stars"></div>
                          <div class="full-stars" style="width:{{App\Models\Rating::ratings($productt->id)}}%"></div>
                        </div>
                      </li>
                      <li class="review-count">
                        <p>{{count($productt->ratings)}} {{ $langg->lang80 }}</p>
                      </li>
                  @if($productt->product_condition != 0)
                     <li>
                       <div class="{{ $productt->product_condition == 2 ? 'mybadge' : 'mybadge1' }}">
                        {{ $productt->product_condition == 2 ? 'New' : 'Used' }}
                       </div>
                     </li>
                  @endif
                    </ul>
                  </div>



            <div class="product-price">
              <p class="title">{{ $langg->lang87 }} :</p>
                    <p class="price"><span id="sizeprice">{{ $productt->showPrice() }}</span>
                      <small><del>{{ $productt->showPreviousPrice() }}</del></small></p>
                      @if($productt->youtube != null)
                      <a href="{{ $productt->youtube }}" class="video-play-btn mfp-iframe">
                        <i class="fas fa-play"></i>
                      </a>
                    @endif
                  </div>

                  <div class="info-meta-2">
                    <ul>

                      @if($productt->type == 'License')

                      @if($productt->platform != null)
                      <li>
                        <p>{{ $langg->lang82 }}: <b>{{ $productt->platform }}</b></p>
                      </li>
                      @endif

                      @if($productt->region != null)
                      <li>
                        <p>{{ $langg->lang83 }}: <b>{{ $productt->region }}</b></p>
                      </li>
                      @endif

                      @if($productt->licence_type != null)
                      <li>
                        <p>{{ $langg->lang84 }}: <b>{{ $productt->licence_type }}</b></p>
                      </li>
                      @endif

                      @endif

                    </ul>
                  </div>


                  @if(!empty($productt->size))
                  <div class="product-size">
                    <p class="title">{{ $langg->lang88 }} :</p>
                    <ul class="siz-list">
                      @php
                      $is_first = true;
                      @endphp
                      @foreach($productt->size as $key => $data1)
                      <li class="{{ $is_first ? 'active' : '' }}">
                        <span class="box">{{ $data1 }}
                          <input type="hidden" class="size" value="{{ $data1 }}">
                          <input type="hidden" class="size_qty" value="{{ $productt->size_qty[$key] }}">
                          <input type="hidden" class="size_key" value="{{$key}}">
                          <input type="hidden" class="size_price"
                            value="{{ round($productt->size_price[$key],2) }}">
                        </span>
                      </li>
                      @php
                      $is_first = false;
                      @endphp
                      @endforeach
                      <li>
                    </ul>
                  </div>
                  @endif

                  @if(!empty($productt->color))
                  <div class="product-color">
                    <p class="title">{{ $langg->lang89 }} :</p>
                    <ul class="color-list">
                      @php
                      $is_first = true;
                      @endphp
                      @foreach($productt->color as $key => $data1)
                      <li class="{{ $is_first ? 'active' : '' }}">
                        <span class="box" data-color="{{ $productt->color[$key] }}" style="background-color: {{ $productt->color[$key] }}"></span>
                      </li>
                      @php
                      $is_first = false;
                      @endphp
                      @endforeach

                    </ul>
                  </div>
                  @endif

                  @if(!empty($productt->size))

                  <input type="hidden" id="stock" value="{{ $productt->size_qty[0] }}">
                  @else
                  @php
                  $stck = (string)$productt->stock;
                  @endphp
                  @if($stck != null)
                  <input type="hidden" id="stock" value="{{ $stck }}">
                  @elseif($productt->type != 'Physical')
                  <input type="hidden" id="stock" value="0">
                  @else
                  <input type="hidden" id="stock" value="">
                  @endif

                  @endif
                  <input type="hidden" id="product_price" value="{{ 0 }}">

                  <input type="hidden" id="product_id" value="{{ $productt->id }}">
                  <input type="hidden" id="curr_pos" value="{{ $gs->currency_format }}">
                  <input type="hidden" id="curr_sign" value="{{ $curr->sign }}">
                  <div class="info-meta-3">
                    <ul class="meta-list">
                      @if($productt->product_type != "affiliate")
                      <li class="d-block count {{ $productt->type == 'Physical' ? '' : 'd-none' }}">
                        <div class="qty">
                          <ul>
                            <li>
                              <span class="qtminus">
                                <i class="icofont-minus"></i>
                              </span>
                            </li>
                            <li>
                              <span class="qttotal">1</span>
                            </li>
                            <li>
                              <span class="qtplus">
                                <i class="icofont-plus"></i>
                              </span>
                            </li>
                          </ul>
                        </div>
                      </li>
                      @endif

                      @if (!empty($productt->attributes))
                        @php
                          $attrArr = json_decode($productt->attributes, true);
                        @endphp
                      @endif
                      @if (!empty($attrArr))
                        <div class="product-attributes my-4">
                          <div class="row">
                          @foreach ($attrArr as $attrKey => $attrVal)
                            @if (array_key_exists("details_status",$attrVal) && $attrVal['details_status'] == 1)

                          <div class="col-lg-6">
                              <div class="form-group mb-2">
                                <strong for="" class="text-capitalize">{{ str_replace("_", " ", $attrKey) }} :</strong>
                                <div class="">
                                @foreach ($attrVal['values'] as $optionKey => $optionVal)
                                  <div class="custom-control custom-radio">
                                    <input type="hidden" class="keys" value="">
                                    <input type="hidden" class="values" value="">
                                    <input type="radio" id="{{$attrKey}}{{ $optionKey }}" name="{{ $attrKey }}" class="custom-control-input product-attr"  data-key="{{ $attrKey }}" data-price = "{{ $attrVal['prices'][$optionKey] * $curr->value }}" value="{{ $optionVal }}" {{ $loop->first ? 'checked' : '' }}>
                                    <label class="custom-control-label" for="{{$attrKey}}{{ $optionKey }}">{{ $optionVal }}

                                    @if (!empty($attrVal['prices'][$optionKey]))
                                      
                                      {{$curr->sign}} {{$attrVal['prices'][$optionKey] * $curr->value}}
                                    @endif
                                    </label>
                                  </div>
                                @endforeach
                                </div>
                              </div>
                          </div>
                            @endif
                          @endforeach
                          </div>
                        </div>
                      @endif

                      @if($productt->product_type == "affiliate")

                      <li class="addtocart">
                        <a href="{{ route('affiliate.product', $productt->slug) }}" target="_blank"><i
                            class="icofont-cart"></i> {{ $langg->lang251 }}</a>
                      </li>
                      @else
                      @if($productt->emptyStock())
                      <li class="addtocart">
                        <a href="javascript:;" class="cart-out-of-stock">
                          <i class="icofont-close-circled"></i>
                          {{ $langg->lang78 }}</a>
                      </li>
                      @else
                      <li class="addtocart">
                        <a href="javascript:;" id="addcrt"><i class="icofont-cart"></i>{{ $langg->lang90 }}</a>
                      </li>

                      <li class="addtocart">
                        <a id="qaddcrt" href="javascript:;">
                          <i class="icofont-cart"></i>{{ $langg->lang251 }}
                        </a>
                      </li>
                      @endif

                      @endif

                      @if(Auth::guard('web')->check())
                      <li class="favorite">
                        <a href="javascript:;" class="add-to-wish"
                          data-href="{{ route('user-wishlist-add',$productt->id) }}"><i class="icofont-heart-alt"></i></a>
                      </li>
                      @else
                      <li class="favorite">
                        <a href="javascript:;" data-toggle="modal" data-target="#comment-log-reg"><i
                            class="icofont-heart-alt"></i></a>
                      </li>
                      @endif
                      <li class="compare">
                        <a href="javascript:;" class="add-to-compare"
                          data-href="{{ route('product.compare.add',$productt->id) }}"><i class="icofont-exchange"></i></a>
                      </li>
                    </ul>
                  </div>
                  <div class="social-links social-sharing a2a_kit a2a_kit_size_32">
                    <ul class="link-list social-links">
                      <li>
                        <a class="facebook a2a_button_facebook" href="">
                          <i class="fab fa-facebook-f"></i>
                        </a>
                      </li>
                      <li>
                        <a class="twitter a2a_button_twitter" href="">
                          <i class="fab fa-twitter"></i>
                        </a>
                      </li>
                      <li>
                        <a class="linkedin a2a_button_linkedin" href="">
                          <i class="fab fa-linkedin-in"></i>
                        </a>
                      </li>
                      <li>
                        <a class="pinterest a2a_button_pinterest" href="">
                          <i class="fab fa-pinterest-p"></i>
                        </a>
                      </li>
                      @if( Auth::check())
                        <li class="botonsocial">
                          <a class="botonsocial" href="javascript:;" data-toggle="modal" data-target="#vendorchat" >
                            <i class="icofont-speech-comments"></i>
                          </a>
                        </li>
                      @endif
                    </ul>
                  </div>
                  
                  
                  
                  
                  @if(Auth::guard('web')->check())
                  
                  
                  @if(Auth::guard('web')->user()->id==$productt->user_id)
                  
                  <div class="info-meta-3" style="margin-left: 10px">
                    <ul class="meta-list">
                      <li class="addtocart">
                        <a id="promote" href="javascript" data-toggle="modal" data-target="#createPromotion"
                          data-name="{{ $productt->name }}" data-image="{{ $productt->photo }}" data-product="{{ $productt->id }}">
                          <i class="fab fa-facebook"></i>Promoción de producto
                        </a>
                      </li>
                    </ul>
                  </div>
                  
                  @endif
                  @endif
                  
                </div>
                  <script async src="https://static.addtoany.com/menu/page.js"></script>


                  @if($productt->ship != null)
                    <p class="estimate-time">{{ $langg->lang86 }}: <b> {{ $productt->ship }}</b></p>
                  @endif
                  @if( $productt->sku != null )
                  <p class="p-sku">
                    {{ $langg->lang77 }}: <span class="idno">{{ $productt->sku }}</span>
                  </p>
                  @endif
      @if($gs->is_report)

      {{-- PRODUCT REPORT SECTION --}}

                    @if(Auth::guard('web')->check())

                    <div class="report-area">
                        <a href="javascript:;" data-toggle="modal" data-target="#report-modal"><i class="fas fa-flag"></i> {{ $langg->lang776 }}</a>
                    </div>

                    @else

                    <div class="report-area">
                        <a href="javascript:;" data-toggle="modal" data-target="#comment-log-reg"><i class="fas fa-flag"></i> {{ $langg->lang776 }}</a>
                    </div>
                    @endif

      {{-- PRODUCT REPORT SECTION ENDS --}}

      @endif



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

          </div>
          <div class="row">
              <div class="col-lg-12">
                  <div id="product-details-tab">
                    <div class="top-menu-area">
                      <ul class="tab-menu">
                        <li><a href="#tabs-1">{{ $langg->lang92 }}</a></li>
                        <li><a href="#tabs-2">{{ $langg->lang93 }}</a></li>
                        <li><a href="#tabs-3">{{ $langg->lang94 }}({{ count($productt->ratings) }})</a></li>
                        @if($gs->is_comment == 1)
                        <li><a href="#tabs-4">{{ $langg->lang95 }}(<span
                              id="comment_count">{{ count($productt->comments) }}</span>)</a></li>
                        @endif
                      </ul>
                    </div>
                    <div class="tab-content-wrapper">
                      <div id="tabs-1" class="tab-content-area">
                        <p>{!! $productt->details !!}</p>
                      </div>
                      <div id="tabs-2" class="tab-content-area">
                        <p>{!! $productt->policy !!}</p>
                      </div>
                      <div id="tabs-3" class="tab-content-area">
                        <div class="heading-area">
                          <h4 class="title">
                            {{ $langg->lang96 }}
                          </h4>
                          <div class="reating-area">
                            <div class="stars"><span id="star-rating">{{App\Models\Rating::rating($productt->id)}}</span> <i
                                class="fas fa-star"></i></div>
                          </div>
                        </div>
                        <div id="replay-area">
                          <div id="reviews-section">
                            @if(count($productt->ratings) > 0)
                            <ul class="all-replay">
                              @foreach($productt->ratings as $review)
                              <li>
                                <div class="single-review">
                                  <div class="left-area">
                                    <img
                                      src="{{ $review->user->photo ? asset('assets/images/users/'.$review->user->photo):asset('assets/images/noimage.png') }}"
                                      alt="">
                                    <h5 class="name">{{ $review->user->name }}</h5>
                                    <p class="date">
                                      {{ Carbon\Carbon::createFromFormat('Y-m-d H:i:s',$review->review_date)->diffForHumans() }}
                                    </p>
                                  </div>
                                  <div class="right-area">
                                    <div class="header-area">
                                      <div class="stars-area">
                                        <ul class="stars">
                                          <div class="ratings">
                                            <div class="empty-stars"></div>
                                            <div class="full-stars" style="width:{{$review->rating*20}}%"></div>
                                          </div>
                                        </ul>
                                      </div>
                                    </div>
                                    <div class="review-body">
                                      <p>
                                        {{$review->review}}
                                      </p>
                                    </div>
                                  </div>
                                </div>
                                @endforeach
                              </li>
                            </ul>
                            @else
                            <p>{{ $langg->lang97 }}</p>
                            @endif
                          </div>
                          @if(Auth::guard('web')->check())
                          <div class="review-area">
                            <h4 class="title">{{ $langg->lang98 }}</h4>
                            <div class="star-area">
                              <ul class="star-list">
                                <li class="stars" data-val="1">
                                  <i class="fas fa-star"></i>
                                </li>
                                <li class="stars" data-val="2">
                                  <i class="fas fa-star"></i>
                                  <i class="fas fa-star"></i>
                                </li>
                                <li class="stars" data-val="3">
                                  <i class="fas fa-star"></i>
                                  <i class="fas fa-star"></i>
                                  <i class="fas fa-star"></i>
                                </li>
                                <li class="stars" data-val="4">
                                  <i class="fas fa-star"></i>
                                  <i class="fas fa-star"></i>
                                  <i class="fas fa-star"></i>
                                  <i class="fas fa-star"></i>
                                </li>
                                <li class="stars active" data-val="5">
                                  <i class="fas fa-star"></i>
                                  <i class="fas fa-star"></i>
                                  <i class="fas fa-star"></i>
                                  <i class="fas fa-star"></i>
                                  <i class="fas fa-star"></i>
                                </li>
                              </ul>
                            </div>
                          </div>
                          <div class="write-comment-area">
                            <div class="gocover"
                              style="background: url({{ asset('assets/images/'.$gs->loader) }}) no-repeat scroll center center rgba(45, 45, 45, 0.5);">
                            </div>
                            <form id="reviewform" action="{{route('front.review.submit')}}"
                              data-href="{{ route('front.reviews',$productt->id) }}" method="POST">
                              @include('includes.admin.form-both')
                              {{ csrf_field() }}
                              <input type="hidden" id="rating" name="rating" value="5">
                              <input type="hidden" name="user_id" value="{{Auth::guard('web')->user()->id}}">
                              <input type="hidden" name="product_id" value="{{$productt->id}}">
                              <div class="row">
                                <div class="col-lg-12">
                                  <textarea name="review" placeholder="{{ $langg->lang99 }}" required=""></textarea>
                                </div>
                              </div>
                              <div class="row">
                                <div class="col-lg-12">
                                  <button class="submit-btn" type="submit">{{ $langg->lang100 }}</button>
                                </div>
                              </div>
                            </form>
                          </div>
                          @else
                          <div class="row">
                            <div class="col-lg-12">
                              <br>
                              <h5 class="text-center"><a href="javascript:;" data-toggle="modal" data-target="#comment-log-reg"
                                  class="btn login-btn mr-1">{{ $langg->lang101 }}</a> {{ $langg->lang102 }}</h5>
                              <br>
                            </div>
                          </div>
                          @endif
                        </div>
                      </div>
                      @if($gs->is_comment == 1)
                      <div id="tabs-4" class="tab-content-area">
                        <div id="comment-area">

                          @include('includes.comment-replies')

                        </div>
                      </div>
                      @endif
                    </div>
                  </div>
                </div>
          </div>
    </div>
    <div class="col-lg-3">

      @if(!empty($productt->whole_sell_qty))
      <div class="table-area wholesell-details-page">
        <h3>{{ $langg->lang770 }}</h3>
        <table class="table">
          <tr>
            <th>{{ $langg->lang768 }}</th>
            <th>{{ $langg->lang769 }}</th>
          </tr>
          @foreach($productt->whole_sell_qty as $key => $data1)
          <tr>
            <td>{{ $productt->whole_sell_qty[$key] }}+</td>
            <td>{{ $productt->whole_sell_discount[$key] }}% {{ $langg->lang771 }}</td>
          </tr>
          @endforeach
        </table>
      </div>
      @endif


      <div class="seller-info mt-3">
        <div class="content">
          <h4 class="title">
            {{ $langg->lang246 }}
          </h4>

          <p class="stor-name">
           @if( $productt->user_id  != 0)
              @if(isset($productt->user))
                {{ $productt->user->shop_name }}

                @if($productt->user->checkStatus())
                <br>
                <a class="verify-link" href="javascript:;"  data-toggle="tooltip" data-placement="top" title="{{ $langg->lang783 }}">
                  {{--  {{ $langg->lang783 }}  --}}
                  <i class="fas fa-check-circle"></i>
                
                </a>
                @endif

              @else
                {{ $langg->lang247 }}
              @endif
          @else
              {{ App\Models\Admin::find(1)->shop_name }}
          @endif
          </p>

          <div class="total-product">

           @if( $productt->user_id  != 0)
              <p>{{ App\Models\Product::where('user_id','=',$productt->user_id)->get()->count() }}</p>
          @else
              <p>{{ App\Models\Product::where('user_id','=',0)->get()->count() }}</p>
          @endif
            <span>{{ $langg->lang248 }}</span>
          </div>
        </div>
    @if( $productt->user_id  != 0)
        <a href="{{ route('front.vendor',str_replace(' ', '-', $productt->user->shop_name)) }}" class="view-stor">{{ $langg->lang249 }}</a>
    @endif

                  {{-- CONTACT SELLER --}}



                  <div class="contact-seller">

                    {{-- If The Product Belongs To A Vendor --}}

                    @if($productt->user_id != 0)


                    <ul class="list">


                      @if(Auth::guard('web')->check())

                      <li>

                        @if(
                        Auth::guard('web')->user()->favorites()->where('vendor_id','=',$productt->user->id)->get()->count() >
                        0)

                        <a  class="view-stor" href="javascript:;">
                          <i class="icofont-check"></i>
                          {{ $langg->lang225 }}
                        </a>

                        @else

                        <a class="favorite-prod view-stor"
                          data-href="{{ route('user-favorite',['data1' => Auth::guard('web')->user()->id, 'data2' => $productt->user->id]) }}"
                          href="javascript:;">
                          <i class="icofont-plus"></i>
                          {{ $langg->lang224 }}
                        </a>


                        @endif

                      </li>

                      <li>
                        <label style="display: none">{{$vendor = $productt->user }}</label>
                        <a  class="view-stor" href="javascript:;" data-toggle="modal" data-target="#vendorform1">
                          <i class="icofont-ui-chat"></i>
                          {{ $langg->lang81 }}
                        </a>
                      </li>
                      @else

                      <li>

                        <a  class="view-stor" href="javascript:;" data-toggle="modal" data-target="#comment-log-reg">
                          <i class="icofont-plus"></i>
                          {{ $langg->lang224 }}
                        </a>


                      </li>

                      <li>

                        <a  class="view-stor" href="javascript:;" data-toggle="modal" data-target="#comment-log-reg">
                          <i class="icofont-ui-chat"></i>
                          {{ $langg->lang81 }}
                        </a>
                      </li>

                      @endif

                    </ul>
                      <!-- Modal para chat-->
                      @include('chat.chatclient')

                    <!-- End Modal Chat -->

                    {{-- VENDOR PART ENDS HERE :) --}}
                    @else


                    {{-- If The Product Belongs To Admin  --}}

                    <ul class="list">
                      @if(Auth::guard('web')->check())
                      <li>
                        <a class="view-stor"  href="javascript:;" data-toggle="modal" data-target="#vendorform">
                          <i class="icofont-ui-chat"></i>
                          {{ $langg->lang81 }}
                        </a>
                      </li>
                      @else
                      <li>
                        <a class="view-stor" href="javascript:;" data-toggle="modal" data-target="#comment-log-reg">
                          <i class="icofont-ui-chat"></i>
                          {{ $langg->lang81 }}
                        </a>
                      </li>

                      @endif

                    </ul>

                    @endif

                  </div>

                  {{-- CONTACT SELLER ENDS --}}

      </div>








      <div class="categori  mt-30">
        <div class="section-top">
            <h2 class="section-title">
                {{ $langg->lang245 }}
            </h2>
        </div>
                        <div class="hot-and-new-item-slider">

                          @foreach($vendors->chunk(3) as $chunk)
                            <div class="item-slide">
                              <ul class="item-list">
                                @foreach($chunk as $prod)
                                  @include('includes.product.list-product')
                                @endforeach
                              </ul>
                            </div>
                          @endforeach

                        </div>

    </div>




    </div>

    </div>
    <div class="row">
      <div class="col-lg-12">

      </div>
    </div>
  </div>
  <!-- Trending Item Area Start -->
<div class="trending">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 remove-padding">
        <div class="section-top">
          <h2 class="section-title">
            {{ $langg->lang216 }}
          </h2>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-12 remove-padding">
        <div class="trending-item-slider">
          @foreach($productt->category->products()->where('status','=',1)->where('id','!=',$productt->id)->take(8)->get()
          as $prod)
          @include('includes.product.slider-product')
          @endforeach
        </div>
      </div>

    </div>
  </div>
</div>
<!-- Tranding Item Area End -->
</section>
<!-- Product Details Area End -->



{{-- MESSAGE MODAL --}}
<div class="message-modal">
  <div class="modal" id="vendorform" tabindex="-1" role="dialog" aria-labelledby="vendorformLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="vendorformLabel">{{ $langg->lang118 }}</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="container-fluid p-0">
            <div class="row">
              <div class="col-md-12">
                <div class="contact-form">
                  <form id="emailreply1">
                    {{csrf_field()}}
                    <ul>
                      <li>
                        <input type="text" class="input-field" id="subj1" name="subject"
                          placeholder="{{ $langg->lang119}}" required="">
                      </li>
                      <li>
                        <textarea class="input-field textarea" name="message" id="msg1"
                          placeholder="{{ $langg->lang120 }}" required=""></textarea>
                      </li>
                      <input type="hidden"  name="type" value="Ticket">
                    </ul>
                    <button class="submit-btn" id="emlsub" type="submit">{{ $langg->lang118 }}</button>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  {{-- MESSAGE MODAL ENDS --}}


  @if(Auth::guard('web')->check())

  @if($productt->user_id != 0)

  {{-- MESSAGE VENDOR MODAL --}}


  <div class="modal" id="vendorform1" tabindex="-1" role="dialog" aria-labelledby="vendorformLabel1" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="vendorformLabel1">{{ $langg->lang118 }}</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="container-fluid p-0">
            <div class="row">
              <div class="col-md-12">
                <div class="contact-form">
                  <form id="emailreply">
                    {{csrf_field()}}
                    <ul>

                      <li>
                        <input type="text" class="input-field" readonly=""
                          placeholder="Send To {{ $productt->user->shop_name }}" readonly="">
                      </li>

                      <li>
                        <input type="text" class="input-field" id="subj" name="subject"
                          placeholder="{{ $langg->lang119}}" required="">
                      </li>

                      <li>
                        <textarea class="input-field textarea" name="message" id="msg"
                          placeholder="{{ $langg->lang120 }}" required=""></textarea>
                      </li>

                      <input type="hidden" name="email" value="{{ Auth::guard('web')->user()->email }}">
                      <input type="hidden" name="name" value="{{ Auth::guard('web')->user()->name }}">
                      <input type="hidden" name="user_id" value="{{ Auth::guard('web')->user()->id }}">
                      <input type="hidden" name="vendor_id" value="{{ $productt->user->id }}">

                    </ul>
                    <button class="submit-btn" id="emlsub1" type="submit">{{ $langg->lang118 }}</button>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>


  {{-- MESSAGE VENDOR MODAL ENDS --}}


  @endif

  @endif

</div>


@if($gs->is_report)

@if(Auth::check())

{{-- REPORT MODAL SECTION --}}

<div class="modal fade" id="report-modal" tabindex="-1" role="dialog" aria-labelledby="report-modal-Title" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">

 <div class="gocover" style="background: url({{ asset('assets/images/'.$gs->loader) }}) no-repeat scroll center center rgba(45, 45, 45, 0.5);"></div>

                    <div class="login-area">
                        <div class="header-area forgot-passwor-area">
                            <h4 class="title">{{ $langg->lang777 }}</h4>
                            <p class="text">{{ $langg->lang778 }}</p>
                        </div>
                        <div class="login-form">

                            <form id="reportform" action="{{ route('product.report') }}" method="POST">

                              @include('includes.admin.form-login')

                                {{ csrf_field() }}
                                <input type="hidden" name="user_id" value="{{ Auth::user()->id }}">
                                <input type="hidden" name="product_id" value="{{ $productt->id }}">
                                <div class="form-input">
                                    <input type="text" name="title" class="User Name" placeholder="{{ $langg->lang779 }}" required="">
                                    <i class="icofont-notepad"></i>
                                </div>

                                <div class="form-input">
                                  <textarea name="note" class="User Name" placeholder="{{ $langg->lang780 }}" required=""></textarea>
                                </div>

                                <button type="submit" class="submit-btn">{{ $langg->lang196 }}</button>
                            </form>
                        </div>
                    </div>
      </div>
    </div>
  </div>
</div>

{{-- REPORT MODAL SECTION ENDS --}}

@endif

@endif

  {{-- PROMOTION MODAL --}}
  <div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" id="createPromotion" aria-labelledby="createPromotion" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <div class="container">
            <div class="row">
              <h4>Información del post</h4>
            </div>
            <div class="row">
              <h8>Los campos marcados con <span style="color: red">*</span> son obligatorios</h8>
            </div>
          </div>
          <button id="close_modal" type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        </div>
        <div class="modal-body">

          <section class="signup-step-container">
            <div class="container">
              <div class="row d-flex justify-content-center">
                <div class="col-md-11">
                  <div class="wizard">
                    <div class="wizard-inner">
                      <div class="connecting-line"></div>
                      <ul class="nav nav-tabs" role="tablist">
                        <li role="presentation" class="active">
                          <a href="#step1" data-toggle="tab" aria-controls="step1" role="tab" aria-expanded="true"><span class="round-tab">1 </span> <i>Objetivo</i></a>
                        </li>
                        <li role="presentation" class="disabled">
                          <a href="#step2" data-toggle="tab" aria-controls="step2" role="tab" aria-expanded="false"><span class="round-tab">2</span> <i>Público</i></a>
                        </li>
                        <li role="presentation" class="disabled">
                          <a href="#step3" data-toggle="tab" aria-controls="step3" role="tab"><span class="round-tab">3</span> <i>Duración y presupuesto</i></a>
                        </li>
                      </ul>
                    </div>

                    <form role="form" id="promotion_form" class="login-box" enctype="multipart/form-data">
                      {{csrf_field()}}
                      <div class="tab-content" id="main_form">
                        <div class="tab-pane active" role="tabpanel" id="step1">
                          <div class="row">
                            <div class="col-lg-4">
                              <div name="product_image" class="div-border-product">
                              </div>
                            </div>
                            <div class="col-lg-8">
                              <div class="row">
                                <div class="col-lg-12">
                                  <span style="font-weight: bold;">Confirma la imagen del post</span><span style="color: red">*</span>
                                </div>
                              </div>
                              <div class="row">
                                <div class="col-lg-12">
																	<span class="btn btn-input-file btn-file">
																		Cargar Archivo<input type="file" id="product_image" name="product_image" accept="image/*">
																	</span>
                                  <span id="filename"></span>
                                  <span id="validation_image" class="error">La imagen es requerida</span>
                                </div>
                              </div>
                              <div class="row" style="margin-top: 20px">
                                <div class="col-lg-12">
                                  <span style="font-weight: bold;">¿Que resultados te gustaría conseguir con esta publicación?</span>
                                </div>
                              </div>
                              <div class="row">
                                <div class="col-lg-12">
                                  <span>Lista de opciones</span><span style="color: red">*</span>
                                </div>
                              </div>
                              <div class="row" style="margin-top: 10px">
                                <div class="col-md-12">
                                  <input type="checkbox" id="chk_fb" name="chk_fb"><img width="25" style="display: inline; padding-left: 10px;" src="https://image.flaticon.com/icons/png/512/124/124010.png"><span style="color: rgb(96, 103, 112); font-family: Arial, sans-serif; font-size: 12px; padding-left: 5px;">Consigue que más personas reaccionen a tu contenido, lo comenten, lo compartan y puedas chatear con posibles conexiones que puedan ser parte de tu comunidad</span>
                                </div>
                              </div>
                              <div class="row" style="margin-top: 10px">
                                <div class="col-md-12">
                                  <input type="checkbox" id="chk_ig" name="chk_ig"><img width="25" style="display: inline; padding-left: 10px;" src="https://upload.wikimedia.org/wikipedia/commons/a/a5/Instagram_icon.png"><span style="color: rgb(96, 103, 112); font-family: Arial, sans-serif; font-size: 12px; padding-left: 5px;">Consigue que más personas reaccionen a tu contenido, lo comenten, lo compartan y puedas chatear con posibles conexiones que puedan ser parte de tu comunidad</span>
                                </div>
                              </div>
                            </div>
                          </div>
                          <ul class="list-inline pull-right">
                            <li><button type="button" class="default-btn next-step">Siguiente</button></li>
                          </ul>
                        </div>
                        <div class="tab-pane" role="tabpanel" id="step2">

                          <div class="row">
                            <div class="col-lg-4">
                              <div name="product_image" class="div-border-product">
                              </div>
                            </div>
                            <div class="col-lg-8">
                              <input id="productId" name="productId" type="hidden">
                              <input id="country" type="hidden" value="143">
                              <div class="row">
                                <div class="col-lg-12">
                                  <input type="checkbox" name="chk_people" checked><span style="font-weight: bold;">Personas que eliges por medio de la segmentación</span>
                                </div>
                              </div>
                              <div class="row" style="margin-top: 20px">
                                <div class="col-lg-5">
                                </div>
                                <div class="col-lg-7">
                                  <span id="validate_state" class="error">Esta campo es requerido</span>
                                </div>
                              </div>
                              <div class="row">
                                <div class="col-lg-5">
                                  <span style="font-weight: bold;">Estado</span><span style="color: red">*</span>
                                </div>
                                <div class="col-lg-7">
                                  <select id="state" name="state">
                                    <option value='0'>-- Estado --</option>
                                  </select>
                                </div>
                              </div>
                              <div class="row" style="margin-top: 10px">
                                <div class="col-lg-5">
                                </div>
                                <div class="col-lg-7">
                                  <span id="validate_city" class="error">Esta campo es requerido</span>
                                </div>
                              </div>
                              <div class="row">
                                <div class="col-lg-5">
                                  <span style="font-weight: bold;">Ciudad</span><span style="color: red">*</span>
                                </div>
                                <div class="col-lg-7">
                                  <select id="city" name="city">
                                    <option value='0'>-- Ciudad --</option>
                                  </select>
                                </div>
                              </div>
                              <div class="row" style="margin-top: 10px">
                                <div class="col-lg-5">
                                  <span style="font-weight: bold;">Radio de publicación</span><span style="color: red">*</span>
                                </div>
                                <div class="col-lg-7">
                                  <select id="distance" name="distance">
                                    <option value='1'>1 Kilómetro</option>
                                    <option value='3'>3 Kilómetros</option>
                                    <option value='5'>5 Kilómetros</option>
                                    <option value='10'>10 Kilómetros</option>
                                    <option value='20'>20 Kilómetros</option>
                                    <option value='25'>25 Kilómetros</option>
                                    <option value='40'>40 Kilómetros</option>
                                    <option value='48'>48 Kilómetros</option>
                                    <option value='70'>70 Kilómetros</option>
                                  </select>
                                </div>
                              </div>
                              <div class="row" style="margin-top: 10px">
                                <div class="col-lg-5">
                                </div>
                                <div class="col-lg-7">
                                  <span id="validate_range" class="error">El valor izquiero debe ser menor</span>
                                </div>
                              </div>
                              <div class="row">
                                <div class="col-lg-5">
                                  <span style="font-weight: bold;">Rango de edades</span><span style="color: red">*</span>
                                </div>
                                <div class="col-lg-3">
                                  <select id="from_age" name="from_age">
                                    <option value='13'>13</option>
                                    <option value='14'>14</option>
                                    <option value='15'>15</option>
                                    <option value='16'>16</option>
                                    <option value='17'>17</option>
                                    <option value='18'>18</option>
                                    <option value='19'>19</option>
                                    <option value='20'>20</option>
                                    <option value='21'>21</option>
                                    <option value='22'>22</option>
                                    <option value='23'>23</option>
                                    <option value='24'>24</option>
                                    <option value='25'>25</option>
                                    <option value='26'>26</option>
                                    <option value='27'>27</option>
                                    <option value='28'>28</option>
                                    <option value='29'>29</option>
                                    <option value='30'>30</option>
                                    <option value='31'>31</option>
                                    <option value='32'>32</option>
                                    <option value='33'>33</option>
                                    <option value='34'>34</option>
                                    <option value='35'>35</option>
                                    <option value='36'>36</option>
                                    <option value='37'>37</option>
                                    <option value='38'>38</option>
                                    <option value='39'>39</option>
                                    <option value='40'>40</option>
                                    <option value='41'>41</option>
                                    <option value='42'>42</option>
                                    <option value='43'>43</option>
                                    <option value='44'>44</option>
                                    <option value='45'>45</option>
                                    <option value='46'>46</option>
                                    <option value='47'>47</option>
                                    <option value='48'>48</option>
                                    <option value='49'>49</option>
                                    <option value='50'>50</option>
                                    <option value='51'>51</option>
                                    <option value='52'>52</option>
                                    <option value='53'>53</option>
                                    <option value='54'>54</option>
                                    <option value='55'>55</option>
                                    <option value='56'>56</option>
                                    <option value='57'>57</option>
                                    <option value='58'>58</option>
                                    <option value='59'>59</option>
                                    <option value='60'>60</option>
                                    <option value='61'>61</option>
                                    <option value='62'>62</option>
                                    <option value='63'>63</option>
                                    <option value='64'>64</option>
                                    <option value='65'>65</option>
                                  </select>
                                </div>
                                <div class="col-lg-1">
                                </div>
                                <div class="col-lg-3">
                                  <select id="to_age" name="to_age">
                                    <option value='13'>13</option>
                                    <option value='14'>14</option>
                                    <option value='15'>15</option>
                                    <option value='16'>16</option>
                                    <option value='17'>17</option>
                                    <option value='18'>18</option>
                                    <option value='19'>19</option>
                                    <option value='20'>20</option>
                                    <option value='21'>21</option>
                                    <option value='22'>22</option>
                                    <option value='23'>23</option>
                                    <option value='24'>24</option>
                                    <option value='25'>25</option>
                                    <option value='26'>26</option>
                                    <option value='27'>27</option>
                                    <option value='28'>28</option>
                                    <option value='29'>29</option>
                                    <option value='30'>30</option>
                                    <option value='31'>31</option>
                                    <option value='32'>32</option>
                                    <option value='33'>33</option>
                                    <option value='34'>34</option>
                                    <option value='35'>35</option>
                                    <option value='36'>36</option>
                                    <option value='37'>37</option>
                                    <option value='38'>38</option>
                                    <option value='39'>39</option>
                                    <option value='40'>40</option>
                                    <option value='41'>41</option>
                                    <option value='42'>42</option>
                                    <option value='43'>43</option>
                                    <option value='44'>44</option>
                                    <option value='45'>45</option>
                                    <option value='46'>46</option>
                                    <option value='47'>47</option>
                                    <option value='48'>48</option>
                                    <option value='49'>49</option>
                                    <option value='50'>50</option>
                                    <option value='51'>51</option>
                                    <option value='52'>52</option>
                                    <option value='53'>53</option>
                                    <option value='54'>54</option>
                                    <option value='55'>55</option>
                                    <option value='56'>56</option>
                                    <option value='57'>57</option>
                                    <option value='58'>58</option>
                                    <option value='59'>59</option>
                                    <option value='60'>60</option>
                                    <option value='61'>61</option>
                                    <option value='62'>62</option>
                                    <option value='63'>63</option>
                                    <option value='64'>64</option>
                                    <option value='65'>+65</option>
                                  </select>
                                </div>
                              </div>
                              <div class="row" style="margin-top: 10px">
                                <div class="col-lg-5">
                                  <span style="font-weight: bold;">Sexo</span><span style="color: red">*</span>
                                </div>
                                <div class="col-lg-7">
                                  <select id="sex" name="sex">
                                    <option value='1'>Todos</option>
                                    <option value='2'>Hombres</option>
                                    <option value='3'>Mujeres</option>
                                  </select>
                                </div>
                              </div>
                              
                              <div class="row" style="margin-top: 10px">
                                <div class="col-lg-5">
                                  <span style="font-weight: bold;">Intereses de Audiencia</span><span style="color: red">*</span>
                                </div>
                                <div class="col-lg-7">
                                  <span class="error">Este campo es requerido</span>
                                  <input type="text" id="interests" name="interests" style="width: 100%">
                                </div>
                              </div>
                              
                            </div>
                          </div>
                          <ul class="list-inline pull-right">
                            <li><button type="button" class="default-btn prev-step">Anterior</button></li>
                            <li><button type="button" class="default-btn next-step">Siguiente</button></li>
                          </ul>
                        </div>
                        <div class="tab-pane" role="tabpanel" id="step3">
                          <div class="row">
                            <div class="col-lg-4">
                              <div name="product_image" class="div-border-product">
                              </div>
                            </div>
                            <div class="col-lg-8">
                              <div class="row">
                                <div class="col-lg-5">
                                </div>
                                <div class="col-lg-7">
                                  <span id="validate_date" class="error">Esta campo es requerido</span>
                                </div>
                              </div>
                              <div class="row">
                                <div class="col-lg-5">
                                  <span style="font-weight: bold;">Fecha de finalización</span><span style="color: red">*</span>
                                </div>
                                <div class="col-lg-7">
                                  <input type="text" name="expiredate" id="datepicker" style="width: 100%">
                                </div>
                              </div>
                              <div class="row" style="margin-top: 10px">
                                <div class="col-lg-5">
                                </div>
                                <div class="col-lg-7">
                                  <span id="validate_budget" class="error">Esta campo es requerido</span>
                                </div>
                              </div>
                              <div class="row">
                                <div class="col-lg-5">
                                  <span style="font-weight: bold;">Presupuesto</span><span style="color: red">*</span>
                                </div>
                                <div class="col-lg-7">
                                  <span class="error">Este campo es requerido</span>
                                  <input type="text" id="budget" name="budget" style="width: 100%">
                                </div>
                              </div>

                            </div>

                          </div>
                          <ul class="list-inline pull-right">
                            <li><button id="last_back" type="button" class="default-btn prev-step">Anterior</button></li>
                            <li><button id="send_promotion" type="button" class="default-btn next-step">Enviar</button></li>
                          </ul>
                        </div>
                      </div>
                    </form>
                  </div>
                </div>
              </div>
            </div>
          </section>



        </div>
      </div>
    </div>
  </div>
  {{-- PROMOTION MODAL ENDS --}}


@endsection