@extends('layouts.vendor') 

@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;
		}

	</style>
					<input type="hidden" id="headerdata" value="PRODUCT">
					<div class="content-area">
						<div class="mr-breadcrumb">
							<div class="row">
								<div class="col-lg-12">
										<h4 class="heading">{{ $langg->lang444 }}</h4>
										<ul class="links">
											<li>
												<a href="{{ route('vendor-dashboard') }}">{{ $langg->lang441 }} </a>
											</li>
											<li>
												<a href="javascript:;">{{ $langg->lang444 }} </a>
											</li>
											<li>
												<a href="{{ route('vendor-prod-index') }}">{{ $langg->lang446 }}</a>
											</li>
										</ul>
								</div>
							</div>
						</div>
						<div class="product-area">
							<div class="row">
								<div class="col-lg-12">
									<div class="mr-table allproduct">

                        @include('includes.vendor.form-success')  

										<div class="table-responsiv">
												<table id="geniustable" class="table table-hover dt-responsive" cellspacing="0" width="100%">
													<thead>
														<tr>
									                        <th>{{ $langg->lang608 }}</th>
									                        <th>{{ $langg->lang609 }}</th>
									                        <th>{{ $langg->lang610 }}</th>
									                        <th>{{ $langg->lang611 }}</th>
									                        <th>{{ $langg->lang612 }}</th>
														</tr>
													</thead>
												</table>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>

{{-- HIGHLIGHT MODAL --}}
										<div class="modal fade" id="modal2" tabindex="-1" role="dialog" aria-labelledby="modal2" aria-hidden="true">
										
										
										<div class="modal-dialog highlight" role="document">
										<div class="modal-content">
												<div class="submit-loader">
														<img  src="{{asset('assets/images/'.$gs->admin_loader)}}" alt="">
												</div>
											<div class="modal-header">
											<h5 class="modal-title"></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>
											<div class="modal-footer">
											<button type="button" class="btn btn-secondary" data-dismiss="modal">{{ $langg->lang613 }}</button>
											</div>
										</div>
										</div>
</div>

{{-- HIGHLIGHT ENDS --}}

{{-- DELETE MODAL --}}

<div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="modal1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">

	<div class="modal-header d-block text-center">
		<h4 class="modal-title d-inline-block">{{ $langg->lang614 }}</h4>
			<button type="button" class="close" data-dismiss="modal" aria-label="Close">
				<span aria-hidden="true">&times;</span>
			</button>
	</div>

      <!-- Modal body -->
      <div class="modal-body">
            <p class="text-center">{{ $langg->lang615 }}</p>
            <p class="text-center">{{ $langg->lang616 }}</p>
      </div>

      <!-- Modal footer -->
      <div class="modal-footer justify-content-center">
            <button type="button" class="btn btn-default" data-dismiss="modal">{{ $langg->lang617 }}</button>
            <a class="btn btn-danger btn-ok">{{ $langg->lang618 }}</a>
      </div>

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

{{-- DELETE MODAL ENDS --}}

{{-- GALLERY MODAL --}}

		<div class="modal fade" id="setgallery" tabindex="-1" role="dialog" aria-labelledby="setgallery" aria-hidden="true">
			<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
				<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="exampleModalCenterTitle">{{ $langg->lang619 }}</h5>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">×</span>
					</button>
				</div>
				<div class="modal-body">
					<div class="top-area">
						<div class="row">
							<div class="col-sm-6 text-right">
								<div class="upload-img-btn">
									<form  method="POST" enctype="multipart/form-data" id="form-gallery">
										{{ csrf_field() }}
									<input type="hidden" id="pid" name="product_id" value="">
									<input type="file" name="gallery[]" class="hidden" id="uploadgallery" accept="image/*" multiple>
											<label for="image-upload" id="prod_gallery"><i class="icofont-upload-alt"></i>{{ $langg->lang620 }}</label>
									</form>
								</div>
							</div>
							<div class="col-sm-6">
								<a href="javascript:;" class="upload-done" data-dismiss="modal"> <i class="fas fa-check"></i> {{ $langg->lang621 }}</a>
							</div>
							<div class="col-sm-12 text-center">( <small>{{ $langg->lang622 }}</small> )</div>
						</div>
					</div>
					<div class="gallery-images">
						<div class="selected-image">
							<div class="row">


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


