@extends('layouts.template')

@section('content')					
	<!--begin::Row-->
	<div class="card card-flush">

		<div class="d-flex flex-stack my-3 ">
			<!--begin::Folder path-->
			<div class="badge badge-lg badge-light-primary">
				<div class="d-flex align-items-center flex-wrap">
					<a href="#">{{ Auth::user()->name }}</a>
						<!--begin::Svg Icon | path: icons/duotune/arrows/arr071.svg-->
						<span class="svg-icon svg-icon-2x svg-icon-primary mx-1">
							<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
								<path d="M12.6343 12.5657L8.45001 16.75C8.0358 17.1642 8.0358 17.8358 8.45001 18.25C8.86423 18.6642 9.5358 18.6642 9.95001 18.25L15.4929 12.7071C15.8834 12.3166 15.8834 11.6834 15.4929 11.2929L9.95001 5.75C9.5358 5.33579 8.86423 5.33579 8.45001 5.75C8.0358 6.16421 8.0358 6.83579 8.45001 7.25L12.6343 11.4343C12.9467 11.7467 12.9467 12.2533 12.6343 12.5657Z" fill="currentColor"></path>
							</svg>
						</span>
						<!--end::Svg Icon-->
					<a href="#">{{ date('d-m-Y') }}</a>
				</div>
			</div>
			<!--end::Folder path-->
		</div>

		<!--begin::Card header-->
		<div class="card-header pt-8">
			<!--begin::Card title-->
			<div class="card-title">
				<h2>Fiche technique initial</h2>
			</div>
			<!--end::Card title-->
		</div>
		<!--end::Card header-->

		<!--begin::Card body-->
		<div class="card-body">
			<!--begin::Form-->
			<form class="form" id="kt_file_manager_settings" action="{{ url('commande') }}" method="POST">
			@csrf
				<!--begin::Input group -- Code Client-->
				<div class="fv-row row mb-15">
					<!--begin::Col-->
					<div class="col-md-3 d-flex align-items-center">
						<!--begin::Label-->
						<label class="fs-6 fw-bold">Client / Code Client</label>
						<!--end::Label-->
					</div>
					<!--end::Col-->
					<!--begin::Col-->
					<div class="col-md-9">
						<!--begin::Input-->
						<select name="client_id" aria-label="Select a Language" data-control="select2" data-placeholder="Selectionner un Client..." class="form-select mb-2">
							<option></option>
							@foreach($clients as $client) 
							<option value="{{ $client->id }}">{{ $client->client }} - {{ $client->id }}</option>
							@endforeach							
						</select>
						<!--end::Input-->
					</div>
					<!--end::Col-->
				</div>
				<!--end::Input group-->

				<!--begin::Input group -- Nom produit-->
				<div class="fv-row row mb-15">
					<!--begin::Col-->
					<div class="col-md-3 d-flex align-items-center">
						<!--begin::Label-->
						<label class="fs-6 fw-bold">N° Bon de commande</label>
						<!--end::Label-->
					</div>
					<!--end::Col-->
					<!--begin::Col-->
					<div class="col-md-9">
						<!--begin::Input-->
						<input name="bcmd" type="text" placeholder="N° Bon de commande" class="form-control mb-2">
						<!--end::Input-->
					</div>
					<!--end::Col-->
				</div>
				<!--end::Input group-->

				<!--begin::Input group -- Nom produit-->
				<div class="fv-row row mb-15">
					<!--begin::Col-->
					<div class="col-md-3 d-flex align-items-center">
						<!--begin::Label-->
						<label class="fs-6 fw-bold">Nom de produit</label>
						<!--end::Label-->
					</div>
					<!--end::Col-->
					<!--begin::Col-->
					<div class="col-md-9">
						<!--begin::Input-->
						<input name="produit" type="text" placeholder="Nom de produit" class="form-control mb-2">
						<!--end::Input-->
					</div>
					<!--end::Col-->
				</div>
				<!--end::Input group-->

				<!--begin::Input group -- Remarque-->
				<div class="fv-row row mb-15">
					<!--begin::Col-->
					<div class="col-md-3 d-flex align-items-center">
						<!--begin::Label-->
						<label class="fs-6 fw-bold">Remarque</label>
						<!--end::Label-->
					</div>
					<!--end::Col-->
					<!--begin::Col-->
					<div class="col-md-9">
						<!--begin::Input-->
						<textarea name="remarque" placeholder="Remarque" class="form-control mb-2" style="height: 100px"></textarea>
						<!--end::Input-->
					</div>
					<!--end::Col-->
				</div>
				<!--end::Input group-->

				<!--begin::Input group -- Format Etiquette-->
				<div class="fv-row row mb-15">
					<!--begin::Col-->
					<div class="col-md-3 d-flex align-items-center">
						<!--begin::Label-->
						<label class="fs-6 fw-bold">Format d'étiquette</label>
						<!--end::Label-->
					</div>
					<!--end::Col-->
					<!--begin::Col-->
					<div class="col-md-9">
						<!--begin::Input-->
						<input name="format" type="text" placeholder="Format d'étiquette" class="form-control mb-2">
						<!--end::Input-->
					</div>
					<!--end::Col-->
				</div>
				<!--end::Input group-->

				<!--begin::Input group -- Forme de decoupe-->
				<div class="fv-row row mb-15">
					<!--begin::Col-->
					<div class="col-md-3">
						<!--begin::Label-->
						<label class="fs-6 fw-bold">Forme de découpe</label>
						<!--end::Label-->
					</div>
					<!--end::Col-->
					<!--begin::Col-->
					<div class="col-md-9">
						<!--begin::Subtitle-->
						<label class="fs-6 fw-bold mb-3">La disponibilité</label>
						<!--end::Subtitle-->
						<!--begin::Options-->
						<div class="d-flex">
							<!--begin::Switch-->
							<div class="form-check form-switch form-check-custom form-check-solid me-10">
								<input class="form-check-input h-30px w-50px" name="formeDD" type="radio" 
								value="Oui" id="formeDD" checked="checked" />
								<label class="form-check-label" for="formeDD">Oui</label>
							</div>
							<!--begin::Switch-->
							<!--begin::Switch-->
							<div class="form-check form-switch form-check-custom form-check-solid me-10">
								<input class="form-check-input h-30px w-50px" name="formeDD" type="radio" 
								value="Non" id="formeDD" />
								<label class="form-check-label" for="formeDD">Non</label>
							</div>
							<!--begin::Switch-->
						</div>
						<!--end::Options-->
					</div>
					<!--end::Col-->
				</div>
				<!--end::Input group-->
				
				<hr/>

				<!--begin::Input group -- Quantité-->
				<div class="fv-row row mb-15">
					<!--begin::Col-->
					<div class="col-md-3 d-flex align-items-center">
						<!--begin::Label-->
						<label class="fs-6 fw-bold">Quantité</label>
						<!--end::Label-->
					</div>
					<!--end::Col-->
					<!--begin::Col-->
					<div class="col-md-9">
						<!--begin::Input-->
						<input name="quantite" type="number" placeholder="Quantité" class="form-control mb-2">
						<!--end::Input-->
					</div>
					<!--end::Col-->
				</div>
				<!--end::Input group-->

				<!--begin::Input group -- Nombre de couleurs-->
				<div class="fv-row row mb-15">
					<!--begin::Col-->
					<div class="col-md-3">
						<!--begin::Label-->
						<label class="fs-6 fw-bold">Nombre de couleurs</label>
						<!--end::Label-->
					</div>
					<!--end::Col-->
					<!--begin::Col-->
					<div class="col-md-9">
						<!--begin::Subtitle-->
						<label class="fs-6 fw-bold mb-3">Quadrichromie</label>
						<!--end::Subtitle-->
						<!--begin::Options-->
						<div class="d-flex">
							<!--begin::Switch-->
							<div class="form-check form-switch form-check-custom form-check-solid me-10">
								<input class="form-check-input h-30px w-50px" name="colorC" type="checkbox" 
								value="Cyan" id="colorC" />
								<label class="form-check-label" for="colorC">Cyan</label>
							</div>
							<!--begin::Switch-->
							<!--begin::Switch-->
							<div class="form-check form-switch form-check-custom form-check-solid me-10">
								<input class="form-check-input h-30px w-50px" name="colorM" type="checkbox" 
								value="Magenta" id="colorM" />
								<label class="form-check-label" for="colorM">Magenta</label>
							</div>
							<!--begin::Switch-->
							<!--begin::Switch-->
							<div class="form-check form-switch form-check-custom form-check-solid me-10">
								<input class="form-check-input h-30px w-50px" name="colorJ" type="checkbox" 
								value="Jaune" id="colorJ" />
								<label class="form-check-label" for="colorJ">Jaune</label>
							</div>
							<!--begin::Switch-->
							<!--begin::Switch-->
							<div class="form-check form-switch form-check-custom form-check-solid me-10">
								<input class="form-check-input h-30px w-50px" name="colorN" type="checkbox" 
								value="Noir" id="colorN" />
								<label class="form-check-label" for="colorN">Noir</label>
							</div>
							<!--begin::Switch-->
						</div>
						<!--end::Options-->

						<!--begin::Separator-->
						<div class="separator mt-6 mb-5"></div>
						<!--end::Separator-->

						<!--begin::Subtitle-->
						<label class="fs-6 fw-bold mb-3">Pantone</label>
						<!--end::Subtitle-->
						<!--begin::Options-->

						<div class="col-md-9 mb-3" id="app">
							<div class="form-check form-switch form-check-custom form-check-solid me-10 mb-3" 
									v-for="(input,k) in inputs" :key="k">
							
							    <input type="text" name="pantone" class="form-control" v-model="input.name" placeholder="Pantone">
							    
							    <span class="btn btn-danger mx-2" @click="remove(k)" v-show="k || ( !k && inputs.length > 1)">
							        <strong>-</strong>
							    </span>

							    <span class="btn btn-success mx-2" @click="add(k)" v-show="k == inputs.length-1">
							        <strong>+</strong>
							    </span>
							    
							</div>
						</div>

						<!--end::Options-->
					</div>
					<!--end::Col-->
				</div>
				<!--end::Input group-->

				<!--begin::Input group -- Support-->
				<div class="fv-row row mb-15">
					<!--begin::Col-->
					<div class="col-md-3 d-flex align-items-center">
						<!--begin::Label-->
						<label class="fs-6 fw-bold">Support</label>
						<!--end::Label-->
					</div>
					<!--end::Col-->
					<!--begin::Col-->
					<div class="col-md-9">
						<!--begin::Input-->
						<select name="support" aria-label="Select a Language" data-control="select2" data-placeholder="Selectionner un Support..." class="form-select mb-2">
							<option></option>
							<option value="PE Blanc">PE Blanc</option>
							<option value="PP Blanc">PP Blanc</option>
							<option value="Transparent">Transparent</option>
						</select>
						<!--end::Input-->
					</div>
					<!--end::Col-->
				</div>
				<!--end::Input group-->

				<!--begin::Input group -- Dorure-->
				<div class="fv-row row mb-15">
					<!--begin::Col-->
					<div class="col-md-3 d-flex align-items-center">
						<!--begin::Label-->
						<label class="fs-6 fw-bold">Dorure</label>
						<!--end::Label-->
					</div>
					<!--end::Col-->
					<!--begin::Col-->
					<div class="col-md-9">
						<!--begin::Input-->
						<select name="dorure" aria-label="Select a Language" data-control="select2" data-placeholder="Selectionner la Dorure..." class="form-select mb-2">
							<option></option>
							<option value="Dorure argenté">Dorure argenté</option>
							<option value="Dorure Or">Dorure Or</option>
						</select>
						<!--end::Input-->
					</div>
					<!--end::Col-->
				</div>
				<!--end::Input group-->

				<!--begin::Input group -- Amalgame-->
				<div class="fv-row row mb-15">
					<!--begin::Col-->
					<div class="col-md-3">
						<!--begin::Label-->
						<label class="fs-6 fw-bold">Amalgame</label>
						<!--end::Label-->
					</div>
					<!--end::Col-->
					<!--begin::Col-->
					<div class="col-md-9">
						<!--begin::Subtitle-->
						<label class="fs-6 fw-bold mb-3">Amalgamé</label>
						<!--end::Subtitle-->
						<!--begin::Options-->
						<div class="d-flex">
							<!--begin::Switch-->
							<div class="form-check form-switch form-check-custom form-check-solid me-10">
								<input class="form-check-input h-30px w-50px" name="amalgam" type="radio" 
								value="Oui" id="amalgam" />
								<label class="form-check-label" for="amalgam">Oui</label>
							</div>
							<!--begin::Switch-->
							<!--begin::Switch-->
							<div class="form-check form-switch form-check-custom form-check-solid me-10">
								<input class="form-check-input h-30px w-50px" name="amalgam" type="radio" 
								value="Non" id="amalgam" checked="checked" />
								<label class="form-check-label" for="amalgam">Non</label>
							</div>
							<!--begin::Switch-->
						</div>
						<!--end::Options-->
					</div>
					<!--end::Col-->
				</div>
				<!--end::Input group-->

				<!--begin::Input group -- Vernis-->
				<div class="fv-row row mb-15">
					<!--begin::Col-->
					<div class="col-md-3">
						<!--begin::Label-->
						<label class="fs-6 fw-bold">Finition vernis</label>
						<!--end::Label-->
					</div>
					<!--end::Col-->
					<!--begin::Col-->
					<div class="col-md-9">
						<!--begin::Subtitle-->
						<label class="fs-6 fw-bold mb-3">Vernis</label>
						<!--end::Subtitle-->
						<!--begin::Options-->
						<div class="d-flex">
							<!--begin::Switch-->
							<div class="form-check form-switch form-check-custom form-check-solid me-10">
								<input class="form-check-input h-30px w-50px" name="vernis" type="radio" 
								value="Oui" id="vernis" checked="checked" />
								<label class="form-check-label" for="vernis">Oui</label>
							</div>
							<!--begin::Switch-->
							<!--begin::Switch-->
							<div class="form-check form-switch form-check-custom form-check-solid me-10">
								<input class="form-check-input h-30px w-50px" name="vernis" type="radio" 
								value="Non" id="vernis" />
								<label class="form-check-label" for="vernis">Non</label>
							</div>
							<!--begin::Switch-->
						</div>
						<!--end::Options-->
					</div>
					<!--end::Col-->
				</div>
				<!--end::Input group-->

				<hr/>

				<!--begin::Input group -- Etiquettes de front-->
				<div class="fv-row row mb-15">
					<!--begin::Col-->
					<div class="col-md-3 d-flex align-items-center">
						<!--begin::Label-->
						<label class="fs-6 fw-bold">Etiquettes de front</label>
						<!--end::Label-->
					</div>
					<!--end::Col-->
					<!--begin::Col-->
					<div class="col-md-9">
						<!--begin::Input-->
						<input name="nbrFront" type="number" placeholder="Etiquettes de front" class="form-control mb-2">
						<!--end::Input-->
					</div>
					<!--end::Col-->
				</div>
				<!--end::Input group-->

				<!--begin::Input group -- Etiquettes par bobine-->
				<div class="fv-row row mb-15">
					<!--begin::Col-->
					<div class="col-md-3 d-flex align-items-center">
						<!--begin::Label-->
						<label class="fs-6 fw-bold">Etiquettes par bobine</label>
						<!--end::Label-->
					</div>
					<!--end::Col-->
					<!--begin::Col-->
					<div class="col-md-9">
						<!--begin::Input-->
						<input name="nbrBobine" type="number" placeholder="Etiquettes par bobine" class="form-control mb-2">
						<!--end::Input-->
					</div>
					<!--end::Col-->
				</div>
				<!--end::Input group-->

				<!--begin::Input group -- Pose Etiquetage-->
				<div class="fv-row row mb-15">
					<!--begin::Col-->
					<div class="col-md-3">
						<!--begin::Label-->
						<label class="fs-6 fw-bold">Etiquetage</label>
						<!--end::Label-->
					</div>
					<!--end::Col-->
					<!--begin::Col-->
					<div class="col-md-9">
						<!--begin::Subtitle-->
						<label class="fs-6 fw-bold mb-3">Pose</label>
						<!--end::Subtitle-->
						<!--begin::Options-->
						<div class="d-flex">
							<!--begin::Switch-->
							<div class="form-check form-switch form-check-custom form-check-solid me-10">
								<input class="form-check-input h-30px w-50px" name="pose" type="radio" 
								value="Manuelle" id="pose" checked="checked" />
								<label class="form-check-label" for="pose">Manuelle</label>
							</div>
							<!--begin::Switch-->
							<!--begin::Switch-->
							<div class="form-check form-switch form-check-custom form-check-solid me-10">
								<input class="form-check-input h-30px w-50px" name="pose" type="radio" 
								value="Auto" id="pose" />
								<label class="form-check-label" for="pose">Auto</label>
							</div>
							<!--begin::Switch-->
						</div>
						<!--end::Options-->
					</div>
					<!--end::Col-->
				</div>
				<!--end::Input group-->

				<!--begin::Input group -- Mandrin-->
				<div class="fv-row row mb-15">
					<!--begin::Col-->
					<div class="col-md-3">
						<!--begin::Label-->
						<label class="fs-6 fw-bold">Mandrin</label>
						<!--end::Label-->
					</div>
					<!--end::Col-->
					<!--begin::Col-->
					<div class="col-md-9">
						<!--begin::Subtitle-->
						<label class="fs-6 fw-bold mb-3">Dimension</label>
						<!--end::Subtitle-->
						<!--begin::Options-->
						<div class="d-flex">
							<!--begin::Switch-->
							<div class="form-check form-switch form-check-custom form-check-solid me-10">
								<input class="form-check-input h-30px w-50px" name="mandrin" type="radio" 
								value="25 mm" id="mandrin" checked="checked" />
								<label class="form-check-label" for="mandrin">25 mm</label>
							</div>
							<!--begin::Switch-->
							<!--begin::Switch-->
							<div class="form-check form-switch form-check-custom form-check-solid me-10">
								<input class="form-check-input h-30px w-50px" name="mandrin" type="radio" 
								value="40 mm" id="mandrin" />
								<label class="form-check-label" for="mandrin">40 mm</label>
							</div>
							<!--begin::Switch-->
							<!--begin::Switch-->
							<div class="form-check form-switch form-check-custom form-check-solid me-10">
								<input class="form-check-input h-30px w-50px" name="mandrin" type="radio" 
								value="76 mm" id="mandrin" />
								<label class="form-check-label" for="mandrin">76 mm</label>
							</div>
							<!--begin::Switch-->
						</div>
						<!--end::Options-->
					</div>
					<!--end::Col-->
				</div>
				<!--end::Input group-->

				<!--begin::Input group -- Conducteur-->
				<div class="fv-row row mb-15">
					<!--begin::Col-->
					<div class="col-md-3 d-flex align-items-center">
						<!--begin::Label-->
						<label class="fs-6 fw-bold">Conducteur</label>
						<!--end::Label-->
					</div>
					<!--end::Col-->
					<!--begin::Col-->
					<div class="col-md-9">
						<!--begin::Input-->
						<select name="conducteur" aria-label="Select a Language" data-control="select2" data-placeholder="Selectionner un Conducteur..." class="form-select mb-2">
							<option></option>
							@foreach($conducteurs as $conducteur)
							<option value="{{ $conducteur->conducteur}}">{{ $conducteur->conducteur}}</option>
							@endforeach
						</select>
						<!--end::Input-->
					</div>
					<!--end::Col-->
				</div>
				<!--end::Input group-->

				<hr/>
						
				<!--begin::Action buttons-->
				<div class="row mt-12">
					<div class="col-md-9 offset-md-3">
							<!--begin::Button-->
							<button type="submit" class="btn btn-primary" id="kt_file_manager_settings_submit">
								<span class="indicator-label">Sauvegarder</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>
				<!--begin::Action buttons-->

			</form>
			<!--end::Form-->
		</div>
		<!--end::Card body-->
	</div>
	<!--end::Row-->				
@endsection						

@section('javascripts')
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
	var app = new Vue({
	    el: "#app",
	    data: {
	        inputs: [
	            {
	                name: ''
	            }
	        ]
	    },
	    methods: {
	        add(index) {
	            this.inputs.push({ name: '' });
	        },
	        remove(index) {
	            this.inputs.splice(index, 1);
	        }
	    }
	});
</script>
@endsection