@extends('layouts.main', [
    'title' => 'Laporan Pengeluaran',
])

@push('styles')
    <link href="https://cdn.jsdelivr.net/npm/simple-datatables@latest/dist/style.css" rel="stylesheet" type="text/css">
    <script src="https://cdn.jsdelivr.net/npm/simple-datatables@latest" type="text/javascript"></script>
@endpush

@push('scripts')
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
    <script type="text/javascript" src="js/chart.sample.min.js"></script>
@endpush

@push('scripts')
    <script>
        //on change jenjang_id and request GET to siswa/get-kelas?jenjang_id, add meta tag csrf-token
        document.querySelector('select[name="jenjang_id"]').addEventListener('change', function() {
            const jenjang_id = this.value;
            console.log(jenjang_id);
            const kelasSelect = document.querySelector('select[name="kelas_id"]');
            fetch(`/siswa/get-kelas?jenjang_id=${jenjang_id}`)
                .then(response => response.json())
                .then(data => {
                    kelasSelect.innerHTML = '<option value="">Pilih Kelas</option>';
                    data.forEach(kelas => {
                        const option = document.createElement('option');
                        //jenis_pembayarans
                        option.setAttribute('data-jenis', JSON.stringify(kelas.jenis_pembayarans));
                        option.value = kelas.id;
                        option.text = kelas.nama_kelas;
                        kelasSelect.add(option);
                    });

                });
        });

        //onchange kelas_id, get data-jenis and append to list-tagihan
        document.querySelector('select[name="kelas_id"]').addEventListener('change', function() {
            const kelas_id = this.value;
            const kelas = this.options[this.selectedIndex];
            const jenis_pembayarans = JSON.parse(kelas.getAttribute('data-jenis'));
            const listTagihan = document.querySelector('#list-tagihan');
            listTagihan.innerHTML = '';
            jenis_pembayarans.forEach((jenis_pembayaran, index) => {
                const tr = document.createElement('tr');
                tr.innerHTML = `
                    <td>${index + 1}</td>
                    <td>${jenis_pembayaran.nama_jenis_pembayaran}</td>
                    <td>
                        <div class="field-body">
                            <div class="control">
                                <input class="input" name="nominal[]" type="number" placeholder="Nominal">
                            </div>
                        </div>
                        <input type="hidden" name="jenis_pembayaran_id[]" value="${jenis_pembayaran.id}">
                    </td>
                `;
                listTagihan.appendChild(tr);
            });
        });
    </script>

    <script>
        const dataTable = new simpleDatatables.DataTable("#myTable");
    </script>

    <script>
        function openCetakPreview() {
            //get current url
            const url = window.location.href;
            const base64url = btoa(url.replace("/pengeluaran-harian", "/pengeluaran-harian/pdf"));
            let newUrl = "{{ url('cetak-preview') }}/" + base64url;
            //open new tab

            window.open(newUrl, '_blank');
        }
    </script>
@endpush

@section('content')
    <div class="grid gap-6 grid-cols-1 md:grid-cols-2 mb-6">
        <div class="card">
            <div class="card-content">
                <form action="">
                    <div class="field">
                        <label class="label">Periode</label>
                        <div class="field-body">
                            <div class="flex gap-2 flex-col md:flex-row items-center">
                                <div class=" w-full">
                                    <div class="control">
                                        <input class="input" id="periode_awal" name="periode_awal" type="date"
                                            placeholder="Periode Awal" value="{{ old('periode_awal', @$periode_awal) }}">

                                    </div>
                                    @error('periode_awal')
                                        <p class="help is-danger text-red-500">{{ $message }}</p>
                                    @enderror
                                </div>
                                <div>
                                    S/D
                                </div>
                                <div class=" w-full">
                                    <div class="control">
                                        <input class="input" id="periode_akhir" name="periode_akhir" type="date"
                                            placeholder="Periode Akhir" value="{{ old('periode_akhir', @$periode_akhir) }}">

                                    </div>
                                    @error('periode_akhir')
                                        <p class="help is-danger text-red-500">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>


                    <div class="field">
                        <label class="label">User</label>
                        <div class="field-body">
                            <div class="control">
                                <div class="select">
                                    <select name="user_id" id="user_id">
                                        <option value="Semua">Semua</option>
                                        @foreach ($users as $user)
                                            <option value="{{ $user->id }}" @selected(old('user_id') == $user->id)>
                                                {{ $user->nama }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            @error('user_id')
                                <p class="help is-danger text-red-500">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>


                    <div class="flex gap-2">
                        <div class="control">
                            <button type="submit" class="button green">
                                Filter
                            </button>
                        </div>
                        <div class="control">
                            <button type="button" onclick="openCetakPreview()" class="button blue">
                                Cetak
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="card">
            <div class="card-content">

                <ul>
                    <li>
                        <b>
                            Periode: {{ $periode_awal }} S/D {{ $periode_akhir }}
                        </b>
                    </li>

                    <li>
                        <b>
                            User: {{ $user_nama }}
                        </b>
                    </li>

                    <li>
                        <b>
                            Total : {{ number_format($total) }}
                        </b>
                    </li>


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



    </div>




    <div class="card  mb-6">
        <header class="card-header">
            <p class="card-header-title">
                <span class="icon"><i class="mdi mdi-account-multiple"></i></span>
                Rincian Pengeluaran
            </p>

        </header>
        <div class="card-content">
            <table id="myTable">
                <thead>
                    <tr>
                        <th>
                            Tanggal
                        </th>
                        <th>
                            Nama
                        </th>

                        <th>
                            Jumlah
                        </th>
                        <th>
                            Keterangan
                        </th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($pengeluarans as $data)
                        <tr>


                            <td data-label="Tanggal">
                                {{ $data->tanggal_pengeluaran }}
                            </td>
                            <td data-label="Name">
                                {{ $data->user->nama }}
                            </td>
                            <td data-label="Jumlah">
                                {{ number_format($data->jumlah_pengeluaran) }}
                            </td>
                            <td data-label="Keterangan">
                                {{ $data->keterangan_pengeluaran }}
                            </td>
                        </tr>
                    @endforeach

                </tbody>

                <tfoot>
                    <tr>
                        <th colspan="2">
                            <strong>Total</strong>
                        </th>
                        <th >
                            <strong>{{ number_format($total) }}</strong>
                        </th>
                        <th></th>

                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
@endsection