@extends('layouts.admin')
@section('title','Settings')
@section('page-title','⚙️ Settings')

@section('styles')
<style>
.logo-text, .sidebar .logo-text, .main-sidebar .logo-text {
    color: transparent !important;
    text-indent: -9999px !important;
    background-image: url('{{ asset("images/logo.png") }}') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    width: 100% !important;
    height: 65px !important;
    display: block !important;
    margin: 10px 0 !important;
    overflow: hidden !important;
}

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.responsive-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 768px) {
    .logo-text, .sidebar .logo-text, .main-sidebar .logo-text {
        height: 45px !important;
        margin: 5px 0 !important;
    }
    .card, .del-card, .settings-card { padding: 16px !important; }
    .filter-bar { flex-direction: column; align-items: stretch !important; }
    .filter-group, .filter-select, .filter-input { width: 100% !important; }
    .responsive-form-grid, .view-grid { grid-template-columns: 1fr !important; }
}
</style>
@endsection

@section('content')
<div style="max-width:680px">
<div class="card">
    <div class="card-title">🏢 Site Settings</div>
    <form method="POST" action="{{ route('admin.settings.update') }}">
        @csrf
        <div class="responsive-form-grid" style="margin-bottom:16px">
            <div>
                <label style="display:block;margin-bottom:6px;font-size:13px;font-weight:600;color:#555">Site Name</label>
                <input type="text" name="site_name" value="{{ $settings['site_name'] ?? 'Yahya Playland' }}"
                       style="width:100%;padding:11px;border:2px solid #e0e0e0;border-radius:9px;font-size:14px;outline:none">
            </div>
            <div>
                <label style="display:block;margin-bottom:6px;font-size:13px;font-weight:600;color:#555">Contact Phone</label>
                <input type="text" name="contact_phone" value="{{ $settings['contact_phone'] ?? '0477 390 650' }}"
                       style="width:100%;padding:11px;border:2px solid #e0e0e0;border-radius:9px;font-size:14px;outline:none">
            </div>
            <div>
                <label style="display:block;margin-bottom:6px;font-size:13px;font-weight:600;color:#555">Contact Email</label>
                <input type="email" name="contact_email" value="{{ $settings['contact_email'] ?? '' }}"
                       style="width:100%;padding:11px;border:2px solid #e0e0e0;border-radius:9px;font-size:14px;outline:none">
            </div>
            <div>
                <label style="display:block;margin-bottom:6px;font-size:13px;font-weight:600;color:#555">Business Address</label>
                <input type="text" name="site_address" value="{{ $settings['site_address'] ?? '' }}"
                       style="width:100%;padding:11px;border:2px solid #e0e0e0;border-radius:9px;font-size:14px;outline:none">
            </div>
        </div>

        <div style="background:#f8f9fa;padding:18px;border-radius:10px;margin-bottom:18px">
            <h4 style="font-size:14px;color:#1e3c72;margin-bottom:14px">💰 Payment Settings</h4>
            <div class="responsive-form-grid">
                <div>
                    <label style="display:block;margin-bottom:6px;font-size:13px;font-weight:600;color:#555">Minimum Credit Amount ($)</label>
                    <input type="number" name="min_credit" value="{{ $settings['min_credit'] ?? 100 }}" min="0" step="1"
                           style="width:100%;padding:11px;border:2px solid #e0e0e0;border-radius:9px;font-size:14px;outline:none">
                </div>
                <div>
                    <label style="display:block;margin-bottom:6px;font-size:13px;font-weight:600;color:#555">Minimum Donation Amount ($)</label>
                    <input type="number" name="min_donation" value="{{ $settings['min_donation'] ?? 2 }}" min="0" step="1"
                           style="width:100%;padding:11px;border:2px solid #e0e0e0;border-radius:9px;font-size:14px;outline:none">
                </div>
            </div>
        </div>

        <div style="background:#f0f4ff;padding:16px;border-radius:10px;margin-bottom:18px">
            <h4 style="font-size:14px;color:#1e3c72;margin-bottom:6px">🔑 Stripe Keys</h4>
            <p style="font-size:13px;color:#888">Stripe keys are managed in the <code style="background:#e8eaf0;padding:2px 6px;border-radius:4px">.env</code> file for security. Edit <code style="background:#e8eaf0;padding:2px 6px;border-radius:4px">STRIPE_KEY</code> and <code style="background:#e8eaf0;padding:2px 6px;border-radius:4px">STRIPE_SECRET</code> there.</p>
            <div style="margin-top:10px;font-size:13px;color:#555">
                <strong>Current Publishable Key:</strong>
                <code style="background:#e8eaf0;padding:2px 8px;border-radius:4px">{{ substr(config('services.stripe.key'), 0, 12) }}…</code>
            </div>
        </div>

        <button type="submit" style="padding:13px 30px;background:linear-gradient(135deg,#1e3c72,#2a5298);color:#fff;border:none;border-radius:10px;cursor:pointer;font-size:15px;font-weight:600">
            💾 Save Settings
        </button>
    </form>
</div>
</div>
@endsection