@extends('layouts.master')

@section('page-css')
<link rel="stylesheet" media="screen, print" href="{{asset('assets/css/datagrid/datatables/datatables.bundle.css')}}">
@endsection
@section('content')

<div class="row">
    <div class="col-12 mb-3">
        <div class="d-flex flex-row justify-content-between">
            <div class="d-flex align-items-center">
                <div class="subheader mb-0">
                    <h1 class="subheader-title">
                        {{$title}}
                    </h1>
                </div>
            </div>
            <div class="align-items-end">
                <div class="card">
                    <div class="card-body p-2">
                        <div class="d-flex flex-row gap-3 justify-content-center align-items-center">
                            <div class="p-2 bg-secondary rounded">
                                <i class="fal fa-home"></i>
                            </div>
                            <div>
                                <h5 class="fw-700 mb-1">{{session('name')}}</h5>
                                <p class="mb-0">NPSN: {{session('npsn')}}</p>
                            </div>
                            <div class="d-flex flex-column gap-1">
                                <span class="badge bg-primary-light text-primary">{{session('tingkat_sekolah')}}</span>
                                <span class="badge bg-success-light text-success">{{session('status_sekolah')}}</span>
                                <span class="badge bg-info-light text-info">Level {{levelAdiwiyata(session('npsn'))}}</span>
                            </div>
                        </div>  
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-12">
        @if ($errors->any())
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-12">
                         <div class="max-w-xl mx-auto shadow-md">
                                <div class="mb-6 d-flex flex-row gap-3 justify-between">
                                <div class="p-2 rounded step-indicator bg-primary-light text-primary font-semibold">Data Jumlah</div>
                                <div class="p-2 rounded step-indicator text-secondary">Penghematan Air</div>
                                <div class="p-2 rounded step-indicator text-secondary">Penghematan Listrik</div>
                            </div>
                        </div>
                        <form id="form" action="{{route($route.'.store')}}" method="POST">
                            {{csrf_field()}}
                            <!-- Step 1 -->
                            <div class="step" id="step1">
                                <div class="row mt-3">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="fw-500">Jumlah Peserta Didik</label>
                                            <input name="jumlah_peserta_didik" value="{{@$jumlah_peserta_didik ? @$jumlah_peserta_didik : old('jumlah_peserta_didik')}}" type="text" class="numberInput form-control is-required " placeholder="jumlah peserta didik">
                                        </div>
                                        <div class="form-group">
                                            <label class="fw-500">Jumlah Tenaga Pendidik</label>
                                            <input name="jumlah_tenaga_pendidik" value="{{@$jumlah_tenaga_pendidik ? @$jumlah_tenaga_pendidik : old('jumlah_tenaga_pendidik')}}" type="text" class="numberInput form-control is-required " placeholder="jumlah tenaga pendidik">
                                        </div>
                                        <div class="form-group">
                                            <label class="fw-500">Jumlah Tenaga kependidikan</label>
                                            <input name="jumlah_tenaga_kependidikan" value="{{@$jumlah_tenaga_kependidikan ? @$jumlah_tenaga_kependidikan : old('jumlah_tenaga_kependidikan')}}" type="text" class="numberInput form-control is-required " placeholder="jumlah tenaga kependidikan">
                                        </div>
                                        <div class="form-group">
                                            <label class="fw-500">Jumlah Warga Sekolah Lainnya</label>
                                            <input name="jumlah_warga_sekolah_lainnya" value="{{@$jumlah_warga_sekolah_lainnya ? @$jumlah_warga_sekolah_lainnya : old('jumlah_warga_sekolah_lainnya')}}" type="text" class="numberInput form-control is-required " placeholder="jumlah warga lainnya (cont:petugas kebersihan, petugas keamanan, petugas kantin, dll)">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="fw-500">Jumlah Biopori</label>
                                            <input name="jumlah_biopori" value="{{@$jumlah_biopori ? @$jumlah_biopori : old('jumlah_biopori')}}" type="text" class="numberInput form-control is-required " placeholder="jumlah biopori">
                                        </div>
                                        <div class="form-group">
                                            <label class="fw-500">Jumlah Sumur Resapan</label>
                                            <input name="jumlah_sumur_resapan" value="{{@$jumlah_sumur_resapan ? @$jumlah_sumur_resapan : old('jumlah_sumur_resapan')}}" type="text" class="numberInput form-control is-required " placeholder="jumlah sumur resapan">
                                        </div>
                                        <div class="form-group">
                                            <label class="fw-500">Jumlah Pohon/Tanaman yang ditanam dan tumbuh</label>
                                            <input name="jumlah_pohon" value="{{@$jumlah_pohon ? @$jumlah_pohon : old('jumlah_pohon')}}" type="text" class="numberInput form-control is-required " placeholder="jumlah pohon tanaman">
                                        </div>
                                    </div>
                                </div>
                                <div class="flex justify-end mt-3">
                                    <button type="button" class="next btn btn-primary text-white rounded">Selanjutnya&nbsp;<i class="fal fa-arrow-right"></i></button>
                                </div>
                            </div>
                            <!-- Step 2 -->
                            <div class="step d-none" id="step2">
                                <div class="alert bg-primary-light">
                                    <p class="mb-0 text-primary">Penghematan air sebelum dan setelah melaksanakan gerakan PBLHS</p>
                                </div>
                                <div class="form-group">
                                    <label class="fw-500">Sebelum melaksanakan gerakan PBLHS <small class="text-warning">(Meter Kubik/Bulan)</small></label>
                                    <input name="air_sebelum_pblhs" value="{{@$air_sebelum_pblhs ? @$air_sebelum_pblhs : old('air_sebelum_pblhs')}}" type="text" class="numberInput form-control is-required" placeholder="rata-rata per bulan dalam meter kubik">
                                </div>
                                <div class="form-group">
                                    <label class="fw-500">Setelah melaksanakan gerakan PBLHS <small class="text-warning">(Meter Kubik/Bulan dalam Tahun ajaran 2022/2023)</small></label>
                                    <input name="air_setelah_pblhs" value="{{@$air_setelah_pblhs ? @$air_setelah_pblhs : old('air_setelah_pblhs')}}" type="text" class="numberInput form-control is-required" placeholder="rata-rata per bulan dalam meter kubik">
                                </div>
                                <div class="flex justify-between">
                                    <button type="button" class="prev btn btn-secondary text-black px-4 py-2 rounded"><i class="fal fa-arrow-left"></i>&nbsp;Kembali</button>
                                    <button type="button" class="next btn btn-primary text-white px-4 py-2 rounded">Selanjutnya&nbsp;<i class="fal fa-arrow-right"></i></button>
                                </div>
                            </div>
                            <div class="step d-none" id="step3">
                                <div class="alert bg-primary-light">
                                    <p class="mb-0 text-primary">Penghematan listrik sebelum dan setelah melaksanakan gerakan PBLHS</p>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="fw-500">Sebelum melaksanakan gerakan PBLHS <small class="text-warning">(KWH/Bulan)</small></label>
                                            <input name="listrik_sebelum_pblhs" value="{{@$listrik_sebelum_pblhs ? @$listrik_sebelum_pblhs : old('listrik_sebelum_pblhs')}}" type="text" class="numberInput form-control is-required" placeholder="rata-rata per bulan dalam kwh">
                                        </div>
                                        <div class="form-group">
                                            <label class="fw-500">Setelah melaksanakan gerakan PBLHS <small class="text-warning">(KWH/Bulan dalam Tahun ajaran 2022/2023)</small></label>
                                            <input name="listrik_setelah_pblhs" value="{{@$listrik_setelah_pblhs ? @$listrik_setelah_pblhs : old('listrik_setelah_pblhs')}}" type="text" class="numberInput form-control is-required" placeholder="rata-rata per bulan dalam kwh">
                                        </div>
                                        <div class="form-group">
                                            <label class="fw-500">Luas ruangan ber AC</label>
                                            <input name="luas_ruangan_ac" value="{{@$luas_ruangan_ac ? @$luas_ruangan_ac : old('luas_ruangan_ac')}}" type="text" class="numberInput form-control is-required" placeholder="dalam satuan meter persegi">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="fw-500">Luas ruangan non AC</label>
                                            <input name="luas_ruangan_non_ac" value="{{@$luas_ruangan_non_ac ? @$luas_ruangan_non_ac : old('luas_ruangan_non_ac')}}" type="text" class="numberInput form-control is-required" placeholder="dalam satuan meter persegi">
                                        </div>
                                        <div class="form-group">
                                            <label class="fw-500">Jumlah Kader</label>
                                            <input name="jumlah_kader" value="{{@$jumlah_kader ? @$jumlah_kader : old('jumlah_kader')}}" type="text" class="numberInput form-control is-required" placeholder="jml kader yang dibentuk dan diberdayakan selama pelaksanaan gerakan PBLHS">
                                        </div>
                                    </div>
                                </div>
                                <div class="flex justify-between mt-3">
                                    <button type="button" class="prev btn btn-secondary text-black px-4 py-2 rounded"><i class="fal fa-arrow-left"></i>&nbsp;Kembali</button>
                                    <button type="submit" class="submit btn btn-success text-white px-4 py-2 rounded"><i class="fal fa-save"></i>&nbsp;Simpan Data</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('page-js')
