@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 Pre-Qualified Patient Leads</strong>
                    <ul>
                        <li>Receive inquiries from patients actively looking for surgical solutions.</li>
                        <li>Get detailed patient information to provide accurate quotes.</li>
                    </ul>
                </li>
                <li><strong>Grow Your Patient Network</strong>
                    <ul>
                        <li>Reach a broader audience and increase your hospital’s visibility.</li>
                        <li>Convert inquiries into confirmed surgeries with ease.</li>
                    </ul>
                </li>
                <li><strong>Save Time and Resources</strong>
                    <ul>
                        <li>Simplify lead management with centralized inquiries on one platform.</li>
                        <li>Focus on delivering care to pre-qualified patients.</li>
                    </ul>
                </li>
                <li><strong>Build Trust and Reputation</strong>
                    <ul>
                        <li>Showcase your hospital as a leader in transparent and affordable care.</li>
                        <li>Strengthen your brand by providing competitive, personalized quotes.</li>
                    </ul>
                </li>
            </ul>
            <div class="section-title">How It Works</div>
            <ol class="benefits-list">
                <li><strong>Subscribe for ₹4,9999 INR / $1000 USD</strong>
                    <p>Gain immediate access to patient inquiries and quote requests.</p>
                </li>
                <li><strong>Receive and Respond</strong>
                    <p>Submit personalized quotes to patients looking for your services.</p>
                </li>
                <li><strong>Convert Leads into Patients</strong>
                    <p>Build long-term relationships and grow 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 hospital</div>
            <form method="POST" action="{{ route('make.premium.payment.hos') }}" 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 hospital 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 hospital.");
        window.location.href = "{{ route('hospital.dashboard') }}"; // Redirect after alert
    </script>
@endif
@endsection