@extends('layouts.home')

@section('content')

<!-- Google Fonts -->
<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: #f4f7f6;
    margin: 0;
    padding: 0;
}

.wrapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    padding: 20px;
    flex-wrap: wrap;
    gap: 20px;
}

/* Content block */
.content-section {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    flex: 1 1 600px;
    max-width: 700px;
}

/* Signup block */
.signup-container {
    max-width: 450px;
    width: 100%;
    background: #fff;
    padding: 20px;
    margin-top: 10px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.signup {
    background: #34b3a0;
    color: #fff;
    text-align: center;
    font-weight: 700;
    padding: 15px;
    border-radius: 10px 10px 0 0;
    font-size: 24px;
}

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

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

.reg-btn {
    background: #34b3a0;
    border: none;
    border-radius: 5px;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    width: 100%;
    padding: 15px;
    font-size: 18px;
}

.reg-btn:hover {
    background: #2c8c7f;
}

.btn-info {
    background: #5bc0de;
    border: none;
    border-radius: 5px;
    color: #fff;
    font-weight: bold;
    text-align: center;
    width: 100%;
    padding: 10px;
    font-size: 16px;
    margin-top: 15px;
}

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

.section-title {
    font-size: 22px;
    font-weight: 700;
    color: #34b3a0;
    margin-bottom: 15px;
}

.benefits-list {
    list-style: none;
    padding: 0;
}

.benefits-list li {
    margin-bottom: 15px;
}

.benefits-list ul {
    margin-left: 20px;
}

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

.benefits-list li p {
    font-size: 16px;
    color: #555;
}

/* Responsive Design */
@media (max-width: 768px) {
    .wrapper {
        flex-direction: column;
        padding: 10px;
    }

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

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

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

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

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

<!-- Main Section -->
<div class="wrapper">
    <!-- Info 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</li>
                    <li>✔ Participate in the Forum</li>
                    <li>✔ Publish a Blog on Our Website</li>
                    <li>✔ Appointment Management System</li>
                    <li>✔ Patient Records in One Place</li>
                    <li>✔ Featured Doctors Listings</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>

    <!-- Form Section -->
    <div class="signup-container">
        <div class="signup">Claim on <br> {{ $name }}</div>
        <form method="GET" action="{{ route('processTransactionpremium') }}" 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" 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" required value="{{ auth()->check() ? auth()->user()->phone : '' }}" readonly>
            </div>

            <div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">
                <label><strong>Email:</strong></label>
                <input type="email" name="email" class="form-control input" required value="{{ auth()->check() ? auth()->user()->email : '' }}" readonly>
            </div>

            <div class="form-group">
                <div class="btn btn-info">
                    Claim 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>

<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