@extends('master')

@section('breadcrumb')
<li class="breadcrumb-item">
	<a href="{{ url('/shops') }}">
		<i class="fas fa-store-alt"></i> Comercios afiliados
	</a>
</li>

<li class="breadcrumb-item">
	<a href="{{ url('/shop/'.$shop->id.'/admin') }}">
		<i class="fas fa-store-alt"></i> Comercio: {{ $shop->name }}
	</a>
</li>

<li class="breadcrumb-item">
	<a href="{{ url('/shop/'.$shop->id.'/product/'.$product->id.'/edit') }}">
		<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box" viewBox="0 0 16 16">
			<path fill-rule="evenodd" d="M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5 8 5.961 14.154 3.5 8.186 1.113zM15 4.239l-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923l6.5 2.6zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464L7.443.184z"/>
		</svg> Editar producto: {{ $product->name }}
	</a>
</li>

@stop

@section('content')
<div class="row mtop32">
	<div class="col-md-9">
		<div class="panel">
			<div class="inside">
				<div class="title mb16">
					<h2>
						<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box" viewBox="0 0 16 16">
							<path fill-rule="evenodd" d="M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5 8 5.961 14.154 3.5 8.186 1.113zM15 4.239l-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923l6.5 2.6zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464L7.443.184z"/>
						</svg> Editar producto: {{ $product->name }}
					</h2>
					{!! Form::open(['url' => '/shop/'.$shop->id.'/product/'.$product->id.'/edit', 'files' => true]) !!}
					<div class="row mtop16">
						<div class="col-md-8">
							<label for="name">Nombre del producto:</label>
							<div class="group">
								<i class="fas fa-feather-alt"></i>
								{!! Form::text('name', $product->name) !!}
							</div>
						</div>

						<div class="col-md-4">
							<label for="name">Categoría:</label>
							<div class="group">
								<i class="fas fa-list"></i>
								{!! Form::select('category_id', $shop->getCategoriesPluck(), $product->category_id, ['class' => 'form-select']) !!}
							</div>
						</div>

					</div>

					<div class="row mtop16">
						<div class="col-md-8">
							<label for="content">Descripción:</label>
							{!! Form::textarea('content', $product->content, ['class' => 'form-control editor', 'data-editor' => 'true', 'id' => 'product_content']) !!}
						</div>

						<div class="col-md-4">
							<label for="price">Precio:</label>
							<div class="group">
								<i class="fas fa-coins"></i>
								{!! Form::number('price', $product->price, ['required', 'step' => 'any', 'min' => '1']) !!}
							</div>

							<label for="name" class="mtop16">Imagen:</label>
							<div class="group">
								<i class="far fa-images"></i>
								{!! Form::file('image', ['class' => 'product_img_prew', 'id' => 'product_img_prew_field']) !!}
								<small>Tamaño: 728*364</small>
							</div>

							<label for="discount" class="mtop16">% de descuento:</label>
							<div class="group">
								<i class="fas fa-coins"></i>
								{!! Form::number('discount', $product->discount, ['min' => '0']) !!}
							</div>

							<label for="status" class="mtop16">Visibilidad:</label>
							<div class="group">
								<i class="far fa-eye"></i>
								{!! Form::select('status', shop_product_status(), $product->status, ['class' => 'form-select']) !!}
							</div>
						</div>
					</div>

					<div class="row mtop16">
						<div class="col-md-12">
							<button type="submit" class="mtop16 btn btn-success"><i class="far fa-save"></i> Guardar</button>
						</div>
					</div>
					{!! Form::close() !!}
				</div>
		
			</div>
		</div>
	</div>

	<div class="col-md-3">

		<div class="panel">
			<div class="inside">
				<a href="{{ url('/shop/'.$shop->id.'/product/add') }}" class="btn btn-primary w-100"><i class="fas fa-box"></i> Nuevo producto</a>
			</div>
		</div>
		<div class="panel mtop16">
			
			<div class="inside">
				<div class="title mb16">
					<h2>
						<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-image" viewBox="0 0 16 16">
							<path d="M6.002 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
							<path d="M2.002 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2h-12zm12 1a1 1 0 0 1 1 1v6.5l-3.777-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12V3a1 1 0 0 1 1-1h12z"/>
						</svg> Imagen Actual
					</h2>
					@if($product->file_name)
					<img src="{{ config('cms.cdn') }}/platform/shop/{{ $product->shop_id.'/'.$product->file_path.'/'.$product->file_name }}" class="img-fluid mtop16 rounded">
					@else
						<img src="{{ url('/static/images/product_image_default.png') }}" class="img-fluid mtop16 rounded">
					@endif
				</div>
		
			</div>
		</div>

		<div class="panel mtop16">
			<div class="inside">
				<div class="title mb16">
					<h2>
						<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-image" viewBox="0 0 16 16">
							<path d="M6.002 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
							<path d="M2.002 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2h-12zm12 1a1 1 0 0 1 1 1v6.5l-3.777-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12V3a1 1 0 0 1 1-1h12z"/>
						</svg> Previsualización
					</h2>

					<img src="" class="mtop16 img-fluid rounded" id="product_img_prew">
				</div>
		
			</div>
		</div>
	</div>
</div>

