@extends('Dashboard.layouts.main')

@section('title', 'Pendaftaran Layanan Baru')

@section('content')
<div class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="page-title-box">
                    <div class="page-title-right">
                        <ol class="breadcrumb m-0">
                            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
                            <li class="breadcrumb-item"><a href="{{ route('services.index') }}">Layanan</a></li>
                            <li class="breadcrumb-item active">Buat Baru</li>
                        </ol>
                    </div>
                    <h4 class="page-title">Pendaftaran Layanan Baru</h4>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <form action="{{ route('services.store') }}" method="POST">
                            @csrf
                            
                            @if ($errors->any())
                            <div class="alert alert-danger">
                                <ul>
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                            @endif

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="jenis_permintaan">Jenis Permintaan <span class="text-danger">*</span></label>
                                        <select class="form-control @error('jenis_permintaan') is-invalid @enderror" id="jenis_permintaan" name="jenis_permintaan" required>
                                            <option value="">Pilih Jenis Permintaan</option>
                                            <option value="Pengambilan Contoh Uji" {{ old('jenis_permintaan') == 'Pengambilan Contoh Uji' ? 'selected' : '' }}>Pengambilan Contoh Uji</option>
                                            <option value="Pengambilan dan Pengujian Contoh Uji" {{ old('jenis_permintaan') == 'Pengambilan dan Pengujian Contoh Uji' ? 'selected' : '' }}>Pengambilan dan Pengujian Contoh Uji</option>
                                        </select>
                                        @error('jenis_permintaan')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="form-group">
                                        <label for="tanggal_uji">Tanggal Uji <span class="text-danger">*</span></label>
                                        <input type="date" class="form-control @error('tanggal_uji') is-invalid @enderror" id="tanggal_uji" name="tanggal_uji" value="{{ old('tanggal_uji') }}" required>
                                        @error('tanggal_uji')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="form-group">
                                        <label for="parameter">Parameter <span class="text-danger">*</span></label>
                                        <select class="form-control @error('parameter') is-invalid @enderror" id="parameter" name="parameter" required>
                                            <option value="">Pilih Parameter</option>
                                            <option value="TDS" {{ old('parameter') == 'TDS' ? 'selected' : '' }}>Jumlah Zat Padat Terlarut (TDS) - Rp. 22.000</option>
                                            <option value="TSS" {{ old('parameter') == 'TSS' ? 'selected' : '' }}>Total Suspended Solid (TSS) - Rp. 22.000</option>
                                            <option value="Kekeruhan" {{ old('parameter') == 'Kekeruhan' ? 'selected' : '' }}>Kekeruhan - Rp. 15.000</option>
                                            <option value="Suhu" {{ old('parameter') == 'Suhu' ? 'selected' : '' }}>Suhu - Rp. 3.500</option>
                                            <option value="Daya Hantar Listrik" {{ old('parameter') == 'Daya Hantar Listrik' ? 'selected' : '' }}>Daya Hantar Listrik - Rp. 12.500</option>
                                            <option value="pH" {{ old('parameter') == 'pH' ? 'selected' : '' }}>pH - Rp. 10.500</option>
                                            <option value="Amonia" {{ old('parameter') == 'Amonia' ? 'selected' : '' }}>Amonia - Rp. 37.000</option>
                                            <option value="DO" {{ old('parameter') == 'DO' ? 'selected' : '' }}>Oksigen Terlarut (DO) - Rp. 16.000</option>
                                            <option value="Nitrat" {{ old('parameter') == 'Nitrat' ? 'selected' : '' }}>Nitrat - Rp. 32.000</option>
                                            <option value="Nitrit" {{ old('parameter') == 'Nitrit' ? 'selected' : '' }}>Nitrit - Rp. 33.500</option>
                                            <option value="BOD" {{ old('parameter') == 'BOD' ? 'selected' : '' }}>BOD - Rp. 40.000</option>
                                            <option value="COD" {{ old('parameter') == 'COD' ? 'selected' : '' }}>COD - Rp. 58.000</option>
                                            <option value="Tembaga" {{ old('parameter') == 'Tembaga' ? 'selected' : '' }}>Tembaga - Rp. 50.000</option>
                                            <option value="Besi" {{ old('parameter') == 'Besi' ? 'selected' : '' }}>Besi - Rp. 51.000</option>
                                            <option value="Mangan" {{ old('parameter') == 'Mangan' ? 'selected' : '' }}>Mangan - Rp. 52.800</option>
                                        </select>
                                        <small class="form-text text-muted">Pilih parameter uji yang diinginkan.</small>
                                        @error('parameter')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="pengujian_kualitas_air">Pengujian Kualitas Air <span class="text-danger">*</span></label>
                                        <select class="form-control @error('pengujian_kualitas_air') is-invalid @enderror" id="pengujian_kualitas_air" name="pengujian_kualitas_air" required>
                                            <option value="">Pilih Jenis Pengujian</option>
                                            <option value="Air Limbah" {{ old('pengujian_kualitas_air') == 'Air Limbah' ? 'selected' : '' }}>Air Limbah</option>
                                            <option value="Air Bersih" {{ old('pengujian_kualitas_air') == 'Air Bersih' ? 'selected' : '' }}>Air Bersih</option>
                                            <option value="Air Badan Air" {{ old('pengujian_kualitas_air') == 'Air Badan Air' ? 'selected' : '' }}>Air Badan Air</option>
                                        </select>
                                        @error('pengujian_kualitas_air')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="form-group">
                                        <label for="total_sampel">Total Sampel <span class="text-danger">*</span></label>
                                        <input type="number" class="form-control @error('total_sampel') is-invalid @enderror" id="total_sampel" name="total_sampel" min="1" value="{{ old('total_sampel', 1) }}" required>
                                        <small class="form-text text-muted">Jumlah sampel yang akan diambil/diuji</small>
                                        @error('total_sampel')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="form-group">
                                        <label for="jarak_pengambilan_sampel">Jarak Pengambilan Sampel <span class="text-danger">*</span></label>
                                        <select class="form-control @error('jarak_pengambilan_sampel') is-invalid @enderror" id="jarak_pengambilan_sampel" name="jarak_pengambilan_sampel" required>
                                            <option value="">Pilih Jarak Pengambilan</option>
                                            <option value="jarak < 100km" {{ old('jarak_pengambilan_sampel') == 'jarak < 100km' ? 'selected' : '' }}>Jarak < 100 km (Rp. 273.000)</option>
                                            <option value="jarak 100km - 150km" {{ old('jarak_pengambilan_sampel') == 'jarak 100km - 150km' ? 'selected' : '' }}>Jarak 100 km - 150 km (Rp. 373.000)</option>
                                            <option value="jarak > 150km" {{ old('jarak_pengambilan_sampel') == 'jarak > 150km' ? 'selected' : '' }}>Jarak > 150 km (Rp. 473.000)</option>
                                        </select>
                                        @error('jarak_pengambilan_sampel')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="row mt-3">
                                <div class="col-md-12">
                                    <div class="card bg-light">
                                        <div class="card-body">
                                            <h5 class="card-title">Estimasi Biaya</h5>
                                            <div class="row">
                                                <div class="col-md-4">
                                                    <div class="form-group">
                                                        <label>Biaya Parameter:</label>
                                                        <div class="input-group">
                                                            <div class="input-group-prepend">
                                                                <span class="input-group-text">Rp</span>
                                                            </div>
                                                            <input type="text" class="form-control" id="estimasi_biaya_parameter" readonly>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="form-group">
                                                        <label>Biaya Jarak:</label>
                                                        <div class="input-group">
                                                            <div class="input-group-prepend">
                                                                <span class="input-group-text">Rp</span>
                                                            </div>
                                                            <input type="text" class="form-control" id="estimasi_biaya_jarak" readonly>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="form-group">
                                                        <label>Total Biaya:</label>
                                                        <div class="input-group">
                                                            <div class="input-group-prepend">
                                                                <span class="input-group-text">Rp</span>
                                                            </div>
                                                            <input type="text" class="form-control" id="estimasi_total_biaya" readonly>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="mt-3 text-right">
                                <a href="{{ route('services.index') }}" class="btn btn-secondary mr-2">Batal</a>
                                <button type="submit" class="btn btn-primary">Simpan</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Daftar harga parameter
        const hargaParameter = {
            'TDS': 22000,
            'TSS': 22000,
            'Kekeruhan': 15000,
            'Suhu': 3500,
            'Daya Hantar Listrik': 12500,
            'pH': 10500,
            'Amonia': 37000,
            'DO': 16000,
            'Nitrat': 32000,
            'Nitrit': 33500,
            'BOD': 40000,
            'COD': 58000,
            'Tembaga': 50000,
            'Besi': 51000,
            'Mangan': 52800
        };
        
        // Daftar harga jarak
        const hargaJarak = {
            'jarak < 100km': 273000,
            'jarak 100km - 150km': 373000,
            'jarak > 150km': 473000
        };
        
        // Format angka sebagai mata uang
        function formatRupiah(angka) {
            return new Intl.NumberFormat('id-ID').format(angka);
        }
        
        // Fungsi untuk menghitung total biaya
        function hitungBiaya() {
            const parameter = document.getElementById('parameter').value;
            const totalSampel = parseInt(document.getElementById('total_sampel').value) || 1;
            const jarak = document.getElementById('jarak_pengambilan_sampel').value;
            
            let biayaParameter = 0;
            if (parameter && hargaParameter[parameter]) {
                biayaParameter = hargaParameter[parameter] * totalSampel;
            }
            
            let biayaJarak = 0;
            if (jarak && hargaJarak[jarak]) {
                biayaJarak = hargaJarak[jarak];
            }
            
            const totalBiaya = biayaParameter + biayaJarak;
            
            // Update tampilan biaya
            document.getElementById('estimasi_biaya_parameter').value = formatRupiah(biayaParameter);
            document.getElementById('estimasi_biaya_jarak').value = formatRupiah(biayaJarak);
            document.getElementById('estimasi_total_biaya').value = formatRupiah(totalBiaya);
        }
        
        // Tambahkan event listener untuk perubahan input
        document.getElementById('parameter').addEventListener('change', hitungBiaya);
        document.getElementById('total_sampel').addEventListener('input', hitungBiaya);
        document.getElementById('jarak_pengambilan_sampel').addEventListener('change', hitungBiaya);
        
        // Hitung biaya saat halaman dimuat
        hitungBiaya();
    });
</script>
@endsection