<script>
    const steps = document.querySelectorAll(".step");
    const indicators = document.querySelectorAll(".step-indicator");
    let currentStep = 0;

    function showStep(index) {
      steps.forEach((step, i) => {
        step.classList.toggle("d-none", i !== index);
        indicators[i].classList.toggle("bg-primary-light", i === index);
        indicators[i].classList.toggle("text-primary", i === index);
        indicators[i].classList.toggle("text-secondary", i !== index);
      });
    }

    document.querySelectorAll(".next").forEach(btn => {
      btn.addEventListener("click", () => {
        if (currentStep < steps.length - 1) {
          currentStep++;
          showStep(currentStep);
        }
      });
    });

    document.querySelectorAll(".prev").forEach(btn => {
      btn.addEventListener("click", () => {
        if (currentStep > 0) {
          currentStep--;
          showStep(currentStep);
        }
      });
    });

    document.getElementById("form").addEventListener("submit", (e) => {
      e.preventDefault();
      const form = e.target;
      
      let isValid = true; // Flag validasi

      $('.is-required').each(function () {

        let value = $(this).val()?.trim();
        if (!value) {
            isValid = false;
            $(this).addClass("is-invalid");
        } else {
            $(this).removeClass("is-invalid");
        }
      });

        if (!isValid) {
            toastr.error("Harap isi semua field yang wajib diisi", 'Error!', {positionClass: 'toast-bottom-right', containerId: 'toast-bottom-right'});
            // alert(".");
            return;
        }else{
            form.submit();
        }
    });

    // Initialize first step
    showStep(currentStep);
  </script>
@endsection