@extends('layouts.layout')
@section('title', $promocion->nombre)
@section('content')
	<div class="card">
		<div class="card-header">
			<h1 class="card-title">{{$promocion->nombre}}</h1>
		</div>
		<div class="card-body">
			<div class="form-group row">
				<label class="col-2">Códico</label>
				<div class="col-10">
					<span 
						style="cursor:pointer" 
						onclick="copiarUrl(this)"
						data-value="{{env('FRONT_PAGE')}}?promo={{$promocion->codigo}}">
						{{env('FRONT_PAGE')}}?promo={{$promocion->codigo}}
					</span>
				</div>
			</div>
			<div class="form-group row">
				<label class="col-2">Estado</label>
				<div class="col-10">
					<span class="badge badge-{{$promocion->is_active ? 'success' : 'warning'}}">{{$promocion->is_active ? 'Activo' : 'Inactivo'}}</span>
				</div>
			</div>
			<div class="form-group row">
				<div class="col-6">
					<label for="">Desde</label>
					<div class="form-control">{{$promocion->desde->format('d-m-Y H:i')}}</div>
				</div>
				<div class="col-6">
					<label>Hasta</label>
					<div class="form-control">{{$promocion->hasta->format('d-m-Y H:i')}}</div>
				</div>
			</div>
			<div class="form-group">
				<table class="table">
					<thead>
						<tr>
							<th>#</th>
							<th>Producto</th>
							<th>Cantidad</th>
							<th>Cantidad para Revendedores</th>
						</tr>
					</thead>
					<tbody>
						@foreach($promocion->productos as $key => $producto)
							<tr>
								<th>{{ $key+1 }}</th>
								<td>{{ $producto->nombre }}</td>
								<td>{{ $producto->pivot->cantidad }}</td>
								<td>{{ $producto->pivot->cantidad_revendedor }}</td>
							</tr>
						@endforeach
					</tbody>
				</table>
			</div>
		</div>
		<div class="card-footer">
			<a href="{{route('promociones.index')}}" class="btn btn-outline-secondary">Volver al listado</a>
		</div>
	</div>
	<script>
		const copiarUrl = (element) => {
			if (location.protocol === 'https:') {
				navigator.clipboard.writeText(element.getAttribute('data-value'))
			} else {
				window.open(element.getAttribute('data-value'), '_blank');
			}
		}
	</script>
@endsection