@extends('template')

@section('title', 'Data Tarif dan Kelompok Pelanggan')

@section('konten')
<div class="main-panel">
    <div class="content">
        <div class="page-inner">
            <div class="page-header">
                <h4 class="page-title">Data Tarif dan Kelompok Pelanggan</h4>
                <ul class="breadcrumbs">
                    <li class="nav-home">
                        <a href="/dashboard">
                            <i class="flaticon-home"></i>
                        </a>
                    </li>
                    <li class="separator">
                        <i class="flaticon-right-arrow"></i>
                    </li>
                    <li class="nav-item">
                        Data Tarif dan Kelompok Pelanggan
                    </li>
                </ul>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <button class="btn btn-primary btn-round" data-toggle="modal" data-target="#modalTambahKelompok"><i class="fa fa-plus"></i> Tambah Kelompok Pelanggan</button>
                            <button class="btn btn-primary btn-round" data-toggle="modal" data-target="#modalTambahTarif"><i class="fa fa-plus"></i> Tambah Tarif Air</button>
                        </div>
                        <div class="card-body">
                            @if (session('pesan'))
                                <div class="alert alert-success">
                                    {{ session('pesan') }}
                                </div>
                            @endif

                            <div class="table-responsive">
								<h5>Keputusan Peraturan Walikota</h5>
								@foreach ($kelompokPelanggan as $kelompok)
									@if ($kelompok->id == 0)
										<form action="{{ route('tarif.updateKelompok') }}" method="POST" class="d-flex">
											@csrf
											<input type="hidden" name="id" value="{{ $kelompok->id }}">
											
											<div class="input-group mb-4">
												<input type="text" class="form-control" name="nama" value="{{ $kelompok->nama }}" required>
												<div class="input-group-append">
													<button type="submit" class="btn btn-primary btn-sm">Simpan</button>
												</div>
											</div>
										</form>
									@endif
								@endforeach

								<h5>Data Kelompok Pelanggan</h5>
								<table id="kelompok-datatables" class="display table table-striped table-hover">
									<thead>
										<tr>
											<th>No</th>
											<th>Nama Kelompok</th>
											<th>Action</th>
										</tr>
									</thead>
									<tbody>
										@php $no = 1; @endphp
										@foreach ($kelompokPelanggan as $kelompok)
											@if ($kelompok->id != 0)
												<tr>
													<td>{{ $no++ }}</td>
													<td>{{ $kelompok->nama }}</td>
													<td>
														<button class="btn btn-link btn-primary btn-lg" data-toggle="modal" data-target="#modalEditKelompok" data-id="{{ $kelompok->id }}" data-nama="{{ $kelompok->nama }}" title="Edit">
															<i class="fa fa-edit"></i>
														</button>
														<a href="{{ route('tarif.hapusKelompok', $kelompok->id) }}" onclick="return confirm('Apakah Anda ingin menghapus kelompok ini?')" class="btn btn-link btn-danger" title="Hapus">
															<i class="fa fa-trash"></i>
														</a>
													</td>
												</tr>
											@endif
										@endforeach
									</tbody>
								</table>

                                <!-- Tabel Data Tarif Air -->
								<h5>Data Tarif Air</h5>
								<table id="tarif-datatables" class="display table table-striped table-hover">
									<thead>
										<tr>
											<th>No</th>
											<th>Kelompok Pelanggan</th>
											<th>Tarif (0-10, 11-20, 21-30, >30)</th>
											<th>Action</th>
										</tr>
									</thead>
									<tbody>
										@foreach ($tarifAir as $index => $tarif)
										<tr>
											<td>{{ $index + 1 }}</td>
											<td>{{ $tarif->kelompok->nama }}</td>
											<td>
												{{ $tarif->tarif_0_10 }}, {{ $tarif->tarif_11_20 }}, {{ $tarif->tarif_21_30 }}, {{ $tarif->tarif_more_than_30 }}
											</td>
											<td>
												<button class="btn btn-link btn-primary btn-lg" data-toggle="modal" data-target="#modalEditTarif" data-id="{{ $tarif->id }}" data-kelompok_pelanggan_id="{{ $tarif->kelompok_pelanggan_id }}" data-tarif_0_10="{{ $tarif->tarif_0_10 }}" data-tarif_11_20="{{ $tarif->tarif_11_20 }}" data-tarif_21_30="{{ $tarif->tarif_21_30 }}" data-tarif_more_than_30="{{ $tarif->tarif_more_than_30 }}" title="Edit">
													<i class="fa fa-edit"></i>
												</button>
												<a href="{{ route('tarif.hapusTarif', $tarif->id) }}" onclick="return confirm('Apakah Anda ingin menghapus tarif ini?')" class="btn btn-link btn-danger" title="Hapus">
													<i class="fa fa-trash"></i>
												</a>
											</td>
										</tr>
										@endforeach
									</tbody>
								</table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <footer class="footer">
        <div class="container-fluid">
            <nav class="pull-left">
                <ul class="nav">
                    <!-- Nav items -->
                </ul>
            </nav>
            <div class="copyright ml-auto">
                &copy; {{ date('Y') }} - Perumda Air Minum Tirta Bahari
            </div>
        </div>
    </footer>
