{% extends "base.html" %}

{% block content %}
<div style="padding: 30px; max-width: 1000px; margin: 0 auto;">
    <h1 style="color: #2c3e50; text-align: center; margin-bottom: 30px;">🏥 Hospital Settings</h1>
    
    <div style="background: white; padding: 40px; border-radius: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.1);">
        <form method="POST">
            <h2 style="color: #34495e; margin-bottom: 25px; padding-bottom: 15px; border-bottom: 2px solid #ecf0f1;">🏥 Hospital Information</h2>
            
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 30px;">
                <div>
                    <label style="display: block; margin-bottom: 8px; font-weight: 600; color: #2c3e50; font-size: 16px;">Hospital Name:</label>
                    <input type="text" name="hospital_name" value="{{ settings.get('hospital_name', '') }}" 
                           style="width: 100%; padding: 14px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 16px;"
                           onfocus="this.style.borderColor='#3498db'" 
                           onblur="this.style.borderColor='#e0e0e0'">
                </div>
                
                <div>
                    <label style="display: block; margin-bottom: 8px; font-weight: 600; color: #2c3e50; font-size: 16px;">Phone Number:</label>
                    <input type="text" name="hospital_phone" value="{{ settings.get('hospital_phone', '') }}" 
                           style="width: 100%; padding: 14px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 16px;"
                           onfocus="this.style.borderColor='#3498db'" 
                           onblur="this.style.borderColor='#e0e0e0'">
                </div>
            </div>
            
            <div style="margin-bottom: 25px;">
                <label style="display: block; margin-bottom: 8px; font-weight: 600; color: #2c3e50; font-size: 16px;">Hospital Address:</label>
                <textarea name="hospital_address" rows="3"
                          style="width: 100%; padding: 14px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 16px; resize: vertical;"
                          onfocus="this.style.borderColor='#3498db'" 
                          onblur="this.style.borderColor='#e0e0e0'">{{ settings.get('hospital_address', '') }}</textarea>
            </div>
            
            <div style="margin-bottom: 25px;">
                <label style="display: block; margin-bottom: 8px; font-weight: 600; color: #2c3e50; font-size: 16px;">Timings:</label>
                <textarea name="hospital_timings" rows="3"
                          style="width: 100%; padding: 14px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 16px; resize: vertical;"
                          onfocus="this.style.borderColor='#3498db'" 
                          onblur="this.style.borderColor='#e0e0e0'">{{ settings.get('hospital_timings', '') }}</textarea>
            </div>
            
            <h2 style="color: #34495e; margin: 30px 0 25px 0; padding-bottom: 15px; border-bottom: 2px solid #ecf0f1;">🎫 Token Settings</h2>
            
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 30px;">
                <div>
                    <label style="display: block; margin-bottom: 8px; font-weight: 600; color: #2c3e50; font-size: 16px;">Token Prefix:</label>
                    <input type="text" name="token_prefix" value="{{ settings.get('token_prefix', '') }}" 
                           style="width: 100%; padding: 14px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 16px;"
                           onfocus="this.style.borderColor='#3498db'" 
                           onblur="this.style.borderColor='#e0e0e0'">
                    <small style="color: #7f8c8d; font-size: 14px;">Example: TKT-001</small>
                </div>
                
                <div>
                    <label style="display: block; margin-bottom: 8px; font-weight: 600; color: #2c3e50; font-size: 16px;">Token Suffix:</label>
                    <input type="text" name="token_suffix" value="{{ settings.get('token_suffix', '') }}" 
                           style="width: 100%; padding: 14px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 16px;"
                           onfocus="this.style.borderColor='#3498db'" 
                           onblur="this.style.borderColor='#e0e0e0'">
                    <small style="color: #7f8c8d; font-size: 14px;">Example: 001-TKT</small>
                </div>
            </div>
            
            <h2 style="color: #34495e; margin: 30px 0 25px 0; padding-bottom: 15px; border-bottom: 2px solid #ecf0f1;">💰 Billing Invoice Settings</h2>
            
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 30px;">
                <div>
                    <label style="display: block; margin-bottom: 8px; font-weight: 600; color: #2c3e50; font-size: 16px;">Invoice Prefix:</label>
                    <input type="text" name="billing_invoice_prefix" value="{{ settings.get('billing_invoice_prefix', '') }}" 
                           style="width: 100%; padding: 14px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 16px;"
                           onfocus="this.style.borderColor='#3498db'" 
                           onblur="this.style.borderColor='#e0e0e0'">
                    <small style="color: #7f8c8d; font-size: 14px;">Example: INV-001</small>
                </div>
                
                <div>
                    <label style="display: block; margin-bottom: 8px; font-weight: 600; color: #2c3e50; font-size: 16px;">Invoice Suffix:</label>
                    <input type="text" name="billing_invoice_suffix" value="{{ settings.get('billing_invoice_suffix', '') }}" 
                           style="width: 100%; padding: 14px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 16px;"
                           onfocus="this.style.borderColor='#3498db'" 
                           onblur="this.style.borderColor='#e0e0e0'">
                    <small style="color: #7f8c8d; font-size: 14px;">Example: 001-INV</small>
                </div>
            </div>
            
            <div style="margin-bottom: 25px;">
                <label style="display: block; margin-bottom: 8px; font-weight: 600; color: #2c3e50; font-size: 16px;">Invoice Footer Text:</label>
                <textarea name="billing_footer_text" rows="3"
                          style="width: 100%; padding: 14px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 16px; resize: vertical;"
                          onfocus="this.style.borderColor='#3498db'" 
                          onblur="this.style.borderColor='#e0e0e0'">{{ settings.get('billing_footer_text', '') }}</textarea>
            </div>
            
            <div style="text-align: center; margin-top: 40px;">
                <button type="submit" class="btn btn-success" style="padding: 16px 40px; font-size: 18px; border-radius: 8px;">
                    💾 Save Settings
                </button>
            </div>
        </form>
    </div>
</div>

<style>
.btn {
    border: none;
    cursor: pointer;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    transition: all 0.3s ease;
    font-weight: 600;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.btn-success { background: #27ae60; color: white; }

@media (max-width: 768px) {
    .btn {
        padding: 14px 30px !important;
        font-size: 16px !important;
    }
    
    div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
}
</style>
{% endblock %}