@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        {{-- Tombol Kembali --}}
                        <button class="btn btn-secondary mb-0" onclick="window.location='{{ url($url_menu . '/index') }}'">
                            <i class="fas fa-circle-left me-1"></i>
                            <span class="font-weight-bold">Kembali</span>
                        </button>

                        <!-- Tombol Simpan -->
                        @if ($authorize->add == '1')
                            <button class="btn btn-primary mb-0" type="submit" form="trs_kas-form">
                                <i class="fas fa-floppy-disk me-1"></i>
                                <span class="font-weight-bold">Simpan</span>
                            </button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <!-- Form -->
                    <form role="form" method="POST" action="{{ URL::to('/') }}/trs_kas/store" id="trs_kas-form">
                        @csrf
                        <div class="card-body">
                            <p class="text-uppercase text-sm">Input Data Kas</p>
                            <hr class="horizontal dark mt-0">

                            {{-- Tanggal --}}
                            <div class="mb-3">
                                <label class="form-label">Tanggal</label>
                                <input type="date" class="form-control" name="tanggal" value="{{ date('Y-m-d') }}"required>
                            </div>

                            {{-- Kategori dan Sub Kategori --}}
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="kategori_kas" class="form-label fw-bold">Kategori</label>
                                        <select name="kategori_kas" id="kategori_kas" class="form-select" required>
                                            <option value="">-- Pilih --</option>
                                            @foreach ($kategori_kas as $kategori)
                                                <option value="{{ $kategori['nama_kategori_kas'] }}"
                                                    data-sub='@json($kategori['sub_kategori_list'])'>
                                                    {{ $kategori['nama_kategori_kas'] }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="sub_kategori_kas" class="form-label fw-bold">Sub Kategori Kas</label>
                                        <select name="sub_kategori_kas" id="sub_kategori_kas" class="form-select" required>
                                            <option value="">-- Pilih --</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                           {{-- Kepada --}}
                            <div class="mb-3">
                                <label class="form-label">Kepada</label>
                                <input type="text" id="kepada" name="kepada" class="form-control" style="text-transform: uppercase;" required>
                            </div>

                            {{-- Uraian --}}
                            <div class="mb-3">
                                <label class="form-label">Uraian</label>
                                <input type="text" id="uraian" name="uraian" class="form-control" style="text-transform: uppercase;" required>
                            </div>

                            {{-- Nominal --}}
                            <div class="mb-3">
                                <label class="form-label">Nominal</label>
                                <input type="number" class="form-control" name="nominal" required>
                            </div>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
@endsection
{{--  --}}
@push('js')
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const kategoriKas = document.getElementById("kategori_kas");
            const subKategoriKas = document.getElementById("sub_kategori_kas");

            kategoriKas.addEventListener("change", function() {
                const selected = kategoriKas.options[kategoriKas.selectedIndex];
                const subData = selected.getAttribute("data-sub");

                subKategoriKas.innerHTML = '<option value="">-- Pilih --</option>';

                if (subData) {
                    const subList = JSON.parse(subData);
                    subList.forEach(sub => {
                        const option = document.createElement("option");
                        option.value = sub.id_kt_kas;
                        option.textContent = sub.sub_kategori_kas;
                        subKategoriKas.appendChild(option);
                    });
                }
            });

            $("#uraian").autocomplete({
                source(request, response) {
                    $.ajax({
                        url: "{{ URL::to('/') }}/trskas/add",
                        data: {
                            term: request.term,
                            field: 'uraian'
                        },
                        dataType: 'json',
                        success(data) {
                            response(data);
                        },
                        error(xhr) {
                            console.error(xhr.responseText);
                        }
                    });
                },
                minLength: 1
            });

            $("#kepada").autocomplete({
                source(request, response) {
                    $.ajax({
                        url: "{{ URL::to('/') }}/trskas/add",
                        data: {
                            term: request.term,
                            field: 'kepada'
                        },
                        dataType: 'json',
                        success(data) {
                            response(data);
                        },
                        error(xhr) {
                            console.error(xhr.responseText);
                        }
                    });
                },
                minLength: 1
            });
        });
    </script>
@endpush