@extends('dashboard.layout.base')

@section('content')

      <div class="slim-mainpanel">


			@verbatim
			<div class="container" id="app">

				<div class="slim-pageheader">
					<ol class="breadcrumb slim-breadcrumb">
					<li class="breadcrumb-item"><a href="#">Dashboard</a></li>
					<li class="breadcrumb-item"><a href="#">Affectations</a></li>
					<li class="breadcrumb-item active" aria-current="page">Ajouter une affectation</li>
					</ol>
					<h6 class="slim-pagetitle">Ajouter une affectation</h6>
				</div><!-- slim-pageheader -->
				<form action="#" method="post" enctype="multipart/form-data">

                    <div class="section-wrapper">

                        <div class="row">
                            <div class="col-md-8">
                                <label class="section-title">Information de bénéficiaire</label>
                            </div>
                            <div class="col-md-4">
                            </div>
                        </div>
                        <div class="form-layout">
                            <div class="row mg-b-25">
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label class="form-control-label">Nom: <span class="tx-danger">*</span></label>
                                        <multiselect v-model="inputs.personnel" :options="personnels"
                                            :custom-label="persName" placeholder="Nom complet" label="id" track-by="id"></multiselect>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label class="form-control-label">Département/Fonction <span class="tx-danger">*</span></label>
                                        <input class="form-control" type="text" v-if="inputs.personnel" name="job" v-model="inputs.personnel.job" readonly>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="section-wrapper mt-3">

                        <div class="row">
                            <div class="col-md-8">
                                <label class="section-title">Selection Produits</label>
                            </div>
                            <div class="col-md-4">
                            </div>
                        </div>
                        <div class="form-layout">
                            <div class="row mg-b-25">
                                <div class="col-12">
                                    <div class="table-responsive">
                                    <table class="table table-bordered table-colored table-info">
                                        <thead>
                                            <tr>
                                                <th class="wd-35p">Fourniture</th>
                                                <th class="wd-35p">Qte</th>
                                                <th class="wd-10p"></th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <div class="col-lg-4">
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr v-for="(row, index) in inputs.fournitures">
                                                <th>
                                                    <div class="form-group mg-b-0-force">
                                                        <select class="form-control" placeholder="Choisir La categorie" v-model="row.fourniture" v-on:change="">
                                                            <option v-for="fourniture in fournitures" v-bind:value="fourniture">{{ fourniture.designation }}</option>
                                                        </select>
                                                    </div>
                                                </th>
                                                <td>
                                                    <div class="form-group mg-b-0-force">
                                                        <input class="form-control " id="qteFr" name="qte" min="1" type="number" v-if="row.fourniture != null" v-model="row.qte" :max="maxQte(inputs.fournitures,index)" v-on:change="maxQF(row.qte,inputs.fournitures,index)" >
                                                    </div>
                                                </td>
                                                <td>
                                                    <button type="button" class="btn btn-outline-danger bd-0" v-on:click="removeFournitureRow(index)"><i class="fa fa-times mg-r-5"></i></button>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td colspan="3" class="text-right">
                                                <button type="button" class="btn btn-outline-primary bd-0" v-on:click="addFournitureRow()"><i class="fa fa-plus mg-r-5"></i> Ajouter un choix</button>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="section-wrapper mt-3">
                        <div class="form-layout-footer d-flex justify-content-end">
                            <button type="button" class="btn btn-outline-primary bd-0" v-on:click="submit()">
                                <i class="fa fa-plus mg-r-5"></i>
                                Enregistrer
                            </button>
                        </div>
                    </div>


				</form>

			</div>
			@endverbatim
        @include('dashboard.component.copyright')

      </div>
    </div>
@endsection

@push('styles')

<link rel="stylesheet" href="https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.css">
<style>
.table-responsive {
    overflow: unset !important;
}

.multiselect__tags {
    border-radius: 0px;
}

.multiselect__tag {
    border-radius: 0px;
    background: #415bb8;
}

.multiselect__tag-icon:after {
    color: #ffffff;
}

.multiselect__tag-icon:focus, .multiselect__tag-icon:hover {
    background: #d82d2d;
    border-radius: 0;
}

.ckbox {
    display: inline-block !important;
    margin-right: 6pt !important;
}

.param {
	background-color: #5b93d3;
	padding: 8pt;
	color: white;
	margin-top: 2pt;
    display: inline-block;
}

.formula:focus {
	border-color: unset !important;
}

input.form-control.formula.formula_error {
    border-color: red !important;
}

</style>

@endpush

@push('scripts')

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script src="https://unpkg.com/vue-multiselect@2.1.0"></script>


<script>
$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});
</script>
<script>

Vue.component('multiselect', window.VueMultiselect.default)

Vue.component('vue-multiselect', window.VueMultiselect.default)

var app = new Vue({
    el: '#app',
    data: {
      personnels  : {!! $personnels !!},
      fournitures  : {!! $fournitures !!},
      inputs    : {
			'personnel' : null,
			'fournitures': [{
                'fourniture'  : null,
				'qte'   : 0,
            }],
      }
    },
	computed: {

	},
    methods: {
        persName ({ employee }) {
            return `${employee.first_name} ${employee.last_name}`
        },
        maxQte (fournitures,index ) {
            return fournitures[index].fourniture.qte
        },
        maxQF(qte,fournitures,index){
            if(qte> fournitures[index].fourniture.qte){
                this.inputs.fournitures[index].qte = fournitures[index].fourniture.qte
            }
        },


		addFournitureRow(){
			this.inputs.fournitures.push({
				'fourniture'      : null,
				'qte'   : null,
			});
		},
		removeFournitureRow(index){
			this.inputs.fournitures.splice(index, 1);
		},
		submit(){


				axios.post("{{ route('admin.affectation.store') }}",
				{
					personnel_id:     this.inputs.personnel.id,

					fournitures:       this.inputs.fournitures,
				})
				.then(response => {
					window.location.href = "{{ route('admin.affectation.index') }}"
				})
				.catch(response => console.log(response)
                )

		}
    }

})

</script>
<script>


</script>

@endpush