@extends('layouts.app')
@section('title', 'Pengaturan Sistem')
@section('breadcrumb')
    <li class="breadcrumb-item active">Pengaturan Sistem</li>
@endsection
@section('content')
<div class="page-header">
    <h4><i class="bi bi-gear-fill me-2 text-secondary"></i>Pengaturan Sistem</h4>
</div>

<ul class="nav nav-tabs mb-3" id="settingsTabs" role="tablist">
    <li class="nav-item" role="presentation">
        <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#general" type="button">
            <i class="bi bi-sliders me-1"></i><span class="d-none d-sm-inline">Pengaturan Umum</span><span class="d-sm-none">Umum</span>
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#datasource" type="button">
            <i class="bi bi-database me-1"></i><span class="d-none d-sm-inline">Sumber Data</span><span class="d-sm-none">Data</span>
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#backup" type="button">
            <i class="bi bi-cloud-arrow-down me-1"></i><span class="d-none d-sm-inline">Backup & Restore</span><span class="d-sm-none">Backup</span>
        </button>
    </li>
</ul>

<div class="tab-content" id="settingsTabContent">

    {{-- ══════════════════════════════
         Tab: Pengaturan Umum
         ══════════════════════════════ --}}
    <div class="tab-pane fade show active" id="general" role="tabpanel">
        <form method="POST" action="{{ route('app-settings.update-general') }}">
            @csrf
            <div class="card mb-3">
                <div class="card-header py-3">
                    <h6 class="mb-0 fw-bold"><i class="bi bi-building me-2"></i>Informasi Perusahaan / Bengkel</h6>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-8">
                            <label class="form-label">Nama Perusahaan / Bengkel</label>
                            <input type="text" name="company_name" class="form-control"
                                   value="{{ old('company_name', $settings['company_name']) }}"
                                   placeholder="Contoh: Bengkel Servis Elektronik Jaya">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Kota</label>
                            <input type="text" name="city" class="form-control"
                                   value="{{ old('city', $settings['city']) }}"
                                   placeholder="Jakarta">
                        </div>
                        <div class="col-12">
                            <label class="form-label">Alamat Lengkap</label>
                            <textarea name="address" class="form-control" rows="2"
                                      placeholder="Jl. Contoh No. 1, Kelurahan, Kecamatan">{{ old('address', $settings['address']) }}</textarea>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Nomor Telepon</label>
                            <input type="text" name="phone" class="form-control"
                                   value="{{ old('phone', $settings['phone']) }}"
                                   placeholder="021-XXXXXXX atau 08XX-XXXX-XXXX">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Email</label>
                            <input type="email" name="email" class="form-control"
                                   value="{{ old('email', $settings['email']) }}"
                                   placeholder="bengkel@email.com">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Jam Operasional</label>
                            <input type="text" name="operating_hours" class="form-control"
                                   value="{{ old('operating_hours', $settings['operating_hours']) }}"
                                   placeholder="Senin–Sabtu, 08.00–17.00">
                        </div>
                    </div>
                </div>
            </div>

            <div class="card mb-3">
                <div class="card-header py-3">
                    <h6 class="mb-0 fw-bold"><i class="bi bi-file-earmark-text me-2"></i>Konfigurasi Dokumen</h6>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-3">
                            <label class="form-label">Pajak (%)</label>
                            <div class="input-group">
                                <input type="number" name="tax_rate" class="form-control"
                                       value="{{ old('tax_rate', $settings['tax_rate']) }}"
                                       min="0" max="100" step="0.1">
                                <span class="input-group-text">%</span>
                            </div>
                            <div class="form-text">0 = tidak ada pajak</div>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Prefix Invoice</label>
                            <input type="text" name="invoice_prefix" class="form-control text-uppercase"
                                   value="{{ old('invoice_prefix', $settings['invoice_prefix']) }}"
                                   maxlength="10" placeholder="INV">
                            <div class="form-text">Contoh: INV → <code>INV-00001</code></div>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Prefix Order Servis</label>
                            <input type="text" name="order_prefix" class="form-control text-uppercase"
                                   value="{{ old('order_prefix', $settings['order_prefix']) }}"
                                   maxlength="10" placeholder="SVC">
                            <div class="form-text">Contoh: SVC → <code>SVC-00001</code></div>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Prefix Garansi</label>
                            <input type="text" name="warranty_prefix" class="form-control text-uppercase"
                                   value="{{ old('warranty_prefix', $settings['warranty_prefix']) }}"
                                   maxlength="10" placeholder="WRN">
                            <div class="form-text">Contoh: WRN → <code>WRN-00001</code></div>
                        </div>
                    </div>
                </div>
            </div>

            <button type="submit" class="btn btn-primary">
                <i class="bi bi-check-lg me-1"></i>Simpan Pengaturan
            </button>
        </form>
    </div>

    {{-- ══════════════════════════════
         Tab: Sumber Data
         ══════════════════════════════ --}}
    <div class="tab-pane fade" id="datasource" role="tabpanel">
        <div class="row g-3 mb-3">

            {{-- MySQL Card --}}
            <div class="col-md-6">
                <div class="card h-100 {{ $settings['data_source'] === 'database' ? 'border-primary border-2' : '' }}">
                    <div class="card-header py-3 d-flex justify-content-between align-items-center">
                        <h6 class="mb-0 fw-bold"><i class="bi bi-server me-2 text-primary"></i>Database (MySQL)</h6>
                        @if($settings['data_source'] === 'database')
                            <span class="badge bg-primary"><i class="bi bi-check-circle-fill me-1"></i>Aktif</span>
                        @endif
                    </div>
                    <div class="card-body d-flex flex-column">
                        <p class="text-muted small mb-3">Data disimpan di server MySQL. Cocok untuk lingkungan produksi dengan performa dan keandalan tinggi.</p>
                        <table class="table table-sm small mb-3">
                            <tbody>
                                <tr>
                                    <td class="text-muted" style="width:40%">Koneksi</td>
                                    <td>
                                        @if($mysqlStatus)
                                            <span class="badge bg-success-subtle text-success border border-success-subtle">
                                                <i class="bi bi-circle-fill me-1" style="font-size:.5rem;"></i>Terhubung
                                            </span>
                                        @else
                                            <span class="badge bg-danger-subtle text-danger border border-danger-subtle">
                                                <i class="bi bi-circle-fill me-1" style="font-size:.5rem;"></i>Gagal
                                            </span>
                                        @endif
                                    </td>
                                </tr>
                                <tr>
                                    <td class="text-muted">Host</td>
                                    <td>{{ env('DB_HOST', '127.0.0.1') }}:{{ env('DB_PORT', '3306') }}</td>
                                </tr>
                                <tr>
                                    <td class="text-muted">Database</td>
                                    <td><code>{{ env('DB_DATABASE', 'svc') }}</code></td>
                                </tr>
                            </tbody>
                        </table>
                        <div class="mt-auto">
                            @if($settings['data_source'] !== 'database')
                                <form method="POST" action="{{ route('app-settings.switch-source') }}"
                                      onsubmit="return confirm('Ubah ke mode Database MySQL?\n\nAnda akan dikeluarkan dan perlu login ulang.')">
                                    @csrf
                                    <input type="hidden" name="mode" value="database">
                                    <button type="submit" class="btn btn-primary w-100" {{ !$mysqlStatus ? 'disabled' : '' }}>
                                        <i class="bi bi-database-check me-1"></i>Gunakan MySQL
                                    </button>
                                    @if(!$mysqlStatus)
                                        <p class="form-text text-danger text-center mt-1 mb-0">MySQL tidak dapat dijangkau. Periksa konfigurasi .env</p>
                                    @endif
                                </form>
                            @else
                                <button class="btn btn-outline-primary w-100" disabled>
                                    <i class="bi bi-check-circle me-1"></i>Sedang Digunakan
                                </button>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            {{-- SQLite Card --}}
            <div class="col-md-6">
                <div class="card h-100 {{ $settings['data_source'] === 'sqlite' ? 'border-warning border-2' : '' }}">
                    <div class="card-header py-3 d-flex justify-content-between align-items-center">
                        <h6 class="mb-0 fw-bold"><i class="bi bi-flask me-2 text-warning"></i>Trial (SQLite)</h6>
                        @if($settings['data_source'] === 'sqlite')
                            <span class="badge bg-warning text-dark"><i class="bi bi-check-circle-fill me-1"></i>Aktif</span>
                        @endif
                    </div>
                    <div class="card-body d-flex flex-column">
                        <p class="text-muted small mb-3">Data disimpan dalam file lokal (<code>.sqlite</code>). Tidak memerlukan server MySQL. Cocok untuk demo dan percobaan.</p>
                        <table class="table table-sm small mb-3">
                            <tbody>
                                <tr>
                                    <td class="text-muted" style="width:40%">File</td>
                                    <td>
                                        @if($sqliteExists)
                                            <span class="badge bg-success-subtle text-success border border-success-subtle">
                                                <i class="bi bi-circle-fill me-1" style="font-size:.5rem;"></i>Tersedia
                                            </span>
                                        @else
                                            <span class="badge bg-secondary-subtle text-secondary border border-secondary-subtle">
                                                <i class="bi bi-circle me-1" style="font-size:.5rem;"></i>Belum dibuat
                                            </span>
                                        @endif
                                    </td>
                                </tr>
                                <tr>
                                    <td class="text-muted">Path</td>
                                    <td><code class="small">storage/app/trial.sqlite</code></td>
                                </tr>
                                <tr>
                                    <td class="text-muted">Ukuran</td>
                                    <td>{{ $sqliteSize ? $sqliteSize . ' KB' : '—' }}</td>
                                </tr>
                            </tbody>
                        </table>
                        <div class="mt-auto">
                            @if(!$sqliteAvailable)
                                <button class="btn btn-outline-warning w-100 mb-2" disabled>
                                    <i class="bi bi-flask me-1"></i>Gunakan SQLite (Trial)
                                </button>
                                <div class="alert alert-danger small py-2 mb-0">
                                    <i class="bi bi-x-circle me-1"></i><strong>Driver tidak tersedia.</strong><br>
                                    Aktifkan <code>extension=pdo_sqlite</code> di <code>php.ini</code> lalu restart server.
                                </div>
                            @elseif($settings['data_source'] !== 'sqlite')
                                <form method="POST" action="{{ route('app-settings.switch-source') }}"
                                      onsubmit="return confirm('Ubah ke mode Trial (SQLite)?\n\n{{ $sqliteExists ? "Database SQLite sudah ada dan akan digunakan." : "Database SQLite baru akan dibuat dengan data demo." }}\n\nAnda akan dikeluarkan dan perlu login ulang.\nAkun default: admin@service.com / admin123')">
                                    @csrf
                                    <input type="hidden" name="mode" value="sqlite">
                                    <button type="submit" class="btn btn-warning w-100">
                                        <i class="bi bi-flask me-1"></i>Gunakan SQLite (Trial)
                                    </button>
                                </form>
                            @else
                                <button class="btn btn-outline-warning w-100" disabled>
                                    <i class="bi bi-check-circle me-1"></i>Sedang Digunakan
                                </button>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="alert alert-info d-flex gap-2 align-items-start small">
            <i class="bi bi-info-circle-fill flex-shrink-0 mt-1"></i>
            <div>
                <strong>Informasi:</strong>
                Mengganti mode data akan <strong>mengeluarkan (logout)</strong> semua sesi aktif.
                Saat pertama kali beralih ke SQLite, database akan dibuat otomatis dan diisi dengan data demo.
                Akun login default: <code>admin@service.com</code> / <code>admin123</code>.
            </div>
        </div>
    </div>

    {{-- ══════════════════════════════
         Tab: Backup & Restore
         ══════════════════════════════ --}}
    <div class="tab-pane fade" id="backup" role="tabpanel">
        <div class="row g-3">
            <div class="col-md-6">
                <div class="card h-100">
                    <div class="card-header py-3">
                        <h6 class="mb-0 fw-bold"><i class="bi bi-cloud-arrow-down me-2 text-success"></i>Export Data</h6>
                    </div>
                    <div class="card-body d-flex flex-column">
                        <p class="text-muted small mb-3">Download seluruh data master ke file JSON. Termasuk: pelanggan, spare part, merk, model perangkat, kategori, dan pengaturan.</p>
                        <ul class="small text-muted mb-3">
                            <li>Pengaturan aplikasi</li>
                            <li>Data merk & model perangkat</li>
                            <li>Kategori servis & spare part</li>
                            <li>Data pelanggan</li>
                        </ul>
                        <div class="mt-auto">
                            <a href="{{ route('app-settings.export') }}" class="btn btn-success w-100">
                                <i class="bi bi-download me-1"></i>Download Backup JSON
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card h-100">
                    <div class="card-header py-3">
                        <h6 class="mb-0 fw-bold"><i class="bi bi-cloud-arrow-up me-2 text-warning"></i>Import Pengaturan</h6>
                    </div>
                    <div class="card-body d-flex flex-column">
                        <p class="text-muted small mb-3">Import pengaturan umum dari file JSON backup sebelumnya.</p>
                        <div class="alert alert-warning small py-2 mb-3">
                            <i class="bi bi-exclamation-triangle me-1"></i>
                            Hanya <strong>pengaturan umum</strong> (nama perusahaan, alamat, prefix, dll) yang akan diimport. Data transaksi tidak terpengaruh.
                        </div>
                        <form method="POST" action="{{ route('app-settings.import') }}" enctype="multipart/form-data" class="d-flex flex-column flex-grow-1">
                            @csrf
                            <div class="mb-3">
                                <label class="form-label small">Pilih File JSON Backup</label>
                                <input type="file" name="file" class="form-control form-control-sm @error('file') is-invalid @enderror"
                                       accept=".json" required>
                                @error('file')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="mt-auto">
                                <button type="submit" class="btn btn-warning w-100"
                                        onclick="return confirm('Import pengaturan dari file ini?\nPengaturan saat ini akan ditimpa.')">
                                    <i class="bi bi-upload me-1"></i>Import Pengaturan
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
@endsection
@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    // Activate tab from URL hash
    const hash = location.hash;
    if (hash && ['#general','#datasource','#backup'].includes(hash)) {
        const btn = document.querySelector(`[data-bs-target="${hash}"]`);
        if (btn) bootstrap.Tab.getOrCreateInstance(btn).show();
    }

    // Update URL hash when tab changes
    document.querySelectorAll('[data-bs-toggle="tab"]').forEach(btn => {
        btn.addEventListener('shown.bs.tab', e => {
            history.replaceState(null, null, e.target.dataset.bsTarget);
        });
    });

    // Auto-uppercase prefix inputs
    document.querySelectorAll('.text-uppercase').forEach(el => {
        el.addEventListener('input', () => el.value = el.value.toUpperCase());
    });
});
</script>
@endsection