</div>

<!-- Modal Tambah Kelompok Pelanggan -->
<div class="modal fade" id="modalTambahKelompok" tabindex="-1" role="dialog" aria-labelledby="modalTambahKelompokLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form method="POST" action="{{ route('tarif.simpanKelompok') }}">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title" id="modalTambahKelompokLabel">Tambah Kelompok Pelanggan</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="nama">Nama Kelompok</label>
                        <input type="text" name="nama" class="form-control" id="nama" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
                    <button type="submit" class="btn btn-primary">Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Edit Kelompok Pelanggan -->
<div class="modal fade" id="modalEditKelompok" tabindex="-1" role="dialog" aria-labelledby="modalEditKelompokLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form method="POST" action="{{ route('tarif.updateKelompok') }}">
                @csrf
                <input type="hidden" name="id" id="editKelompokId">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalEditKelompokLabel">Edit Kelompok Pelanggan</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="editNama">Nama Kelompok</label>
                        <input type="text" name="nama" class="form-control" id="editNama" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
                    <button type="submit" class="btn btn-primary">Simpan Perubahan</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Tambah Tarif Air -->
<div class="modal fade" id="modalTambahTarif" tabindex="-1" role="dialog" aria-labelledby="modalTambahTarifLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form method="POST" action="{{ route('tarif.simpanTarif') }}">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title" id="modalTambahTarifLabel">Tambah Tarif Air</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
						<label for="kelompok_pelanggan_id">Kelompok Pelanggan</label>
						<select name="kelompok_pelanggan_id" class="form-control" required>
							@foreach ($kelompokPelanggan as $kelompok)
								@if ($kelompok->id != 0) <!-- Menambahkan kondisi untuk tidak menampilkan id=0 -->
									<option value="{{ $kelompok->id }}">{{ $kelompok->nama }}</option>
								@endif
							@endforeach
						</select>
					</div>					
                    <div class="form-group">
                        <label for="tarif_0_10">Tarif 0-10</label>
                        <input type="number" name="tarif_0_10" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label for="tarif_11_20">Tarif 11-20</label>
                        <input type="number" name="tarif_11_20" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label for="tarif_21_30">Tarif 21-30</label>
                        <input type="number" name="tarif_21_30" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label for="tarif_more_than_30">Tarif >30</label>
                        <input type="number" name="tarif_more_than_30" class="form-control" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
                    <button type="submit" class="btn btn-primary">Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Edit Tarif Air -->
<div class="modal fade" id="modalEditTarif" tabindex="-1" role="dialog" aria-labelledby="modalEditTarifLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form method="POST" action="{{ route('tarif.updateTarif') }}">
                @csrf
                <input type="hidden" name="id" id="editTarifId">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalEditTarifLabel">Edit Tarif Air</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="editKelompokPelanggan">Kelompok Pelanggan</label>
                        <select name="kelompok_pelanggan_id" class="form-control" id="editKelompokPelanggan" required>
                            @foreach ($kelompokPelanggan as $kelompok)
                                <option value="{{ $kelompok->id }}">{{ $kelompok->nama }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="editTarif0_10">Tarif 0-10</label>
                        <input type="number" name="tarif_0_10" class="form-control" id="editTarif0_10" required>
                    </div>
                    <div class="form-group">
                        <label for="editTarif11_20">Tarif 11-20</label>
                        <input type="number" name="tarif_11_20" class="form-control" id="editTarif11_20" required>
                    </div>
                    <div class="form-group">
                        <label for="editTarif21_30">Tarif 21-30</label>
                        <input type="number" name="tarif_21_30" class="form-control" id="editTarif21_30" required>
                    </div>
                    <div class="form-group">
                        <label for="editTarifMoreThan30">Tarif >30</label>
                        <input type="number" name="tarif_more_than_30" class="form-control" id="editTarifMoreThan30" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
                    <button type="submit" class="btn btn-primary">Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    $(document).ready(function () {
        // Edit Kelompok
        $('#modalEditKelompok').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);
            var id = button.data('id');
            var nama = button.data('nama');
            $('#editKelompokId').val(id);
            $('#editNama').val(nama);
        });

        // Edit Tarif
        $('#modalEditTarif').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);
            var id = button.data('id');
            var kelompokPelangganId = button.data('kelompok_pelanggan_id');
            var tarif0_10 = button.data('tarif_0_10');
            var tarif11_20 = button.data('tarif_11_20');
            var tarif21_30 = button.data('tarif_21_30');
            var tarifMoreThan30 = button.data('tarif_more_than_30');

            $('#editTarifId').val(id);
            $('#editKelompokPelanggan').val(kelompokPelangganId);
            $('#editTarif0_10').val(tarif0_10);
            $('#editTarif11_20').val(tarif11_20);
            $('#editTarif21_30').val(tarif21_30);
            $('#editTarifMoreThan30').val(tarifMoreThan30);
        });
    });
</script>
@endsection