@extends('layouts.app')

@section('content')

<div class="card">

    <div class="page-card">

        <div class="d-flex justify-content-between align-items-center mb-3">

                <h2 class="fw-bold mb-0 page-title">Daftar Transaksi</h2>

                <button class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#modalTransaksi">
                + Tambah Data
                </button>

        </div>
            <form action="" method="GET">
                <div class="toolbar-box">
                    <div class="toolbar-content">

                        <div class="show-entry">
                            Show

                            <select name="limit"
                                    class="form-select d-inline w-auto ms-2"
                                    onchange="this.form.submit()">

                                <option value="10">10</option>
                                <option value="25">25</option>

                            </select>

                            entries
                        </div>

                        <div class="search-group">

                            <input
                                type="text"
                                name="search"
                                class="form-control"
                                placeholder="Cari Data">

                            <button class="btn btn-primary">
                                Cari
                            </button>

                        </div>

                    </div>
                </div>
            </form>
        

        <div class="transaction-list">

            @foreach($transaksi as $key => $t)

            <div class="transaction-card">

                <div class="trx-header">

                    <span class="trx-badge">
                        {{ $t->trx_id }}
                    </span>

                    <span class="trx-number">
                        #{{ $key+1 }}
                    </span>

                </div>

                <div class="trx-date">
                    <i class="bi bi-calendar3"></i>
                    {{ date('d M Y', strtotime($t->tanggal)) }}
                </div>

                <div class="trx-product-box">

                    <h6>Produk</h6>

                    <p>{{ $t->produk }}</p>

                </div>

                <div class="trx-footer">

                    <div class="trx-action">

                        <a href="/transaksi/{{ $t->id }}/edit"
                        class="btn-edit">

                            <i class="bi bi-pencil"></i>

                        </a>

                        <form id="delete-form-{{$t->id}}"
                            action="/transaksi/{{ $t->id }}"
                            method="POST">

                            @csrf
                            @method('DELETE')

                            <button type="button"
                                    class="btn-delete"
                                    onclick="confirmDelete({{$t->id}})">

                                <i class="bi bi-trash"></i>

                            </button>

                        </form>

                    </div>

                </div>

            </div>

            @endforeach

        </div>

        <div class="mt-4">
            {{ $transaksi->links() }}
        </div>

    </div>
</div>

{{-- =========== Form Tambah Data ========== --}}

    <div class="modal fade" id="modalTransaksi">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content modern-modal">

                <!-- Header -->
                <div class="modal-header transaction-header">
                    <div>
                        <h4 class="mb-1 fw-bold">Tambah Transaksi</h4>
                        <small>Masukkan data transaksi baru</small>
                    </div>

                    <button class="btn-close btn-close-white"
                            data-bs-dismiss="modal"></button>
                </div>

                <form action="/transaksi" method="POST">
                    @csrf

                    <div class="modal-body">

                        <!-- Tanggal -->
                        <div class="mb-4">
                            <label class="form-label fw-bold">
                                Tanggal Transaksi
                            </label>

                            <input type="date"
                                name="tanggal"
                                class="form-control modern-input">
                        </div>

                        <!-- Produk -->
                        <div class="mb-3">

                            <label class="form-label fw-bold mb-3">
                                Pilih Produk
                            </label>

                            <div class="accordion" id="produkAccordion">

                                @foreach($produk->groupBy('kategori') as $kategori => $items)

                                <div class="accordion-item mb-3 border-0">

                                    <h2 class="accordion-header">

                                        <button class="accordion-button collapsed"
                                                type="button"
                                                data-bs-toggle="collapse"
                                                data-bs-target="#kategori{{ $loop->index }}">

                                            {{ $kategori }}

                                            <span class="badge bg-success ms-2">
                                                {{ count($items) }}
                                            </span>

                                        </button>

                                    </h2>

                                    <div id="kategori{{ $loop->index }}"
                                        class="accordion-collapse collapse">

                                        <div class="accordion-body">

                                            <div class="row">

                                                @foreach($items as $p)

                                                <div class="col-12 col-md-6 mb-2">

                                                    <div class="form-check">

                                                        <input class="form-check-input"
                                                            type="checkbox"
                                                            name="produk[]"
                                                            value="{{ $p->nama_produk }}"
                                                            id="produk{{ $p->id }}">

                                                        <label class="form-check-label"
                                                            for="produk{{ $p->id }}">

                                                            {{ $p->nama_produk }}

                                                        </label>

                                                    </div>

                                                </div>

                                                @endforeach

                                            </div>

                                        </div>

                                    </div>

                                </div>

                                @endforeach

                            </div>

                        </div>

                    </div>

                    <div class="modal-footer border-0">

                        <button type="button"
                                class="btn btn-light cancel-btn"
                                data-bs-dismiss="modal">

                            Batal

                        </button>

                        <button class="btn save-btn">
                            Simpan
                        </button>

                    </div>

                </form>

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

</div>

{{---=== script alert ===---}}


<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
    function confirmDelete(id){
        Swal.fire({
            title: 'Yakin hapus?',
            text: "Data tidak bisa dikembalikan!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#0d6efd',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Ya, hapus!',
            cancelButtonText: 'Batal'
        }).then((result) => {
            if(result.isConfirmed){
                document.getElementById('delete-form-'+id).submit();
            }
        });

    }
</script>

<script>
    document.addEventListener("DOMContentLoaded", function(){
        @if(session('success'))
        Swal.fire({
            toast: true,
            position: 'top-end',
            icon: 'success',
            title: '{{ session('success') }}',
            showConfirmButton: false,
            timer: 3000
        });
        @endif
    });
</script>

{{---- ======= script produk ====== ----}}

<script>

const produk = @json($produk);

const kategoriSelect = document.getElementById('kategori');
const produkList = document.getElementById('produk-list');

kategoriSelect.addEventListener('change', function(){

    let kategori = this.value;

    produk.forEach(function(p){

        if(p.kategori === kategori){

            // cek apakah produk sudah ada
            if(!document.getElementById('produk_'+p.id)){

                let html = `
                <div class="col-md-6 mb-2">

                    <div class="form-check produk-check">

                        <input 
                            class="form-check-input"
                            type="checkbox"
                            name="produk[]"
                            value="${p.nama_produk}"
                            id="produk_${p.id}"
                        >

                        <label class="form-check-label" for="produk_${p.id}">
                            ${p.nama_produk}
                        </label>

                    </div>

                </div>
                `;

                produkList.insertAdjacentHTML('beforeend', html);

            }

        }

    });

});

</script>

@endsection