@extends('layout.adminapp')
@section('content')
    <style>
        img.profile {
            clip-path: circle();
            width: 150px;
            height: 150px;
        }

        img.profile:hover {
            -webkit-filter: brightness(70%);
            -webkit-transition: all 1s ease;
            -moz-transition: all 1s ease;
            -o-transition: all 1s ease;
            -ms-transition: all 1s ease;
            transition: all 1s ease;
        }

        .centered {
            position: absolute;
            top: 50%;
            /* left: 50%; */
            transform: translate(-50%, -50%);
        }

        .img_wrap {
            position: relative;
            text-align: left;
        }
    </style>
    <div class="container-fluid">
        @if (Session::has('status'))
            <div class="alert alert-success">
                <ul>
                    <li>{{ Session::get('status') }}</li>
                </ul>
            </div>
        @endif
        @if (Session::has('error'))
            <div class="alert alert-danger">
                <ul>
                    <li>{{ Session::get('error') }}</li>
                </ul>
            </div>
        @endif
        @if ($errors->any())
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
        <div class="row justify-content-center">

            <div class="col-xl-10 col-lg-12 col-md-9 my-5">

                <div class="my-4"></div>
                <div class="card o-hidden border-0 shadow-lg my-5">

                    <!-- Nested Row within Card Body -->
                    <div class="row d-flex justify-content-center">
                        <div class="col-lg-6">
                            <div class="p-5">
                                <h1 class="h3 mb-4 text-gray-800">Profile</h1>
                                <form action="update-img-admin" method="POST" enctype="multipart/form-data">
                                    @csrf
                                    <div class="img_wrap">
                                        <img class="profile" id="image"
                                            src="{{ asset('images/admin/' . session()->get('admin')['attachment']) }}" />
                                        <p class="centered" id="centered" style="display:none">Change Image.</p>
                                    </div>
                                    <input type="file" id="myfile" name="image" style="display:none" />
                                    <input type="submit" id="submit" style="display:none">
                                </form>
                                <form method="POST" action="admin-update">
                                    @csrf
                                    <div class="form-group">
                                        <label for="name">Name</label>
                                        <input type="text" class="form-control form-control-user" name="name"
                                            value="{{ $admin['name'] }}" required>
                                    </div>
                                    <button class="btn btn-primary btn-user btn-block" type="submit">
                                        UPDATE
                                    </button>
                                    <a href="#" data-toggle="modal" data-target="#password">
                                        change password
                                    </a>

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

    </div>
    <div class="modal fade" id="password" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Change Password?</h5>
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form action="admin-password" method="post">
                        @csrf
                        <div class="form-group">
                            <label for="name">Password</label>
                            <input type="password" placeholder="Enter current password" class="form-control form-control-user" name="pwd" id="pwd" required>
                        </div>
                        <div class="form-group">
                            <label for="name">New Password</label>
                            <input type="password" placeholder="Enter your password" class="form-control form-control-user" name="new_pwd" id="new_pwd" required>
                        </div>
                        <div class="form-group">
                            <label for="name">Confirm Password</label>
                            <input type="password" placeholder="Confirm your password" class="form-control form-control-user" name="ch_pwd" id="ch_pwd" required>
                        </div>
                        <div id="error_pwd"></div>
                    
                </div>
                <div class="modal-footer">
                    <a class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</a>
                    <button type="submit" id="save_pwd" disabled class="btn btn-primary">Update</button>
                </div>
            </form>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script>
        $('#image').click(function() {
            console.log("first")
            $('#myfile').click()
        });
        $('#myfile').change(function() {
            $('#submit').click()
        });
        $(document).ready(function() {
            $('#new_pwd, #ch_pwd').on('keyup', function() {
                if ($('#new_pwd').val() == $('#ch_pwd').val()) {
                    $('#error_pwd').html('Matching').css('color', 'green');
                    $('#save_pwd').attr('disabled', false);
                } else{
                    $('#error_pwd').html('Passwords mismatch').css('color', 'red');
                    $('#save_pwd').attr('disabled', 'disabled');
                }
            });
        });
    </script>
@endsection