@extends('layouts.home')

@section('content')

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">

<style>
body {
    font-family: 'Montserrat', sans-serif;
    background-color: #f9fafb;
    margin: 0;
    padding: 0;
}

.wrapper {
    display: flex;
    justify-content: center;
    padding: 20px;
}

.main-container {
    display: flex;
    gap: 30px;
    width: 100%;
    max-width: 1100px;
    flex-direction: row;
}

/* Shared section styles */
.content-section,
.signup-container {
    flex: 1;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    padding: 25px;
}

.signup {
    background: #18a999;
    color: #ffffff;
    text-align: center;
    padding: 20px;
    font-weight: 700;
    font-size: 24px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.signup-form {
    padding: 20px 0;
}

.input {
    width: 100%;
    padding: 15px;
    border: 2px solid #dce1e3;
    border-radius: 5px;
    margin-bottom: 15px;
    font-size: 16px;
}

.reg-btn {
    width: 100%;
    background: #18a999;
    color: #ffffff;
    border: none;
    padding: 15px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s;
}

.reg-btn:hover {
    background: #158f89;
}

.btn-info {
    display: block;
    width: 100%;
    background: #5bc0de;
    color: #ffffff;
    text-align: center;
    padding: 10px;
    font-size: 16px;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    margin-bottom: 20px;
}

.btn-info:hover {
    background: #31b0d5;
}

.benefits-list {
    padding-left: 20px;
}

.section-title {
    font-size: 22px;
    font-weight: bold;
    color: #18a999;
    margin-bottom: 15px;
}

.benefits-list li strong {
    font-size: 18px;
    color: #5bc0de;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .main-container {
        flex-direction: column;
    }

    .content-section,
    .signup-container {
        width: 100%;
        padding: 15px;
    }

    .signup {
        font-size: 20px;
        padding: 15px;
    }

    .input,
    .reg-btn,
    .btn-info {
        font-size: 15px;
        padding: 12px;
    }

    .section-title {
        font-size: 20px;
    }

    .benefits-list li strong {
        font-size: 17px;
    }
}
</style>

<div class="wrapper">
    <div class="main-container">
        <!-- Left Section -->
        <div class="content-section">
            <div class="section-title">Benefits of Partnering with Us</div>
            <ul class="benefits-list">
                <li><strong>Access High-Quality Patient Inquiries</strong>
                    <ul>
                        <li>✔ Connect with patients actively searching for trusted medical professionals.</li>
                        <li>✔ Receive inquiries from patients who need your expertise and services.</li>
                    </ul>
                </li>
                <li><strong>Expand Your Practice</strong>
                    <ul>
                        <li>✔ Increase your visibility and attract more patients.</li>
                        <li>✔ Convert patient inquiries into confirmed appointments seamlessly.</li>
                    </ul>
                </li>
                <li><strong>Streamline Patient Management</strong>
                    <ul>
                        <li>✔ Manage all patient inquiries in one place with an easy-to-use platform.</li>
                        <li>✔ Focus on providing exceptional care to pre-qualified patients.</li>
                    </ul>
                </li>
                <li><strong>Enhance Your Professional Reputation</strong>
                    <ul>
                        <li>✔ Establish yourself as a leading expert in your specialty.</li>
                        <li>✔ Provide transparent, personalized consultations that build patient trust.</li>
                    </ul>
                </li>
                <li><strong>Exclusive Benefits for Doctors</strong>
                    <ul>
                        <li>✔ Able to Update Stories – Share your medical journey and patient success stories.</li>
                        <li>✔ Able to Participate in the Forum – Engage with other professionals and share knowledge.</li>
                        <li>✔ Able to Publish a Blog on Our Website – Showcase your expertise and attract more patients.</li>
                        <li>✔ Appointment Management System – Easily schedule and manage patient appointments.</li>
                        <li>✔ Patient Records in One Place – Access and update patient details efficiently.</li>
                        <li>✔ Featured Doctors Listings – Get highlighted on our platform for increased visibility.</li>
                    </ul>
                </li>
            </ul>
            <div class="section-title">How It Works</div>
            <ol class="benefits-list">
                <li><strong>Subscribe for ₹4,999 INR / $100 USD</strong>
                    <p>✔ Gain instant access to verified patient inquiries and appointment requests.</p>
                </li>
                <li><strong>Receive and Respond</strong>
                    <p>✔ Provide personalized consultations and medical advice directly to interested patients.</p>
                </li>
                <li><strong>Grow Your Patient Base</strong>
                    <p>✔ Build long-term relationships with patients and increase your revenue.</p>
                </li>
            </ol>
            <p>Invest in your hospital’s future today. Partner with <strong>MyHospitalNow</strong> and gain access to a reliable, cost-effective way to attract and connect with patients!</p>
        </div>

        <!-- Signup Form Section -->
        <div class="signup-container">
            <div class="signup">Become a Premium Doctor</div>
            <form method="POST" action="{{ route('make.premium.payment') }}" id="create-hospital-user" class="signup-form">
                {{ csrf_field() }}

                @if($message = Session::get('message'))
                    <p>{!! $message !!}</p>
                @endif

                @if(session('error'))
                    <div class="alert alert-danger">
                        {{ session('error') }}
                    </div>
                @endif

                <div class="form-group">
                    <label><strong>Name:</strong></label>
                    <input type="text" name="name" class="form-control input" placeholder="Name" required value="{{ auth()->check() ? auth()->user()->name : '' }}" readonly>
                </div>

                <div class="form-group">
                    <label><strong>Mobile No.:</strong></label>
                    <input type="text" name="mobile" class="form-control input" maxlength="10" placeholder="Mobile No." required value="{{ auth()->check() ? auth()->user()->phone : '' }}" readonly>
                </div>

                <div class="form-group">
                    <label><strong>Email:</strong></label>
                    <input type="email" name="email" class="form-control input" value="{{ auth()->check() ? auth()->user()->email : '' }}" placeholder="Email" required readonly>
                    @if ($errors->has('email'))
                    <span class="help-block text-danger">
                        <strong>{{ $errors->first('email') }}</strong>
                    </span>
                    @endif
                </div>

                <div class="form-group">
                    <div class="btn-info">
                        Become a premium Doctor charge: {{ $price }} ₹/- (PER YEAR)
                    </div>
                    <input type="hidden" name="price" value="{{ $price }}">
                </div>

                <div class="form-group">
                    <div class="g-recaptcha" data-sitekey="{{ '6LeSHVckAAAAAEy29JRI6f733mMcmlqp7woB9KGc' }}"></div>
                    @if ($errors->has('g-recaptcha-response'))
                        <span class="text-danger">{{ $errors->first('g-recaptcha-response') }}</span>
                    @endif
                </div>

                <div class="form-group">
                    <button type="submit" class="btn btn-success reg-btn">PROCEED</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

@if(session('paymentSuccessful'))
    <script>
        alert("Your payment is Successful. Please go to dashboard, Now you are premium doctor.");
        window.location.href = "{{ route('home') }}";
    </script>
@endif

@endsection