@extends('../screenwriter/screenwriter_layout.app')

@section('content')
<div class="page_right">
    <!-- Beardcrumbs -->
    <div class="breadcrumbs">
        <a href="{{ route('screenwriter.index') }}">Dashboard</a><span>/{{ ucfirst(Route::current()->getName()) }}</span>
    </div>
    <section class="screenwriter_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('screenwriter.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="{{ route('screenwriter.profile') }}" method="post" class="account_form overflow-hidden">
                {{ csrf_field() }}
                    <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 your first Name" value="">
                            </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 your last Name" value="">
                            </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 your email" value="" disabled="disabled">
                            </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>
                <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('screenwriter.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="screenwriter_reset_password" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="screenwriter_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="screenwriter_email_reset" class="form-label mb-1">Email Address</label>
                        <input type="email" class="form-control px-4 name=" screenwriter_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="#screenwriter_verification_info">Continue</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="screenwriter_verification_info" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="screenwriter_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