@extends('layouts.master_admin')
@section('title') Agregar Producto @endsection

@section('css')
<link href="/assets/app/plugins/custom/prismjs/prismjs.bundle.css" rel="stylesheet" type="text/css" />
@endsection

@section('content')
	<!--begin::Toolbar-->
	<div class="toolbar py-2" id="kt_toolbar">
		<!--begin::Container-->
		<div id="kt_toolbar_container" class="container-fluid d-flex align-items-center">
			<!--begin::Page title-->
			<div class="flex-grow-1 flex-shrink-0 me-5">
				<!--begin::Page title-->
				<div data-kt-swapper="true" data-kt-swapper-mode="prepend" data-kt-swapper-parent="{default: '#kt_content_container', 'lg': '#kt_toolbar_container'}" class="page-title d-flex align-items-center flex-wrap me-3 mb-5 mb-lg-0">
					<!--begin::Title-->
					<h1 class="d-flex align-items-center text-dark fw-bold my-1 fs-3">Agregar producto
						<!--begin::Separator-->
						<span class="h-20px border-gray-200 border-start ms-3 mx-2"></span>
						<!--end::Separator-->
						<!--begin::Description-->
						<!--<small class="text-muted fs-7 fw-semibold my-1 ms-1"> </small> -->
						<!--end::Description-->
					</h1>
					<!--end::Title-->
				</div>
				<!--end::Page title-->
			</div>
			<!--end::Page title-->
			<!--begin::Action group-->
			<div class="d-flex align-items-center flex-wrap">
				<!--begin::Wrapper-->
				<div class="flex-shrink-0 me-2">
				</div>
				<!--end::Wrapper-->
				<!--begin::Wrapper-->
				<div class="d-flex align-items-center">
					
				</div>
				<!--end::Wrapper-->
			</div>
			<!--end::Action group-->
		</div>
		<!--end::Container-->
	</div>
	<!--end::Toolbar-->

	<!--begin::Content-->
	<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
		<!--begin::Container-->
		<div id="kt_content_container" class="container-xxl">
			@if (count($errors) > 0)
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                      <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
          	@endif
			<!--begin::Form-->
			<form id="kt_ecommerce_add_product_form" class="form d-flex flex-column flex-lg-row"  action="/admin/products" method="POST" enctype="multipart/form-data" >
				@csrf
				<!--begin::Aside column-->
				<div class="d-flex flex-column gap-7 gap-lg-10 w-100 w-lg-300px mb-7 me-lg-10">
				
					<!--begin::Status-->
					<div class="card card-flush py-4">
						<!--begin::Card header-->
						<div class="card-header">
							<!--begin::Card title-->
							<div class="card-title">
								<h2>Ficha Técnica</h2>
							</div>
							<!--end::Card title-->
						</div>
						<!--end::Card header-->
						<!--begin::Card body-->
						<div class="card-body pt-0">
							<input type="file" name="technical_datasheet" class="form-control">
						</div>
						<!--end::Card body-->
					</div>
					<div class="card card-flush py-4">
						<!--begin::Card header-->
						<div class="card-header">
							<!--begin::Card title-->
							<div class="card-title">
								<h2>Foto del producto</h2>
							</div>
							<!--end::Card title-->
							
						</div>
						<!--end::Card header-->
						<!--begin::Card body-->
						<div class="card-body pt-0">
							<input type="file" name="photo" class="form-control">
						</div>
						<!--end::Card body-->
					</div>
				</div>
				<!--end::Aside column-->
				<!--begin::Main column-->
				<div class="d-flex flex-column flex-row-fluid gap-7 gap-lg-10">
					
					<!--begin::Tab content-->
					<div class="tab-content">
						<!--begin::Tab pane-->
						<div class="tab-pane fade show active" id="kt_ecommerce_add_product_general" role="tab-panel">
							<div class="d-flex flex-column gap-7 gap-lg-10">
								<!--begin::General options-->
								<div class="card card-flush py-4">
									<!--begin::Card header-->
									<div class="card-header">
										<div class="card-title">
											<h2>General</h2>
										</div>
									</div>
									<!--end::Card header-->
									<!--begin::Card body-->
									<div class="card-body pt-0">
										<!--begin::Input group-->
										<div class="row g-9 mb-8">
											<div class="col-md-6 fv-row">
												<label class="required fs-6 fw-semibold mb-2">Tipo de producto</label>
												<select name="type_product_id"  aria-label="Selecciona" data-placeholder="Selecciona ..." class="form-select" ng-model="formData.type_product_id" required >
													<option value="">Selecciona...</option>
													<option value="1" selected>Módulo fotovoltaico</option>
													<option value="2">Inversor</option>
													<option value="3">Microinversor</option>
													<option value="4">Accesorio</option>
												</select>
											</div>
											<div class="col-md-6 fv-row">
												<label class="required fs-6 fw-semibold mb-2">Marca</label>
												<select name="brand_id"  aria-label="Selecciona" data-placeholder="Selecciona ..." class="form-select"  required>
													<option value="">Selecciona...</option>
													@foreach($brands as $item)
													<option value="{{$item->id}}" @if ($loop->first) selected @endif>{{$item->name}}</option>
													@endforeach
												</select>
											</div>
											
										</div>
										<!--end::Input group-->
										<!--begin::Input group-->
										<div class="row g-9 mb-8">
											<div class="col-md-6 fv-row">
												<label class="required form-label">Nombre</label>
												<input type="text" name="name" class="form-control mb-2"  required/>
											</div>
											<div class="col-md-6 fv-row">
												<label class="d-flex align-items-center fs-5 fw-semibold mb-2">
													<span >Código</span>
												</label>
												<input type="text" name="code" class="form-control mb-2"/>
											</div>
										</div>
										<!--end::Input group-->
										<!--begin::Input group-->
										<div class="row g-9 mb-8">
											<div class="col-md-4 fv-row">
												<label class="required form-label">Potencia</label>
												<div class="input-group mb-5">
												<input type="text" name="potency" class="form-control" required/>
													<span class="input-group-text" id="basic-addon2"> <span ng-if="formData.type_product_id==1" >w </span> <span ng-if="formData.type_product_id!=1" >kW </span> </span>
												</div>
											</div>
											<div class="col-md-4 fv-row" ng-if="formData.type_product_id==1" >
												<label class="required form-label">Alto </label>
												<div class="input-group mb-5">
													<input type="text" name="height" class="form-control"  value="" required/>
													<span class="input-group-text" id="basic-addon2">m</span>
												</div>
											</div>
											<div class="col-md-4 fv-row" ng-if="formData.type_product_id==1">
												<label class="required form-label">Ancho</label>
												<div class="input-group mb-5">
												<input type="text" name="width" class="form-control"  value="" required/>
													<span class="input-group-text" id="basic-addon2">m</span>
												</div>
											</div>
											<div class="col-md-4 fv-row" ng-if="formData.type_product_id==3">
												<label class="required d-flex align-items-center fs-5 fw-semibold mb-2">
													<span>Núm de entradas(paneles)</span>
												</label>
												<input type="text" name="num_inputs" class="form-control mb-2 " required/>
											</div>
											<div class="col-md-4 fv-row" ng-if="formData.type_product_id==2">
												<label class="d-flex align-items-center fs-5 fw-semibold mb-2">
													<span>MPPT</span>
												</label>
												<input type="text" name="mppt" class="form-control mb-2"/>
											</div>
											<div class="col-md-4 fv-row" ng-if="formData.type_product_id==2 || formData.type_product_id==3">
												<label class="required d-flex align-items-center fs-5 fw-semibold mb-2">
													<span >Tensión</span>
												</label>
												<select name="tension"  aria-label="Selecciona" data-placeholder="Selecciona ..." class="form-select" required>
													<option value="">Selecciona...</option>
													<option value="1F-120V">1F-120V</option>
													<option value="1F-127V">1F-127V</option>
													<option value="2F-220V">2F-220V</option>
													<option value="2F-240V">2F-240V</option>
													<option value="3F-220V">3F-220V</option>
													<option value="3F-480V">3F-480V</option>
												</select>
											</div>
										</div>
										<div class="row g-9 mb-8" ng-if="formData.type_product_id==1">
											<div class="col-md-3 fv-row">
												<label class="required form-label">Vmp </label>
												<input type="text" name="vmp" class="form-control mb-2"  required/>
											</div>
											<div class="col-md-3 fv-row" >
												<label class="required form-label">Imp </label>
												<input type="text" name="imp" class="form-control mb-2" required/>
											</div>
											<div class="col-md-3 fv-row" >
												<label class="required form-label">Voc </label>
												<input type="text" name="voc" class="form-control mb-2" required/>
											</div>
											<div class="col-md-3 fv-row" >
												<label class="required form-label">Isc </label>
												<input type="text" name="isc" class="form-control mb-2" required/>
											</div>
										</div>
										<div class="row g-9 mb-8" ng-if="formData.type_product_id==2">
											<div class="col-md-5 fv-row" >
												<label class="required form-label">Corriente max de Cortocircuito por MPPT </label>
												<input type="text" name="max_short_circuit_current" class="form-control mb-2" required/>
											</div>
										</div>
										<!--end::Input group-->
										<!--begin::Input group-->
										<!--<div>
											<label class="form-label">Descripción</label>
											<textarea name="description" id="kt_docs_ckeditor_classic"></textarea>
										</div> -->
										<!--end::Input group-->
									</div>
									<!--end::Card header-->
								</div>
								<!--end::General options-->
								
							</div>
						</div>
						<!--end::Tab pane-->
						
					</div>
					<!--end::Tab content-->
					<div class="d-flex justify-content-end">
						<!--begin::Button-->
						<button type="submit" id="kt_ecommerce_add_product_submit" class="btn btn-primary">
							<span class="indicator-label">Guardar producto</span>
							<span class="indicator-progress">Please wait...
							<span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
						</button>
						<!--end::Button-->
					</div>
				</div>
				<!--end::Main column-->
			</form>
			<!--end::Form-->
		</div>
		<!--end::Container-->
	</div>
	<!--end::Content-->

	
	
@endsection

@section('js')
<script src="/assets/app/js/custom/confirm_delete.js"></script>
<script src="/assets/app/plugins/custom/prismjs/prismjs.bundle.js"></script>
<script src="/assets/app/plugins/custom/formrepeater/formrepeater.bundle.js"></script>

<script src="/assets/app/js/custom/apps/ecommerce/catalog/save-product.js"></script>
<script src="/assets/app/js/widgets.bundle.js"></script>
<script src="/assets/app/js/custom/widgets.js"></script>

<script src="/assets/app/js/custom/documentation/documentation.js"></script>
<script src="/assets/app/js/custom/documentation/forms/flatpickr.js"></script>

<script src="/assets/app/plugins/custom/ckeditor/ckeditor-classic.bundle.js"></script>
<script>
	ClassicEditor
    .create(document.querySelector('#kt_docs_ckeditor_classic'))
    .then(editor => {
        console.log(editor);
    })
    .catch(error => {
        console.error(error);
    });
</script>

@endsection