@extends('admin.admin')
@section('adminContent')



<style>
        .profile {
        border-radius: 10px;
    }

    @media (max-width:700px) {
        .profile {
            height: 100px;
            width: 100px !important;
        }
    }

    @media (max-width:1100px) {
        .profile {
            height: 180px;
            width: 180px !important;
        }
    }

    @media (min-width:1101px) {
        .profile {
            height: 250px;
            width: 250px !important;

        }
    }
</style>
<!-- ============================================================== -->
<!-- Bread crumb and right sidebar toggle -->
<!-- ============================================================== -->
<div class="row mb-0 page-titles">
    <div class="col-md-12 align-self-center">
        <h3 class="text-themecolor">Admin Profile</h3>
    </div>

</div>
<!-- ============================================================== -->
<!-- End Bread crumb and right sidebar toggle -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Container fluid  -->
<!-- ============================================================== -->
<div class="container-fluid">
    <!-- ============================================================== -->
    <!-- Start Page Content -->
    <!-- ============================================================== -->
    <!-- Row -->
    <section class="about-us padding-section">
        <div class="container">
            <!--@if($message=Session::get('success'))-->
            <!--<div class="alert alert-success" role="alert">-->
            <!--    {{$message}}-->
            <!--</div>-->
            <!--@endif-->

            <div class="row py-4">
                <div class="col-sm-6 align-middle mt-md-3">
                    <div class="text-center ">
                        @if($data->profile)
                        <img src="{{asset('storage/uploads/admin/profile/'.$data['profile'])}}" class=" rounded-xl profile " style="max-height:250px;min-height:100px;width:auto;" alt="" srcset="">
                        @else
                        <img src="https://www.sriseva.org/public/assets/img/unknown.webp" class=" rounded-xl " style="max-height:250px;min-height:100px;width:auto;" alt="" srcset="">
                        @endif
                        <form id='picform'>
                            @csrf
                            <label for="profileUpdate"><i id="pici" class="ti-marker-alt btn btn-primary " style="cursor:pointer;"></i></label>
                            <input type="file" name="profile" id="profileUpdate" accept="image/*" style="opacity:0;z-index:-1;position:absolute; ">
                            <input type="text" name="id" hidden value="{{$data->id}}">
                            <div class="text-center py-3">
                            <button type="submit" id="subbtn" hidden class="border-0"> <i style="cursor:pointer" class=" fs-3 text-primary mdi mdi-dots-circle"></i>please wait..!</button>
                                <p class="alert alert-danger" id='error' hidden role="alert">Something went wrong!</p>
                            </div>
                        </form>
                    </div>

                </div>
                <div class="col-md-6  mt-md-5">
                    <form method="post" action="">
                        @csrf
                        @method('PUT')
                        <div class="form-group row">
                            <label for="example-text-input" class="col-3 col-form-label">Name*</label>
                            <div class="col-9">
                                <input type="text" class="form-control" value="{{$data->name}}" name="name" id="inputName">
                                @if($errors->any('name'))
                                <p class="text-danger">{{$errors->first('name')}}</p>
                                @endif
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="example-email-input" class="col-3 col-form-label">Email*</label>
                            <div class="col-9">
                                <input class="form-control" type="email" name="email" value="{{$data->email}}" id="example-email-input">
                                @if($errors->any('email'))
                                <p class="text-danger">{{$errors->first('email')}}</p>
                                @endif
                            </div>
                        </div>
                        <div class="form-group row ">
                            <label for="inputNewPassword" class="col-3 col-form-label">New Password</label>
                            <div class="col-9">
                                <input type="password" placeholder="Enter New Password*" name="newPassword" class="form-control" id="inputNewPassword">
                                @if($errors->any('confirmPassword'))
                                <p class="text-danger">Password must contain at least one numeric, capital letter, small letter, special and 8 characters</p>
                                @endif
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="inputConfirmPassword" class="col-3 col-form-label">Confirm Password</label>
                            <div class="col-9">
                                <input type="password" placeholder="Enter Confirm Password*" name="confirmPassword" class="form-control" id="inputConfirmPassword">

                                @if($errors->any('newPassword'))
                                <p class="text-danger">{{$errors->first('newPassword')}}</p>
                                @endif
                            </div>
                        </div>
                        <div class="form-group m-b-0">
                            <div class="offset-md-10 col-md-2">
                                <button type="submit" id="sbtn" class="btn btn-info waves-effect waves-light m-t-10">save</button>
                            </div>
                        </div>
                </div>
                </form>

            </div>

        </div>
</div>


</section>

<!-- Row -->
<!-- ============================================================== -->
<!-- End PAge Content -->
<!-- ============================================================== -->
<!-- ============================================================== -->

</div>
<!-- ============================================================== -->
<!-- End Container fluid  -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- footer -->
<!-- ============================================================== -->
<footer class="footer">
    © 2023 All Right Reserved, Mobile.in
</footer>
<!-- ============================================================== -->
<!-- End footer -->
<!-- ============================================================== -->
</div>
<script>
    $(document).ready(function() {
        file = $('#profileUpdate');
        file.on('change', function(e) {
            $("#subbtn").removeAttr('hidden');
            $('#pici').css('background-color', 'green');
            $("#subbtn").submit();
        })

    })
</script>
<script>
    $(document).ready(function() {
        let name =$("input[name='name']");
        let email =$("input[name='email']");
        let newPass =$("input[name='newPassword']");
        let cnfPass =$("input[name='confirmPassword']");
        // checkvalid(email);
        name.on('keyup',function(){
            return checkvalid(name);
        })
        email.on('keyup',function(){
            return checkvalid(email);
        })
        newPass.on('keyup',function(){
            return checkvalid(newPass);
        })
        cnfPass.on('keyup',function(){
            return checkvalid(cnfPass);
        })

        $('#picform').submit(function(e) {
            e.preventDefault();
            var formData = new FormData(this);
            $.ajax({
                url: 'updatePI/{{$data->id}}',
                type: 'post',
                data: formData,
                contentType: false,
                // headers: {
                //     'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                // },

                processData: false,
                success: function(response) {
                    if (response.success) {
                        location.reload(true);
                    } else {
                        $('#error').removeAttr('hidden');
                    }
                },
                error: function(response) {
                    $('#error').removeAttr('hidden');
                    $("#subbtn").attr('hidden', true);
                    $('#error').text(response.responseJSON.message);
                    console.log(response.responseJSON)
                }
            })
        })

    })
</script>
<script type="text/javascript" src="{{asset('assets/js/jqueryvalidation.js')}}"></script>

@stop