@extends('layouts.app')

@section('title', 'Pengaturan Pajak & Service Charge')
@section('page-title', 'Pengaturan Pajak & Service Charge')

@section('page-actions')
<div class="btn-toolbar mb-2 mb-md-0">
    <a href="{{ route('settings.index') }}" class="btn btn-secondary">
        <i class="fas fa-arrow-left me-2"></i>Kembali ke Settings
    </a>
</div>
@endsection

@section('content')
<div class="row justify-content-center">
    <div class="col-lg-8">
        <div class="card shadow">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">
                    <i class="fas fa-percentage me-2"></i>Pengaturan Pajak & Service Charge
                </h6>
            </div>
            <div class="card-body">
                @if(session('success'))
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        {{ session('success') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                @endif

                @if($errors->any())
                    <div class="alert alert-danger">
                        <ul class="mb-0">
                            @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <form action="{{ route('settings.update-tax-service') }}" method="POST">
                    @csrf
                    @method('PUT')
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="card border-primary">
                                <div class="card-header bg-primary text-white">
                                    <h5 class="mb-0">
                                        <i class="fas fa-receipt me-2"></i>Pengaturan Pajak
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <div class="mb-3">
                                        <label for="tax_percentage" class="form-label">
                                            <strong>Persentase Pajak (%)</strong>
                                        </label>
                                        <div class="input-group">
                                            <input type="number" 
                                                   class="form-control form-control-lg" 
                                                   id="tax_percentage" 
                                                   name="tax_percentage" 
                                                   value="{{ old('tax_percentage', $taxPercentage) }}" 
                                                   min="0" 
                                                   max="100" 
                                                   step="0.01" 
                                                   required>
                                            <span class="input-group-text">%</span>
                                        </div>
                                        <div class="form-text">
                                            Persentase pajak yang akan dikenakan pada semua transaksi
                                        </div>
                                    </div>
                                    
                                    <div class="alert alert-info">
                                        <i class="fas fa-info-circle me-2"></i>
                                        <strong>Contoh:</strong> Jika subtotal Rp 100.000 dan pajak 10%, maka pajak = Rp 10.000
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="card border-success">
                                <div class="card-header bg-success text-white">
                                    <h5 class="mb-0">
                                        <i class="fas fa-concierge-bell me-2"></i>Pengaturan Service Charge
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <div class="mb-3">
                                        <label for="service_charge_percentage" class="form-label">
                                            <strong>Persentase Service Charge (%)</strong>
                                        </label>
                                        <div class="input-group">
                                            <input type="number" 
                                                   class="form-control form-control-lg" 
                                                   id="service_charge_percentage" 
                                                   name="service_charge_percentage" 
                                                   value="{{ old('service_charge_percentage', $serviceChargePercentage) }}" 
                                                   min="0" 
                                                   max="100" 
                                                   step="0.01" 
                                                   required>
                                            <span class="input-group-text">%</span>
                                        </div>
                                        <div class="form-text">
                                            Persentase service charge yang akan dikenakan pada semua transaksi
                                        </div>
                                    </div>
                                    
                                    <div class="alert alert-info">
                                        <i class="fas fa-info-circle me-2"></i>
                                        <strong>Contoh:</strong> Jika subtotal Rp 100.000 dan service charge 5%, maka service charge = Rp 5.000
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Preview Calculation -->
                    <div class="row mt-4">
                        <div class="col-12">
                            <div class="card border-warning">
                                <div class="card-header bg-warning text-dark">
                                    <h5 class="mb-0">
                                        <i class="fas fa-calculator me-2"></i>Preview Perhitungan
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <label for="preview_subtotal" class="form-label">Subtotal untuk Preview:</label>
                                            <div class="input-group">
                                                <span class="input-group-text">Rp</span>
                                                <input type="number" 
                                                       class="form-control" 
                                                       id="preview_subtotal" 
                                                       value="100000" 
                                                       min="0" 
                                                       step="1000">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label">&nbsp;</label>
                                            <button type="button" class="btn btn-outline-primary w-100" onclick="calculatePreview()">
                                                <i class="fas fa-calculator me-2"></i>Hitung Preview
                                            </button>
                                        </div>
                                    </div>
                                    
                                    <div id="preview_result" class="mt-3" style="display: none;">
                                        <hr>
                                        <h6 class="text-primary">Hasil Perhitungan:</h6>
                                        <div class="row">
                                            <div class="col-md-3">
                                                <div class="text-center">
                                                    <div class="h5 text-muted">Subtotal</div>
                                                    <div class="h4 text-primary" id="preview_subtotal_result">Rp 0</div>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="text-center">
                                                    <div class="h5 text-muted">Pajak (<span id="preview_tax_percent">0</span>%)</div>
                                                    <div class="h4 text-warning" id="preview_tax_result">Rp 0</div>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="text-center">
                                                    <div class="h5 text-muted">Service (<span id="preview_service_percent">0</span>%)</div>
                                                    <div class="h4 text-info" id="preview_service_result">Rp 0</div>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="text-center">
                                                    <div class="h5 text-muted">Total</div>
                                                    <div class="h3 text-success" id="preview_total_result">Rp 0</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="text-end mt-4">
                        <button type="submit" class="btn btn-primary btn-lg">
                            <i class="fas fa-save me-2"></i>Simpan Pengaturan
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
function calculatePreview() {
    const subtotal = parseFloat(document.getElementById('preview_subtotal').value) || 0;
    const taxPercentage = parseFloat(document.getElementById('tax_percentage').value) || 0;
    const servicePercentage = parseFloat(document.getElementById('service_charge_percentage').value) || 0;
    
    const taxAmount = (subtotal * taxPercentage) / 100;
    const serviceAmount = (subtotal * servicePercentage) / 100;
    const total = subtotal + taxAmount + serviceAmount;
    
    // Update preview results
    document.getElementById('preview_subtotal_result').textContent = 'Rp ' + subtotal.toLocaleString('id-ID');
    document.getElementById('preview_tax_percent').textContent = taxPercentage;
    document.getElementById('preview_tax_result').textContent = 'Rp ' + taxAmount.toLocaleString('id-ID');
    document.getElementById('preview_service_percent').textContent = servicePercentage;
    document.getElementById('preview_service_result').textContent = 'Rp ' + serviceAmount.toLocaleString('id-ID');
    document.getElementById('preview_total_result').textContent = 'Rp ' + total.toLocaleString('id-ID');
    
    // Show preview result
    document.getElementById('preview_result').style.display = 'block';
}

// Auto calculate preview when percentages change
document.getElementById('tax_percentage').addEventListener('input', calculatePreview);
document.getElementById('service_charge_percentage').addEventListener('input', calculatePreview);
document.getElementById('preview_subtotal').addEventListener('input', calculatePreview);

// Calculate preview on page load
document.addEventListener('DOMContentLoaded', function() {
    calculatePreview();
});
</script>
@endsection