@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::model($pointrelais, ['method' => 'PATCH','route' => ['pointrelais.update', $pointrelais->id],"enctype"=>"multipart/form-data"]) !!}
{{--                        <form class="row" action="{{ route("users.update",$user) }}" 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="{{ $user->photoprofile ? asset('/images/'.$user->photoprofile['nom']) : 'https://envato.appdevs.net/qrpay/public/backend/images/default/profile-default.webp' }}"
                                                  width="200px"></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 class="profile-content">
                                        <h6 class="username">{{ $user->nom }} </h6>
                                        <ul class="user-info-list mt-md-2">
                                            <li><i class="las la-envelope"></i>{{ $user->email }}</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        <div class="row">
                            <div class="col-xs-6 col-sm-6 col-md-6">

                                <div class="form-group">
                                    <label for="name" class="form-label">@lang('nom')</label>
                                    <input type="text" id="nom" name="nom" class="form-control @error("nom") is-invalid @enderror" required value="{{ $user->nom }}">
                                    @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="nom" class="form-label">@lang('prenoms')</label>--}}
{{--                                    <input type="text" id="prenoms" name="prenoms" class="form-control @error("prenoms") is-invalid @enderror" required value="{{ $user->prenoms }}">--}}
{{--                                    @error("prenoms") <div class="invalid-feedback">{{$message}}</div> @enderror--}}

