@extends('../../master_layout/website_master')

@section('title')
<title>{{env('APP_NAME')}} :: My Account</title>
@endsection


@section('heading')
<section class="page-heading">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="content flex-column flex-sm-row">
                    <a href="javascript:history.back()" class="btn btn-link">
                        <i class="fa fa-angle-left"></i> Back
                    </a>
                    <h1 class="py-2 py-sm-0">My Account - Edit</h1>
                    <!-- breadcrumb -->
                    @php
                    $breadcrumb = array(
                        array('title'=>'My Account', 'url'=>route('account')),
                        array('title'=>'Edit', 'url'=>'', 'active'=>'1')
                    );
                    @endphp
                    @include('website_view.component.breadcrumb',  compact("breadcrumb"))
                    <!-- \breadcrumb -->
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@section('content')

<section class="account-one">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="heading-one text-center d-md-none">
                    <h1>
                        My Account - Edit
                    </h1>
                </div>
                @include('website_view.component.account-navigation')      
            </div>
        </div>
    </div>
</section>
<section class="account-two">
    <div class="container-fluid">
         @if (session('errors'))
        <div class="alert alert-danger alert-dismissible">
            @foreach($errors->all() as $message)
            <li class="text-danger">{{$message}}</li>
            @endforeach
        </div>
        @endif
        <div class="row">
        
            <div class="col-12">
                <div class="row gap-y-2">
                    <!-- Message-->
                    @if (session('message'))
                    <div class="col-12">
                        <div class="alert alert-{{session('message.type')}} alert-dismissible fade show" role="alert">
                            @if(session('message.type')=='danger')
                            <strong>Oops!</strong> {!! session('message.text') !!}
                            @else
                            <strong>Success!</strong> {!! session('message.text') !!}
                            @endif
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                    </div>
                    @endif                   
                    <!--end message-->

                    <div class="col-md-6">
                        <form action="{{route('edit.account.process')}}" method="post" id="editAccount" enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" name="uploaded_image" id="uploaded_image" value="{{$account->profile_picture}}">
                            <div class="form-group">
                                <label for="">Profile photo</label>
                                <div class="img-upload">
                                    <i class="fa fa-times fa-lg delete btn_remove"></i>
                                                                            <img src="{{ getStorageFile(config('path.avatar').'default.png') }}" alt="">
                                    
                                    <a href="" type="button" class="btn_remove"><i class="fa fa-times fa-inline"></i>Remove photo</a>
                                </div>
                                <!--<small>JPEG, JPG, GIF, PNG, maximum size of 4MB</small>-->
                                <small>Allowed file types are <b>JPEG, JPG</b> and Maximum size of <b>1MB</b></small>
                                <input type="file" name="profile_picture" accept="image/jpeg">
                            </div>
                            <div class="form-group">
                                <label for="">Account type :</label>
                                <div class="inline-list">
                                    @if($account->type=="C")
                                    <label class="radio-one">User
                                        <input type="radio" name="account_type" value="C" {{($account->type =='C')?'checked':''}}>
                                        <span class="checkmark"></span>
                                    </label>
                                    @endif
                                    <label class="radio-one">Individual advertiser
                                        <input type="radio" name="account_type" value="I" {{($account->type =='I')?'checked':''}}>
                                        <span class="checkmark"></span>
                                    </label>
                                    <!--<label class="radio-one">Escort agency
                                        <input type="radio" name="account_type" value="A" {{($account->type =='A')?'checked':''}}>
                                        <span class="checkmark"></span>
                                    </label>-->
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="">Email :</label>
                                <input class="form-control" type="text" value="{{$account->email}}" name="email" id="email">
                            </div>
                            <div class="form-group">
                                <label for="">Display name :</label>
                                <input class="form-control" type="text" value="{{$account->display_name}}" name="display_name" id="display_name">
                            </div>
                            <div class="form-group">
                                <label for="">About me</label>
                                <textarea name="about_me" class="form-control">{{$account->about_me}}</textarea>
                            </div>

                            @if($account->type=="C")
                            <div class="form-group">
                                <label for="">Service I like</label>
                                <ul class="check-service-list">
                                                                        @foreach($services as $service)
                                    <li>
                                        <label class="checkbox-one">{{$service->service_name}}
                                            <input type="checkbox" name="service_id[]" checked value="{{$service->service_id}}">
                                            <span class="checkmark"></span>
                                        </label>
                                    </li>
                                    @endforeach
                                </ul>
                            </div>
                            @endif

                            <button class="btn btn-main">
                                Save <i class="fa fa-angle-right"></i>
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection

@section('custom_js')
<script>
    $(function() {
        $(".btn_remove").on("click", function(e) {
            e.preventDefault();
            $("#uploaded_image").val("");
            $(".img-upload").hide();
        });

        $('#editAccount').validate({
            rules: {
                email: {
                    required: true,
                    email: true,
                },

                display_name: {
                    required: true,
                    alphanumeric: true
                },
            },
            messages: {
                email: {
                    required: "Please enter email",
                },
                display_name: {
                    required: "Please enter display name",
                },
            },
            errorElement: 'span',
            errorPlacement: function(error, element) {
                error.addClass('invalid-feedback');
                element.closest('.form-group').append(error);
            },
            highlight: function(element, errorClass, validClass) {
                $(element).addClass('is-invalid');
            },
            unhighlight: function(element, errorClass, validClass) {
                $(element).removeClass('is-invalid');
            }
        });


        /*$('#addCustomer').validate({
            rules: {
                login_username: {
                    required: true,
                    email: true,
                    remote: {
                        url: "{{ route('user.check.email')}}",
                        type: "get",
                        data: {
                            login_username: function() {
                                return $("#login_username").val();
                            }
                        },
                        dataType: 'json'
                    }
                },

                login_password: {
                    required: true,
                },

                username: {
                    required: true,
                    remote: {
                        url: "{{ route('user.check.display.name')}}",
                        type: "get",
                        data: {
                            display_name: function() {
                                return $("#username").val();
                            }
                        },
                        dataType: 'json'
                    }
                },

                term_accept: {
                    required: true,
                }



            },
            messages: {
                login_username: {
                    required: "Please enter email",
                    remote: "This email is already registered. Please try with another one"

                },
                login_password: {
                    required: "Please enter password",
                },
                username: {
                    required: "Please enter username",
                    remote: "This username is already registered. Please try with another one"
                },

                term_accept: {
                    required: "Please accept the terms and conditions",
                }
            },
            errorElement: 'span',
            errorPlacement: function(error, element) {
                error.addClass('invalid-feedback');
                element.closest('.form-group').append(error);
            },
            highlight: function(element, errorClass, validClass) {
                $(element).addClass('is-invalid');
            },
            unhighlight: function(element, errorClass, validClass) {
                $(element).removeClass('is-invalid');
            }
        });*/

    });
</script>
@endsection