@include('Partials.sidebar')
<section class="main_content dashboard_part large_header_bg">
    @include('Partials.header')
    <div class="main_content_iner default_main_contaner_iner">
        <div class="page-body">

            <div class="container-fluid">
                <div class="page-title">
                    <div class="row">
                        <div class="col-sm-6 ps-0"><h3>App Settings</h3></div>
                        <div class="col-sm-6 pe-0">
                            <ol class="bc">
                                <li><a href="/admin/dashboard" class="bc-home"><i class="fas fa-home"></i></a></li>
                                <li class="bc-sep">›</li>
                                <li class="bc-active">Settings</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>

            @if(session('success'))
                <div class="container-fluid">
                    <div class="alert alert-success alert-dismissible fade show">
                        <i class="fas fa-check-circle mr-2"></i>{{ session('success') }}
                        <button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
                    </div>
                </div>
            @endif

            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-6">
                        <div class="card" style="border-left:4px solid #c9a96e;">
                            <div class="card-header">
                                <h5 class="mb-0">
                                    <i class="fas fa-dollar-sign mr-2 text-warning"></i>Currency Settings
                                </h5>
                            </div>
                            <div class="card-body">
                                <form action="{{ route('admin.settings.update') }}" method="POST">
                                    @csrf
                                    <div class="form-group">
                                        <label class="font-weight-bold">
                                            Currency Symbol
                                            <small class="text-muted font-weight-normal">e.g. ₹, $, €, £</small>
                                        </label>
                                        <input type="text" name="currency_symbol" class="form-control"
                                               value="{{ $settings['currency_symbol'] ?? '₹' }}"
                                               placeholder="₹" maxlength="10" required>
                                    </div>
                                    <div class="form-group">
                                        <label class="font-weight-bold">
                                            Currency Code
                                            <small class="text-muted font-weight-normal">e.g. INR, USD, EUR</small>
                                        </label>
                                        <input type="text" name="currency_code" class="form-control"
                                               value="{{ $settings['currency_code'] ?? 'INR' }}"
                                               placeholder="INR" maxlength="10" required>
                                    </div>
                                    <div class="form-group">
                                        <label class="font-weight-bold">Symbol Position</label>
                                        <div class="d-flex" style="gap:20px;margin-top:8px;">
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="currency_position"
                                                       value="before" id="pos_before"
                                                       {{ ($settings['currency_position'] ?? 'before') === 'before' ? 'checked' : '' }}>
                                                <label class="form-check-label" for="pos_before">
                                                    Before amount <small class="text-muted">(₹ 5,000)</small>
                                                </label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="currency_position"
                                                       value="after" id="pos_after"
                                                       {{ ($settings['currency_position'] ?? 'before') === 'after' ? 'checked' : '' }}>
                                                <label class="form-check-label" for="pos_after">
                                                    After amount <small class="text-muted">(5,000 ₹)</small>
                                                </label>
                                            </div>
                                        </div>
                                    </div>

                                    {{-- Live preview --}}
                                    <div style="background:#f8f9fa;border-radius:8px;padding:14px 16px;margin-bottom:16px;">
                                        <small class="text-muted d-block mb-1">Preview:</small>
                                        <strong id="currency-preview" style="font-size:18px;color:#28a745;">
                                            ₹ 50,00,000
                                        </strong>
                                    </div>

                                    <button type="submit" class="btn btn-primary">
                                        <i class="fas fa-save mr-1"></i> Save Settings
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>

<script>
function updatePreview() {
    var symbol   = document.querySelector('[name=currency_symbol]').value || '₹';
    var position = document.querySelector('[name=currency_position]:checked')?.value || 'before';
    var preview  = document.getElementById('currency-preview');
    preview.textContent = position === 'before'
        ? symbol + ' 50,00,000'
        : '50,00,000 ' + symbol;
}
document.querySelector('[name=currency_symbol]').addEventListener('input', updatePreview);
document.querySelectorAll('[name=currency_position]').forEach(function(el) {
    el.addEventListener('change', updatePreview);
});
updatePreview();
</script>

@include('Partials.footer')