<div class="row">
	<div class="col-md-3 d-flex mtop32">
		<div class="panel">
			<div class="inside">

				<div class="title mb16">
					<h2><i class="bi bi-ui-checks-grid"></i> Crear Selecciones / Extras</h2>
				</div>

				{!! Form::open(['url' => '/shop/'.$shop->id.'/product/'.$product->id.'/selections/add', 'files' => true]) !!}
					<label for="name">Nombre de la selección:</label>
					<div class="group">
						<i class="fas fa-feather-alt"></i>
						{!! Form::text('name', null) !!}
					</div>

					<label for="title" class="mtop16">Título de la selección:</label>
					<div class="group">
						<i class="fas fa-feather-alt"></i>
						{!! Form::text('title', null) !!}
					</div>

					<label for="title" class="mtop16"># de opciones seleccionables:</label>
					<div class="group">
						<i class="fas fa-feather-alt"></i>
						{!! Form::number('selections', 1, ['min' => '1']) !!}
					</div>

					<label for="type" class="mtop16">Tipo:</label>
					<div class="group">
						<i class="fas fa-feather-alt"></i>
						{!! Form::select('type', ['0' => 'Selección', '1' => 'Extra'], null, ['class' => 'form-select']) !!}
					</div>

					<button type="submit" class="mtop16 btn btn-success"><i class="far fa-save"></i> Guardar</button>
				{!! Form::close() !!}
		
			</div>
		</div>
	</div>

	@foreach($product->getSelections as $selection)
	<div class="col-md-3 d-flex mtop32">
		<div class="panel">
			<div class="inside">
				<div class="title mb16">
					<h2><i class="bi bi-ui-checks-grid"></i> {{ $selection->name }}</h2>
				</div>
				<ul class="nav nav-tabs" role="tablist">
					<li class="nav-item" role="presentation">
						<a href="#edit-{{ $selection->id }}" class="nav-link active" id="edit-{{ $selection->id }}-tab" data-bs-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-edit" aria-selected="true">Editar</a>
					</li>
					<li class="nav-item" role="presentation">
						<a href="#add-options-{{ $selection->id }}" class="nav-link" id="add-options-{{ $selection->id }}-tab" data-bs-toggle="pill" role="tab" aria-controls="pills-options-add" aria-selected="true">Crear opciones</a>
					</li>
					<li class="nav-item" role="presentation">
						<a href="#options-{{ $selection->id }}" class="nav-link" id="options-{{ $selection->id }}-tab" data-bs-toggle="pill" role="tab" aria-controls="pills-options" aria-selected="true">Opciones</a>
					</li>
				</ul>
				<div class="tab-content">
					<div class="tab-pane fade mtop16 show active" id="edit-{{ $selection->id }}" role="tabpanel" aria-labelledby="pills-edit-tab">
					{!! Form::open(['url' => '/shop/'.$shop->id.'/product/'.$product->id.'/selection/'.$selection->id.'/edit', 'files' => true]) !!}
						<label for="name">Nombre de la selección:</label>
						<div class="group">
							<i class="fas fa-feather-alt"></i>
							{!! Form::text('name', $selection->name) !!}
						</div>

						<label for="title" class="mtop16">Título de la selección:</label>
						<div class="group">
							<i class="fas fa-feather-alt"></i>
							{!! Form::text('title', $selection->title) !!}
						</div>

						<label for="title" class="mtop16"># de opciones seleccionables:</label>
						<div class="group">
							<i class="fas fa-feather-alt"></i>
							{!! Form::number('selections', $selection->selections) !!}
						</div>

						<label for="title" class="mtop16">Orden de aparición:</label>
						<div class="group">
							<i class="fas fa-feather-alt"></i>
							{!! Form::number('orden', $selection->orden) !!}
						</div>

						<button type="submit" class="mtop16 btn btn-success"><i class="far fa-save"></i> Guardar</button>
					{!! Form::close() !!}
					</div>

					<div class="tab-pane fade mtop16" id="add-options-{{ $selection->id }}" role="tabpanel" aria-labelledby="pills-add-tab">
						{!! Form::open(['url' => '/shop/'.$shop->id.'/product/'.$product->id.'/selection/'.$selection->id.'/option/add']) !!}
						<label for="name">Titulo:</label>
						<div class="group">
							<i class="fas fa-feather-alt"></i>
							{!! Form::text('name', null) !!}
						</div>
						@if($selection->object_type == "1")
						<label for="price" class="mtop16">Precio:</label>
						<div class="group">
							<i class="fas fa-feather-alt"></i>
							{!! Form::number('price', '0.00', ['min' => '1.00', 'required']) !!}
						</div>
						@endif
						<button type="submit" class="mtop16 btn btn-success"><i class="far fa-save"></i> Guardar</button>
						{!! Form::close() !!}
					</div>

					<div class="tab-pane fade mtop16" id="options-{{ $selection->id }}" role="tabpanel" aria-labelledby="pills-options-tab">
						<ul class="list-group list-group-flush">
							@foreach($selection->getOptions as $option)
							<li class="list-group-item">
								<i class="bi bi-arrow-return-right"></i> {{ $option->name }} @if($option->price > 0) <strong>{{ number($option->price) }} </strong> @endif <a href="{{ url('/') }}" class="float-end btn-deleted" data-path="shop/{{ $shop->id }}/product/{{ $product->id }}/selection/{{ $selection->id }}/option" data-action="delete" data-object="{{ $option->id }}"><i class="bi bi-trash"></i></a>
							</li>
							@endforeach
						</ul>
					</div>

				</div>
			</div>
		</div>
	</div>
	@endforeach
</div>
@endsection