{{--                                </div>--}}
{{--                            </div>--}}
                            <div class="col-sm-6">
                                <label for="date_naissance" class="form-label">@lang('date_naissance')</label>
                                <input  type="date" id="date_naissance" name="date_naissance" class="form-control @error("date_naissance") is-invalid @enderror" required value="{{ $user->date_naissance }}">
                                @error("date_naissance") <div class="invalid-feedback">{{$message}}</div> @enderror
                            </div>
                            <div class="col-sm-6">
                                <label for="lieu_naissance" class="form-label">@lang('lieu_naissance')</label>
                                <input  type="text" id="lieu_delivrance" name="lieu_naissance" class="form-control @error("lieu_naissance") is-invalid @enderror" required value="{{ $user->lieu_naissance }}">
                                @error("lieu_naissance") <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 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($user->pays->id == $pays->id) selected @endif>{{$pays->libelle}}</option>
                                    @endforeach
                                </select>
                                @error("pays_id") <div class="invalid-feedback">{{$message}}</div> @enderror
                            </div>
                    @endif
                            @if(\Illuminate\Support\Facades\Auth::user()->pays_id ==null)
                                <div class="col-sm-6" >
                                    <label for="zone_id" class="form-label">@lang("zone_id")</label>
                                    <select  id="zone_id" name="zone_id" class="form-control zone_id select2 @error("zone_id") is-invalid @enderror">
                                        <option value=""> ---- @lang("zone_id") ----</option>
                                    </select>
                                    @error("zone_id") <div class="invalid-feedback">{{$message}}</div> @enderror
                                </div>
                            @else
                                <div class="col-sm-6" >
                                    <label for="zone_id" class="form-label">@lang("zone_id")</label>
                                    <select  id="zone_id" name="zone_id" class="form-control select2 @error("zone_id") is-invalid @enderror">
                                        <option value=""> ---- @lang("zone_id") ----</option>
                                        @foreach ( $zones as $zone)
                                            <option value="{{$zone->id}}" @if($pointrelais->zone->id == $zone->id) selected @endif>{{$zone->libelle}}</option>
                                        @endforeach
                                    </select>
                                    @error("zone_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 type="email" id="email" name="email" class="form-control @error("email") is-invalid @enderror" required value="{{ $user->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>
{{--                                    {!! Form::text('login', null, array('placeholder' => 'Login','class' => 'form-control')) !!}--}}
                                    <input type="tel" id="login" name="login" disabled class="form-control @error("login") is-invalid @enderror"  value="{{ $user->login }}">
                                    @error("login") <div class="invalid-feedback">{{$message}}</div> @enderror

                                </div>
                            </div>


                            <div class="col-sm-6" >
                                <label for="type_piece_id" class="form-label">@lang("type_piece_id")</label>
                                <select  id="type_piece_id" name="type_piece_id" class="form-control select2 @error("type_piece_id") is-invalid @enderror">
                                    <option value=""> ---- @lang("type_piece_id") ----</option>
                                    @foreach ( $typieces as $typiece)
                                        <option value="{{$typiece->id}}" @if($user->typePiece->id == $typiece->id) selected @endif>{{$typiece->libelle??""}}</option>
                                    @endforeach
                                </select>
                                @error("type_piece_id") <div class="invalid-feedback">{{$message}}</div> @enderror
                            </div>
                            <div class="col-sm-6">
                                <label for="numero_piece" class="form-label">@lang('numero_piece')</label>
                                <input  type="text" id="numero_piece" name="numero_piece" class="form-control @error("numero_piece") is-invalid @enderror" required value="{{ $user->numero_piece }}">
                                @error("numero_piece") <div class="invalid-feedback">{{$message}}</div> @enderror
                            </div>
                            <div class="col-sm-6">
                                <label for="date_delivrance" class="form-label">@lang('date_delivrance')</label>
                                <input  type="date" id="date_delivrance" name="date_delivrance" class="form-control @error("date_delivrance") is-invalid @enderror" required value="{{ $user->date_delivrance }}">
                                @error("date_delivrance") <div class="invalid-feedback">{{$message}}</div> @enderror
                            </div>
                            <div class="col-sm-6">
                                <label for="lieu_delivrance" class="form-label">@lang('lieu_delivrance')</label>
                                <input  type="text" id="lieu_delivrance" name="lieu_delivrance" class="form-control @error("lieu_delivrance") is-invalid @enderror" required value="{{ $user->lieu_delivrance }}">
                                @error("lieu_delivrance") <div class="invalid-feedback">{{$message}}</div> @enderror
                            </div>
                            <div class="col-sm-6">
                                <label for="ville" class="form-label">@lang('ville')</label>
                                <input  type="text" id="ville" name="ville" class="form-control @error("ville") is-invalid @enderror" required value="{{ $user->ville }}">
                                @error("ville") <div class="invalid-feedback">{{$message}}</div> @enderror
                            </div>
                            <div class="payment-inner-header" style="margin-top: 20px">
                                <h6 class="inner-title">Document administratif</h6>
                            </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">
                                        <a href="{{ $piecerectos ? url('/images/'.$piecerectos['nom']) : '#' }}" class="popup-image" download oncontextmenu="return false;">
                                            <img class="images-preview-piecerecto_id" id="preview-image-before-upload" src="{{ $piecerectos ? url('/images/'.$piecerectos['nom']) : 'https://caer.univ-amu.fr/wp-content/uploads/default-placeholder.png' }}"
                                                 alt="preview image" style="max-height: 150px;">
                                        </a>
                                        <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">
                                        <a href="{{ $pieceversos ? url('/images/'.$pieceversos['nom']) : '#' }}" class="popup-image" download oncontextmenu="return false;">
                                            <img class="images-preview-pieceverso_id" id="preview-image-before-upload" src="{{ $pieceversos ? url('/images/'.$pieceversos['nom']) : 'https://caer.univ-amu.fr/wp-content/uploads/default-placeholder.png' }}"
                                                 alt="preview image" style="max-height: 150px;">
                                        </a>
                                        <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="row">
                                <div class="col-6" style="padding-top: 8px">
                                    <label class="form-label">@lang("rccm_id")</label>
                                    <div class="z-depth-1-half mb-3">
                                        <a href="{{ $rccms ? url('/images/'.$rccms['nom']) : '#' }}" class="popup-image" download oncontextmenu="return false;">
                                            <img class="images-preview-rccm_id" id="preview-image-before-upload" src="{{ $rccms ? url('/images/'.$rccms['nom']) : 'https://caer.univ-amu.fr/wp-content/uploads/default-placeholder.png' }}"
                                                 alt="preview image" style="max-height: 150px;">
                                        </a>
                                        <input id="rccm_id" type="file" name="rccm_id" class="form-control  @error("rccm_id") is-invalid @enderror" placeholder="photo">

                                    </div>
                                </div>
                                <div class="col-6" style="padding-top: 8px">
                                    <label class="form-label">@lang("dfe_id")</label>
                                    <div class="z-depth-1-half mb-3">
                                        <a href="{{ $dfes ? url('/images/'.$dfes['nom']) : '#' }}" class="popup-image" download oncontextmenu="return false;">
                                            <img class="images-preview-dfe_id" id="preview-image-before-upload" src="{{ $dfes ? url('/images/'.$dfes['nom']) : 'https://caer.univ-amu.fr/wp-content/uploads/default-placeholder.png' }}"
                                                 alt="preview image" style="max-height: 150px;">
                                        </a>
                                        <input id="dfe_id" type="file" name="dfe_id" class="form-control  @error("dfe_id") is-invalid @enderror" placeholder="photo">

                                    </div>
                                </div>

                            </div>
                            </div>
                            <input type="number" hidden  id="version" name="version" class="form-control" value="{{ $user->version }}">
                            <input type="hidden" id="idModel" name="id" class="form-control" value="{{ $pointrelais->id }}">
                            <div class="col-12 mt-3">
                                <a href="{{ route("pointrelais.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>
        </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');
        });
        $('#rccm_id').on('change', function() {
            previewImages(this, 'img.images-preview-rccm_id');
        });
        $('#dfe_id').on('change', function() {
            previewImages(this, 'img.images-preview-dfe_id');
        });
    });
</script>

    <script>

    $(document).ready(async function(){
        let modelId = $('#idModel').val();
        let pays = $('#pays_id').val();

        if(pays != '') {
                var select = $(this).attr("id");
                var value = $(this).val();
                var dependentZone = 'zone_id';
                var _token = $('input[name="_token"]').val();
                $.ajax({
                    url: "{{ route('dynamicdependent.fetch.zones') }}",
                    method: "POST",
                    data: {select: select, value: value, _token: _token, model: modelId},
                    success: function (result) {
                        $('.' + dependentZone).html(result);
                    }
                })

        }
        $('#pays_id').change(function(){
            if($(this).val() != '')
            {
                var select = $(this).attr("id");
                var value = $(this).val();
                var dependentZone = 'zone_id';
                var _token = $('input[name="_token"]').val();
                $.ajax({
                    url:"{{ route('dynamicdependent.fetch.zones') }}",
                    method:"POST",
                    data:{select:select, value:value, _token:_token},
                    success:function(result)
                    {
                        $('.'+dependentZone).html(result);
                    }
                })
            }
        });
    });


    </script>
@endsection