@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="#">Demandes</a></li>
					<li class="breadcrumb-item active" aria-current="page">Ajouter une demande</li>
					</ol>
					<h6 class="slim-pagetitle">Ajouter une demande</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 l'étudient</label>
                            </div>
                            <div class="col-md-4">
                            </div>
                        </div>
                        <div class="form-layout">
                            <div class="row mg-b-25">
                                <div class="col-lg-4">
                                    <div class="form-group">
                                        <label class="form-control-label">N° Ins: <span class="tx-danger">*</span></label>
                                        <multiselect v-model="inputs.student" :options="students"
                                            :custom-label="idAndName" placeholder="N° Ins" label="id" track-by="id" :allow-empty="required"></multiselect>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="form-group">
                                        <label class="form-control-label">Nom <span class="tx-danger">*</span></label>
                                        <input class="form-control" type="text" v-if="inputs.student" name="last_name" v-model="inputs.student.last_name" readonly>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="form-group">
                                        <label class="form-control-label">Prénom <span class="tx-danger">*</span></label>
                                        <input class="form-control" type="text" v-if="inputs.student" name="first_name" v-model="inputs.student.first_name" readonly>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="form-group">
                                        <label class="form-control-label">Année d'inscription <span class="tx-danger">*</span></label>
                                        <input class="form-control" type="text"  v-if="inputs.student" name="ann_ins" v-model="inputs.student.ann_ins" readonly>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="form-group">
                                        <label class="form-control-label">Téléphone <span class="tx-danger">*</span></label>
                                        <input class="form-control" type="text"  v-if="inputs.student" v-model="inputs.phone" name="phone">
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="form-group">
                                        <label class="form-control-label">Email <span class="tx-danger">*</span></label>
                                        <input class="form-control" type="text"  v-if="inputs.student" v-model="inputs.mail" name="mail">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="section-wrapper mt-3">

                        <div class="row">
                            <div class="col-md-8">
                                <label class="section-title">Motif de l'emprunt</label>
                            </div>
                            <div class="col-md-4">
                            </div>
                        </div>
                        <div class="form-layout">
                            <div class="row mg-b-25">
                                <div class="col-lg-4">
                                    <div class="form-group">
                                        <label class="form-control-label">Nom du Prof <span class="tx-danger">*</span></label>
                                        <multiselect v-model="inputs.prof" :options="profs"
                                            :custom-label="profName" placeholder="Nom du Prof" label="id" track-by="id"></multiselect>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="form-group">
                                        <label class="form-control-label">Nom de module <span class="tx-danger">*</span></label>
                                        <multiselect v-model="inputs.module" :options="modules"
                                            :custom-label="moduleName" placeholder="Nom de module " label="name" track-by="name"></multiselect>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="form-group">
                                        <label class="form-control-label">Nom de l'exercice <span class="tx-danger">*</span></label>
                                        <multiselect v-model="inputs.exercice" :options="exercices"
                                            :custom-label="exeName" placeholder="Nom de l'exercice" label="name" track-by="name"></multiselect>
                                    </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">Type</th>
                                                <th class="wd-35p">Produit</th>
                                                <th class="wd-10p"></th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <div class="col-lg-4">
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr v-for="(row, index) in inputs.products">
                                                <th>
                                                    <div class="form-group mg-b-0-force">
                                                        <select class="form-control" placeholder="Choisir La categorie" v-model="row.type" v-on:change="resetType(row)">
                                                            <option v-for="type in types" v-bind:value="type">{{ type.name }}</option>
                                                        </select>
                                                    </div>
                                                </th>
                                                <td>
                                                    <select class="form-control" placeholder="Choisir Le produit" v-model="row.product" v-if="row.type">
                                                        <template v-for="product in products">
                                                            <option v-if="product.type_id == row.type.id" v-bind:value="product">{{ product.designation }}</option>
                                                        </template>
                                                    </select>
                                                </td>
                                                <td>
                                                    <button type="button" class="btn btn-outline-danger bd-0" v-on:click="removeProductRow(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="addProductRow()"><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="row">
                            <div class="col-md-8">
                                <label class="section-title">Etat de demande</label>
                            </div>
                            <div class="col-md-4">
                            </div>
                        </div>
                        <div class="row mg-b-25">
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label class="form-control-label">Etat: <span class="tx-danger">*</span></label>
                                    <select class="form-control" placeholder="Choisir" v-model="inputs.statut">
                                        <option v-for="stat_option in inputs.stat_options" :value="stat_option">{{ stat_option }}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label class="form-control-label">Date de retrait <span class="tx-danger">*</span></label>
                                    <input class="form-control" type="Date" v-model="inputs.date_so" name="date_so" required>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label class="form-control-label">Date de retour <span class="tx-danger">*</span></label>
                                    <input class="form-control" type="Date" v-model="inputs.date_en" name="date_en" required>
                                </div>
                            </div>

                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label class="form-control-label">Note de retour</label> <br>
                                    <textarea class="form-control" v-model="inputs.note" name="note" id=""  rows="10"></textarea>
                                </div>
                            </div>

                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label class="form-control-label">Motif de refus</label> <br>
                                    <textarea class="form-control" v-model="inputs.motifs_reject" name="motifs_reject" id=""  rows="10"></textarea>
                                </div>
                            </div>
                        </div>

                        <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: {
      students  : {!! $students !!},
      products  : {!! $products !!},
      types     : {!! $types !!},
      profs     : {!! $profs !!},
      exercices     : {!! $exercices !!},
      modules     : {!! $modules !!},
      values :[],
      inputs    : {
			'prof' : '',
			'module' : '',
			'exercice' : '',
			'date_so' : '',
			'date_en' : '',
			'note' : '',
			'mail' : '',
			'phone' : '',
            'statut':'en cour de traitement',
			'motifs_reject' : '',
			'student' :  null,
            'stat_options' :[
                'en cour de traitement',
                'Retrait',
                'Retourner',
                'Refusé',
            ],
			'products': [{
                'type'  : null,
				'product'   : null,
            }],
      }
    },
	computed: {

	},
    methods: {
        idAndName ({ n_ins,first_name,last_name }) {
            return `${n_ins} ${first_name} ${last_name}`
        },
        profName ({ first_name,last_name }) {
            return `${first_name} ${last_name}`
        },
        moduleName ({ name }) {
            return `${name}`
        },
        exeName ({ name }) {
            return `${name}`
        },
		resetType(row){
			row.product = null;
		},
		addProductRow(){
			this.inputs.products.push({
				'type'      : null,
				'product'   : null,
			});
		},
		removeProductRow(index){
			this.inputs.products.splice(index, 1);
		},
		submit(){


				axios.post("{{ route('admin.demande.store') }}",
				{
					module:         this.inputs.module.name,
					exercice:       this.inputs.exercice.name,
					prof:           this.inputs.prof.id,
					date_so:        this.inputs.date_so,
					date_en:        this.inputs.date_en,
					note:           this.inputs.note,
					mail:           this.inputs.mail,
					phone:          this.inputs.phone,
					statut:         this.inputs.statut,
					motifs_reject:  this.inputs.motifs_reject,

					student_id:     this.inputs.student.id,

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

		}
    }

})

</script>

@endpush