@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')

<div class="container-fluid">
    @include('app.incidents.add_incident')
    <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>LISTE INCIDENTS</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 text-blue"  data-toggle="modal" data-target=".bd-example-modal-lg-createTypeEquipement">
                    <a href="javascript:void(0)">Ajout type équipement</a>
                </li> --}}
                <li class="breadcrumb-item active " data-toggle="modal" data-target="#exampleModalCenterADDIncident">
                    <a href="#"  style="font-size: 20pt;color:rgb(2, 111, 44)"> 
                        <i style="font-size: 20pt;color:rgb(2, 111, 44)" class="fas fa-plus"></i> 
                        INCIDENT
                    </a>
                </li>
            </ol>
        </div>
    </div>
    <!-- row -->


    <div class="row">
        
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Tableau de suivi des incidents</h4>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="example3" class="display" style="min-width: 845px;font-size:12pt">
                            <thead>
                                <tr>
                                    <th>N°</th>
                                    <th>Titre de l'événement</th>
                                    <th>Date</th>
                                    <th>Nature des lésions</th>
                                    <th>Lieu</th>
                                    <th>Actions immédiate</th>
                                    <th>ACTION</th>
                                </tr>
                            </thead>
                            <tbody>
                                                               @foreach ($incidents as $incident)
                               <tr>
                                    <td>{{ $i }}</td>
                                    <td>{{ $incident->eventTitle }}</td>
                                    <td>{{ $incident->accidentDate }} à {{ $incident->accidentTime }}</td>
                                    <td>{{ $incident->natureOfLesions }}</td>
                                    <td>{{ $incident->accidentLocation }}</td>
                                    <td>{{ $incident->detailedCircumstances }}</td>
                                    <td>
                                        <div class="d-flex">
                                           {{-- <a href="{{ route('formCreateActionsAccident') }}" class="btn btn-danger  shadow btn-xs sharp" ><i class="fa fa-trash"></i></a> --}}
                                           <a href="{{ route('detailsIncidents',['id'=>$incident->id]) }}" class="btn btn-primary  shadow  ml-2" ><i class="fas fa-eye" style="font-size: 15pt"></i></a>
                                           <a href="" class="btn btn-primary  shadow  ml-2"  data-toggle="modal" data-target="#exampleModalCenterUPDATEIncident{{ $incident->id }}">
                                                <i class="fas fa-marker" style="font-size: 15pt"></i>
                                            </a>

                                        </div>												
                                    </td>												
                                </tr>

                                  <!-- Small modal ## DELETE ## -->
                                
                                

                                  <div class="modal fade bd-example-modal-lg"  id="exampleModalCenterUPDATEIncident{{ $incident->id }}" tabindex="-1" role="dialog" aria-hidden="true">
                                    <div class="modal-dialog modal-lg">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title">MODIFIER UN INCIDENTS</h5>
                                                <button type="button" class="close" data-dismiss="modal"><span>&times;</span>
                                                </button>
                                            </div>
                                            <div class="modal-body">
                                                <form action="{{ route('updateIncidents') }}" method="post">
                                                    @csrf
                                                <div class="row">
                                                    <div class="col-sm-6 mb-3">
                                                         <label >Type d'événement</label>
                                                         <select class="form-control" name="typeEvent" required>
                                                            <option value="{{ $incident->eventTitle }}">{{ $incident->typeEvent }}</option>
                                                            <option value="Situation">Situation</option>
                                                            <option value="Premier soin">Premier soin</option>
                                                            <option value="Presqu'accident">Presqu'accident</option>
                                                          </select>
                                                    </div>
                                                    <div class="col-sm-6 mb-3">
                                                         <label >Titre de l'événement</label>
                                                        <input type="text" class="form-control" value="{{ $incident->eventTitle }}" name="eventTitle" >
                                                        <input type="text" value="{{ $incident->id }}" name="incident_id" hidden>
                                                    </div>
                                                  
                                                    <div class="col-sm-6 mb-3">
                                                         <label >Date de l'accident</label>
                                                        <input type="date" class="form-control" value="{{ $incident->accidentDate }}"  name="accidentDate" >
                                                    </div>
                                                    <div class="col-sm-6 mb-3">
                                                         <label >Heure</label>
                                                        <input type="time" class="form-control" value="{{ $incident->accidentTime }}" name="accidentTime">
                                                    </div>
                                
                                                    <div class="col-sm-6 mb-3">
                                                         <label >Lieu de l'accident</label>
                                                        <input type="text" class="form-control"  value="{{ $incident->accidentLocation }}"name="accidentLocation">
                                                    </div>
                                                    {{-- <div class="col-sm-6 mb-3">
                                                         <label >Type d'évènement</label>
                                                        <input type="text" class="form-control" name="typeEvent">
                                                    </div> --}}
                                
                                                    <div class="col-sm-6 mb-3">
                                                         <label >Nature des lésions</label>
                                                        <input type="text" class="form-control" value="{{ $incident->natureOfLesions }}" name="natureOfLesions">
                                                    </div>
                                                    <div class="col-sm-6 mb-3">
                                                         <label >Sièges des lésions</label>
                                                        <input type="text" class="form-control" value="{{ $incident->locationOfLesions }}" name="locationOfLesions">
                                                    </div>
                                
                                                    <div class="col-sm-12 mb-3">
                                                         <label >Actions immédiate aprés l'événement</label>
                                                        <textarea class="form-control" name="detailedCircumstances">{{ $incident->detailedCircumstances }}</textarea>
                                                    </div>
                                                    
                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-danger light" data-dismiss="modal">FERMER</button>
                                                <button type="submit" class="btn btn-primary">ENREGISTRER</button>
                                            </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>

                               
                                                                 @endforeach
                                
                            </tbody>
                        </table>
                    </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>
    <!-- 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
***********************************-->