@extends('web.layouts.layout')

@section('container_content')

    <!--Contents-->
    <main class="menu-main">
        <section class="profile">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-6 col-md-7 col-sm-10">
                        <div class="profile-img">
                            <img class="img-fluid image-profile" src="{{asset($merchant->photo) ?? asset('assets/web/images/user.jpg')}}" alt="">
                        </div>

                        <div class="rounded-box d-block p-0">
                            <h3>{{$merchant->name}}</h3>
                            <a href="{{route('merchant.editProfile')}}">{{__('merchants.edit_profile')}} <i class="fas fa-chevron-right"></i></a>
                            <div class="d-flex w-100 justify-content-between p-4">
                                <div class="about">
                                    <h6>{{__('merchants.about_me')}}</h6>
                                    <p>{{$merchant->about_me}}</p>
                                </div>
                                <div class="circle-number color pt-4">
                                    <h3>{{$queueCount}}</h3>
                                    <h6>{{__('merchants.this_month')}}</h6>
                                </div>
                            </div>
                            <div class="text-center pb-5 pt-4">
                                <a href="{{route('merchant.logout')}}" class="butn w-50 m-auto"><span class="text-uppercase">{{__('merchants.logout')}}</span></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        @include('web.layouts.side_menu')

    </main>
    <!--End-Contents-->

@endsection

@section('inner_js')
    <script>
        $(function() {
            $("#input-profile").change(function() {
                readURL1(this);
            });
        });

        function readURL1(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function(e) {
                    $('#img-profile').attr('src', e.target.result);
                };

                reader.readAsDataURL(input.files[0]);
            }
        }
    </script>
@endsection