@extends('layouts.app')
@section('title', 'General Settings')
@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
    <li class="breadcrumb-item active">General Settings</li>
@endsection
@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">Company Settings</h1>
        <p class="page-subtitle">Configure your company profile and display preferences</p>
    </div>
</div>

@include('settings._tabs', ['active' => 'general'])

@if(session('success'))
<div class="alert alert-success alert-dismissible d-flex gap-2 mb-4">
    <i class="bi bi-check-circle flex-shrink-0"></i><div>{{ session('success') }}</div>
    <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert"></button>
</div>
@endif

<form method="POST" action="{{ route('settings.general.update') }}" enctype="multipart/form-data" id="settingsForm">
@csrf @method('PUT')

<div class="row g-4">

    {{-- ── Company Profile ──────────────────────────────────────────────── --}}
    <div class="col-12 col-xl-6">
        <div class="card h-100">
            <div class="card-header"><i class="bi bi-building me-2 text-primary"></i>Company Profile</div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-12">
                        <label class="form-label fw-semibold">Company Logo</label>
                        <div class="form-text mb-2">Shown in the <strong>sidebar</strong>, on <strong>reports</strong>, and in <strong>documents</strong>. Does not change the login page (that is managed in Super Admin).</div>
                        <div class="d-flex align-items-center gap-3 mb-2">
                            @if($company->hasLogo())
                                <div class="logo-preview">
                                    <x-company-logo context="settings" :company="$company" />
                                </div>
                            @else
                                <div style="width:60px;height:60px;background:var(--accent);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--primary);font-weight:700;font-size:22px">
                                    {{ strtoupper(substr($company->name,0,1)) }}
                                </div>
                            @endif
                            <div>
                                <input type="file" name="logo" id="logoInput" accept="image/png,image/jpeg,image/svg+xml" class="form-control form-control-sm">
                                <div class="form-text">PNG/JPG/SVG, max 2MB. Recommended: 200×60px</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12">
                        <label class="form-label fw-semibold">Company Name <span class="text-danger">*</span></label>
                        <input type="text" name="company_name" class="form-control @error('company_name') is-invalid @enderror"
                               value="{{ old('company_name', $company->name) }}" required>
                        @error('company_name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="col-6">
                        <label class="form-label fw-semibold">Email</label>
                        <input type="email" name="company_email" class="form-control"
                               value="{{ old('company_email', $company->email) }}" placeholder="info@company.com">
                    </div>
                    <div class="col-6">
                        <label class="form-label fw-semibold">Phone</label>
                        <input type="text" name="company_phone" class="form-control"
                               value="{{ old('company_phone', $company->phone) }}">
                    </div>
                    <div class="col-6">
                        <label class="form-label fw-semibold">Tax / VAT ID</label>
                        <input type="text" name="company_tax_id" class="form-control"
                               value="{{ old('company_tax_id', $company->tax_id) }}" placeholder="VAT number">
                    </div>
                    <div class="col-6">
                        <label class="form-label fw-semibold">Website</label>
                        <input type="url" name="company_website" class="form-control"
                               value="{{ old('company_website', $company->website) }}" placeholder="https://...">
                    </div>
                    <div class="col-6">
                        <label class="form-label fw-semibold">Country</label>
                        <select name="company_country" class="form-select select2">
                            <option value="">— Select Country —</option>
                            @foreach($countryOptions as $country)
                                <option value="{{ $country }}" {{ old('company_country', $company->country) === $country ? 'selected' : '' }}>{{ $country }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-12">
                        <label class="form-label fw-semibold">Address</label>
                        <textarea name="company_address" class="form-control" rows="2">{{ old('company_address', $company->address) }}</textarea>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ── Display Preferences ──────────────────────────────────────────── --}}
    <div class="col-12 col-xl-6">
        <div class="card mb-4">
            <div class="card-header"><i class="bi bi-display me-2 text-primary"></i>Display Preferences</div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-6">
                        <label class="form-label fw-semibold">Timezone <span class="text-danger">*</span></label>
                        <select name="timezone" class="form-select select2">
                            @foreach($timezones as $tz)
                                <option value="{{ $tz }}" {{ $settings['timezone']===$tz?'selected':'' }}>{{ $tz }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-6">
                        <label class="form-label fw-semibold">Date Format <span class="text-danger">*</span></label>
                        <select name="date_format" class="form-select">
                            @foreach(['DD/MM/YYYY','MM/DD/YYYY','YYYY-MM-DD','DD-MM-YYYY','DD.MM.YYYY'] as $fmt)
                                <option value="{{ $fmt }}" {{ $settings['date_format']===$fmt?'selected':'' }}>{{ $fmt }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-6">
                        <label class="form-label fw-semibold">Base Currency Code <span class="text-danger">*</span></label>
                        <select name="currency_code" class="form-select select2" id="currencySelect">
                            @foreach($currencyOptions as $cur)
                                <option value="{{ $cur['code'] }}" data-symbol="{{ $cur['symbol'] }}"
                                        {{ $settings['currency_code']===$cur['code']?'selected':'' }}>
                                    {{ $cur['code'] }} — {{ $cur['name'] }} ({{ $cur['symbol'] }})
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-6">
                        <label class="form-label fw-semibold">Currency Symbol <span class="text-danger">*</span></label>
                        <input type="text" name="currency_symbol" id="currencySymbol" class="form-control"
                               value="{{ old('currency_symbol', $settings['currency_symbol']) }}" maxlength="5" required>
                    </div>
                    <div class="col-4">
                        <label class="form-label fw-semibold">Amount Decimals</label>
                        <select name="amount_decimals" class="form-select">
                            @foreach([0,1,2,3,4] as $d)<option value="{{ $d }}" {{ $settings['amount_decimals']==$d?'selected':'' }}>{{ $d }}</option>@endforeach
                        </select>
                    </div>
                    <div class="col-4">
                        <label class="form-label fw-semibold">Qty Decimals</label>
                        <select name="qty_decimals" class="form-select">
                            @foreach([0,1,2,3,4] as $d)<option value="{{ $d }}" {{ $settings['qty_decimals']==$d?'selected':'' }}>{{ $d }}</option>@endforeach
                        </select>
                    </div>
                    <div class="col-4">
                        <label class="form-label fw-semibold">Rate Decimals</label>
                        <select name="rate_decimals" class="form-select">
                            @foreach([2,3,4,5,6] as $d)<option value="{{ $d }}" {{ $settings['rate_decimals']==$d?'selected':'' }}>{{ $d }}</option>@endforeach
                        </select>
                    </div>
                    <div class="col-6">
                        <label class="form-label fw-semibold">Thousand Separator</label>
                        <select name="thousand_separator" class="form-select" id="thousandSeparatorSelect">
                            <option value="comma"  {{ $settings['thousand_separator']===','?'selected':'' }}>Comma (1,000)</option>
                            <option value="period" {{ $settings['thousand_separator']==='.'?'selected':'' }}>Period (1.000)</option>
                            <option value="space"  {{ $settings['thousand_separator']===' '?'selected':'' }}>Space (1 000)</option>
                        </select>
                        <div class="form-text" id="bdtGroupingHint" style="{{ strtoupper($settings['currency_code'] ?? '') === 'BDT' ? '' : 'display:none' }}">
                            BDT uses Bangladeshi grouping automatically: 5,000 | 1,50,000 | 2,50,00,000
                        </div>
                    </div>
                    <div class="col-6">
                        <label class="form-label fw-semibold">Amount in Words</label>
                        <select name="amount_in_words_language" class="form-select">
                            <option value="en" {{ $settings['amount_in_words_language']==='en'?'selected':'' }}>English</option>
                            <option value="bn" {{ $settings['amount_in_words_language']==='bn'?'selected':'' }}>Bengali (বাংলা)</option>
                        </select>
                        <div class="form-text" id="bdtAmountWordsHint" style="{{ strtoupper($settings['currency_code'] ?? '') === 'BDT' ? '' : 'display:none' }}">
                            BDT uses lakh/crore wording: e.g. Five Thousand Taka, One Lakh Fifty Thousand Taka, Two Crore Fifty Lakh Taka.
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Number Format Preview --}}
        <div class="card">
            <div class="card-header"><i class="bi bi-eye me-2 text-primary"></i>Number Format Preview</div>
            <div class="card-body">
                <table class="table table-sm mb-0" style="font-size:13px">
                    <tr><td class="text-muted">Amount</td><td class="fw-semibold" id="previewAmount">$ 1,234,567.89</td></tr>
                    <tr><td class="text-muted">Quantity</td><td class="fw-semibold" id="previewQty">1,234.50</td></tr>
                    <tr><td class="text-muted">Unit Rate</td><td class="fw-semibold" id="previewRate">25.5000</td></tr>
                    <tr><td class="text-muted">Amount in Words</td><td class="fw-semibold text-primary" id="previewWords">One Million Two Hundred...</td></tr>
                </table>
            </div>
        </div>
    </div>

    {{-- ── Transaction Preferences ──────────────────────────────────────── --}}
    <div class="col-12 col-xl-6">
        <div class="card">
            <div class="card-header"><i class="bi bi-sliders me-2 text-primary"></i>Transaction Preferences</div>
            <div class="card-body">
                <div class="p-3 rounded-2 border bg-light">
                    <div class="form-check form-switch mb-1">
                        <input class="form-check-input" type="checkbox" name="beep_on_save"
                               value="1" id="beepOnSave" role="switch"
                               {{ ($settings['beep_on_save'] ?? '1') === '1' ? 'checked' : '' }}>
                        <label class="form-check-label fw-semibold" for="beepOnSave">
                            <i class="bi bi-volume-up me-1 text-primary"></i>Beep Sound When Saving a Transaction
                        </label>
                    </div>
                    <div class="text-muted" style="font-size:12px">
                        When <strong>ON</strong>: a short beep sound plays each time a transaction
                        is saved successfully — useful for fast data entry.
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ── Voucher Signatory ────────────────────────────────────────────── --}}
    <div class="col-12 col-xl-6">
        <div class="card">
            <div class="card-header"><i class="bi bi-pen me-2 text-primary"></i>Voucher Signatory</div>
            <div class="card-body">
                <p class="text-muted mb-3" style="font-size:13px">
                    Signature blocks shown on printed vouchers. The first, second and last labels are always shown
                    (defaults: "Prepared By", "Checked By", "Approved By"); customise them as needed.
                    The two middle custom labels appear only if filled in.
                </p>
                <div class="row g-3">
                    <div class="col-12 col-sm-4">
                        <label class="form-label fw-semibold" style="font-size:12.5px">1. Prepared By</label>
                        <input type="text" name="signatory_prepared_by" class="form-control form-control-sm"
                               value="{{ old('signatory_prepared_by', $settings['signatory_prepared_by'] ?? 'Prepared By') }}"
                               placeholder="Prepared By">
                    </div>
                    <div class="col-12 col-sm-4">
                        <label class="form-label fw-semibold" style="font-size:12.5px">2. Checked By</label>
                        <input type="text" name="signatory_checked_by" class="form-control form-control-sm"
                               value="{{ old('signatory_checked_by', $settings['signatory_checked_by'] ?? 'Checked By') }}"
                               placeholder="Checked By">
                    </div>
                    <div class="col-12 col-sm-4">
                        <label class="form-label fw-semibold" style="font-size:12.5px">3. Custom Signatory 1 <span class="text-muted">(optional)</span></label>
                        <input type="text" name="signatory_custom1" class="form-control form-control-sm"
                               value="{{ old('signatory_custom1', $settings['signatory_custom1'] ?? '') }}"
                               placeholder="e.g. Verified By">
                    </div>
                    <div class="col-12 col-sm-4">
                        <label class="form-label fw-semibold" style="font-size:12.5px">4. Custom Signatory 2 <span class="text-muted">(optional)</span></label>
                        <input type="text" name="signatory_custom2" class="form-control form-control-sm"
                               value="{{ old('signatory_custom2', $settings['signatory_custom2'] ?? '') }}"
                               placeholder="e.g. Authorized By">
                    </div>
                    <div class="col-12 col-sm-4">
                        <label class="form-label fw-semibold" style="font-size:12.5px">5. Approved By</label>
                        <input type="text" name="signatory_approved_by" class="form-control form-control-sm"
                               value="{{ old('signatory_approved_by', $settings['signatory_approved_by'] ?? 'Approved By') }}"
                               placeholder="Approved By">
                    </div>
                </div>
                <div class="mt-3 text-muted" style="font-size:12px">
                    <i class="bi bi-info-circle me-1"></i>
                    Leave the custom fields blank to hide them on printed vouchers.
                    Leave the fixed fields blank to use the default labels.
                </div>
            </div>
        </div>
    </div>

    {{-- ── SMTP Setup ───────────────────────────────────────────────────── --}}
    <div class="col-12">
        <div class="card">
            <div class="card-header"><i class="bi bi-envelope-at me-2 text-primary"></i>SMTP Setup
                <span class="badge ms-2" style="background:#EBF3FB;color:#1B4F8A;font-size:11px;font-weight:500">For emailing reports &amp; documents</span>
            </div>
            <div class="card-body">
                <p class="text-muted mb-3" style="font-size:13px">
                    Configure outgoing email settings to allow the system to send reports,
                    invoices and other documents directly from your company email address.
                </p>
                <div class="row g-3">
                    <div class="col-12 col-sm-6 col-md-4">
                        <label class="form-label fw-semibold">SMTP Host</label>
                        <input type="text" name="smtp_host" class="form-control"
                               value="{{ old('smtp_host', $settings['smtp_host'] ?? '') }}"
                               placeholder="e.g. smtp.gmail.com">
                    </div>
                    <div class="col-6 col-sm-3 col-md-2">
                        <label class="form-label fw-semibold">Port</label>
                        <input type="number" name="smtp_port" class="form-control"
                               value="{{ old('smtp_port', $settings['smtp_port'] ?? '587') }}"
                               placeholder="587">
                    </div>
                    <div class="col-6 col-sm-3 col-md-2">
                        <label class="form-label fw-semibold">Encryption</label>
                        <select name="smtp_encryption" class="form-select">
                            <option value="tls"  {{ ($settings['smtp_encryption'] ?? 'tls') === 'tls'  ? 'selected' : '' }}>TLS</option>
                            <option value="ssl"  {{ ($settings['smtp_encryption'] ?? '')    === 'ssl'  ? 'selected' : '' }}>SSL</option>
                            <option value="none" {{ ($settings['smtp_encryption'] ?? '')    === 'none' ? 'selected' : '' }}>None</option>
                        </select>
                    </div>
                    <div class="col-12 col-sm-6 col-md-4">
                        <label class="form-label fw-semibold">SMTP Username</label>
                        <input type="text" name="smtp_username" class="form-control"
                               value="{{ old('smtp_username', $settings['smtp_username'] ?? '') }}"
                               placeholder="your@email.com" autocomplete="off">
                    </div>
                    <div class="col-12 col-sm-6 col-md-4">
                        <label class="form-label fw-semibold">SMTP Password</label>
                        <div class="input-group">
                            <input type="password" name="smtp_password" id="smtpPass" class="form-control"
                                   value="{{ old('smtp_password', $settings['smtp_password'] ?? '') }}"
                                   placeholder="App password or SMTP password" autocomplete="off">
                            <button type="button" class="btn btn-outline-secondary" id="toggleSmtpPass">
                                <i class="bi bi-eye" id="smtpPassIcon"></i>
                            </button>
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 col-md-4">
                        <label class="form-label fw-semibold">From Name</label>
                        <input type="text" name="smtp_from_name" class="form-control"
                               value="{{ old('smtp_from_name', $settings['smtp_from_name'] ?? '') }}"
                               placeholder="e.g. Demo Company Ltd">
                    </div>
                    <div class="col-12 col-sm-6 col-md-4">
                        <label class="form-label fw-semibold">From Email</label>
                        <input type="email" name="smtp_from_email" class="form-control"
                               value="{{ old('smtp_from_email', $settings['smtp_from_email'] ?? '') }}"
                               placeholder="noreply@company.com">
                    </div>
                </div>
                {{-- Test Recipient + Send Test --}}
                <div class="row g-3 mt-1">
                    <div class="col-12 col-sm-6 col-md-5">
                        <label class="form-label fw-semibold">Test Mail Recipient</label>
                        <input type="email" id="smtpTestRecipient" class="form-control"
                               placeholder="e.g. you@example.com"
                               value="{{ auth()->user()->email ?? '' }}">
                        <div class="form-text" style="font-size:11.5px">Enter an email address to receive the test mail</div>
                    </div>
                    <div class="col-12 col-sm-6 col-md-4 d-flex align-items-end pb-1">
                        <button type="button" class="btn btn-outline-primary" id="testSmtpBtn">
                            <i class="bi bi-send me-1"></i>Send Test Mail
                        </button>
                    </div>
                </div>

                {{-- Result message --}}
                <div id="smtpTestResult" class="mt-3" style="display:none"></div>
            </div>
        </div>
    </div>

    {{-- Action Bar --}}
    <div class="col-12">
        <div class="d-flex gap-3 justify-content-end">
            <a href="{{ route('dashboard') }}" class="btn btn-outline-secondary">
                <i class="bi bi-x me-1"></i>Cancel
            </a>
            <button type="submit" class="btn btn-primary px-4" id="saveBtn">
                <i class="bi bi-check-circle me-1"></i>Save General Settings
            </button>
        </div>
    </div>
