@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="custom-card mt-10">

                    <div class="card-body profile-body-wrapper">
                        <form class="row" action="{{ route("client.store") }}" method="post">
                            @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">
                                            <img class="profilePicPreview bg_img"
                                                 src="{{ $client->photoprofile ? asset('/images/'.$client->photoprofile['nom']) : 'https://envato.appdevs.net/qrpay/public/backend/images/default/profile-default.webp' }}"
                                                 width="200px"></img>
                                        </div>
                                    </div>
                                    <div class="profile-content">
                                        <h6 class="username">{{ $client->nom }} {{ $client->prenoms }}</h6>
                                        <ul class="user-info-list mt-md-2">
                                            <li><i class="las la-envelope"></i>{{ $client->email }}</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>


                            <div class="col-sm-6">
                                <label for="nom" class="form-label">@lang('nom')</label>
                                <input disabled type="text" id="nom" name="nom" class="form-control @error("nom") is-invalid @enderror" required value="  {{ $client->nom }}">
                                @error("nom") <div class="invalid-feedback">{{$message}}</div> @enderror
                            </div>
                            <div class="col-sm-6">
                                <label for="prenoms" class="form-label">@lang('prenoms')</label>
                                <input disabled type="text" id="prenoms" name="prenoms" class="form-control @error("prenoms") is-invalid @enderror" required value="  {{ $client->prenoms }}">
                                @error("prenoms") <div class="invalid-feedback">{{$message}}</div> @enderror
                            </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 disabled 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}}" @if($client->pays_id == $pays->id) selected @endif>{{$pays->libelle}}</option>
                                    @endforeach
                                </select>
                                @error("pays_id") <div class="invalid-feedback">{{$message}}</div> @enderror
                            </div>
                    @endif
                            <div class="col-sm-6">
                                <label for="email" class="form-label">@lang('email')</label>
                                <input disabled type="text" id="email" name="email" class="form-control @error("email") is-invalid @enderror" required value="  {{ $client->email }}">
                                @error("email") <div class="invalid-feedback">{{$message}}</div> @enderror
                            </div>
                            <div class="col-sm-6">
                                <label for="login" class="form-label">@lang('tel')</label>
                                <input disabled type="text" id="login" name="login" class="form-control @error("login") is-invalid @enderror" required value="  {{ $client->login }}">
                                @error("login") <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="{{ $piecerectos ? asset('/images/'.$piecerectos['nom']) : 'https://caer.univ-amu.fr/wp-content/uploads/default-placeholder.png' }}"
                                             alt="preview image" style="max-height: 150px;">
                                         </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="{{ $pieceversos ? asset('/images/'.$pieceversos['nom']) : 'https://caer.univ-amu.fr/wp-content/uploads/default-placeholder.png' }}"
                                             alt="preview image" style="max-height: 150px;">
                                            </div>
                                </div>
                            </div>
                            <div class="col-12 mt-3">
                                <a href="{{ route("client.index") }}" class="btn btn-danger">Annuler</a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

                <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