@extends('layouts.app')

@section('content')

<div class="row">
    

    {{-- PANEL BARANG --}}
    <div class="col-md-5">

        <div class="card">

            <div class="card-header bg-primary text-white">

                <h4>

                    <i class="fas fa-search"></i>

                    Cari Barang

                </h4>

            </div>

            <div class="card-body">

                <table class="table table-bordered"
                       id="tableBarangKasir">

                    <thead>

                        <tr>

                            <th>Kode</th>
                            <th>Nama</th>
                            <th>Harga</th>
                            <th></th>

                        </tr>

                    </thead>

                    <tbody>

                        @foreach($barang as $item)

                            <tr>

                                <td>
                                    {{ $item->kode_barang }}
                                </td>

                                <td>
                                    {{ $item->nama_barang }}
                                </td>

                                <td>
                                    Rp {{ number_format($item->harga_jual) }}
                                </td>

                                <td>

                                    <form action="{{ route('transaksi.addCart') }}"
                                          method="POST">

                                        @csrf

                                        <input type="hidden"
                                               name="barang_id"
                                               value="{{ $item->id }}">

                                        <button class="btn btn-success btn-sm">

                                            <i class="fas fa-cart-plus"></i>

                                        </button>

                                    </form>

                                </td>

                            </tr>

                        @endforeach

                    </tbody>

                </table>

            </div>

        </div>

    </div>

    {{-- KERANJANG --}}
    <div class="col-md-7">

        <div class="card">

            <div class="card-header bg-success text-white d-flex justify-content-between">

                <h4>

                    <i class="fas fa-shopping-cart"></i>

                    Keranjang Belanja

                </h4>

                <form action="{{ route('transaksi.resetCart') }}"
                      method="POST">

                    @csrf

                    <button class="btn btn-danger">

                        Reset Cart

                    </button>

                </form>

            </div>

            <div class="card-body">

                <table class="table table-bordered">

                    <thead>

                        <tr>

                            <th>Barang</th>
                            <th>Harga</th>
                            <th>Qty</th>
                            <th>Subtotal</th>
                            <th></th>

                        </tr>

                    </thead>

                    <tbody>

                        @php
                            $total = 0;
                        @endphp

                        @forelse($cart as $item)

                            @php
                                $total += $item['subtotal'];
                            @endphp

                            <tr>

                                <td>
                                    {{ $item['nama_barang'] }}
                                </td>

                                <td>
                                    Rp {{ number_format($item['harga']) }}
                                </td>

                                <td width="150">

                                    <form action="{{ route('transaksi.updateCart') }}"
                                          method="POST"
                                          class="d-flex">

                                        @csrf

                                        <input type="hidden"
                                               name="id"
                                               value="{{ $item['id'] }}">

                                        <input type="number"
                                               name="qty"
                                               value="{{ $item['qty'] }}"
                                               class="form-control">

                                        <button class="btn btn-warning btn-sm ml-1">

                                            <i class="fas fa-sync"></i>

                                        </button>

                                    </form>

                                </td>

                                <td>

                                    Rp {{ number_format($item['subtotal']) }}

                                </td>

                                <td>

                                    <form action="{{ route('transaksi.deleteCart') }}"
                                          method="POST">

                                        @csrf

                                        <input type="hidden"
                                               name="id"
                                               value="{{ $item['id'] }}">

                                        <button class="btn btn-danger btn-sm">

                                            <i class="fas fa-trash"></i>

                                        </button>

                                    </form>

                                </td>

                            </tr>

                        @empty

                            <tr>

                                <td colspan="5"
                                    class="text-center">

                                    Keranjang kosong

                                </td>

                            </tr>

                        @endforelse

                    </tbody>

                </table>

                <hr>

                {{-- TOTAL --}}
                <form action="{{ route('transaksi.checkout') }}"
                      method="POST">

                    @csrf

                    <div class="row">

                        <div class="col-md-6">

                            <div class="form-group">

                                <label>Total</label>

                                <input type="number"
                                       id="total"
                                       name="total"
                                       value="{{ $total }}"
                                       class="form-control"
                                       readonly>

                            </div>

                        </div>

                        <div class="col-md-6">

                            <div class="form-group">

                                <label>Bayar</label>

                                <input type="number"
                                       id="bayar"
                                       name="bayar"
                                       class="form-control"
                                       required>

                            </div>

                        </div>

                    </div>

                    <div class="form-group">

                        <label>Kembalian</label>

                        <input type="number"
                               id="kembalian"
                               name="kembalian"
                               class="form-control"
                               readonly>

                    </div>

                    <button class="btn btn-primary btn-lg btn-block">

                        <i class="fas fa-save"></i>

                        Simpan Transaksi

                    </button>

                </form>

            </div>

        </div>

    </div>

</div>

@endsection

@push('js')

<script>

    $('#tableBarangKasir').DataTable({
        responsive:true
    });

    $('#bayar').keyup(function(){

        let total = parseInt($('#total').val());

        let bayar = parseInt($(this).val());

        let kembali = bayar - total;

        $('#kembalian').val(kembali);

    });

</script>

<script>

function rupiah(angka){

    return new Intl.NumberFormat(
        'id-ID'
    ).format(angka);

}

$('#bayar').keyup(function(){

    let total = parseInt($('#total').val());

    let bayar = parseInt($(this).val());

    let kembali = bayar - total;

    $('#kembalian').val(kembali);

});

</script>

@endpush