@extends('frontend.layout.layout')
@section('content')
    <div class="main-content">
        <section class="m-profile setting-wrapper">
            <div class="container">
                <h4 class="main-title mb-4">Account Setting</h4>
                <div class="sign-user_card text-center">
                    <img src="{{asset('frontend/images/user/user.jpg')}}" class="rounded-circle img-fluid d-block mx-auto mb-3" alt="user">
                    <h4 class="mb-3">John Doe</h4>
                    <a href="#" class="edit-icon text-primary">Edit</a>
                </div>
                <div class="row">
                    <div class="col-lg-12">
                        <div class="sign-user_card">
                            <h5 class="mb-3 pb-3 a-border">Personal Details</h5>
                            <div class="row">
                                <div class="col-lg-6 col-md-6">
                                    <div class="row align-items-center justify-content-between mb-3">
                                        <div class="col-md-8">
                                            <span class="text-light font-size-13">Profile Name</span>
                                            <p class="mb-0 text-grey">John Doe</p>
                                        </div>
                                        <div class="col-md-4 text-md-center text-left">
                                            <a href="#" class="text-primary">Change</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-lg-6">
                                    <div class="row align-items-center justify-content-between mb-3">
                                        <div class="col-md-8">
                                            <span class="text-light font-size-13">Password</span>
                                            <p class="mb-0  text-grey" >**********</p>
                                        </div>
                                        <div class="col-md-4  text-left">
                                            <a href="#" class="text-primary  text-grey">Change</a>
                                        </div>
                                    </div>

                                </div>
                                <div class="col-md-6 col-lg-6">
                                    <div class="row align-items-center justify-content-between">
                                        <div class="col-md-8">
                                            <span class="text-light font-size-13">Language</span>
                                            <p class="mb-0  text-grey">English</p>
                                        </div>
                                        <div class="col-md-4 text-md-center text-left">
                                            <a href="#" class="text-primary">Change</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-lg-6">
                                    <div class="row align-items-center justify-content-between mb-3">
                                        <div class="col-md-8">
                                            <span class="text-light font-size-13">Maturity Level</span>
                                        </div>
                                        <div class="col-md-4 text-md-center text-left">
                                            <select name="" id="" class="form-control form-control-sm  text-grey">
                                                <option value="" class="bg-transparent text-dark">13+</option>
                                                <option value="" class="bg-transparent text-dark">16+</option>
                                                <option value="" class="bg-transparent text-dark">18+</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <h5 class="mb-3 mt-4 pb-3 a-border">Billing Details</h5>
                            <div class="row justify-content-between mb-3">
                                <div class="col-md-8 r-mb-15">
                                    <p class="text-grey">Your next billing date is 19 September 2020.</p>
                                    <a href="#" class="btn btn-hover">Cancel Membership</a>
                                </div>
                                <div class="col-md-4 text-md-right text-left">
                                    <a href="#" class="text-primary">Update Payment info</a>
                                </div>
                            </div>
                            <h5 class="mb-3 mt-4 pb-3 a-border">Plan Details</h5>
                            <div class="row justify-content-between mb-3">
                                <div class="col-md-8">
                                    <p class="text-grey">Premium</p>
                                </div>
                                <div class="col-md-4 text-md-right text-left">
                                    <a href="pricing-plan.html" class="text-primary">Change Plan</a>
                                </div>
                            </div>
                            <h5 class="mb-3 pb-3 mt-4 a-border">AutoPlay Controls</h5>
                            <div class="row">
                                <div class="col-lg-12 col-md-12 setting">
                                    <div class="custom-control custom-checkbox custom-checkbox-color custom-control-inline">
                                        <input type="checkbox" class="custom-control-input bg-primary" id="customCheck-11">
                                        <label class="custom-control-label text-grey" for="customCheck-11">Video Room </label>
                                    </div>

                                </div>
                                <div class="col-lg-12 col-md-12 setting">
                                    <div class="custom-control custom-checkbox custom-checkbox-color custom-control-inline">
                                        <input type="checkbox" class="custom-control-input bg-primary" id="customCheck-11">
                                        <label class="custom-control-label text-grey" for="customCheck-11">Autoplay next episode in a series in all devices </label>
                                    </div>

                                </div>
                                <div class="col-lg-12 col-md-12 setting">
                                    <div class="custom-control custom-checkbox custom-checkbox-color custom-control-inline">
                                        <input type="checkbox" class="custom-control-input bg-primary" id="customCheck-11">
                                        <label class="custom-control-label text-grey" for="customCheck-11">Autoplay trailer while browsing on all devices. </label>
                                    </div>
                                </div>
                            </div>
                            <div class="text-left p-5">
                                <a href="javascript:void(0)" class="btn btn-hover iq-button">Save</a>
                                <a href="javascript:void(0)" class="btn btn-hover iq-button">Cancel</a>
                                <a href="javascript:void(0)" class="btn btn-hover iq-button">Delete</a>
                                @auth
                                    @if(isset(auth()->user()->setting->monetization))
                                        @if((auth()->user()->setting->monetization == null || auth()->user()->setting->monetization == "Disabled")))
                                        <a href="{{route('monitization')}}" class="btn btn-hover iq-button" style="float:right">Enable Monetization</a>
                                        @else
                                            <a href="{{route('monitization')}}" class="btn btn-hover iq-button" style="float:right">Disable Monetization</a>
                                        @endif
                                    @else
                                        <a href="{{route('monitization')}}" class="btn btn-hover iq-button" style="float:right">Enable Monetization</a>
                                    @endif
                                @endauth
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection