@extends('layouts.app_new')
@section('title','Profile')
@section('content')
<div class="row  gutters justify-content-center flex-fill">
    <div class="col-md-12 col-sm-12 col-12">
        <div class="card shadow">
            <div class="card-body">
                <h5 class="text-primary card-title">{{ __('User Profile') }}</h5>
                <hr class="my-4">
                <form @if(!empty($user))action="{{ route('user.updateProfile') }}" @endif method="POST"
                    enctype="multipart/form-data">
                    @csrf
                    @if(!empty($user))
                    @method('PUT')
                    @endif
                    <div class="row my-2 gutters my-2">
                        <div class="col-xl-6 col-lg-6 col-md-6 col-12">
                            <div class="form-group">
                                <label for="name">{{ __('Name') }}</label>
                                <input type="text" class="form-control @error('name')is-invalid @enderror" id="name"
                                    name="name" placeholder="Enter full name" value="{{ $user->name??old('name') }}" disabled>
                                @error('name')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                        </div>
                        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
                            <div class="form-group">
                                <label for="email">{{ __('Email') }}</label>
                                <input type="email" dir="ltr" class="form-control @error('email') is-invalid @enderror" id="email"
                                    placeholder="Enter email ID" value="{{ $user->email??old('email') }}" name="email"
                                    @if(!empty($user))disabled readonly @endif>
                                @error('email')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                        </div>
                    </div>
                    {{-- @empty($user)
                    <div class="row my-2 mb-3">
                        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
                            <div class="form-group">
                                <label for="password">{{ __('Password') }}</label>


                                <input id="password" type="password"
                                    class="form-control @error('password') is-invalid @enderror" name="password"
                                    value="password" required autocomplete="new-password">
                                @error('password')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                        </div>
                        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12 align-self-end">
                            <p class="text-muted">{{__('the password is :')}} "password" {{ __('by default') }}</p>
                        </div>

                    </div>

                    @endempty --}}
                    <div class="row my-2 mb-3">
                        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
                            <div class="form-group">
                                <label for="ar_fname">
                                    {{ __('Ar first Name')}}</label>
                                <input id="ar_fname" type="text"
                                    class="form-control @error('ar_fname') is-invalid @enderror" name="ar_fname"
                                    value="{{$user->ar_fname?? old('ar_fname') }}" autocomplete="ar_fname" autofocus>
                                @error('ar_fname')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                        </div>
                        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
                            <div class="form-group">
                                <label for="en_fname">
                                    {{ __('En First Name')}}</label>
                                <input id="en_fname" type="text"
                                    class="form-control @error('en_fname') is-invalid @enderror" name="en_fname"
                                    value="{{$user->en_fname??old('en_fname') }}" autocomplete="en_fname" autofocus>
                                @error('en_fname')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="row my-2 mb-3">
                        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
                            <div class="form-group">
                                <label for="ar_lname">
                                    {{ __('Ar Last Name')}}</label>

                                <input id="ar_lname" type="text"
                                    class="form-control @error('ar_lname') is-invalid @enderror" name="ar_lname"
                                    value="{{$user->ar_lname?? old('ar_lname') }}" autocomplete="ar_lname" autofocus>
                                @error('ar_lname')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                        </div>

                        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
                            <div class="form-group">
                                <label for="en_lname">
                                    {{ __('En Last Name')}}</label>
                                <input id="en_lname" type="text"
                                    class="form-control @error('en_lname') is-invalid @enderror" name="en_lname"
                                    value="{{$user->en_lname??old('en_lname') }}" autocomplete="en_lname" autofocus>
                                @error('en_lname')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="row my-2 mb-3">
                        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
                            <div class="form-group">
                                <label for="ar_owner_name" F>
                                    {{ __('Ar Owner Name')}}</label>
                                <input id="ar_owner_name" type="text"
                                    class="form-control @error('ar_owner_name') is-invalid @enderror"
                                    name="ar_owner_name" value="{{$user->ar_owner_name??old('ar_owner_name') }}"
                                    autocomplete="ar_owner_name" autofocus>
                                @error('ar_owner_name')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                        </div>
                        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
                            <div class="form-group">
                                <label for="en_owner_name">
                                    {{ __('En Owner Name')}}</label>
                                <input id="en_owner_name" type="text"
                                    class="form-control @error('en_owner_name') is-invalid @enderror"
                                    name="en_owner_name" value="{{$user->en_owner_name??old('en_owner_name') }}"
                                    autocomplete="en_owner_name" autofocus>
                                @error('en_owner_name')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="row my-2 mb-3">
                        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
                            <div class="form-group">
                                <label for="birth_date">
                                    {{__('birth_date')}}</label>

                                <input id="birth_date" type="date"  max="9999-12-31" value="{{$user->birth_date??old('birth_date') }}"
                                    class="form-control @error('birth_date') is-invalid @enderror" name="birth_date"
                                    autocomplete="birth_date">

                                @error('birth_date')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                        </div>
                        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
                            <div class="form-group">
                                <label for="mobile">{{ __('mobile')}}</label>

                                <input id="mobile" type="text"
                                    class="form-control @error('mobile') is-invalid @enderror" name="mobile" dir="ltr"
                                    value="{{$user->mobile?? old('mobile') }}">

                                @error('mobile')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="row my-2 mb-3">
                        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
                            <div class="form-group">
                                <label for="country_id">{{ __('country')}}</label>
                                <select id="country_id"
                                    class="form-select select2 @error('country_id') is-invalid @enderror"
                                    name="country_id" style="width: 100%;" {{-- --}}>
                                    <option></option>
                                    @foreach ($countries as $country)
                                    <option value="{{ $country->id }}" @if((!empty($user) && $country->
                                        id==$user->country_id)||$country->id == old('country_id'))
                                        selected
                                        @endif>
                                        {{ $country->getName() }}
                                    </option>
                                    @endforeach
                                </select>
                                @error('country_id')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                        </div>
                        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
                            <div class="form-group">
                                <label for="city">{{ __('city') }}</label>

                                <select id="city" class="form-select select2 @error('city') is-invalid @enderror"
                                    name="city" style="width: 100%;" {{-- --}}>
                                    <option></option>
                                </select>
                                @error('city')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="row my-2 mb-3">
                        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
                            <div class="form-group">
                                <label for="ar_address">{{__('ar_address')}}</label>

                                <textarea id="ar_address" class="form-control @error('ar_address') is-invalid @enderror"
                                    name="ar_address"
                                    autocomplete="ar_address">{{$user->ar_address?? old('ar_address') }}</textarea>

                                @error('ar_address')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                        </div>
                        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
                            <div class="form-group">
                                <label for="en_address">{{__('en_address')}}</label>

                                <textarea id="en_address" class="form-control @error('en_address') is-invalid @enderror"
                                    name="en_address"
                                    autocomplete="en_address">{{$user->en_address?? old('en_address') }}</textarea>
                                @error('en_address')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror

                            </div>
                        </div>
                    </div>
                    <div class="row my-2 gutters my-2">
                        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
                            <div class="form-group">
                                <label for="image" class="col-md-2 col-sm-6 col-form-label text-md-right">
                                    {{ __('Image') }}
                                </label>
                                <input id="image" type="file" name="image" class="file col-12" accept="image/*" hidden>
                                <div class="input-group my-3">
                                    <input type="text" class="form-control rounded-0" disabled placeholder="Upload File"
                                        id="file">
                                    <button id="browse" type="button"
                                        class="browse btn btn-primary py-0 rounded-0 rounded-right">
                                        <span class="h4 m-0">+</span>
                                    </button>
                                </div>
                            </div>
                        </div>

                        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
                            <div class="form-group">
                                <div class=" bg-secondary d-flex justify-content-center align-items-center rounded-circle text-uppercase"
                                    style="height:150px;width: 150px;">
                                    @if(!empty($user->image))
                                    <img src="{{ asset('storage/profile/' . $user->image) }}" id="preview"
                                        class=" rounded-circle" style="height:150px;width: 150px;">
                                    @else
                                    <h1 id="h1">..</h1>
                                    <img src="." id="preview" class=" rounded-circle"
                                        style="height:150px;width: 150px;">
                                    @endif
                                </div>
                            </div>
                        </div>

                    </div>
                    {{-- @can('agent') --}}
                    {{-- <div class="row my-2 gutters my-2">
                        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
                            <div class="form-group">
                                <label for="image2" class="col-md-3 col-sm-6 col-form-label text-md-right">
                                    {{ __('Policy header') }}
                                </label>
                                <input id="image2" type="file" name="policy_header" class="file col-12" accept="image/*"
                                    hidden>
                                <div class="input-group my-3">
                                    <input type="text" class="form-control rounded-0" disabled placeholder="Upload File"
                                        id="file2">
                                    <button id="browse2" type="button"
                                        class="browse btn btn-primary py-0 rounded-0 rounded-right">
                                        <span class="h4 m-0">+</span>
                                    </button>
                                </div>
                            </div>
                        </div>

                        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
                            @if(!empty($user->policy_header))
                            <img src="{{asset('storage/policy_headers/'.$user->policy_header)}}" id="preview2" class="img-fluid">
                            @else
                            <img src="." id="preview2" class="img-fluid">
                            @endif
                        </div>
                    </div> --}}


                    {{-- <div class="row my-2 mb-2">
                        <div id="policy_header_div" class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
                            <div class="form-group mx-1">
                                <label class="form-label" for="policy_header">{{ _('policy_header') }}</label>
                                <input id="policy_header" type="file" accept="image/*" name="policy_header"
                                    class="form-control" required>
                            </div>
                        </div>
                        @if(!empty($user->policy_header))
                        <div class="col">
                            <img class="img-fluid p-4" src="{{asset('storage/policy_headers/'.$user->policy_header)}}">
                        </div>
                        @endif
                    </div> --}}
                    {{-- @endcan --}}
                    <div class="row my-2 gutters">
                        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                            {{-- <div class="text-end"> --}}
                                <a type="button" class="btn btn-secondary float-end mx-1" href="{{ route('home') }}">{{
                                    __('Cancel') }}</a>
                                <button class="btn btn-primary float-end mx-1" type="submit">@empty($user){{__('Save')}} @else{{
                                    __('Update') }}@endempty</button>
                            {{-- </div>
                            <div class="text-start"> --}}
                                <a type="button" class="btn btn-danger float-start mx-1" href="{{ route('password.request') }}">{{
                                    __('reset password') }}</a>
                            {{-- </div> --}}
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection
@section('script')
<script>
    // $(".select2").select2({             theme: 'bootstrap-5' });
    $("#country_id").select2({             theme: 'bootstrap-5' });
    $("#city").select2({             theme: 'bootstrap-5' ,tags:true});
