@extends('layouts.squelette_bi_numerique')
<!-- ************************************** -->

@section('css_header')
 <link rel="stylesheet" href="{{ asset('plugins/filepond/dist/filepond.css')}}" />
 <link rel="stylesheet" href="{{ asset('plugins/filepond/filepond_elan.css')}}" />
@endsection

@section('js_header')
 <script src="{{ asset('plugins/filepond/dist/filepond.min.js')}}"></script>
 <script src="{{ asset('plugins/filepond/filepond-plugin-image-preview.min.js')}}"></script>
 <script src="{{ asset('plugins/filepond/filepond-plugin-file-validate-type.js')}}"></script>
 <script src="{{ asset('plugins/filepond/filepond.jquery.js')}}"></script>
@endsection
<!-- ************************************** -->
@section('titre_page')
{{ __("Bon d'intervention") }}
@endsection
<!-- ************************************** -->
@section('titre')
@endsection
<!-- ************************************** -->
@section('panel_boutons')
<span class="alert alert_navbar2 alert-warning "> ETAPE 2 sur 3 </span>
<br><br>
<a class="btn btn-outline-success " href="/bi_numeric/{{$proReq->proReq_id}}/{{$proReq->proReq_linkKey_binumeric}}/1"><i class="fa fa-arrow-circle-left"></i> {{ __("Retour") }}</a>
@endsection
<!-- ************************************** -->
@section('contenu')

        <div class="row">
            <div class="col-md-6">

                <div class="callout callout-info callout-techs">
                    <b>Intervention #{{$intervention->int_number}}<br></b>
                            <H5>{!! $proReq->int_title !!}</H5>

                            <table width="100%">
                                <tr>
                                    <td>
                                        <button class="btn btn-hour btn-xs"><i class="fa fa-map icon-white"></i></button>
                                    </td>
                                    <td>
                                        <p class="event-description">
                                            <br>
                                            {{$intervention->sig_socialReason}} {{$intervention->sit_name}}<br>
                                            {!! $intervention->sit_address1 !!} {!! $intervention->sit_address2 !!}<br>
                                            {!! $intervention->sit_zipCode !!}
                                            {!! $intervention->sit_city !!}<br>
                                            {{ __('Téléphone : ') }}{{$intervention->sit_phone}}
                                        </p>
                                    </td>
                                </tr>
                            </table>
                </div>

                <form method="POST" action="{{ route('save_bi_step2') }}" enctype="multipart/form-data">
                    <input type="hidden" name="proReqBi_id" id="proReqBi_id" value="{{ $proReqBi->proReqBi_id }}">
                    <input type="hidden" name="int_id" id="int_id" value="{{ $intervention->int_id }}">
                    @csrf

                        <div class="callout callout-info callout-techs">
                            <H5>Saisie des informations</H5><br>

                            <div class="row">

                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label class="required_label" for="proReqBi_nbPeople">{{ __('Nom de la personne sur place') }}</label>
                                        <input id="proReqBi_nameSignataire" type="text" class="form-control" name="proReqBi_nameSignataire" value="{{ @$proReqBi->proReqBi_nameSignataire }}" required>
                                    </div>
                                </div>

                                <div class="col-md-6">


                                    <div class="form-group" id="group_file">
                                        <label for="bi_fichiers">{{ __('Photos du résultat de l\'intervention (obligatoires) ') }}</label>
                                        <input id="bi_fichiers" type="file" class="my-pond-photos" name="bi_fichiers[]" multiple/>
                                        {{-- <input id="bi_fichiers" class="fileinput" type="file" name="bi_fichiers[]"
                                               accept="{{ Session::get('value_authorized_extensions') }}" multiple {{count($fichiers_bi)==0 ? 'required' : ''}}> --}}
                                    </div>
                                    @if(count($fichiers_bi)>0)
                                    <table border="0" class="bordered-bluelight" style="width:100%;background-color: #fff">
                                        <tr>
                                            <td>
                                                <b>{{ __('Photos déjà enregistrées :') }}</b>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <div class="row">
                                                    @foreach ($fichiers_bi as $file)
                                                        <div class="col-sm-2">
                                                            @if ( ($file->intFil_ext=='jpg') || ($file->intFil_ext=='jpeg') || ($file->intFil_ext=='png') || ($file->intFil_ext=='bmp') )
                                                                <a href="{{asset('/storage/interventions_files/'.$intervention->int_id.'/'.$file->intFil_name)}}" data-toggle="lightbox" data-gallery="gallery" target="_blank">
                                                                    <img style="width:130px;" src="{{asset('/storage/interventions_files/'.$intervention->int_id.'/'.$file->intFil_name)}}"
                                                                         class="img-fluid mb-2" alt="white sample"/>
                                                                </a>
                                                            @else
                                                                <a href="{{asset('/storage/interventions_files/'.$intervention->int_id.'/'.$file->intFil_name)}}" data-toggle="lightbox" data-gallery="gallery" target="_blank">
                                                                    <img src="{{asset('images/file_extensions/'.$file->intFil_ext.'.png')}}" width="100px">
                                                                </a>
                                                            @endif

                                                        </div>
                                                    @endforeach
                                                </div>
                                            </td>
                                        </tr>
                                    </table>
                                    <br><br>
                                    @endif
                                </div>

                                <div class="col-md-6">
                                    <div class="form-group" id="group_file">
                                        <label for="bi_fichiers">{{ __('Photo tampon boutique (obligatoire)') }}</label>
                                        <input id="bi_tampon_boutique" type="file" class="my-pond-tampon" name="bi_tampon_boutique">

                                        {{-- <input id="bi_tampon_boutique" class="fileinput" type="file" name="bi_tampon_boutique" accept="{{ Session::get('value_authorized_extensions') }}" {{count($fichiers_bi)==0 ? 'required' : ''}}> --}}
                                    </div>

                                    @if($bi->intFil_idTampon!=null)
                                    <table border="0" class="bordered-bluelight" style="width:100%;background-color: #fff">
                                        <tr>
                                            <td>
                                                <b>{{ __('Photo du tampon déjà enregistrée :') }}</b>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <div class="row">
                                                        <div class="col-sm-2">
                                                            <a href="{{asset('/storage/interventions_files/'.$intervention->int_id.'/'.$bi->intFil_name)}}" data-toggle="lightbox" data-gallery="gallery" target="_blank">
                                                                <img style="width:130px;" src="{{asset('/storage/interventions_files/'.$intervention->int_id.'/'.$bi->intFil_name)}}"
                                                                        class="img-fluid mb-2" alt="white sample"/>
                                                            </a>
                                                        </div>
                                                </div>
                                            </td>
                                        </tr>
                                    </table>
                                    <br><br>
                                    @endif
                                </div>

                            </div>

                            <center><button class="btn btn-success btn-save">{{ __('Enregistrer et passer à l\'étape 3') }}</button></center>

                        </div>
                </form>
            </div>
        </div>
