@extends('layouts.master')

@push('css')

@endpush

@section('breadcrumb')
    @include('components.breadcrumb',['breadcrumbs' => [
        [
            'name'  => __("Dashboard"),
            'url'   => route("home"),
        ]
    ], 'active' => __(@$title)])
@endsection

@section('content')
<div class="body-wrapper">
    <div class="row justify-content-center mb-30-none">
        <div class="col-xl-12 mb-30">
            <div class="dash-payment-item-wrapper">
                <div class="dash-payment-item active" >
                    <div class="dash-payment-title-area">
                        <span class="dash-payment-badge" onclick="toggleActive(event)">!</span>
                        <h5 class="title">Detail {{ @$title }}</h5>
                    </div>
                    <div class="dash-payment-body">
                        <div class="col-xl-12 col-lg-6 mb-20">
                <div class=" mt-10">

                    <div class="card-body profile-body-wrapper">
                {!! Form::open(array('route' => 'users.store','method'=>'POST',"enctype"=>"multipart/form-data")) !!}
                @csrf
                    <div class="profile-settings-wrapper">
                                <div class="preview-thumb profile-wallpaper">
                                    <div class="avatar-preview">
                                        <div class="profilePicPreview bg_img" ></div>
                                    </div>
                                </div>
                                <div class="profile-thumb-content">
                                    <div class="preview-thumb profile-thumb">
                                        <div class="avatar-preview">
                                            <div class="profilePicPreview bg_img" data-background="https://envato.appdevs.net/qrpay/public/backend/images/default/profile-default.webp" style="background-image: url(&quot;https://envato.appdevs.net/qrpay/public/backend/images/default/profile-default.webp&quot;);"></div>
                                        </div>
                                        <div class="avatar-edit">
                                            <input type="file" class="profilePicUpload" name="photoprofile_id" id="profilePicUpload2" accept=".png, .jpg, .jpeg">
                                            <label for="profilePicUpload2"><i class="las la-upload"></i></label>
                                        </div>
                                    </div>

                                </div>
                            </div>

                <div class="row">
                    <div class="col-xs-6 col-sm-6 col-md-6">
                        <div class="form-group">
                            <label for="nom" class="form-label">@lang('nom')</label>
                            <input id="nom" type="text" name="nom" required class="form-control  @error("nom") is-invalid @enderror" placeholder="@lang('nomplace')">
                           @error("nom") <div class="invalid-feedback">{{$message}}</div> @enderror
                        </div>
                    </div>
                    <div class="col-xs-6 col-sm-6 col-md-6">
                        <div class="form-group">
                            <label for="prenoms" class="form-label">@lang('prenoms')</label>
                            <input id="prenoms" type="text" name="prenoms" required class="form-control  @error("prenoms") is-invalid @enderror" placeholder="Prénoms">
                                @error("prenoms") <div class="invalid-feedback">{{$message}}</div> @enderror
                            </div>
                        </div>
                      @if(\Illuminate\Support\Facades\Auth::user()->pays_id ==null)
                            <div class="col-sm-6" >
                                <label for="pays_id" class="form-label">@lang("pays_id")</label>
                                <select id="pays_id" name="pays_id" class="form-control select2 @error("pays_id") is-invalid @enderror">
                                    <option value=""> ---- @lang("pays_id") ----</option>
                                    @foreach ( $payss as $pays)
                                        <option value="{{$pays->id}}">{{$pays->libelle}}</option>
                                    @endforeach
                                </select>
                                @error("pays_id") <div class="invalid-feedback">{{$message}}</div> @enderror
                            </div>
                    @endif
                        <div class="col-xs-6 col-sm-6 col-md-6">
                            <div class="form-group">
                                <label for="email" class="form-label">@lang('email')</label>
                                <input id="email" type="email" name="email" class="form-control  @error("email") is-invalid @enderror" placeholder="Email">
                                @error("email") <div class="invalid-feedback">{{$message}}</div> @enderror
                            </div>
                        </div>
                    <div class="col-xs-6 col-sm-6 col-md-6">
                        <div class="form-group">
                            <label for="tel" class="form-label">@lang('tel')</label>
                            <input id="tel" type="text" name="tel" required class="form-control  @error("tel") is-invalid @enderror" placeholder="@lang('telplace')">
                             @error("tel") <div class="invalid-feedback">{{$message}}</div> @enderror
                        </div>
                    </div>
                    <div class="col-sm-6" >
                        <label for="entreprise_id" class="form-label">@lang("entreprise_id")</label>
                        <select id="entreprise_id" name="entreprise_id" class="form-control select2 @error("entreprise_id") is-invalid @enderror">
                            <option value=""> ---- @lang("entreprise_id") ----</option>
                            @foreach ( $entreprises as $entreprise)
                                <option value="{{$entreprise->id}}">{{$entreprise->libelle}}</option>
                            @endforeach
                        </select>
                        @error("entreprise_id") <div class="invalid-feedback">{{$message}}</div> @enderror
                    </div>
                        <div class="col-xs-6 col-sm-6 col-md-6">
                            <div class="form-group">
                                <label for="role" class="form-label">@lang('role_id')</label>
                                {!! Form::select('roles[]', array_merge(['' => 'Selectionner un role'], $roles),[], array("class" => "form-control")) !!}
                                @error("roles") <div class="invalid-feedback">{{$message}}</div> @enderror
                            </div>
                        </div>

                        <div class="col-sm-6" >
                            <label for="typeutilisateur_id" class="form-label">@lang("typeutilisateur_id")</label>
                            <select id="typeutilisateur_id" required name="typeutilisateur_id" class="form-control select2 @error("typeutilisateur_id") is-invalid @enderror">
                                <option value=""> ---- @lang("typeutilisateur_id") ----</option>
                                @foreach ( $typeutilisateurs as $typeutilisateur)
                                    <option value="{{$typeutilisateur->id}}">{{$typeutilisateur->libelle}}</option>
                                @endforeach
                            </select>
                            @error("typeutilisateur_id") <div class="invalid-feedback">{{$message}}</div> @enderror
                        </div>

                    <div class="row">
                        <div class="col-6" style="padding-top: 8px">
                            <label class="form-label">@lang("piecerecto_id")</label>
                            <div class="z-depth-1-half mb-3">
                                <img class="images-preview-piecerecto_id"  id="preview-image-before-upload" src="https://caer.univ-amu.fr/wp-content/uploads/default-placeholder.png"
                                     alt="preview image" style="max-height: 150px;">
                                <input id="piecerecto_id" type="file" name="piecerecto_id" class="form-control  @error("piecerecto_id") is-invalid @enderror" placeholder="photo">
                            </div>
                        </div>
                        <div class="col-6" style="padding-top: 8px">
                            <label class="form-label">@lang("pieceverso_id")</label>
                            <div class="z-depth-1-half mb-3">
                                <img class="images-preview-pieceverso_id"  id="preview-image-before-upload" src="https://caer.univ-amu.fr/wp-content/uploads/default-placeholder.png"
                                     alt="preview image" style="max-height: 150px;">
                                <input id="pieceverso_id" type="file" name="pieceverso_id" class="form-control  @error("pieceverso_id") is-invalid @enderror" placeholder="photo">
                            </div>
                        </div>
                    </div>
                        <div class="col-12 mt-3">
                            <a href="{{ route("users.index") }}" class="btn btn-danger">@lang("Annuler")</a>
                            <button class="btn btn-primary" type="submit">@lang("Valider")</button>
                        </div>
                    </div>
                    {!! Form::close() !!}
                </div>
        </div>
        </div>
<script>
    function previewImage(event) {
        var input = event.target;
        var preview = document.getElementById('preview-image-before-upload');

        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function(e) {
                preview.src = e.target.result;
            }

            reader.readAsDataURL(input.files[0]);
        }
    }

</script>
                        <script>
                            $(function() {
                                // Multiple images preview with JavaScript
                                var previewImages = function(input, imgPreviewPlaceholder) {
                                    if (input.files) {
                                        var filesAmount = input.files.length;
                                        for (i = 0; i < filesAmount; i++) {
                                            var reader = new FileReader();
                                            reader.onload = function(event) {
                                                // $($.parseHTML('<img style="max-height: 200px;">')).attr('src', event.target.result).appendTo(imgPreviewPlaceholder);
                                                $(imgPreviewPlaceholder).attr("src", event.target.result);
                                            }
                                            reader.readAsDataURL(input.files[i]);
                                        }
                                    }
                                };
                                $('#piecerecto_id').on('change', function() {
                                    previewImages(this, 'img.images-preview-piecerecto_id');
                                });
                                $('#pieceverso_id').on('change', function() {
                                    previewImages(this, 'img.images-preview-pieceverso_id');
                                });

                            });
                        </script>
    @endsection