</script>
<script>
    $(document).ready(function() {
        $('#parent_id').hide();
        $('#parent_label').hide();
        if ($('parent_id').data('select2')) {
        $('parent_id').select2('destroy');
        }
        getParents();

        $('#browse').click(function() {
            var file = $('#image');
            file.trigger("click");
        });
        if ($("#preview").attr("src") == ".") {
            // console.log($("#file").attr("src"));
            $("#preview").hide();
        }
        $('#image').change(function(e) {
            var fileName = e.target.files[0].name;
            $("#preview").show();
            $("#h1").hide();
            $("#file").val(fileName);

            var reader = new FileReader();
            reader.onload = function(e) {
                // get loaded data and render thumbnail.
                document.getElementById("preview").src = e.target.result;
            };
            // read the image file as a data URL.
            reader.readAsDataURL(this.files[0]);
        });

       $('#browse2').click(function() {
        var file2 = $('#image2');
        file2.trigger("click");
        });
        if ($("#preview2").attr("src") == ".") {
        // console.log($("#file2").attr("src"));
        $("#preview2").hide();
        }
        $('#image2').change(function(e) {
        var fileName = e.target.files[0].name;
        $("#preview2").show();

        $("#file2").val(fileName);

        var reader = new FileReader();
        reader.onload = function(e) {
        // get loaded data and render thumbnail.
        document.getElementById("preview2").src = e.target.result;
        };
        // read the image file as a data URL.
        reader.readAsDataURL(this.files[0]);
        });
    });

    $("#role").on('change',function(e){
        let myurl;
        $('#parent_id').hide();
        $('#parent_label').hide();
        $('#parent_id').empty();
        $('#parent_label').empty();
        if ($('parent_id').data('select2')) {
            $('parent_id').select2('destroy');
        }
        getParents();
    });

    function getParents(){
        if ($('parent_id').data('select2')) {
        $('parent_id').select2('destroy');
        }
        if($("#role").val()=='agent'||$("#role").val()=='agent_account'){
            $('#parent_id').show();
            $('#parent_label').show();

            if($("#role").val()=='agent'){
                myurl='{{route('json.salesmen')}}';
                $('#parent_label').html('{{__("Salesman")}}');
            }
            else{
                 myurl='{{route('json.agents')}}';
                $('#parent_label').html('{{__("Agent")}}');
            }
            $.ajax({
                type: "get",
                url: myurl,
                success:function(response){
                    if(response) {
                        var users=JSON.parse(response.users)
                        var options='';
                        users.forEach(user => {
                            options+=`<option value="${user.id}"> @if(app()->getLocale()=='ar') ${user.ar_fname+' '+user.ar_lname} @else ${user.en_fname+' '+user.en_lname} @endif </option>\n`
                        });
                        $("#parent_id").html(options);
                        $("#parent_id").select2({             theme: 'bootstrap-5' });
                    }
                },
                error: function(response) {
                    console.log(response.responseJSON);

                }
            });
        }
    }

    $("#country_id").on('change',function(e){
        cities(e);
    });

    function cities(params) {
        $.ajax({
            type: "POST",
                url: "{{route('json.cities')}}",
            data: {
                _token:$('meta[name="csrf-token"]').attr('content'),country_id:$("#country_id").val()
            },
            success:function(response){
                if(response) {
                    var cities=JSON.parse(response.cities)
                    var options='';
                    cities.forEach(city => {
                        console.log(city,options);
                        options+=`<option value="${city}">${city}</option>\n`
                    });
                    $("#city").html(options);
                }
            },
            error: function(response) {
                console.log(response.responseJSON);
            }
        });
    }
</script>
@endsection