@extends('template.desktop.app')
@section('title', 'Pengaturan Bonus Customer Service')

@section('content')
    <div class="card">
        <div class="card-header border-0 pt-4 pb-0 d-flex justify-content-between align-items-center">
            <h4 class="card-title text-dark fw-bold mb-0">Pengaturan Bonus Customer Service</h4>
            <a href="{{ route('customer-services.index') }}" class="btn btn-secondary btn-sm">
                <i class="ti tabler-arrow-left me-1"></i> Kembali
            </a>
        </div>

        <div class="card-body pt-3">
            <div id="alert-container"></div>

            <form id="bonusForm">
                @csrf
                <div class="row g-3">
                    @php
                        $fields = [
                            ['id' => 'cr_box', 'label' => 'CR Box', 'required' => true],
                            ['id' => 'bonus_per_box', 'label' => 'Bonus per Box (Rp)', 'required' => true],
                            ['id' => 'bonus_per_sachet', 'label' => 'Bonus per Sachet (Rp)', 'required' => true],
                            ['id' => 'bonus_touch_crbox', 'label' => 'Bonus Touch CR Box (Rp)', 'required' => true],
                        ];
                    @endphp

                    @foreach ($fields as $f)
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">{{ $f['label'] }}
                                @if ($f['required'])
                                    <span class="text-danger">*</span>
                                @endif
                            </label>
                            <div class="position-relative">
                                <input type="number" name="{{ $f['id'] }}" id="{{ $f['id'] }}"
                                    class="form-control loading-input" required>
                                <div class="input-loader spinner-border spinner-border-sm text-muted position-absolute top-50 end-0 translate-middle-y me-3"
                                    style="display:none;"></div>
                            </div>
                            <small class="text-danger" id="error-{{ $f['id'] }}"></small>
                        </div>
                    @endforeach

                    <div class="col-md-12">
                        <label class="form-label fw-semibold">Catatan (Opsional)</label>
                        <textarea name="notes" id="notes" class="form-control loading-input" rows="3"
                            placeholder="Catatan tambahan (misal: Berlaku bulan ini)"></textarea>
                        <div class="spinner-border spinner-border-sm text-muted mt-2 notes-loader" style="display:none;">
                        </div>
                        <small class="text-danger" id="error-notes"></small>
                    </div>
                </div>

                <div class="mt-4 d-flex justify-content-end">
                    <button type="submit" class="btn btn-primary" id="btnSubmit">
                        <i class="ti tabler-device-floppy me-1"></i> Simpan Pengaturan
                    </button>
                </div>
            </form>
        </div>
    </div>

    {{-- Axios --}}
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.getElementById('bonusForm');
            const btnSubmit = document.getElementById('btnSubmit');
            const alertContainer = document.getElementById('alert-container');

            const loadingInputs = document.querySelectorAll('.loading-input');
            const loaders = document.querySelectorAll('.input-loader, .notes-loader');

            setLoadingState(true);
            fetchData();

            form.addEventListener('submit', function(e) {
                e.preventDefault();
                clearErrors();

                // validasi manual jika ada yang kosong
                const requiredFields = ['cr_box', 'bonus_per_box', 'bonus_per_sachet', 'bonus_touch_crbox'];
                let hasEmpty = false;

                requiredFields.forEach(id => {
                    const input = document.getElementById(id);
                    if (!input.value.trim()) {
                        hasEmpty = true;
                        document.getElementById(`error-${id}`).textContent =
                            'Kolom ini wajib diisi.';
                    }
                });

                if (hasEmpty) {
                    showAlert(
                        'Beberapa kolom wajib masih kosong. Mohon lengkapi semua data sebelum menyimpan.',
                        'warning');
                    return;
                }

                showLoading(true);

                const formData = new FormData(form);
                axios.post("{{ route('customer-service-bonuses.store') }}", formData, {
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        }
                    })
                    .then(response => {
                        if (response.data.status) {
                            showAlert(response.data.message, 'success');
                        } else {
                            showAlert('Gagal menyimpan data.', 'danger');
                        }
                    })
                    .catch(error => {
                        if (error.response?.status === 422) {
                            const errors = error.response.data.errors;
                            for (const key in errors) {
                                document.getElementById(`error-${key}`).textContent = errors[key][0];
                            }
                            showAlert('Beberapa input tidak valid. Periksa kembali isian Anda.',
                                'warning');
                        } else {
                            showAlert('Terjadi kesalahan server. Coba lagi nanti.', 'danger');
                        }
                    })
                    .finally(() => showLoading(false));
            });

            function fetchData() {
                axios.get("{{ route('customer-service-bonuses.data') }}")
                    .then(response => {
                        const res = response.data;
                        if (res.status && res.data) {
                            const d = res.data;
                            document.getElementById('cr_box').value = d.cr_box ?? '';
                            document.getElementById('bonus_per_box').value = d.bonus_per_box ?? '';
                            document.getElementById('bonus_per_sachet').value = d.bonus_per_sachet ?? '';
                            document.getElementById('bonus_touch_crbox').value = d.bonus_touch_crbox ?? '';
                            document.getElementById('notes').value = d.notes ?? '';

                            // jika ada data kosong, beri alert
                            if (!d.cr_box || !d.bonus_per_box || !d.bonus_per_sachet || !d.bonus_touch_crbox) {
                                showAlert(
                                    'Beberapa data pengaturan bonus masih kosong. Mohon lengkapi terlebih dahulu.',
                                    'warning');
                            }
                        } else {
                            showAlert('Belum ada data bonus yang tersimpan.', 'info');
                        }
                    })
                    .catch(() => showAlert('Gagal memuat data dari server.', 'danger'))
                    .finally(() => setLoadingState(false));
            }

            function setLoadingState(isLoading) {
                loadingInputs.forEach(input => input.disabled = isLoading);
                loaders.forEach(loader => loader.style.display = isLoading ? 'inline-block' : 'none');
                btnSubmit.disabled = isLoading;
                btnSubmit.innerHTML = isLoading ?
                    '<span class="spinner-border spinner-border-sm me-2"></span> Memuat data...' :
                    '<i class="ti tabler-device-floppy me-1"></i> Simpan Pengaturan';
            }

            function showAlert(msg, type) {
                alertContainer.innerHTML = `
                    <div class="alert alert-${type} alert-dismissible fade show" role="alert">
                        ${msg}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>`;
            }

            function clearErrors() {
                document.querySelectorAll('small.text-danger').forEach(e => e.textContent = '');
                alertContainer.innerHTML = '';
            }

            function showLoading(isSaving) {
                btnSubmit.disabled = isSaving;
                btnSubmit.innerHTML = isSaving ?
                    '<span class="spinner-border spinner-border-sm me-2"></span> Menyimpan...' :
                    '<i class="ti tabler-device-floppy me-1"></i> Simpan Pengaturan';
            }
        });
    </script>
@endsection