@extends('layout.header_admin', ['title' => 'Ticket'])

@section('content')
    @if (session('error') || session('success') || $errors->any())
        <div class="z-999 relative mt-10 mb-5">
            @if (session('error'))
                <div class="bg-red-500 text-white p-4 rounded-md mb-5">
                    {{ session('error') }}
                </div>
            @endif
            @if (session('success'))
                <div class="bg-green-500 text-white p-4 rounded-md mb-5">
                    {{ session('success') }}
                </div>
            @endif
            @foreach ($errors->all() as $error)
                <div class="bg-red-500 text-white p-4 rounded-md mb-5">
                    {{ $error }}
                </div>
            @endforeach
        </div>
    @endif

    
    <div x-data="calculate()"
        class="rounded-sm border border-stroke bg-white px-5 py-6 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1">
        <div>
            <input type="checkbox" name="is_ppn" x-on:click="ppn = !ppn; calculatePPN()" id="ppn"
                {{ old('is_ppn') == 'on' ? 'checked' : '' }}>
            <label for="ppn">PPn</label>
        </div>
        <div>
            <input class="border border-graydark" type="text" x-model="message" x-on:input="calculatePPN()">

            <span x-text="calculatedValue"></span>
        </div>
        {{-- end product container --}}
    </div>

    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('calculate', () => ({
                ppn: false,
                message: '',
                calculatedValue: '',
                formatRupiah(value) {
                    return value.toLocaleString('id-ID', {
                        style: 'currency',
                        currency: 'IDR',
                    });
                },
                calculatePPN() {
                    let input = parseFloat(this.message.replace(/\D/g, '')) || 0; // Menghilangkan karakter non-digit
                    if (this.ppn) {
                        this.calculatedValue = this.formatRupiah(input * 1.11); // Menghitung dengan PPN
                    } else {
                        this.calculatedValue = this.formatRupiah(input); // Menampilkan nilai asli
                    }
                }
            }));
        });
    </script>
@endsection