{{-- GALLERY MODAL ENDS --}}

	{{-- 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">
																<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">
																<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">
																<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">
																<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">
                                								<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">
																<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    

@section('scripts')


{{-- DATA TABLE --}}

    <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 --}}

		var table = $('#geniustable').DataTable({
			   ordering: false,
               processing: true,
               serverSide: true,
               ajax: '{{ route('vendor-prod-datatables') }}',
               columns: [
                        { data: 'name', name: 'name' },
                        { data: 'type', name: 'type' },
                        { data: 'price', name: 'price' },
                        { data: 'status', searchable: false, orderable: false},
            			{ data: 'action', searchable: false, orderable: false }

                     ],
                language : {
                	processing: '<img src="{{asset('assets/images/'.$gs->admin_loader)}}">'
                },
				drawCallback : function( settings ) {
	    				$('.select').niceSelect();	
				}
            });

      	$(function() {
        $(".btn-area").append('<div class="col-sm-4 table-contents">'+
        	'<a class="add-btn" href="{{route('vendor-prod-types')}}">'+
          '<i class="fas fa-plus"></i> <span class="remove-mobile">{{ $langg->lang623 }}<span>'+
          '</a>'+
          '</div>');
      });											
									


{{-- DATA TABLE ENDS--}}

</script>

<script type="text/javascript">
	
// Gallery Section Update

    $(document).on("click", ".set-gallery" , function(){
        var pid = $(this).find('input[type=hidden]').val();
        $('#pid').val(pid);
        $('.selected-image .row').html('');
            $.ajax({
                    type: "GET",
                    url:"{{ route('vendor-gallery-show') }}",
                    data:{id:pid},
                    success:function(data){
                      if(data[0] == 0)
                      {
	                    $('.selected-image .row').addClass('justify-content-center');
	      				$('.selected-image .row').html('<h3>{{ $langg->lang624 }}</h3>');
     				  }
                      else {
	                    $('.selected-image .row').removeClass('justify-content-center');
	      				$('.selected-image .row h3').remove();      
                          var arr = $.map(data[1], function(el) {
                          return el });

                          for(var k in arr)
                          {
        				$('.selected-image .row').append('<div class="col-sm-6">'+
                                        '<div class="img gallery-img">'+
                                            '<span class="remove-img"><i class="fas fa-times"></i>'+
                                            '<input type="hidden" value="'+arr[k]['id']+'">'+
                                            '</span>'+
                                            '<a href="'+'{{asset('assets/images/galleries').'/'}}'+arr[k]['photo']+'" target="_blank">'+
                                            '<img src="'+'{{asset('assets/images/galleries').'/'}}'+arr[k]['photo']+'" alt="gallery image">'+
                                            '</a>'+
                                        '</div>'+
                                  	'</div>');
                          }                         
                       }
 
                    }
                  });
      });

  $(document).on('click', '.remove-img' ,function() {
    var id = $(this).find('input[type=hidden]').val();
    $(this).parent().parent().remove();
	    $.ajax({
	        type: "GET",
	        url:"{{ route('vendor-gallery-delete') }}",
	        data:{id:id}
	    });
  });

  $(document).on('click', '#prod_gallery' ,function() {
    $('#uploadgallery').click();
  });
                                        
                                
  $("#uploadgallery").change(function(){
    $("#form-gallery").submit();  
  });

  $(document).on('submit', '#form-gallery' ,function() {
		  $.ajax({
		   url:"{{ route('vendor-gallery-store') }}",
		   method:"POST",
		   data:new FormData(this),
		   dataType:'JSON',
		   contentType: false,
		   cache: false,
		   processData: false,
		   success:function(data)
		   {
		    if(data != 0)
		    {
	                    $('.selected-image .row').removeClass('justify-content-center');
	      				$('.selected-image .row h3').remove();   
		        var arr = $.map(data, function(el) {
		        return el });
		        for(var k in arr)
		           {
        				$('.selected-image .row').append('<div class="col-sm-6">'+
                                        '<div class="img gallery-img">'+
                                            '<span class="remove-img"><i class="fas fa-times"></i>'+
                                            '<input type="hidden" value="'+arr[k]['id']+'">'+
                                            '</span>'+
                                            '<a href="'+'{{asset('assets/images/galleries').'/'}}'+arr[k]['photo']+'" target="_blank">'+
                                            '<img src="'+'{{asset('assets/images/galleries').'/'}}'+arr[k]['photo']+'" alt="gallery image">'+
                                            '</a>'+
                                        '</div>'+
                                  	'</div>');
		            }          
		    }
		                     
		                       }

		  });
		  return false;
 }); 

// Gallery Section Update Ends	

</script>

@endsection