@extends('../producer/producer_layout.app')

@section('content')
<div class="page_right">

    <section class="producer_settings mt-2">
        <div class="row w-100 mb-4 mx-0">
            <div class="col-12 p-0">
                <h4>Settings</h4>
            </div>
        </div>
        <div class="row w-100 mb-3 mx-0 pe-sm-3 pe-0">
            <div class="col-md-5 col-12 p-0 setting_menu_parent">
                <div class="account_setting_menu row mx-0 active w-100 pt-4 m-0">
                    <div class="col-md-3 col-auto text-end align-self-center">
                        <span><i class="fa-solid fa-user"></i></span>
                    </div>
                    <div class="col-md-6 col-auto">
                        <h6 class="mb-0">Account Settings</h6>
                        <p>Personal Information, Email</p>
                    </div>
                    <div class="col-md-3 col-auto text-center align-self-center">
                        <span><i class="fa-solid fa-chevron-right"></i></span>
                    </div>
                </div>
                <div class="password_setting_menu row mx-0 w-100 pt-4 m-0">
                    <div class="col-md-3 col-auto text-end align-self-center">
                        <span><i class="fa-solid fa-lock"></i></span>
                    </div>
                    <div class="col-md-6 col-auto">
                        <h6 class="mb-0">Password & Security</h6>
                        <p>Change Password 2FA</p>
                    </div>
                    <div class="col-md-3 col-auto text-center align-self-center">
                        <span><i class="fa-solid fa-chevron-right"></i></span>
                    </div>
                </div>
                <div class="membership_setting_menu row mx-0 w-100 pt-4 m-0" data-href="{{ route('producer.stripe.portal.session')}}">
                    <div class="col-md-3 col-auto text-end align-self-center">
                        <span><i class="fa-solid fa-lock"></i></span>
                    </div>
                    <div class="col-md-6 col-auto">
                        <h6 class="mb-0">Membership</h6>
                        <p>Manage & Upgrade Membership</p>
                    </div>
                    <div class="col-md-3 col-auto text-center align-self-center">
                        <span><i class="fa-solid fa-chevron-right"></i></span>
                    </div>
                </div>
            </div>
            <div class="col-md-7 account_menu_result col-12 mt-md-0 mt-5">
                <form action="" method="post" class="account_form overflow-hidden">
                    <div class="row mx-0 w-100 account_settings_label px-sm-3 px-0">
                        <div class="col-12 px-sm-3 px-0">
                            <h3>Account Settings</h3>
                            <p>Personal Information</p>
                        </div>
                    </div>
                    <div class="row mx-0 w-100 mt-md-5 mt-3 account_setting_avatar px-sm-3 px-0">
                        <div class="col-12 px-sm-3 px-0">
                            <h5>Avatar</h5>
                        </div>
                    </div>
                    <div class="row mx-0 w-100 account_setting_form">
                        <div class="row mx-0 w-100 px-sm-3 px-0">
                            <div class="col-6 col-sm-3 col-xl-auto px-sm-3 px-0">
                                <img src="https://picsum.photos/50/50" alt="Profile Picture" class="image-fluid rounded-circle">
                            </div>
                            <div class="col-6 col-sm-3 col-xl-auto align-self-center px-sm-3 px-0">
                                <button type="button" class="border-0 bg-transparent">Remove</button>
                            </div>
                            <div class="col-6 col-sm-12 col-xl-auto align-self-center mt-xl-0 mt-3 px-sm-3 px-0">
                                <input type="file" value="Upload">
                            </div>
                        </div>
                        <div class="row mx-0 w-100 mt-5 px-sm-3 px-0">
                            <div class="col-sm-6 col-12 px-sm-3 px-0">
                                <label for="first_name" class="form-label">First Name</label>
                                <input type="text" name="first_name" class="form-control w-md-50 w-100" placeholder="Enter the first Name" value="Jon">
                            </div>
                            <div class="col-sm-6 col-12 mt-sm-0 mt-2 px-sm-3 px-0">
                                <label for="last_name" class="form-label">Last Name</label>
                                <input type="text" name="last_name" class="form-control w-md-50 w-100" placeholder="Enter the first Name" value="Doe">
                            </div>
                        </div>
                        <div class="row mx-0 w-100 mt-2 px-sm-3 px-0">
                            <div class="col-12 px-sm-3 px-0">
                                <label for="email" class="form-label">Email</label>
                                <input type="email" name="email" class="form-control w-md-50 w-100" placeholder="Enter the first Name" value="John@gmail.com">
                            </div>
                        </div>
                        <div class="row mx-0 w-100 mb-3 px-sm-3 px-0">
                            <div class="col-12 text-md-end text-center">
                                <span class="me-3">Discard Changes</span>
                                <button type="submit" class="border-0 me-md-5 me-0 mt-3 mb-mt-0">Save Changes</button>
                            </div>
                        </div>
                    </div>
                </form>
                <form action="{{ route('producer.settings') }}" method="post" class="password_form overflow-hidden d-none">
                    @csrf
                    <div class="row w-100 mx-0 password_setting_label px-sm-3 px-0">
                        <div class="col-12 px-sm-3 px-0">
                            <h3 class="mb-4">Security</h3>
                            <img src="https://picsum.photos/50/50" alt="Profile Picture" class="image-fluid rounded-circle">
                            <span class="ms-2">John Doe</span>
                            <div class="mt-4">
                                <span class="me-3">Active Status</span>
                                <label class="switch">
                                    <input type="checkbox">
                                    <span class="slider round"></span>
                                </label>
                            </div>
                            <p class="mt-4">Your friends will see when you're active or that you were recently active.
                                <strong> You'll appear as active or recently active unless you turn off the setting</strong>
                            </p>
                        </div>
                    </div>
                    <div class="row w-100 mx-0 password_setting_form">
                        <div class="row mx-0 w-100 mt-3 px-sm-3 px-0">
                            <div class="col-12 px-sm-3 px-0">
                                <label for="password" class="form-label">Current Password</label>
                                <input type="text" name="password" class="form-control" placeholder="Enter the Current Password" value="" autocomplete="on">
                                @error('password')
                                <script>
                                    setTimeout(() => {
                                        document.getElementsByClassName('password_setting_menu')[0].click()
                                    }, 100);
                                </script>
                                <div class="text-danger mt-2 fs-6">
                                    {{ $message }}
                                </div>
                                @enderror
                            </div>
                        </div>
                        <div class="row mx-0 w-100 mt-2 px-sm-3 px-0">
                            <div class="col-12 px-sm-3 px-0">
                                <button type="submit" name="producerReset" class="border-0 bg-transparent">Reset Password</button>
                            </div>
                        </div>
                        <div class="row mx-0 w-100 mt-5 px-sm-3 px-0">
                            <div class="col-12 px-sm-3 px-0">
                                <h6 class="mb-md-0 mb-2">Two Factor Authentication</h6>
                                <p>We'll ask for the code in addition to your password when you log in on a device we Don't recognize</p>
                            </div>
                        </div>
                        <div class="row mx-0 w-100 mt-4 px-sm-3 px-0">
                            <div class="col-12 px-sm-3 px-0">
                                <label for="phone_number" class="form-label">Enter your Phone Number</label>
                                <input type="tel" name="phone_number" class="form-control" placeholder="Enter your Phone Number">
                            </div>
                        </div>
                        <div class="row mx-0 w-100 mb-3 px-sm-3 px-0">
                            <div class="col-12 text-md-end text-center">
                                <span class="me-md-3 me-0">Discard Changes</span>
                                <button type="submit" class="border-0 me-md-5 me-0 mt-3 mb-mt-0">Save Changes</button>
                            </div>
                        </div>
                    </div>
                </form>

                <div class="row w-100 mx-0 px-sm-3 px-0" id="customer_portal" >
                    <div class="mt-4">
                        <h4>Your Current Plan</h4>
                        <div class="p-1 mb-4">
                            @if ( Auth::user()->subscribed() )
                                @php
                                    $plan = Auth::user()->getSubscriptionType();
                                @endphp
                               {{ $plan == 'semi_annual' ? 'Semi Annual' : ucfirst($plan)}}
                            @else
                                <p>You have no active subscription</p>
                                <button type="button" class="border-0 btn-primary" data-bs-toggle="modal" data-bs-target="#screenwriter_script_payment2_to_marketplace">Subscribe</button>
                            @endif
                        </div>
                        @unless ( !Auth::user()->subscribed() )
                            <form method="POST" action="{{ route('producer.stripe.portal.session')}}"  id="customer_portal_form">
                                @csrf
                                <button class="btn btn-primary" type="submit">Manage Your Plan</button>
                            </form>
                        @endunless
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Modal -->
    <div class="modal fade" id="producer_reset_password" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="producer_reset_password_Label" aria-hidden="true">
        <div class="modal-dialog m-0 top-50 start-50 translate-middle h-100 pt-5">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body px-5">
                    <div class="d-flex justify-content-center">
                        <div class="rounded-circle text-center">
                            <i class="fa-solid fa-key"></i>
                        </div>
                    </div>
                    <h3 class="mt-2 text-center">Reset Password</h3>
                    <p class="text-center">Please enter your email, and we will send you the email to reset the password</p>
                    <div class="mb-3">
                        <label for="producer_email_reset" class="form-label mb-1">Email Address</label>
                        <input type="email" class="form-control px-4 name=" producer_email_reset" id="screenwriter_email_reset" placeholder="Enter your email address">
                    </div>
                    <div class="mb-3">
                        <button type="button" class="border-0" data-bs-dismiss="modal" data-bs-toggle="modal" data-bs-target="#producer_verification_info">Continue</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="producer_verification_info" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="producer_verification_info_Label" aria-hidden="true">
        <div class="modal-dialog m-0 top-50 start-50 translate-middle h-100 pt-5">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body px-5">
                    <div class="d-flex justify-content-center">
                        <div class="rounded-circle text-center">
                            <i class="fa-solid fa-envelope"></i>
                        </div>
                    </div>
                    <h3 class="mt-2 mb-sm-4 mb-2 text-center">
                        <span class="me-2">Check Your Email</span>
                        <span class="d-sm-inline d-block"><i class="fa-solid fa-check pt-sm-0 pt-2"></i></span>
                    </h3>
                    <p class="text-center">Check your email address for instructions on resetting your password</p>
                </div>
            </div>
        </div>
    </div>

</div>
@endsection

<!-- Check which submit form is clicked by server response-->
@section('scriptcontent')

@if(session('status'))
<script>
    const status = "{{ session('status') }}";
    if (status == 'passwordreset') {
        setTimeout(() => {
            $('.password_setting_menu').click();
            $('#producer_reset_password').modal('show');
        }, 100);
    }
</script>
@endif

@endsection