@extends('adminlte::page')

@section('title', 'Profile')
<style>
    .form-control{height: 100% !important;}
</style>
@section('content_header')
<!-- <h1>Profile</h1> -->
@stop
@section('content')
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>Profile</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="{{ route('admin.home') }}">Home</a></li>
                    <li class="breadcrumb-item active">Profile</li>
                </ol>
            </div>
        </div>
    </div><!-- /.container-fluid -->
</section>

<!-- Main content -->
<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-4">
                <!-- Profile Image -->
                <div class="card card-primary card-outline">
                    <div class="card-body box-profile">
                        <!-- <div class="text-center">
                            <a href="#" class="pop_image"><img class="profile-user-img img-fluid img-circle" src="{{ ($data['avatar']) }}" alt="User profile picture"></a>
                        </div> -->

                        <h3 class="profile-username text-center">{{ $data['name'] }}</h3>

                        <p class="text-muted text-center"></p>

                        <ul class="list-group list-group-unbordered mb-3">
                            <li class="list-group-item">
                                <b>Email :</b> <a class="float-right">{{ $data['email'] }}</a>
                            </li>
                            <li class="list-group-item">
                                <b>Phone :</b> <a class="float-right">{{ $data['phone_country_code'] }}
                                    {{ $data['phone'] }}</a>
                            </li>
                            {{--<li class="list-group-item">
                                <b>Language :</b>
                                @if(is_array($data['language']))
                                @foreach($data['language'] as $lang)
                                <a class="float-right">{{ $lang}}</a>
                                @endforeach
                                @else
                                <a class="float-right">{{$data['language']}}</a>
                                @endif
                            </li>--}}
                        </ul>

                        <a href="#" class="btn btn-primary btn-block" id="edit_profile"><b>Edit Profile</b></a>
                    </div>
                    <!-- /.card-body -->
                </div>
                <!-- /.card -->


            </div>
            <!-- /.col -->
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header p-2">
                        <ul class="nav nav-pills">
                            <!-- <li class="nav-item"><a class="nav-link active" href="#activity" data-toggle="tab">Activity</a></li> -->
                            <!-- <li class="nav-item"><a class="nav-link" href="#timeline" data-toggle="tab">Timeline</a></li> -->
                            <li class="nav-item"><a class="nav-link active" href="#settings"
                                    data-toggle="tab">Settings</a></li>
                            <li class="nav-item"><a class="nav-link" href="#change_password" data-toggle="tab">Change
                                    Password</a></li>
                        </ul>
                    </div><!-- /.card-header -->

                    @if (Session::has('error'))
                    <!-- <div class="alert alert-warning alert-dismissible fade show" role="alert"> -->
                    <p style="color:red; text-align:center;"><strong>{{ session()->get('error') }}</strong></p>
                    <!-- <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                      <span aria-hidden="true">&times;</span>
                                    </button> -->
                    <!-- </div> -->
                    @endif
                    @if (session()->has('success'))
                    <!-- <div class="alert alert-success" role="alert"> -->
                    <!-- <h5 class="alert-heading" style="color:green; text-align:center;">Well done !!!</h5> -->
                    <p style="color:green; text-align:center;"><strong>{{ session()->get('success') }}</strong>
                    </p>
                    <!-- </div> -->
                    @endif
                    @if (Session::has('password_change_error'))
                    <p style="color:red; text-align:center;"><strong>{{ session()->get('password_change_error')
                            }}</strong></p>
                    @endif
                    @if (session()->has('password_change_success'))
                    <p style="color:green; text-align:center;"><strong>{{ session()->get('password_change_success')
                            }}</strong>
                    </p>
                    @endif

                    <div class="card-body">
                        <div class="tab-content">

                            <div class="active tab-pane" id="settings">
                                <form id="update_profile_frm" class="form-horizontal"
                                    action="{{ route('admin.profile.update') }}" method="post">
                                    @csrf

                                    <h4 class="profile-username text-center">Edit Profile</h4></br>

                                    <input type="hidden" name="id" id="id" value="{{ $data['id'] }}">
                                    <div class="form-group row">
                                        <label for="name" class="col-sm-3 col-form-label">Name :</label>
                                        <div class="col-sm-9">
                                            <input type="text" class="form-control" name="name" id="name"
                                                value="{{ $data['name'] }}" placeholder="Name">

                                            <p id="nameErr" class="text-danger name"
                                                style="font-style: italic; font-size: small;"></p>
                                        </div>

                                    </div>



                                    <div class="form-group row" id="emailIdEdit">
                                        <label for="email" class="col-sm-3 col-form-label">Email :</label>
                                        <div class="col-sm-9">
                                            <input type="email" class="form-control" name="email" id="email"
                                                value="{{ $data['email'] }}" placeholder="Email">

                                            <p id="emailErr" class="text-danger name"
                                                style="font-style: italic; font-size: small;"></p>
                                        </div>

                                    </div>
                                    <!-- <div class="form-group row" id="phoneCountryCodeEdit">
                                        <label for="phone_country_code" class="col-sm-3 col-form-label">Country Code :</label>
                                        <div class="col-sm-9">
                                            <input type="text" class="form-control" name="phone_country_code" id="phone_country_code"
                                                value="{{$data['phone_country_code']}}" placeholder="Enter phone country code.">




                                            <p id="phoneCountryCodeErr" class="text-danger name" style="font-style: italic; font-size: small;"></p>
                                        </div>
                                    </div> -->
                                    <div class="form-group row" id="phoneNoEdit">
                                        <label for="phone" class="col-sm-3 col-form-label">Contact No :</label>
                                        <div class="col-sm-9">
                                            <input type="text" class="form-control" name="phone" id="phone"
                                                value="{{ $data['phone'] }}" placeholder="Contact No.">

                                            <p id="phoneErr" class="text-danger name"
                                                style="font-style: italic; font-size: small;"></p>
                                        </div>
                                    </div>


                                    <!-- <div class="form-group row">
                                        <div class="col-sm-3">
                                            <label for="avatar">Profile Pic :</label>
                                        </div>
                                        <div class="col-sm-9">
                                            <div class="input-group">
                                                <div class="custom-file">
                                                    <input type="file" class="custom-file-input" name="avatar" id="avatar">
                                                    <label class="custom-file-label" for="avatar">Choose
                                                        Picture</label>
                                                </div>
                                                
                                            </div>
                                            
                                            <p id="avatarErr" class="text-danger name" style="font-style: italic; font-size: small;"></p>
                                            <br>
                                            <div class="uploadedImgDiv">
                                                <a href="#" class="pop_image"><img id="uploadedImg" src="{{ $data['avatar'] }}" height="100" width="100" alt="Image"></a>
                                                <a href="#" class="pop_image"><img id="uploadImg" src="" alt="Image" style="display: none;" /></a>
                                            </div>
                                        </div>
                                    </div> -->

                                    <div class="form-group row">
                                        <div class="offset-sm-2 col-sm-10">
                                            <button type="submit" id="submit" class="btn btn-danger"
                                                style="float:right;"><span>Update</span></button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <!-- /.tab-pane -->

                            <div class="tab-pane" id="change_password">
                                <form id="change_password_frm" action="{{ route('admin.changePassword') }}"
                                    method="post">
                                    @csrf
                                    <div class="form-group row">
                                        <label class="col-sm-3 col-form-label">Email :</label>
                                        <div class="col-sm-9">
                                            <input type="email" class="form-control" name="email" id="email1"
                                                value="{{ $data['email'] }}" readonly>
                                            <p id="email1Err" class="text-danger"
                                                style="font-style: italic; font-size: small;"></p>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label class="col-sm-3 col-form-label">Current Password :</label>
                                        <div class="col-sm-9 position-relative">

                                            <input type="password" class="form-control" name="current_password"
                                                id="current_password">

                                            <!-- Eye Icon -->
                                            <span class="toggle-password" data-target="current_password"
                                                style="position:absolute; top:50%; right:10px; transform:translateY(-50%); cursor:pointer;">
                                                <i class="fa fa-eye"></i>
                                            </span>

                                            <p id="currentPasswordErr" class="text-danger"
                                                style="font-style: italic; font-size: small;"></p>
                                        </div>
                                    </div>


                                    <div class="form-group row">
                                        <label class="col-sm-3 col-form-label">New Password :</label>
                                        <div class="col-sm-9 position-relative">

                                            <input type="password" class="form-control" name="new_password"
                                                id="new_password">

                                            <!-- Eye Icon -->
                                            <span class="toggle-password" data-target="new_password"
                                                style="position:absolute; top:50%; right:10px; transform:translateY(-50%); cursor:pointer;">
                                                <i class="fa fa-eye"></i>
                                            </span>

                                            <p id="newPasswordErr" class="text-danger"
                                                style="font-style: italic; font-size: small;"></p>
                                        </div>
                                    </div>


                                    <div class="form-group row">
                                        <label class="col-sm-3 col-form-label">Confirm Password :</label>
                                        <div class="col-sm-9 position-relative">

                                            <input type="password" class="form-control" name="confirm_password"
                                                id="confirm_password">

                                            <!-- Eye Icon -->
                                            <span class="toggle-password" data-target="confirm_password"
                                                style="position:absolute; top:50%; right:10px; transform:translateY(-50%); cursor:pointer;">
                                                <i class="fa fa-eye"></i>
                                            </span>

                                            <p id="confirmPasswordErr" class="text-danger"
                                                style="font-style: italic; font-size: small;"></p>
                                        </div>
                                    </div>


                                    <div class="form-group row">
                                        <div class="offset-sm-3 col-sm-9 d-flex justify-content-end">
                                            <button type="submit" id="changePassword"
                                                class="btn btn-danger"><span>Change Password</span></button>
                                        </div>
                                    </div>
                                </form>

                            </div>
                            <!-- /.tab-pane -->
                        </div>
                        <!-- /.tab-content -->
                    </div><!-- /.card-body -->
                </div>
                <!-- /.card -->
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </div><!-- /.container-fluid -->

    <div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content" style="min-width: 700px;">
                <div class="modal-body">
                    <button type="button" class="close" data-dismiss="modal" id="close_popup"><span
                            aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <img src="" class="imagepreview" style="width: 100%;">
                </div>
            </div>
        </div>
    </div>

</section>
<!-- /.content -->
<style>
    .select2-container--default .select2-selection--single {
        height: 35px;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 35px;
    }
</style>
@stop

@section('js')

<script type="text/javascript">
    $(document).ready(function () {

        //Initialize Select2 Elements
        // $('.select2').select2()

        $('#name').prop("readonly", true);
        $('#email').prop("readonly", true);
        $('#phone_country_code').prop("disabled", true);
        $('#phone').prop("readonly", true);
        $('#language').prop("disabled", true);
        $('#avatar').prop("disabled", true);
        $('#uploadedImg').hide();
        //$('#submit').prop("diabled", true);
        $('#submit').css("display", "none");

        $("#edit_profile").click(function (e) {
            e.preventDefault();

            $('#name').prop("readonly", false);
            $('#email').prop("readonly", false);
            $('#phone_country_code').prop("disabled", false);
            $('#phone').prop("readonly", false);
            $('#language').prop("disabled", false);
            $('#avatar').prop("disabled", false);
            $('#uploadedImg').show();
            //$('#submit').prop("diabled", false);
            $('#submit').css("display", "block");

        });

        // $("#ph").prop("checked", true); 
        // $("#emailId").hide();
        // $("#email").val('');  
        // $("#password").val('');  
        // $("#phoneCountryCode").show();
        // $("#phoneNo").show();

        // var contact_type = $("#contact_type_edit").val(); 

        // if(contact_type == 'Phone'){
        //     $("#ph_edit").prop('checked',true);
        //     $("#em_edit").prop('checked',false);
        //     $("#email_edit").val('');
        // } else {
        //     if(contact_type == 'Email'){
        //         $("#em_edit").prop('checked',true);
        //         $("#ph_edit").prop('checked',false);
        //         $("#phone_edit").val('');
        //         $("#phone_country_code_edit").val('');
        //     }
        // }

        // if($("#ph_edit").is(":checked")) {
        //     $("#emailIdEdit").hide();
        //     $("#email").val('');
        //     $("#phoneCountryCodeEdit").show();  
        //     $("#phoneNoEdit").show();  

        // } else {
        //     $("#emailIdEdit").show();
        //     $("#phoneCountryCodeEdit").hide();
        //     $("#phone_country_code").val('');
        //     $("#phoneNoEdit").hide();
        //     $("#phone").val('');
        // }

        // if($("#em_edit").is(":checked")) {
        //     $("#emailIdEdit").show();
        //     $("#phoneCountryCodeEdit").hide();
        //     $("#phone_country_code").val('');
        //     $("#phoneNoEdit").hide();
        //     $("#phone").val('');
        // } else {
        //     $("#emailIdEdit").hide();
        //     $("#email").val('');
        //     $("#phoneCountryCodeEdit").show();  
        //     $("#phoneNoEdit").show();  
        // }

        // $("#ph_edit").click(function() {
        //     if($(this).is(":checked")) {
        //         $("#emailIdEdit").hide();
        //         $("#email").val('');
        //         $("#phoneCountryCodeEdit").show();  
        //         $("#phoneNoEdit").show();  

        //     } else {
        //         $("#emailIdEdit").show();
        //         $("#phoneCountryCodeEdit").hide();
        //         $("#phone_country_code").val('');
        //         $("#phoneNoEdit").hide();
        //         $("#phone").val('');
        //     }
        // });

        // $("#em_edit").click(function() {
        //     if($(this).is(":checked")) {
        //         $("#emailIdEdit").show();
        //         $("#phoneCountryCodeEdit").hide();
        //         $("#phone_country_code").val('');
        //         $("#phoneNoEdit").hide();
        //         $("#phone").val('');
        //     } else {
        //         $("#emailIdEdit").hide();
        //         $("#email").val('');
        //         $("#phoneCountryCodeEdit").show();  
        //         $("#phoneNoEdit").show();  
        //     }
        // });

        $("#settings").click(function (e) {
            var isReadonly = $("#name").attr('readonly');
            // alert(isReadonly);
            if (isReadonly) {
                alertify.set('notifier', 'position', 'top-right');
                alertify.error('You have to Click "Edit Profile" button first !!!');
            }
        });

        $("#update_profile_frm").submit(function (event) {
            event.preventDefault();
            submitForm = $(this);
            submitBtn = $(this).find('#submit');
            $.ajax({
                url: $(this).attr('action'),
                data: new FormData(this),
                type: 'post',
                dataType: 'json',
                cache: false,
                contentType: false,
                processData: false,

                success: function (msg) {
                    // $("#loader").css("display", 'none');
                    submitBtn.attr("disabled", false).find('span').text('Update');

                    submitForm.find("#nameErr").text('');
                    submitForm.find("#emailErr").text('');
                    submitForm.find("#phoneCountryCodeErr").text('');
                    submitForm.find("#phoneErr").text('');
                    submitForm.find("#languageErr").text('');
                    submitForm.find("#avatarErr").text('');

                    submitForm.find("#name").removeClass('is-invalid').addClass('is-valid');
                    submitForm.find("#email").removeClass('is-invalid').addClass(
                        'is-valid');
                    submitForm.find("#phone_country_code").removeClass('is-invalid').addClass(
                        'is-valid');
                    submitForm.find("#phone").removeClass('is-invalid').addClass(
                        'is-valid');
                    submitForm.find("#language").removeClass('is-invalid').addClass(
                        'is-valid');
                    submitForm.find("#avatar").removeClass('is-invalid').addClass(
                        'is-valid');

                    if (msg.status != 200) {
                        alertify.set('notifier', 'position', 'top-right');
                        alertify.error(msg.msg);

                        $.each(msg.errors.name, function (i) {
                            submitForm.find("#nameErr").text(msg.errors.name[i]);
                            submitForm.find("#name").removeClass('is-valid')
                                .addClass('is-invalid');
                        });
                        $.each(msg.errors.email, function (i) {
                            submitForm.find("#emailErr").text(msg.errors.email[i]);
                            submitForm.find("#email").removeClass('is-valid')
                                .addClass('is-invalid');
                        });
                        $.each(msg.errors.phone_country_code, function (i) {
                            submitForm.find("#phoneCountryCodeErr").text(msg.errors.phone_country_code[i]);
                            submitForm.find("#phone_country_code").removeClass('is-valid')
                                .addClass('is-invalid');
                        });
                        $.each(msg.errors.phone, function (i) {
                            submitForm.find("#phoneErr").text(msg.errors.phone[i]);
                            submitForm.find("#phone").removeClass('is-valid')
                                .addClass('is-invalid');
                        });
                        $.each(msg.errors.language, function (i) {
                            submitForm.find("#languageErr").text(msg.errors.language[i]);
                            submitForm.find("#language").removeClass('is-valid')
                                .addClass('is-invalid');
                        });


                        $.each(msg.errors.avatar, function (i) {
                            submitForm.find("#avatarErr").text(msg.errors.avatar[
                                i]);
                            submitForm.find("#avatar").removeClass('is-valid')
                                .addClass('is-invalid');
                        });


                    } else if (msg.status == 200) {
                        alertify.set('notifier', 'position', 'top-right');
                        alertify.success(msg.msg);

                        $('#uploadedImg').attr('src', '').width(100).height(100).css(
                            'display', 'none');
                        $('#uploadImg').attr('src', msg.image).width(100).height(100);

                        submitForm.trigger('reset');

                        setTimeout(function () {
                            location.reload();
                            window.location.href = "{{ route('admin.profile') }}";
                        }, 1000);

                    }
                }
            });
        });

        // $("#change_password_frm").submit(function(event) {
        //     event.preventDefault();
        //     submitForm = $(this);
        //     submitBtn = $(this).find('#submit');
        //     $.ajax({
        //         url: $(this).attr('action'),
        //         data: new FormData(this),
        //         type: 'post',
        //         dataType: 'json',
        //         cache: false,
        //         contentType: false,
        //         processData: false,

        //         success: function(msg) {
        //             // $("#loader").css("display", 'none');
        //             submitBtn.attr("disabled", false).find('span').text('Change Password');

        //             submitForm.find("#email1Err").text('');
        //             submitForm.find("#currentPasswordErr").text('');
        //             submitForm.find("#newPasswordErr").text('');
        //             submitForm.find("#confirmPasswordErr").text('');

        //             submitForm.find("#email1").removeClass('is-invalid').addClass(
        //                 'is-valid');
        //             submitForm.find("#current_password").removeClass('is-invalid').addClass(
        //                 'is-valid');
        //             submitForm.find("#new_password").removeClass('is-invalid').addClass(
        //                 'is-valid');
        //             submitForm.find("#confirm_password").removeClass('is-invalid').addClass(
        //                 'is-valid');

        //             if (msg.status != 200) {
        //                 alertify.set('notifier', 'position', 'top-right');
        //                 alertify.error(msg.msg);

        //                 $.each(msg.errors.email, function(i) {
        //                     submitForm.find("#email1Err").text(msg.errors.email[i]);
        //                     submitForm.find("#email1").removeClass('is-valid')
        //                         .addClass('is-invalid');
        //                 });
        //                 $.each(msg.errors.current_password, function(i) {
        //                     submitForm.find("#currentPasswordErr").text(msg.errors
        //                         .current_password[i]);
        //                     submitForm.find("#current_password").removeClass(
        //                         'is-valid').addClass('is-invalid');
        //                 });
        //                 $.each(msg.errors.new_password, function(i) {
        //                     submitForm.find("#newPasswordErr").text(msg.errors
        //                         .new_password[i]);
        //                     submitForm.find("#new_password").removeClass('is-valid')
        //                         .addClass('is-invalid');
        //                 });

        //                 $.each(msg.errors.confirm_password, function(i) {
        //                     submitForm.find("#confirmPasswordErr").text(msg.errors
        //                         .confirm_password[i]);
        //                     submitForm.find("#confirm_password").removeClass(
        //                         'is-valid').addClass('is-invalid');
        //                 });


        //             } else if (msg.status == 200) {
        //                 alertify.set('notifier', 'position', 'top-right');
        //                 alertify.success(msg.msg);

        //                 submitForm.trigger('reset');

        //                 setTimeout(function() {
        //                     location.reload();
        //                     window.location.href = "{{ route('admin.profile') }}";
        //                 }, 1000);

        //             }
        //         }
        //     });
        // });

        $("#change_password_frm").submit(function (event) {
            event.preventDefault();

            let submitForm = $(this);
            let submitBtn = submitForm.find('#changePassword');
            submitBtn.prop("disabled", true).find('span').text('Processing...');

            // Clear previous errors
            submitForm.find(".text-danger").text('');
            submitForm.find("input").removeClass('is-invalid is-valid');

            $.ajax({
                url: submitForm.attr('action'),
                data: new FormData(this),
                type: 'POST',
                dataType: 'json',
                cache: false,
                contentType: false,
                processData: false,
                success: function (response, textStatus, xhr) {
                    submitBtn.prop("disabled", false).find('span').text('Change Password');

                    // Success 200
                    if (xhr.status === 200) {
                        alertify.set('notifier', 'position', 'top-right');
                        alertify.success(response.msg);
                        submitForm.trigger('reset');

                        setTimeout(function () {
                            window.location.href = "{{ route('admin.profile') }}";
                        }, 1000);
                    }
                },
                error: function (xhr) {
                    submitBtn.prop("disabled", false).find('span').text('Change Password');
                    let res = xhr.responseJSON;

                    alertify.set('notifier', 'position', 'top-right');
                    alertify.error(res.msg);

                    if (res.errors) {
                        // Show validation errors
                        if (res.errors.email) {
                            submitForm.find("#email1Err").text(res.errors.email[0]);
                            submitForm.find("#email1").addClass('is-invalid');
                        }
                        if (res.errors.current_password) {
                            submitForm.find("#currentPasswordErr").text(res.errors.current_password[0]);
                            submitForm.find("#current_password").addClass('is-invalid');
                        }
                        if (res.errors.new_password) {
                            submitForm.find("#newPasswordErr").text(res.errors.new_password[0]);
                            submitForm.find("#new_password").addClass('is-invalid');
                        }
                        if (res.errors.confirm_password) {
                            submitForm.find("#confirmPasswordErr").text(res.errors.confirm_password[0]);
                            submitForm.find("#confirm_password").addClass('is-invalid');
                        }
                    }
                }
            });
        });

        $('#avatar').change(function () {
            var imgPath = $(this)[0].value;
            var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
            if (extn == "png" || extn == "jpg" || extn == "jpeg" || extn == "gif") {

                var reader = new FileReader();
                reader.onload = function (e) {
                    $('#uploadImg').css('display', 'inline-block');
                    $('#uploadImg').attr('src', e.target.result).width(100).height(100);
                }

                reader.readAsDataURL($(this)[0].files[0]);
            }
        });

        $('body').on('click', '.pop_image', function (e) {
            e.preventDefault();
            $('.imagepreview').attr('src', $(this).find('img').attr('src'));
            $('#imagemodal').modal('show');
        });

        $('body').on('click', '#close_popup', function (e) {
            e.preventDefault();
            $('#imagemodal').modal('hide');
        });


    });




    // -- eye icon 
    $(document).on("click", ".toggle-password", function () {
        let field = $("#" + $(this).data("target"));

        if (field.attr("type") === "password") {
            field.attr("type", "text");
            $(this).find("i").removeClass("fa-eye").addClass("fa-eye-slash");
        } else {
            field.attr("type", "password");
            $(this).find("i").removeClass("fa-eye-slash").addClass("fa-eye");
        }
    });

</script>

@stop