@extends('layout')

@section('content')
    <style>
        #nav-tab .nav-link {
            width: 50%;
            /* masing-masing 50% */
            font-weight: 600;
            /* biar lebih jelas aktifnya */
        }

        #nav-tab .nav-link.active {
            background-color: #0d6efd;
            /* warna active */
            color: #fff;
        }
    </style>
    <div class="dashboard-main-body">

        <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-24">
            <h6 class="fw-semibold mb-0">Detail Pengajuan</h6>
            <ul class="d-flex align-items-center gap-2">
                <li class="fw-medium">
                    <a href="index.html" class="d-flex align-items-center gap-1 hover-text-primary">
                        <iconify-icon icon="solar:home-smile-angle-outline" class="icon text-lg"></iconify-icon>
                        Dashboard
                    </a>
                </li>
                <li>-</li>
                <li class="fw-medium">Detail Pengajuan</li>
            </ul>
        </div>

        <div class="card basic-data-table">
            <div class="card-header">
                <div class="d-flex " style="justify-content: space-between">
                    <div>
                        <h5 class="card-title mb-0">Data Detail Pengajuan</h5>
                    </div>
                    <div>
                        <a href="{{ url('pengajuan') }}" class="btn btn-warning">Kembali</a>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <nav>
                    <div class="nav nav-tabs w-100" id="nav-tab" role="tablist">
                        <button class="nav-link active flex-fill text-center" id="nav-home-tab" data-bs-toggle="tab"
                            data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home"
                            aria-selected="true">
                            Kas Keluar
                        </button>
                        <button class="nav-link flex-fill text-center" id="nav-profile-tab" data-bs-toggle="tab"
                            data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile"
                            aria-selected="false">
                            Kas Umum
                        </button>
                    </div>
                </nav>

                <div class="tab-content" id="nav-tabContent">
                    <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
                        @if (session()->get('error'))
                            <br>
                            <div class="alert alert-danger">
                                <p>
                                    {{ session()->get('error') }}
                                </p>
                            </div>
                        @endif
                        @if (session()->get('success'))
                            <br>
                            <div class="alert alert-success">
                                <p>
                                    {{ session()->get('success') }}
                                </p>
                            </div>
                        @endif
                        <br>
                        <p>Tanggal Pengajuan : {{ date('d F Y', strtotime($result->tgl)) }}</p>
                        <p>Sisa Saldo : Rp. {{ number_format($result->sisa) }}</p>
                        @if ($result->sisa > 0)
                            <button class="btn btn-primary-600 radius-8 px-20 py-11" data-bs-toggle="modal"
                                data-bs-target="#exampleModal">Tambah</button>
                            <br>
                            <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
                                aria-hidden="true">
                                <div class="modal-dialog modal-xl">
                                    <form method="POST" enctype="multipart/form-data" class="modal-content"
                                        action="{{ url('tambah_kas') }}">
                                        @csrf
                                        <input type="hidden" name="id" value="{{ $id }}">
                                        <div class="modal-header">
                                            <h1 class="modal-title fs-5" id="exampleModalLabel">Tambah Kas Keluar</h1>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="mb-3">
                                                        <label for="layanan">Pelayanan Anggota</label>
                                                        <select name="layanan" id="layanan" class="form-control select1"
                                                            required>
                                                            <option value="">Pilih</option>
                                                            @foreach ($layanan as $satu)
                                                                <option value="{{ $satu->id }}">{{ $satu->nama }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="col-md-6">
                                                    <div class="mb-3">
                                                        <label for="detail_layanan">Detail Pelayanan</label>
                                                        <select name="detail_layanan" id="detail_layanan"
                                                            class="form-control " required>
                                                            <option value="">Pilih</option>
                                                        </select>
                                                    </div>
                                                </div>

                                            </div>
                                            <div class="mb-3">
                                                <label for="">Nominal</label>
                                                <input type="number" class="form-control" required placeholder="Nominal"
                                                    name="nominal">
                                            </div>
                                            <div class="mb-3">
                                                <label for="">Tanggal</label>
                                                <input type="date" class="form-control" required placeholder=""
                                                    name="tgl">
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary"
                                                data-bs-dismiss="modal">Tutup</button>
                                            <button type="submit" class="btn btn-primary">Simpan</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        @endif

                        <div class="table-responsive mt-3">
                            <table class="table bordered-table mb-0" id="dataTable" data-page-length='10'>
                                <thead>
                                    <tr>
                                        <th scope="col">
                                            No
                                        </th>
                                        <th scope="col">Tanggal</th>
                                        <th scope="col">Layanan</th>
                                        <th scope="col">Detail Layanan</th>
                                        <th scope="col">Nominal</th>
                                        <th scope="col">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($kas as $row)
                                        <tr>
                                            <td>{{ $loop->iteration }}</td>
                                            <td>{{ date('d F Y', strtotime($row->tgl)) }}</td>
                                            <td>{{ $row->layanan->nama }}</td>
                                            <td>{{ $row->detail_layanan->master->layanan ?? null }}</td>
                                            <td>Rp. {{ number_format($row->nominal) }}</td>
                                            <td>

                                                <a href="{{ url('hapus_kas_keluar/' . $row->id) }}"
                                                    onclick="return confirm('apakah anda ingin menghapus data ini?');"
                                                    class="w-32-px h-32-px bg-danger-focus text-danger-main rounded-circle d-inline-flex align-items-center justify-content-center">
                                                    <iconify-icon icon="mingcute:delete-2-line"></iconify-icon>
                                                </a>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
                        @if (session()->get('error'))
                            <br>
                            <div class="alert alert-danger">
                                <p>
                                    {{ session()->get('error') }}
                                </p>
                            </div>
                        @endif
                        @if (session()->get('success'))
                            <br>
                            <div class="alert alert-success">
                                <p>
                                    {{ session()->get('success') }}
                                </p>
                            </div>
                        @endif
                        <br>
                        <p>Tanggal Pengajuan : {{ date('d F Y', strtotime($result->tgl)) }}</p>
                        <p>Sisa Saldo : Rp. {{ number_format($result->sisa) }}</p>
                        @if ($result->sisa > 0)
                            <button class="btn btn-primary-600 radius-8 px-20 py-11" data-bs-toggle="modal"
                                data-bs-target="#dua">Tambah</button>
                            <br>
                            <div class="modal fade" id="dua" tabindex="-1" aria-labelledby="exampleModalLabel"
                                aria-hidden="true">
                                <div class="modal-dialog modal-xl">
                                    <form method="POST" enctype="multipart/form-data" class="modal-content"
                                        action="{{ url('tambah_umum') }}">
                                        @csrf
                                        <input type="hidden" name="id" value="{{ $id }}">
                                        <div class="modal-header">
                                            <h1 class="modal-title fs-5" id="exampleModalLabel">Tambah Kas Umum</h1>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="mb-3">
                                                        <label for="">Nama Pengeluaran</label>
                                                        <input type="text" class="form-control" required
                                                            placeholder="Nama Pengeluaran" name="nama">
                                                    </div>
                                                </div>

                                                <div class="col-md-6">
                                                    <div class="mb-3">
                                                        <label for="">Nominal</label>
                                                        <input type="number" class="form-control" required
                                                            placeholder="Nominal" name="nominal">
                                                    </div>
                                                </div>

                                            </div>
                                            <div class="mb-3">
                                                <label for="">Tanggal</label>
                                                <input type="date" class="form-control" required placeholder=""
                                                    name="tgl">
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary"
                                                data-bs-dismiss="modal">Tutup</button>
                                            <button type="submit" class="btn btn-primary">Simpan</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        @endif

                        <div class="table-responsive mt-3">
                            <table class="table bordered-table mb-0" id="dataTables" data-page-length='10'
                                style="width: 100%">
                                <thead>
                                    <tr>
                                        <th scope="col">
                                            No
                                        </th>
                                        <th scope="col">Tanggal</th>
                                        <th scope="col">Nama Pengeluaran</th>
                                        <th scope="col">Nominal</th>
                                        <th scope="col">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($umum as $row)
                                        <tr>
                                            <td>{{ $loop->iteration }}</td>
                                            <td>{{ date('d F Y', strtotime($row->tgl)) }}</td>
                                            <td>{{ $row->nama }}</td>
                                            <td>Rp. {{ number_format($row->nominal) }}</td>
                                            <td>

                                                <a href="{{ url('hapus_kas_umum/' . $row->id) }}"
                                                    onclick="return confirm('apakah anda ingin menghapus data ini?');"
                                                    class="w-32-px h-32-px bg-danger-focus text-danger-main rounded-circle d-inline-flex align-items-center justify-content-center">
                                                    <iconify-icon icon="mingcute:delete-2-line"></iconify-icon>
                                                </a>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css">

    <!-- Choices JS -->
    <script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const selectElements = document.querySelectorAll("select.select1");

            selectElements.forEach(function(select) {
                new Choices(select, {
                    searchEnabled: true,
                    itemSelectText: '',
                    placeholder: true,
                    searchPlaceholderValue: 'Cari...'
                });
            });
        });
    </script>
    <script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
        crossorigin="anonymous"></script>
    <script>
        $(document).ready(function() {
            $('#layanan').on('change', function() {
                let layananId = $(this).val();

                let $detailSelect = $('#detail_layanan');
                $detailSelect.html('<option value="">Loading...</option>'); // reset dulu

                if (layananId) {
                    $.ajax({
                        url: "{{ url('detail_pelayanan') }}/" + layananId,
                        type: 'GET',
                        dataType: 'json',
                        success: function(data) {

                            $detailSelect.empty().append('<option value="">Pilih</option>');
                            $.each(data, function(key, item) {
                                $detailSelect.append('<option value="' + item.id +
                                    '">' + item.master.layanan + '</option>');
                            });
                        },
                        error: function() {
                            $detailSelect.html('<option value="">Gagal memuat data</option>');
                        }
                    });
                } else {
                    $detailSelect.html('<option value="">Pilih</option>');
                }
            });
        });
    </script>

@endsection