@extends('layouts.home')

@section('content')

<!-- Include Montserrat font from Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">

<style>
/* Additions to existing styles */
body {
    font-family: 'Montserrat', sans-serif; /* Change font to Montserrat */
    background-color: #f4f7f6; /* Light background color for the whole page */
    margin: 0;
    padding: 0;
}

.wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
}

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

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

.signup-form {
    padding: 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;
    transition: background 0.3s;
    width: 100%;
    padding: 15px;
    font-size: 18px;
}

.reg-btn:hover {
    background: #2c8c7f; /* Darken the button on hover */
}

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

.btn-info:hover {
    background: #31b0d5; /* Darken the button on hover */
}
</style>

<!-- Add Hospital Section Start -->
<div class="wrapper">
    <div class="signup-container">
        <div class="signup">Claim on <br> {{ $name }} </div>
        <form method="POST" action="{{ route('make.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">
                <strong>Name:</strong>
                <input type="text" name="name" class="form-control input" placeholder="Name" required>
            </div>

            <div class="form-group">
                <strong>Mobile No.:</strong>
                <input type="text" name="mobile" class="form-control input" maxlength="10" placeholder="Mobile No." required>
            </div>

            <div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">
                <strong>Email:</strong>
                <input type="email" name="email_new" class="form-control input" value="{{ old('email') }}" placeholder="Email" required>
                <input type="hidden" name="email" value="{{ $email }}" readonly>
            </div>

            <div class="form-group">
                <div class="btn btn-info">
                    Claim charge : 4999 R/-
                </div>
            </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 reset your password now.");
        // Remove the paymentSuccessful session variable after showing the message
        {{ session()->forget('paymentSuccessful') }}
    </script>
@endif

@endsection