@extends('app')


<!--**********************************
   lien css ou js -- header
***********************************-->

@section('header')
<link rel="icon" type="image/png" sizes="16x16" href="./images/favicon.png">
<!-- Datatable -->
<link href="{{asset('assets/vendor/datatables/css/jquery.dataTables.min.css')}}" rel="stylesheet">
<!-- Custom Stylesheet -->
<link href="{{asset('assets/vendor/bootstrap-select/dist/css/bootstrap-select.min.css')}}" rel="stylesheet">
<link href="{{asset('assets/css/style.css')}}" rel="stylesheet">
@endsection

<!--**********************************
   fin lien css ou js -- header
***********************************-->




<!--**********************************
    body
***********************************-->
@section('content')
 <!-- Large modal -->

@include('app.vgp.equipements.modal.form_add_equipement')
<div class="container-fluid">
    <div class="row page-titles mx-0">
        <div class="col-sm-6 p-md-0">
            <div class="welcome-text">
                <h4>Hi, welcome back!</h4>
                <span>Ajouter un équipement</span>
            </div>
        </div>
       
        <div class="col-sm-6 p-md-0 justify-content-sm-end mt-2 mt-sm-0 d-flex">
            <ol class="breadcrumb">
                
                <li class="breadcrumb-item active " data-toggle="modal" data-target=".bd-example-modal-lg-createTypeEquipement">
                    <a href="javascript:void(0)">Ajout type équipement</a>
                </li>
            </ol>
        </div>
    </div>
    <!-- row -->


    <div class="modal-body row">
        <div class="col-sm-2 p-md-0">
           
        </div>
       
        <form action="{{route('updateEquipementVGP')}}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="form-row">
                <div class="form-group col-md-12">
                    <input type="text" name="equipementID" value="{{$equipement->id}}" hidden>
                    
                </div>
                
            </div>
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label>Nom de l'équipement</label>
                    <input type="text" name="nom" value="{{$equipement->nom}}" class="form-control">
                </div>
                <div class="form-group col-md-6">
                    <label>Déseignation</label>
                    <input name="designation" type="text" value="{{$equipement->designation}}" class="form-control" >
                </div>
                <div class="form-group col-md-12">
                    <label>Type d'équipement</label>
                    <select name="type_equipement_id" id="inputState" class="form-control default-select">
                        <option value="{{ $equipement->type_equipement_id}}">{{ $equipement->typeEquipement->nom_type_equipement}}</option>
                        @foreach ( $type_equipements as  $type_equipement)
                        <option value="{{ $type_equipement->id}}">{{ $type_equipement->nom_type_equipement}}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group col-md-6">
                    <label>Emplacement</label>
                    <input name="emplacement" type="text" value="{{$equipement->emplacement}}" class="form-control">
                </div>

                <div class="form-group col-md-6">
                    <label>Responsable</label>
                    <select name="responsable_id" id="inputState" class="form-control default-select">
                        <option value="{{ $equipement->responsable_id}}">{{ $equipement->responsable->name}}</option>
                        @foreach ( $responsables as  $responsable)
                        <option value="{{ $responsable->id}}">{{ $responsable->name}}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group col-md-6">
                    <label>Prestataire</label>
                    <select name="prestataire_id" id="inputState" class="form-control default-select">
                        <option value="{{ $equipement->prestataire_id}}">{{ $equipement->prestataire->name}}</option>
                        @foreach ( $prestataires as  $prestataire)
                        <option value="{{ $prestataire->id}}">{{ $prestataire->name}}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group col-md-6">
                    <label>Frequence</label>
                    <select name="frequence_verification" id="inputState" class="form-control default-select">
                        <option value="{{ $equipement->frequence_verification}}">{{ $equipement->frequence_verification}}</option>
                        <option value="Journalière">Journalière </option>
                        <option value="Hebdomadaire">Hebdomadaire</option>
                        <option value="Mensuelle">Mensuelle</option>
                    </select>
                </div>
                <div class="form-group col-md-4">
                    
                </div>
                <div class="col-4" id="imagecontainer" style="width: 100%;min-width:320px;">
                    <div class="containe text-center" style="width: 100%;height:50vh;">
                        <div class="wrapper wp_img0">
                            <div class="image">
                                <img src="{{asset('/storage/'.$equipement->image_equipement)}}" alt="image" class=" img_0">
                            </div>
                            <div class="content">
                                <div class="icon"> <i class="fas fa-cloud-upload-alt"></i></div>
                                <div class="text"> Auccun fichier sélectionner</i></div>
                            </div>
                            <div id="cancel-btn" class="cb_img0"><i class="fas fa-times"></i></div>
                            <div class="file-name fn_img0 text-center"id="custom-btn" class="cub_img0" onclick="defaultBtnActive1()" >Choisir l'image </i></div> 
                        </div>
                        <input  id="default-btn" required class="db_img0" type="file" name="image_equipement" hidden>
                    </div>
                </div>
                <div class="form-group col-md-4">
                    
                </div>
            </div>
            
        
     <div class="modal-footer">
         <button type="submit" class="btn btn-primary">Enregistrer</button>
     </div>
    </form>
    <div class="col-sm-2 p-md-0">
           
    </div>
</div>






<script>

        
    console.log('je suis présent');

    var wrapper = document.querySelector(".wp_img0");
    var fileName = document.querySelector(".fn_img0");
    var cancelBtn = document.querySelector(".cb_img0")
    var defaultBtn = document.querySelector(".db_img0");
    var customBtn = document.querySelector(".cub_img0");
    var img_1 = document.querySelector(".img_0");



    let regExp1 = /[0-9a-zA-Z\^\&\'\@\{\}\[\]\,\$\=\!\-\#\(\)\.\%\+\~\_ ]+$/;
    function defaultBtnActive1(){
        defaultBtn.click();
    };


    defaultBtn.addEventListener("change", function(){
        const file = this.files[0];

        if (file){
            const reader = new FileReader();
            reader.onload = function(){
            const result = reader.result;
            img_1.src = result;
            wrapper.classList.add("active");
        }
        cancelBtn.addEventListener("click", function(){
            img_1.src = "";
            wrapper.classList.remove(file);
        });
        reader.readAsDataURL(file);
    }
        if (this.value){
            let valueStore = this.value.match(regExp1);
            fileName.innerText = valueStore;
        }

    });


</script>   




@endsection
<!--**********************************
    fin body
***********************************-->






<!--**********************************
    lien js -- footer
***********************************-->
@section('footer')
     <!-- Required vendors -->

     <!-- Required vendors -->
    <script src="{{asset('assets/vendor/global/global.min.js')}}"></script>
	<script src="{{asset('assets/vendor/bootstrap-select/dist/js/bootstrap-select.min.js')}}"></script>
    <!-- Datatable -->
    <script src="{{asset('assets/vendor/datatables/js/jquery.dataTables.min.js')}}"></script>
    <script src="{{asset('assets/js/plugins-init/datatables.init.js')}}"></script>
    <script src="{{asset('assets/js/custom.min.js')}}"></script>
	<script src="{{asset('assets/js/deznav-init.js')}}"></script>
     
@endsection

<!--**********************************
    fin lien  -- footer
***********************************-->