@extends('layout.emapp')
@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>
    <section class="home home2">
        <!--<div class="home2 d-block d-sm-none">-->
        <div class="container pt-4">
            <div class="row">
                <div class="col-1"></div>
                <div class="col-md-8">
                    <h2 style="font-weight: bold">{{__('Profile')}}</h2>

                    @if (Session::has('status'))
                        <div class="alert alert-success">
                            <ul>
                                <li>{{ Session::get('status') }}</li>
                            </ul>
                        </div>
                    @endif
                    @if (!empty($status))
                        <div class="alert alert-success">
                            <ul>
                                <li>{{ $status }}</li>
                            </ul>
                        </div>
                    @endif
                    <div class="form ">

                        <div class=" form-group row">
                            <div class="col pt-3">

                                <form action="update-img-em" method="POST" enctype="multipart/form-data">
                                    @csrf
                                    <div class="img_wrap">
                                        <img class="profile" id="image"
                                            src="{{ asset('images/employer/' . session()->get('employer')['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>
                            </div>
                        </div>
                        <div class=" form-group row">
                            <div class="col">
                                <a href="edit-profile-em" class="btn btn-sm btn-outline-primaryy"
                                    style="width:7rem;"> {{__('Edit Profile')}}</a>
                            </div>
                        </div>
                        <div class=" form-group row">
                         <div class="col">
                                <label class="pb-0 col-form-label">{{__('Name')}}</label>
                                <input type="text" class="form-control form-control-lg  bg-light contact-form-field"
                                    placeholder="{{ $profile->employee->name }}" name="name" readonly>
                            </div>
                        </div>
                        <div class=" form-group row">
                            <!--<div style="position: absolute; left: 20; float: left; padding-right: 0; z-index: -99;">-->
                            <!--    <img src="{{ asset('employer-con/images/clients.png') }}" class="resize-img" height="98"-->
                            <!--        width="150" style="opacity: .1">-->
                            <!--</div>-->

                            <!--<div style="position: absolute; right: 0; float: right; padding-right: 0; z-index: -99;">-->
                            <!--    <img src="{{ asset('employer-con/images/Career.png') }}" class="resize-img" height="98"-->
                            <!--        width="150" style="opacity: .2">-->
                            <!--</div>-->
                            <div class="col">
                                <label class="pb-0 col-form-label">{{__('Company Name')}}</label>
                                <input type="text" class="form-control form-control-lg  bg-light contact-form-field"
                                    placeholder="{{ $profile['name'] }}" name="name" readonly>
                            </div>
                           
                        </div>
                        <div class=" form-group row">
                            <div class="col">
                                <label class="pb-0 col-form-label">{{__('Founding Year')}}</label>
                                <input type="text" class="form-control form-control-lg  bg-light contact-form-field"
                                    placeholder="{{date('d-m-Y', strtotime($profile['founding_year']))}}" name="year" readonly>
                            </div>
                        </div>
                        <div class=" form-group row">
                            <div class="col">
                                <!--<div-->
                                <!--    style="position: absolute; right: 0; top: 0px; float: right; padding-right: 0; z-index: -99;">-->
                                <!--    <img src="{{ asset('employer-con/images/Arrow.png') }}" class="resize-img"-->
                                <!--        height="70" width="250" style="opacity: .1;">-->
                                <!--</div>-->
                                <label class="pb-0 col-form-label">{{__('Phone Number')}}</label>
                                <input type="text" class="form-control form-control-lg  bg-light contact-form-field"
                                    placeholder="{{ $profile['ph_number'] }}" name="ph_number" readonly>
                            </div>
                        </div>
                        <div class=" form-group row">
                            <div class="col">
                                <label class="pb-0 col-form-label">{{__('Email Address')}}</label>
                                <input type="text" disable
                                    class="form-control form-control-lg  bg-light contact-form-field"
                                    placeholder="{{ session()->get('employer')['email'] }}" name="email" readonly>
                            </div>
                        </div>
                        <div class=" form-group row">
                            <div class="col">
                                <!--<div style="position: absolute;  left: 100px; float: left; padding-right: 0; z-index: -99;">-->
                                <!--    <img src="{{ asset('employer-con/images/bag.png') }}" class="resize-img" height="98"-->
                                <!--        width="150" style="opacity: 6%">-->
                                <!--</div>-->


                                <label class="pb-0 col-form-label">{{__('Website')}}</label>
                                <input type="text" class="form-control form-control-lg  bg-light contact-form-field"
                                    placeholder="{{ $profile['website'] }}" name="website" readonly>
                            </div>
                        </div>
                        <div class=" form-group row">
                            <div class="col">
                                <label class="pb-0 col-form-label">{{__('Company Full Address')}}</label>
                                <textarea type="text" class="form-control form-control-lg  bg-light contact-form-field"
                                    placeholder="{{ $profile['address'] }}" name="address" readonly></textarea>
                            </div>
                        </div>
                        <div class=" form-group row">
                            <div class="col pt-4 text-center">
                                <a href="change-password-em"> <button class="btn btn-primaryy shadow"
                                        style="width:auto; height:2.8rem; font-size: 18px; font-weight: 500;">{{__('CHANGE PASSWORD')}}</button></a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-1">
                    </div>
                </div> <!-- 10-col -->


            </div> <!-- ....row -->
        </div> <!-- container -->
        <!--</div>-->
    </section>
    
@endsection
@section('script')
    <script>
        $('#image').click(function() {
            $('#myfile').click()
        });
        $('#myfile').change(function() {
            $('#submit').click()
        });
        // document.getElementById("image").onmouseover = function() 
        // {
        //     console.log("hover");
        //     document.getElementById('centered').style.display = "block";
        // }
        // document.getElementById("image").onmouseout = function() 
        // {
        //     console.log("hover");
        //     document.getElementById('centered').style.display = "none";
        // }
    </script>
@endsection