@extends('layouts.app')

@section('title', 'Pengaturan Sistem')

@section('breadcrumb')
    <span>Pengaturan</span>
@endsection

@section('content')

<div class="pf-page-header">
    <div>
        <h1 class="pf-page-title"><i class="bi bi-gear-fill me-2 text-primary-pf"></i>Pengaturan Sistem</h1>
        <p class="pf-page-subtitle">Konfigurasi perusahaan, nomor dokumen, user, dan akses sistem</p>
    </div>
</div>

<div class="row g-4">
    {{-- ===== SIDEBAR SETTINGS ===== --}}
    <div class="col-12 col-xl-3">
        <div class="pf-card">
            <div class="pf-card-body p-2">
                <div class="nav flex-column nav-pills" id="settingsTabs">
                    @php
                    $settingsMenus = [
                        ['id'=>'company',   'icon'=>'bi-building-fill',   'label'=>'Data Perusahaan'],
                        ['id'=>'numbering', 'icon'=>'bi-123',             'label'=>'Format Nomor Dokumen'],
                        ['id'=>'users',     'icon'=>'bi-people-fill',     'label'=>'Manajemen User'],
                        ['id'=>'roles',     'icon'=>'bi-shield-lock-fill','label'=>'Role & Akses'],
                        ['id'=>'mesin',     'icon'=>'bi-printer-fill',    'label'=>'Master Mesin'],
                        ['id'=>'harga',     'icon'=>'bi-tags-fill',       'label'=>'Master Harga Bahan'],
                        ['id'=>'backup',    'icon'=>'bi-cloud-arrow-up',  'label'=>'Backup & Restore'],
                    ];
                    @endphp
                    @foreach($settingsMenus as $idx => $m)
                    <button class="nav-link text-start d-flex align-items-center gap-2 {{ $idx === 0 ? 'active' : '' }}"
                            data-bs-toggle="pill" data-bs-target="#tab-{{ $m['id'] }}"
                            style="border-radius:8px;padding:10px 14px;font-size:13.5px;margin-bottom:2px">
                        <i class="{{ $m['icon'] }}"></i>
                        {{ $m['label'] }}
                    </button>
                    @endforeach
                </div>
            </div>
        </div>
    </div>

    {{-- ===== CONTENT AREA ===== --}}
    <div class="col-12 col-xl-9">
        <div class="tab-content">

            {{-- ─── Data Perusahaan ─── --}}
            <div class="tab-pane fade show active" id="tab-company">
                <div class="pf-card">
                    <div class="pf-card-header"><h6 class="pf-card-title"><i class="bi bi-building-fill"></i> Data Perusahaan</h6></div>
                    <div class="pf-card-body">
                        <form action="{{ route('settings.update') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" name="section" value="company">
                            <div class="row g-3">
                                <div class="col-12 col-md-6">
                                    <label class="form-label">Nama Perusahaan</label>
                                    <input type="text" class="form-control" name="nama_perusahaan" value="{{ $settings->nama_perusahaan ?? 'PT. Anda Percetakan' }}">
                                </div>
                                <div class="col-12 col-md-6">
                                    <label class="form-label">Nama Singkat / Brand</label>
                                    <input type="text" class="form-control" name="nama_singkat" value="{{ $settings->nama_singkat ?? 'PrintFlow' }}">
                                </div>
                                <div class="col-12">
                                    <label class="form-label">Alamat</label>
                                    <textarea class="form-control" name="alamat" rows="2">{{ $settings->alamat ?? '' }}</textarea>
                                </div>
                                <div class="col-12 col-md-4">
                                    <label class="form-label">Kota</label>
                                    <input type="text" class="form-control" name="kota" value="{{ $settings->kota ?? '' }}">
                                </div>
                                <div class="col-12 col-md-4">
                                    <label class="form-label">Telepon</label>
                                    <input type="text" class="form-control" name="telepon" value="{{ $settings->telepon ?? '' }}">
                                </div>
                                <div class="col-12 col-md-4">
                                    <label class="form-label">Email</label>
                                    <input type="email" class="form-control" name="email" value="{{ $settings->email ?? '' }}">
                                </div>
                                <div class="col-12 col-md-6">
                                    <label class="form-label">NPWP</label>
                                    <input type="text" class="form-control font-mono" name="npwp" value="{{ $settings->npwp ?? '' }}" placeholder="00.000.000.0-000.000">
                                </div>
                                <div class="col-12 col-md-6">
                                    <label class="form-label">Website</label>
                                    <input type="url" class="form-control" name="website" value="{{ $settings->website ?? '' }}">
                                </div>
                                <div class="col-12 col-md-6">
                                    <label class="form-label">Logo Perusahaan</label>
                                    <input type="file" class="form-control" name="logo" accept="image/*">
                                    @if($settings->logo ?? false)
                                        <div class="mt-2"><img src="{{ asset('storage/'.$settings->logo) }}" height="50"></div>
                                    @endif
                                </div>
                                <div class="col-12 col-md-6">
                                    <label class="form-label">Tanda Tangan (untuk dokumen cetak)</label>
                                    <input type="file" class="form-control" name="ttd" accept="image/*">
                                </div>
                                <div class="col-12">
                                    <label class="form-label">Informasi Rekening Bank</label>
                                    <textarea class="form-control" name="info_rekening" rows="3"
                                              placeholder="cth: BCA 1234567890 a.n. PT. Anda Percetakan&#10;Mandiri 0987654321 a.n. PT. Anda Percetakan">{{ $settings->info_rekening ?? '' }}</textarea>
                                </div>
                                <div class="col-12 d-flex justify-content-end">
                                    <button type="submit" class="btn btn-primary">
                                        <i class="bi bi-save2-fill me-1"></i> Simpan Data Perusahaan
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            {{-- ─── Format Nomor Dokumen ─── --}}
            <div class="tab-pane fade" id="tab-numbering">
                <div class="pf-card">
                    <div class="pf-card-header"><h6 class="pf-card-title"><i class="bi bi-123"></i> Format Nomor Dokumen</h6></div>
                    <div class="pf-card-body">
                        <div class="alert alert-info" style="font-size:12.5px">
                            <i class="bi bi-info-circle me-2"></i>
                            Gunakan variabel: <code>{Y}</code> = Tahun, <code>{m}</code> = Bulan, <code>{d}</code> = Hari, <code>{SEQ}</code> = Nomor urut (4 digit)
                        </div>
                        <form action="{{ route('settings.update') }}" method="POST">
                            @csrf
                            <input type="hidden" name="section" value="numbering">
                            @php
                            $numbering = [
                                ['key'=>'format_so',       'label'=>'Sales Order',      'default'=>'SO-{Y}{m}-{SEQ}',      'preview'=>'SO-2406-0001'],
                                ['key'=>'format_estimasi', 'label'=>'Estimasi Harga',   'default'=>'EST-{Y}{m}-{SEQ}',     'preview'=>'EST-2406-0001'],
                                ['key'=>'format_jo',       'label'=>'Job Order',        'default'=>'JO-{Y}{m}-{SEQ}',      'preview'=>'JO-2406-0001'],
                                ['key'=>'format_invoice',  'label'=>'Invoice',          'default'=>'INV-{Y}{m}-{SEQ}',     'preview'=>'INV-2406-0001'],
                                ['key'=>'format_po',       'label'=>'Purchase Order',   'default'=>'PO-{Y}{m}-{SEQ}',      'preview'=>'PO-2406-0001'],
                                ['key'=>'format_sj',       'label'=>'Surat Jalan',      'default'=>'SJ-{Y}{m}{d}-{SEQ}',   'preview'=>'SJ-240619-0001'],
                                ['key'=>'format_karyawan', 'label'=>'NIP Karyawan',     'default'=>'EMP-{Y}-{SEQ}',        'preview'=>'EMP-2024-0048'],
                            ];
                            @endphp
                            <div class="row g-3">
                                @foreach($numbering as $n)
                                <div class="col-12">
                                    <div class="row g-2 align-items-center">
                                        <div class="col-3">
                                            <label class="form-label mb-0" style="font-size:13px">{{ $n['label'] }}</label>
                                        </div>
                                        <div class="col-6">
                                            <input type="text" class="form-control form-control-sm font-mono"
                                                   name="{{ $n['key'] }}"
                                                   value="{{ $settings->{$n['key']} ?? $n['default'] }}"
                                                   oninput="previewNomor(this,'preview-{{ $n['key'] }}')">
                                        </div>
                                        <div class="col-3">
                                            <span id="preview-{{ $n['key'] }}" class="font-mono text-primary" style="font-size:12px">
                                                {{ $n['preview'] }}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                                <div class="col-12 d-flex justify-content-end mt-2">
                                    <button type="submit" class="btn btn-primary">
                                        <i class="bi bi-save2-fill me-1"></i> Simpan Format Nomor
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            {{-- ─── User Management ─── --}}
            <div class="tab-pane fade" id="tab-users">
                <div class="pf-card">
                    <div class="pf-card-header">
                        <h6 class="pf-card-title"><i class="bi bi-people-fill"></i> Manajemen User</h6>
                        <a href="{{ route('users.create') }}" class="btn btn-sm btn-primary">
                            <i class="bi bi-person-plus-fill"></i> Tambah User
                        </a>
                    </div>
                    <div class="pf-card-body p-0">
                        <table class="table mb-0" id="tblUsers">
                            <thead>
                                <tr>
                                    <th>Nama</th>
                                    <th>Username / Email</th>
                                    <th>Role</th>
                                    <th>Status</th>
                                    <th>Login Terakhir</th>
                                    <th>Aksi</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($users as $user)
                                <tr>
                                    <td>
                                        <div class="d-flex align-items-center gap-2">
                                            <div style="width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,#1B4FD8,#6366F1);display:flex;align-items:center;justify-content:center;font-size:11px;color:#fff;font-weight:600">
                                                {{ strtoupper(substr($user->name,0,2)) }}
                                            </div>
                                            <div>
                                                <div style="font-weight:500;font-size:13px">{{ $user->name }}</div>
                                                {{ $user->id === auth()->id() ? '<span style="font-size:10px;color:#059669">(Anda)</span>' : '' }}
                                            </div>
                                        </div>
                                    </td>
                                    <td style="font-size:12.5px">{{ $user->email }}</td>
                                    <td>
                                        @foreach($user->getRoleNames() as $role)
                                            <span style="background:var(--pf-primary-light);color:var(--pf-primary);font-size:11px;padding:2px 8px;border-radius:4px;font-weight:600">
                                                {{ $role }}
                                            </span>
                                        @endforeach
                                    </td>
                                    <td>
                                        <span class="pf-status {{ $user->is_active ? 'pf-status-selesai' : 'pf-status-batal' }}">
                                            {{ $user->is_active ? 'Aktif' : 'Nonaktif' }}
                                        </span>
                                    </td>
                                    <td style="font-size:12px;color:var(--pf-text-muted)">
                                        {{ $user->last_login_at?->diffForHumans() ?? 'Belum pernah' }}
                                    </td>
                                    <td>
                                        <div class="d-flex gap-1">
                                            <a href="{{ route('users.edit', $user->id) }}" class="btn btn-xs btn-outline-primary"><i class="bi bi-pencil"></i></a>
                                            <button class="btn btn-xs btn-outline-warning" title="Reset Password"
                                                    onclick="resetPassword({{ $user->id }}, '{{ $user->name }}')">
                                                <i class="bi bi-key-fill"></i>
                                            </button>
                                            @if($user->id !== auth()->id())
                                            <button class="btn btn-xs btn-outline-danger"
                                                    onclick="PF.confirmDelete('/users/{{ $user->id }}', '{{ $user->name }}')">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            {{-- ─── Backup ─── --}}
            <div class="tab-pane fade" id="tab-backup">
                <div class="pf-card">
                    <div class="pf-card-header"><h6 class="pf-card-title"><i class="bi bi-cloud-arrow-up"></i> Backup & Restore</h6></div>
                    <div class="pf-card-body">
                        <div class="row g-4">
                            <div class="col-12 col-md-6">
                                <div class="p-4 text-center" style="border:2px dashed var(--pf-border);border-radius:var(--pf-radius-lg)">
                                    <i class="bi bi-cloud-arrow-down" style="font-size:40px;color:var(--pf-primary);margin-bottom:12px;display:block"></i>
                                    <h6 style="font-weight:600">Backup Database</h6>
                                    <p style="font-size:13px;color:var(--pf-text-muted);margin-bottom:16px">
                                        Unduh backup database MySQL lengkap dalam format .sql.gz
                                    </p>
                                    <button class="btn btn-primary" onclick="doBackup()">
                                        <i class="bi bi-download me-1"></i> Backup Sekarang
                                    </button>
                                </div>
                            </div>
                            <div class="col-12 col-md-6">
                                <div class="p-4 text-center" style="border:2px dashed var(--pf-border);border-radius:var(--pf-radius-lg)">
                                    <i class="bi bi-cloud-arrow-up" style="font-size:40px;color:#D97706;margin-bottom:12px;display:block"></i>
                                    <h6 style="font-weight:600">Restore Database</h6>
                                    <p style="font-size:13px;color:var(--pf-text-muted);margin-bottom:16px">
                                        Upload file backup .sql atau .sql.gz untuk restore
                                    </p>
                                    <label class="btn btn-outline-warning">
                                        <i class="bi bi-upload me-1"></i> Upload Backup
                                        <input type="file" style="display:none" accept=".sql,.gz" onchange="doRestore(this)">
                                    </label>
                                </div>
                            </div>
                            <div class="col-12">
                                <h6 style="font-size:13px;font-weight:600;margin-bottom:12px">Riwayat Backup Otomatis</h6>
                                <table class="table table-sm">
                                    <thead><tr><th>Tanggal</th><th>Ukuran</th><th>Tipe</th><th>Aksi</th></tr></thead>
                                    <tbody>
                                        @foreach($backups ?? [] as $bk)
                                        <tr>
                                            <td class="font-mono" style="font-size:12.5px">{{ $bk->created_at->format('d/m/Y H:i') }}</td>
                                            <td style="font-size:12.5px">{{ $bk->size_formatted }}</td>
                                            <td><span class="pf-status pf-status-proses" style="font-size:11px">{{ $bk->type }}</span></td>
                                            <td><a href="/settings/backup/{{ $bk->id }}/download" class="btn btn-xs btn-outline-secondary"><i class="bi bi-download"></i></a></td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>{{-- end tab-content --}}
    </div>
