@extends('admin.template')

@section('title', 'Edit 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">Edit Data Sampah Bulanan</h4>
                        <p class="card-description">
                            Form edit data sampah per bulan (satuan Ton)
                        </p>

                        <form action="{{ route('admin.sampah.update', $sampah->id_sampah) }}" method="POST">
                            @csrf
                            @method('PUT')

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

                                <input type="number" name="tahun"
                                    class="form-control @error('tahun') is-invalid @enderror"
                                    value="{{ old('tahun', $sampah->tahun) }}">

                                @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" {{ old('bulan', $sampah->bulan) == 1 ? 'selected' : '' }}>Januari
                                    </option>
                                    <option value="2" {{ old('bulan', $sampah->bulan) == 2 ? 'selected' : '' }}>
                                        Februari</option>
                                    <option value="3" {{ old('bulan', $sampah->bulan) == 3 ? 'selected' : '' }}>Maret
                                    </option>
                                    <option value="4" {{ old('bulan', $sampah->bulan) == 4 ? 'selected' : '' }}>April
                                    </option>
                                    <option value="5" {{ old('bulan', $sampah->bulan) == 5 ? 'selected' : '' }}>Mei
                                    </option>
                                    <option value="6" {{ old('bulan', $sampah->bulan) == 6 ? 'selected' : '' }}>Juni
                                    </option>
                                    <option value="7" {{ old('bulan', $sampah->bulan) == 7 ? 'selected' : '' }}>Juli
                                    </option>
                                    <option value="8" {{ old('bulan', $sampah->bulan) == 8 ? 'selected' : '' }}>
                                        Agustus</option>
                                    <option value="9" {{ old('bulan', $sampah->bulan) == 9 ? 'selected' : '' }}>
                                        September</option>
                                    <option value="10" {{ old('bulan', $sampah->bulan) == 10 ? 'selected' : '' }}>
                                        Oktober</option>
                                    <option value="11" {{ old('bulan', $sampah->bulan) == 11 ? 'selected' : '' }}>
                                        November</option>
                                    <option value="12" {{ old('bulan', $sampah->bulan) == 12 ? 'selected' : '' }}>
                                        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="{{ number_format($sampah->total_sampah, 2, ',', '.') }}">

                                    <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="{{ number_format($sampah->total_kelola, 2, ',', '.') }}">

                                    <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="{{ number_format($sampah->total_daur_ulang, 2, ',', '.') }}">

                                    <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"
                                        value="{{ number_format($sampah->sisa_sampah, 2, ',', '.') }}" 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 formatAngka(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 =
                formatAngka(sisa.toFixed(2).replace('.', ','));

        }


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

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

                this.value = formatAngka(this.value);

                hitungSisa();

            });

        });
    </script>

@endsection