</div>
</form>
@endsection

@push('scripts')
<script>
const symbolMap = @json($symbolMap);
const bdtGroupingHint = document.getElementById('bdtGroupingHint');

function toggleBdtGroupingHint() {
    if (!bdtGroupingHint) return;
    const code = document.getElementById('currencySelect')?.value || '';
    bdtGroupingHint.style.display = code === 'BDT' ? '' : 'none';
}

$('#currencySelect').on('change', function() {
    const code = $(this).val();
    if (code && symbolMap[code]) $('#currencySymbol').val(symbolMap[code]);
    toggleBdtGroupingHint();
});

toggleBdtGroupingHint();

document.getElementById('settingsForm').addEventListener('submit', function() {
    const btn = document.getElementById('saveBtn');
    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Saving...';
    btn.disabled = true;
});

// Toggle SMTP password visibility
document.getElementById('toggleSmtpPass').addEventListener('click', function() {
    const input = document.getElementById('smtpPass');
    const icon  = document.getElementById('smtpPassIcon');
    if (input.type === 'password') {
        input.type = 'text';
        icon.className = 'bi bi-eye-slash';
    } else {
        input.type = 'password';
        icon.className = 'bi bi-eye';
    }
});

// SMTP Test Mail
document.getElementById('testSmtpBtn').addEventListener('click', function() {
    const btn       = this;
    const resultEl  = document.getElementById('smtpTestResult');
    const recipient = document.getElementById('smtpTestRecipient').value.trim();

    if (!recipient) {
        resultEl.style.display = '';
        resultEl.innerHTML = '<div class="alert alert-warning py-2 d-flex gap-2 align-items-center" style="font-size:13px"><i class="bi bi-exclamation-triangle flex-shrink-0"></i><div>Please enter a test mail recipient email address.</div></div>';
        return;
    }

    const host       = document.querySelector('[name="smtp_host"]').value.trim();
    const port       = document.querySelector('[name="smtp_port"]').value.trim();
    const username   = document.querySelector('[name="smtp_username"]').value.trim();
    const password   = document.getElementById('smtpPass').value.trim();
    const fromName   = document.querySelector('[name="smtp_from_name"]').value.trim();
    const fromEmail  = document.querySelector('[name="smtp_from_email"]').value.trim();
    const encryption = document.querySelector('[name="smtp_encryption"]').value;

    if (!host || !port || !username || !password || !fromEmail || !fromName) {
        resultEl.style.display = '';
        resultEl.innerHTML = '<div class="alert alert-warning py-2 d-flex gap-2 align-items-center" style="font-size:13px"><i class="bi bi-exclamation-triangle flex-shrink-0"></i><div>Please fill in all SMTP fields (Host, Port, Username, Password, From Name, From Email) before testing.</div></div>';
        return;
    }

    // Loading state
    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Sending...';
    btn.disabled  = true;
    resultEl.style.display = 'none';

    const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

    fetch('{{ route("settings.test-smtp") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': csrfToken,
            'Accept': 'application/json',
        },
        body: JSON.stringify({
            smtp_host:      host,
            smtp_port:      port,
            smtp_username:  username,
            smtp_password:  password,
            smtp_from_name: fromName,
            smtp_from_email:fromEmail,
            smtp_encryption:encryption,
            test_recipient: recipient,
        })
    })
    .then(r => r.json())
    .then(data => {
        resultEl.style.display = '';
        if (data.success) {
            resultEl.innerHTML = '<div class="alert alert-success py-2 d-flex gap-2 align-items-center" style="font-size:13px"><i class="bi bi-check-circle-fill flex-shrink-0 text-success"></i><div><strong>Success!</strong> ' + data.message + '</div></div>';
        } else {
            resultEl.innerHTML = '<div class="alert alert-danger py-2 d-flex gap-2 align-items-start" style="font-size:13px"><i class="bi bi-x-circle-fill flex-shrink-0 text-danger mt-1"></i><div><strong>Failed!</strong> ' + data.message + '</div></div>';
        }
    })
    .catch(err => {
        resultEl.style.display = '';
        resultEl.innerHTML = '<div class="alert alert-danger py-2 d-flex gap-2 align-items-center" style="font-size:13px"><i class="bi bi-x-circle-fill flex-shrink-0"></i><div><strong>Error!</strong> Could not reach the server. Please try again.</div></div>';
    })
    .finally(() => {
        btn.innerHTML = '<i class="bi bi-send me-1"></i>Send Test Mail';
        btn.disabled  = false;
    });
});
</script>
@endpush