</div>

@endsection

@push('scripts')
<script>
$(document).ready(function() {
    $('#tblUsers').DataTable({ pageLength: 25 });
});

function resetPassword(userId, nama) {
    Swal.fire({
        title: 'Reset Password?',
        html: `Password <b>${nama}</b> akan direset. Link reset akan dikirim ke email user.`,
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#D97706',
        confirmButtonText: '<i class="bi bi-key-fill me-1"></i> Reset Password',
        cancelButtonText: 'Batal'
    }).then(r => {
        if (r.isConfirmed) {
            fetch(`/users/${userId}/reset-password`, {
                method: 'POST',
                headers: { 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content }
            })
            .then(r => r.json())
            .then(d => { d.success ? PF.success('Link reset dikirim ke email') : PF.error(d.message); });
        }
    });
}

function doBackup() {
    PF.loading('Membuat backup database...');
    fetch('/settings/backup', {
        method: 'POST',
        headers: { 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content }
    })
    .then(r => r.blob())
    .then(blob => {
        PF.closeLoading();
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = `printflow-backup-${new Date().toISOString().slice(0,10)}.sql.gz`;
        a.click();
        PF.success('Backup berhasil diunduh');
    })
    .catch(() => { PF.closeLoading(); PF.error('Backup gagal'); });
}

