@extends('layouts.app')

@push('styles')
    <!-- JQuery DataTable Css -->
    <link href="{{ url('material') }}/plugins/jquery-datatable/skin/bootstrap/css/dataTables.bootstrap.css"
        rel="stylesheet">
    <!-- JQuery DataTable Css -->
@endpush
@push('scripts')
    {{-- data Table --}}
    <script src="{{ url('material') }}/js/pages/tables/jquery-datatable.js"></script>
    <script src="{{ url('material') }}/plugins/jquery-datatable/jquery.dataTables.js"></script>
    <script src="{{ url('material') }}/plugins/jquery-datatable/skin/bootstrap/js/dataTables.bootstrap.js"></script>
    {{-- data Table --}}

    <script>
        $(document).on('change', '.pilih-banyak', function () {
            pilihBanyakData();
        });

        function pilihBanyakData() {
            var dataIds = [];
            document.querySelectorAll(".pilih-banyak").forEach(function (checkbox) {
                if (checkbox.checked) {
                    dataIds.push(checkbox.value);
                } else {
                    dataIds.splice(dataIds.indexOf(checkbox.value), 1);
                }
            });

            document.getElementById("pilih-banyak-id").value = dataIds;
        }
    </script>
@endpush

@section('content')

    <div class="container-fluid">
        <div class="block-header">
            <h2>Transaksi Pembelian</h2>
        </div>

        <div class="row clearfix">
            <!-- Task Info -->
            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="card">
                    <div class="header">
                        @if (\Helper::hakAkses('pembelian', 'create'))
                            <a href="{{ route('pembelian.create') }}" class="btn btn-primary">Tambah Pembelian</a>
                        @endif
                    </div>
                    <div class="body">
                        @include('layouts.includes.filter')
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped table-hover js-basic-example dataTable">
                                <thead>
                                    <tr>
                                        <th>
                                            *
                                        </th>
                                        <th>No.</th>
                                        <th>Tanggal</th>
                                        <th>Nomor</th>
                                        <th>Toko</th>
                                        <th>Nama Supplier</th>
                                        <th>List Barang</th>
                                        <th>Total Harga</th>
                                        <th>Keterangan</th>
                                        <th>Status Pembayaran</th>
                                        <th>Action</th>
                                        <th>Tools</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($datas as $key => $data)
                                        <tr>
                                            <td>
                                                <input type="checkbox" id="pilih-banyak-{{ $data->id }}" name="data_id[]"
                                                    value="{{ $data->id }}" class="pilih-banyak filled-in chk-col-red" />
                                                <label for="pilih-banyak-{{ $data->id }}">Pilih</label>
                                            </td>
                                            <td>{{ $loop->iteration }}</td>
                                            <td>{{ $data->tanggal_pembelian }}</td>
                                            <td>{{ $data->nomor_nota }}</td>
                                            <th>{{ @$data->tokos->first()->nama_toko ?? '-' }}</th>
                                            @if ($data->supplier)
                                                <td>{{ $data->supplier->nama_supplier }}</td>
                                            @else
                                                <td>Umum</td>
                                            @endif
                                            <td style="max-width: 300px;">
                                                @foreach ($data->detail_pembelian as $detail)
                                                    @if (isset($detail->item))
                                                        {!! $detail->item->nama_item . ',' . '<br>' !!}
                                                    @else
                                                        item tidak tersedia!
                                                    @endif
                                                @endforeach
                                            </td>
                                            <td>Rp. {{ number_format($data->total) }}</td>
                                            <td>{{ $data->keterangan }}</td>
                                            <td>
                                                @if ($data->status_pembayaran == 'lunas')
                                                    <span class="label bg-green">{{ $data->status_pembayaran }}</span>
                                                @elseif($data->status_pembayaran == 'refund')
                                                    <span class="label bg-light-blue">{{ $data->status_pembayaran }}</span>
                                                @elseif($data->status_pembayaran == 'retur')
                                                    <span class="label bg-red">{{ $data->status_pembayaran }}</span>
                                                @endif
                                            </td>
                                            <td>
                                                <div class="btn-group btn-block ">
                                                    <button type="button"
                                                        class="btn btn-default btn-block waves-effect dropdown-toggle"
                                                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                        Action <span class="caret"></span>
                                                    </button>
                                                    <ul class="dropdown-menu">


                                                        <li><a
                                                                href="{{ route('retur_pembelian.create', ['pembelian_id' => $data->id]) }}">Retur</a>
                                                        </li>
                                                        <li role="separator" class="divider"></li>

                                                    </ul>
                                                </div>
                                            </td>
                                            <td>
                                                <div style="display: flex; gap: 6px;">
                                                    @if (\Helper::hakAkses('pembelian', 'view'))
                                                        <a title="Detail Data"
                                                            href="{{ route('pembelian.show', [($id = $data->id)]) }}"
                                                            class="btn btn-info"><i class="material-icons">remove_red_eye</i></a>
                                                    @endif
                                                    @if (\Helper::hakAkses('pembelian', 'edit'))
                                                        <a title="Edit Data"
                                                            href="{{ route('pembelian.edit', [($id = $data->id)]) }}"
                                                            class="btn btn-primary"><i class="material-icons">create</i></a>
                                                    @endif
                                                    @if (\Helper::hakAkses('pembelian', 'delete'))
                                                        <form action="{{ route('pembelian.destroy', $data->id) }}" method="POST"
                                                            style="display:inline">
                                                            @csrf
                                                            @method('DELETE')
                                                            <button title="Delete Data" type="submit" class="btn btn-danger"
                                                                id="hapus-button"><i class="material-icons">delete</i></button>
                                                        </form>
                                                    @endif
                                                </div>

                                            </td>
                                        </tr>
                                    @endforeach

                                </tbody>
                                <tfoot>
                                    <tr>
                                        <td colspan="12">
                                            <form action="{{ route('pembelian.multiDelete') }}" method="POST">
                                                @csrf
                                                <input type="hidden" name="data_id" id="pilih-banyak-id" value="">
                                                <button class="btn btn-danger" id="hapus-button">
                                                    <i class="material-icons">delete</i>
                                                    Hapus Yang Dipilih
                                                </button>
                                            </form>
                                        </td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <!-- #END# Task Info -->
        </div>
    </div>
@endsection