@endsection

@section('js_footer')
    <script>
        $(function(){

        // First register any plugins
        // $.fn.filepond.registerPlugin(FilePondPluginImagePreview);
        FilePond.registerPlugin(FilePondPluginFileValidateType);

        $('.my-pond-photos').filepond({
            labelIdle: `Glissez-déposez vos fichiers ou <span class="filepond--label-action">Parcourir</span>`,
            allowMultiple: true,
            required: {{count($fichiers_bi)>0 ? 'false' : 'true'}},
            server: false,
            storeAsFile: true,
            name: 'bi_fichiers[]',
            imageCropAspectRatio: '1:1',
            imageResizeTargetWidth: 200,
            imageResizeTargetHeight: 200,
            imagePreviewHeight:100,
            // set allowed file types with mime types
            acceptedFileTypes: ['image/*'],
        });

        $('.my-pond-tampon').filepond({
            labelIdle: `Glissez-déposez la photo du tampon ou <span class="filepond--label-action">Parcourir</span>`,
            allowMultiple: false,
            required: {{count($fichiers_bi)>0 ? 'false' : 'true'}},
            server: false,
            storeAsFile: true,
            name: 'bi_tampon_boutique',
            imageCropAspectRatio: '1:1',
            imageResizeTargetWidth: 200,
            imageResizeTargetHeight: 200,
            imagePreviewHeight:100,
            // set allowed file types with mime types
            acceptedFileTypes: ['image/*'],
        });

    });
    </script>
  @endsection