function doRestore(input) {
    if (!input.files[0]) return;
    Swal.fire({
        title: 'Konfirmasi Restore',
        html: '<div class="text-danger fw-600">⚠ PERHATIAN!</div><div class="mt-2" style="font-size:13px">Restore akan <b>menghapus semua data saat ini</b> dan menggantinya dengan data backup. Pastikan Anda sudah membackup data terbaru.</div>',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#DC2626',
        confirmButtonText: 'Ya, Lanjutkan Restore',
        cancelButtonText: 'Batal'
    }).then(r => {
        if (r.isConfirmed) {
            const form = new FormData();
            form.append('backup_file', input.files[0]);
            form.append('_token', document.querySelector('meta[name="csrf-token"]').content);
            PF.loading('Proses restore sedang berjalan...');
            fetch('/settings/restore', { method: 'POST', body: form })
                .then(r => r.json())
                .then(d => { PF.closeLoading(); d.success ? PF.success('Restore berhasil') : PF.error(d.message); });
        }
        input.value = '';
    });
}

function previewNomor(input, previewId) {
    const val = input.value
        .replace('{Y}', new Date().getFullYear())
        .replace('{m}', String(new Date().getMonth()+1).padStart(2,'0'))
        .replace('{d}', String(new Date().getDate()).padStart(2,'0'))
        .replace('{SEQ}', '0001');
    document.getElementById(previewId).textContent = val;
}
</script>
@endpush