@extends('app')


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

@section('header')

<!-- Datatable -->
<!-- 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')
    

<style>

    .containe{
        height: 100%;
        width: 100%;
    }

    .containe .wrapper{
        position: relative;
        border-radius: 10px;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 83%;
        width: 100%;
        border: 2px dashed #c2cdda;
        overflow: hidden;
    }

    .containe.active{
        border: none;
    }

    .wrapper .image{
        position: absolute;
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }


    .wrapper .image img{
        height: 100%;
        width: 100%;
        object-fit: cover;


    }

    .wrapper   .icon{
        font-size: 100px;
        color: #9658fe;
    }
    .wrapper .text{
        font-size: 20px;
        font-weight: 500;
        color: #5B5B7B;

    }

    .wrapper #cancel-btn{
        position: absolute;
        right: 15px;
        top: 15px;
        font-size: 20px;
        cursor: pointer;
        color: #9658fe;
        display: none;
    }

    .wrapper.active:hover #cancel-btn{
        display: block;
    }

    .wrapper #cancel-btn:hover{
        color: #e74c3c;
    }


    .wrapper .file-name{
        position: absolute;
        bottom: 0px;
        width: 100%;
        background:linear-gradient(135deg, #3a8ffe 0%, #9658fe 100%);
        font-size: 18px;
        color: #fff;
        padding: 8px 0;
        /* display: none; */
    }

    .wrapper.active:hover .file-name{
        display: none;
    }
    .containe #custom-btn{
        margin-top: 30px;
        width: 100%;
        height: 50px;
        display: block;
        border: none;
        outline: none;
        border-radius: 25px;
        color: #fff;
        font-size: 18px;
        font-weight: 500;
        letter-spacing: 1px;
        text-transform: uppercase;
        cursor: pointer;
        background:linear-gradient(135deg, #3a8ffe 0%, #9658fe 100%);
    }

</style>

<div class="container-fluid">
    <!-- Add Project -->
   
    <div class="row page-titles mx-0">
        <div class="col-sm-6 p-md-0">
            <div class="welcome-text">
                <h4>Hi, welcome back!</h4>
                <p class="mb-0">Redigez le rapport de vérification</p>
            </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 text-blue" >
                    <a href="{{ route('admin.dashboard') }}">Dashboard</a>
                </li>
                <li class="breadcrumb-item text-blue" >
                    <a href="{{route('listEquipements')}}">Equipements</a>
                </li>
                <li class="breadcrumb-item active " >
                    <a href="javascript:void(0)">ADD rapport de vérification</a>
                </li>
            </ol>
        </div>
    </div>
    <!-- row -->
    <div class="row">
        <div class="col-xl-12 col-xxl-12">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Remplisez le formulaire</h4>
                    </div>
                    <div class="card-body">
                        <div class="form-validation">
                            <form class="form-valide" action="{{route('createVerificationEquipement')}}" method="post" enctype="multipart/form-data">
                                @csrf
                                <div class="row">
                                    <div class="col-xl-12">
                                        <div class="form-group row">
                                            <label class="col-lg-4 col-form-label" for="val-username">Date de vérification
                                                <span class="text-danger">*</span>
                                            </label>
                                            <div class="col-lg-6">
                                                <input type="date" class="form-control" id="val-username" name="date_verification" placeholder="Date de vérification">
                                                <input type="text" class="form-control" id="val-username" name="verification_id" value="{{$verification->id}}" hidden>
                                            </div>
                                        </div>
                                       
                                        <div class="form-group row">
                                            <label class="col-lg-4 col-form-label" for="val-suggestions">Observation <span
                                                    class="text-danger">*</span>
                                            </label>
                                            <div class="col-lg-6">
                                                <textarea class="form-control" id="val-suggestions" name="observation" rows="5" placeholder="Votre Observation"></textarea>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label class="col-lg-4 col-form-label" for="val-suggestions">
                                                Commentaire <span class="text-danger">*</span>
                                            </label>
                                            <div class="col-lg-6">
                                                <textarea class="form-control" id="val-suggestions" name="commentaire" rows="5" placeholder="votre Commentaire"></textarea>
                                            </div>
                                        </div>

                                       

                                        <div class="form-group row">
                                            <label class="col-lg-4 col-form-label" for="val-username"> Responsable de vérification
                                                <span class="text-danger">*</span>
                                            </label>
                                            <div class="col-lg-6">
                                                <input type="text" class="form-control" id="val-username" name="responsable_verification" placeholder="Responsable de vérification">
                                                
                                            </div>
                                        </div>


                                        <div class="form-group row">
                                            
                                            <label class="col-lg-4 col-form-label" for="val-username"> 
                                                Insérer le raport de vérification
                                                <span class="text-danger"></span>
                                            </label>
                                           

                                            <div class="form-group col-md-6">
                                               
                                                <input type="file" name="document_image"  class="form-control" accept=".pdf"  >
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <div class="col-lg-8 ml-auto">
                                            </div>
                                            <div class="col-lg-4 ml-auto">
                                                <button type="submit" class="btn btn-secondary">Enregistrer</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                            </form>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </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>



   <!-- Form Steps -->
	<script src="{{asset('assets/vendor/jquery-smartwizard/dist/js/jquery.smartWizard.js')}}"></script>


    <script src="{{asset('assets/js/custom.min.js')}}"></script>
	<script src="{{asset('assets/js/deznav-init.js')}}"></script>


   
   
     
@endsection

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