@extends('admin.template')

@section('title', 'Tambah Data Sampah Bulanan')

@section('content')
    <div class="content-wrapper">
        <div class="row">
            <div class="col-md-12 grid-margin stretch-card">

                <div class="card">
                    <div class="card-body">

                        <h4 class="card-title">Tambah Data Sampah Bulanan</h4>
                        <p class="card-description">
                            Form input data sampah per bulan (satuan Ton)
                        </p>

                        <form action="{{ route('admin.sampah.store') }}" method="POST" id="formSampah">
                            @csrf

                            <div class="form-group">
                                <label>Tahun</label>

                                <input type="number" name="tahun"
                                    class="form-control @error('tahun') is-invalid @enderror" value="{{ old('tahun') }}"
                                    placeholder="Contoh: 2024">

                                @error('tahun')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>


                            <div class="form-group">
                                <label>Bulan</label>

                                <select name="bulan" class="form-control @error('bulan') is-invalid @enderror">
                                    <option value="">-- Pilih Bulan --</option>
                                    <option value="1">Januari</option>
                                    <option value="2">Februari</option>
                                    <option value="3">Maret</option>
                                    <option value="4">April</option>
                                    <option value="5">Mei</option>
                                    <option value="6">Juni</option>
                                    <option value="7">Juli</option>
                                    <option value="8">Agustus</option>
                                    <option value="9">September</option>
                                    <option value="10">Oktober</option>
                                    <option value="11">November</option>
                                    <option value="12">Desember</option>
                                </select>

                                @error('bulan')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>


                            <div class="form-group">
                                <label>Total Sampah</label>

                                <div class="input-group">
                                    <input type="text" name="total_sampah" id="total_sampah"
                                        class="form-control angka @error('total_sampah') is-invalid @enderror"
                                        value="{{ old('total_sampah') }}" placeholder="Contoh: 7.500,89">

                                    <div class="input-group-append">
                                        <span class="input-group-text">Ton</span>
                                    </div>
                                </div>

                                @error('total_sampah')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>


                            <div class="form-group">
                                <label>Total Sampah Dikelola</label>

                                <div class="input-group">
                                    <input type="text" name="total_kelola" id="total_kelola"
                                        class="form-control angka @error('total_kelola') is-invalid @enderror"
                                        value="{{ old('total_kelola') }}" placeholder="Contoh: 2.500,50">

                                    <div class="input-group-append">
                                        <span class="input-group-text">Ton</span>
                                    </div>
                                </div>

                                @error('total_kelola')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>


                            <div class="form-group">
                                <label>Total Sampah Daur Ulang</label>

                                <div class="input-group">
                                    <input type="text" name="total_daur_ulang" id="total_daur_ulang"
                                        class="form-control angka @error('total_daur_ulang') is-invalid @enderror"
                                        value="{{ old('total_daur_ulang') }}" placeholder="Contoh: 1.200,25">

                                    <div class="input-group-append">
                                        <span class="input-group-text">Ton</span>
                                    </div>
                                </div>

                                @error('total_daur_ulang')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>


                            <div class="form-group">
                                <label>Sisa Sampah</label>

                                <div class="input-group">
                                    <input type="text" id="sisa_sampah" class="form-control" readonly>

                                    <div class="input-group-append">
                                        <span class="input-group-text">Ton</span>
                                    </div>
                                </div>

                                <small class="text-muted">
                                    Sisa sampah dihitung otomatis
                                </small>

                            </div>


                            <button type="submit" class="mr-2 btn btn-primary">
                                Simpan
                            </button>

                            <a href="{{ route('admin.sampah.index') }}" class="btn btn-light">
                                Batal
                            </a>

                        </form>

                    </div>
                </div>

            </div>
        </div>
    </div>


    <script>
        function formatRupiah(angka) {

            angka = angka.replace(/[^,\d]/g, '');

            let split = angka.split(',');
            let sisa = split[0].length % 3;
            let rupiah = split[0].substr(0, sisa);

            let ribuan = split[0].substr(sisa).match(/\d{3}/gi);

            if (ribuan) {
                let separator = sisa ? '.' : '';
                rupiah += separator + ribuan.join('.');
            }

            rupiah = split[1] != undefined ? rupiah + ',' + split[1] : rupiah;

            return rupiah;
        }

        function toNumber(angka) {

            return parseFloat(
                angka.replace(/\./g, '').replace(',', '.')
            ) || 0;

        }

        function hitungSisa() {

            let total = toNumber(document.getElementById('total_sampah').value);
            let kelola = toNumber(document.getElementById('total_kelola').value);
            let daur = toNumber(document.getElementById('total_daur_ulang').value);

            let sisa = total - (kelola + daur);

            document.getElementById('sisa_sampah').value =
                formatRupiah(sisa.toFixed(2).replace('.', ','));

        }

        document.querySelectorAll('.angka').forEach(function(input) {

            input.addEventListener('keyup', function() {

                this.value = formatRupiah(this.value);

                hitungSisa();

            });

        });
    </script>

@endsection