@extends('layouts.admin')

@section('title') Update Profile @endsection

@section('page_title') Update Profile @endsection

@section('content')

@push('page_style')
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css">
@endpush

<section id="multiple-column-form">
    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0">Update Profile</h1>
                </div>

            </div>
        </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <form method="POST" action="/user/update-profile" enctype="multipart/form-data">
                    <div class="card-body">
                        @csrf

                        <div class="row">
                            <div class="col-lg-12">
                                <div class="profilrUploadd">
                                    <div class="uploadImg">
                                        <img id="profileImagePreview" src="{{!empty($userObject->profile_image) ? $userObject->profile_image : asset('frontend/img/editProfile.svg')}}" />
                                    </div>

                                    <div class="upload_button">

                                        <label for="file">

                                            <button class="fileUpload-button" type="button" id="dropdownMenuButton1" data-toggle="dropdown" " aria-expanded=" false">
                                                <img src="{{asset('frontend/img/editIcon.svg')}}" width=20 />

                                            </button>
                                            <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                                                <li class="dropdown-item d-flex">
                                                    <form method="POST" id="upload-profile" action="{{  route('user.uploadProfile') }}" enctype="multipart/form-data">
                                                        @csrf
                                                        <input type="file" id="profileImage" name="file" accept="image/png, image/jpeg" class="form-control d-none">
                                                        <label for="profileImage">
                                                            <span id="file-name" class="file-box d-none">Choose File</span>
                                                    </form>
                                                    <img src="{{asset('frontend/img/uploadNew.svg')}}" /><a href="#">Upload New Image</a>
                                        </label>
                                        </li>
                                        
                                        <li class="dropdown-item d-flex"><img src="{{asset('frontend/img/delete.svg')}}" />
                                            <a href="{{route('user.removeProfile')}}">Remove</a>
                                        </li>
                                        </ul>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="uploadform">
                            <div class="row">
                                <div class="col-md-6 col-12">
                                    <div class="form-group">
                                        <label class="form-label" for="first_name">First Name <span class="text-danger asteric-sign">&#42;</span></label>
                                        <input id="first_name" type="text" class="form-control {{ $errors->has('first_name') ? ' is-invalid' : '' }}" name="first_name" value="{{ (old('first_name')) ? (old('first_name')) : (!empty($userObject->first_name) ? $userObject->first_name : '') }}" placeholder="First Name">
                                        @if ($errors->has('first_name'))
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $errors->first('first_name') }}</strong>
                                        </span>
                                        @endif

                                    </div>
                                </div>
                                <div class="col-md-6 col-12">
                                    <div class="form-group">
                                        <label class="form-label" for="last_name">Last Name <span class="text-danger asteric-sign">&#42;</span></label>
                                        <input id="last_name" type="text" class="form-control {{ $errors->has('last_name') ? ' is-invalid' : '' }}" name="last_name" value="{{ (old('last_name')) ? (old('last_name')) : (!empty($userObject->last_name) ? $userObject->last_name :'') }}" placeholder="Last Name">
                                        @if ($errors->has('last_name'))
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $errors->first('last_name') }}</strong>
                                        </span>
                                        @endif

                                    </div>
                                </div>
                                <div class="col-md-6 col-12">
                                    <div class="form-group">
                                        <label class="form-label" for="email">Email <span class="text-danger asteric-sign">&#42;</span></label>
                                        <input id="email" type="email" {{(!empty(auth()->user() ? auth()->user()->isAdmin() :'')) ? '' : 'disabled=""'}} class="form-control {{ $errors->has('email') ? ' is-invalid' : '' }}" name="email" value="{{ (old('email')) ? (old('email')) : (!empty($userObject->email) ? $userObject->email :'') }}" placeholder="Enter Email">
                                        @if ($errors->has('email'))
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $errors->first('email') }}</strong>
                                        </span>
                                        @endif
                                    </div>

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

                                    <div class="form-group">
                                        <label class="form-label" for="phone_number">Phone Number </label><br>
                                        <input type="hidden" name="phone_code" id="phone_code" value="{{ (old('phone_code')) ? (old('phone_code')) : (!empty($userObject->phone_code) ? $userObject->phone_code :'') }}" />
                                        <input type="hidden" name="iso_code" id="iso_code" value="{{ (old('iso_code')) ? (old('iso_code')) : (!empty($userObject->iso_code) ? $userObject->iso_code :'') }}" />

                                        <input id="phone_number" type="text" class="form-control {{ $errors->has('phone_number') || $errors->has('phone_code') || $errors->has('iso_code') ? ' is-invalid' : '' }}" name="phone_number" value="{{ (old('phone_number')) ? (old('phone_number')) : (!empty($userObject->phone_number) ? $userObject->phone_number :'') }}">
                                        @if ($errors->has('phone_number'))
                                        <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $errors->first('phone_number') }}</strong>
                                        </span>
                                        @elseif($errors->has('phone_code'))
                                        <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $errors->first('phone_code') }}</strong>
                                        </span>
                                        @elseif($errors->has('iso_code'))
                                        <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $errors->first('iso_code') }}</strong>
                                        </span>
                                        @endif
                                    </div>
                                </div>

                                <div class="col-md-12 col-12">
                                    <button type="Submit" class="btn btn-commom me-1">Create & Submit</button>
                                </div>

                            </div>
                        </div>
                    </div>
            </div>
            </form>
        </div>
    </div>
    </div>



</section>


@push('page_script')

<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
<!-- bs-custom-file-input -->
<script src="{{ asset('plugins/bs-custom-file-input/bs-custom-file-input.min.js') }}"></script>

<script>
    var isoCode = ($("#iso_code").val()) ? ($("#iso_code").val()) : ('US');
    //  phone 1 input
    var phoneInput = document.querySelector("#phone_number");
    var phoneInstance = window.intlTelInput(phoneInput, {
        autoPlaceholder: "off",
        separateDialCode: true,
        initialCountry: isoCode
        // utilsScript: '{{URL::asset("frontend/build/js/utils.js")}}',
    });


    $("#phone_code").val(phoneInstance.getSelectedCountryData().dialCode);
    $("#iso_code").val(phoneInstance.getSelectedCountryData().iso2);
    phoneInput.addEventListener("countrychange", function() {
        $("#phone_code").val(phoneInstance.getSelectedCountryData().dialCode);
        $("#iso_code").val(phoneInstance.getSelectedCountryData().iso2);
    });

    $(function() {
        bsCustomFileInput.init();
    });

    // Disable inspect element
    $(document).bind("contextmenu", function(e) {
        e.preventDefault();
    });
    $(document).keydown(function(e) {
        if (e.which === 123) {
            return false;
        }
    });


    $(document).on('change', "#profileImage", function(event) {

        if (this.files[0]) {
            let fileSize = this.files[0].size;
            let fileSizeInKb = fileSize / 1024;
            let fileSizeLimit = 5120; // In KB

            if (fileSizeInKb > fileSizeLimit) {
                $(this).val('');

                toastr.error("File may not be greater than 5mb.", 'Error!', {
                    closeButton: true,
                    tapToDismiss: false
                });

                return false;
            } else {
                let imgSrc = URL.createObjectURL(event.target.files[0]);
                $('#profileImagePreview').attr('src', imgSrc);
                $('#profileImagePreview').removeClass('d-none');
            }
        } else {
            $(this).val('');
            $('#profileImagePreview').attr('src', '');
            $('#profileImagePreview').addClass('d-none');
        }

    });
</script>

@endpush

@endsection