@extends('layout.main')
@section('title', 'Detail Akun Transaksi')

@section('prev-page')
    <a href="{{ route('dashboard') }}" class="text-default">
        <i class="icon-arrow-left52 position-left"></i><span class="text-semibold">Home</span>
    </a> - <a href="{{ route('admin.transaction.account') }}" class="text-default">
        <span class="text-semibold">Daftar Akun Transaksi</span>
    </a>
@endsection

@section('content')
    <div class="col-lg-8 col-lg-offset-2">
        <div class="panel panel-white">
            <div class="panel-heading">
                <h6 class="panel-title">Nama Akun: {{ $detail->name }}</h6>
            </div>
            <div class="panel-body no-padding-bottom">
                <div class="col-md-6">
                    <p><b>No Rekening:</b> {{ $detail->account_number ?: '-' }}</p>
                </div>
                <div class="col-md-6">
                    <p><b>Kode Akun:</b> {{ $detail->account_code ?: '-' }}</p>
                </div>
            </div>
            <div class="panel-body">
                <div class="col-md-6">
                    <h6>Transaksi Kredit</h6>
                    <div class="col-lg-12 table-responsive">
                        <table id="userTable" class="table table-togglable table-hover table-xxs text-size-small">
                            <thead>
                                <tr>
                                    <th data-toggle="true">Nama Kategori</th>
                                    <th data-toggle="true" class="col-md-1"></th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($kredits as $kredit)
                                    <tr>
                                        <td>
                                            <label for="option-{{ $kredit->id }}">{{ $kredit->name }}</label>
                                            @if (!empty($kredit->need_approval))
                                                <i class="icon-file-check2 position-right"></i>
                                            @endif
                                        </td>
                                        <td class="text-right">
                                            <input type="checkbox" class="styled categories" id="option-{{ $kredit->id }}" name="option-{{ $kredit->id }}" value="{{ $kredit->id }}"
                                                @if (in_array($kredit->id, $detail->categories)) {{ 'checked' }} @endif />
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="2" class="text-center">Belum ada data.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="col-md-6">
                    <h6>Transaksi Debet</h6>
                    <div class="col-lg-12 table-responsive">
                        <table id="userTable" class="table table-togglable table-hover table-xxs text-size-small">
                            <thead>
                                <tr>
                                    <th data-toggle="true">Nama Kategori</th>
                                    <th data-toggle="true" class="col-md-1"></th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($debets as $debet)
                                    <tr>
                                        <td>
                                            <label for="option-{{ $debet->id }}">{{ $debet->name }}</label>
                                            @if (!empty($debet->need_approval))
                                                <i class="icon-file-check2 position-right"></i>
                                            @endif
                                        </td>
                                        <td class="text-right">
                                            <input type="checkbox" class="styled categories" id="option-{{ $debet->id }}" name="option-{{ $debet->id }}" value="{{ $debet->id }}"
                                                @if (in_array($debet->id, $detail->categories)) {{ 'checked' }} @endif />
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="2" class="text-center">Belum ada data.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('other-scripts')
    <script type="text/javascript" src="{{ asset('assets/js/plugins/forms/styling/uniform.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/js/core/app.js') }}"></script>
    <meta name="csrf-token" content="{{ csrf_token() }}" />
    <script type="text/javascript">
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
    </script>
    <script>
        $(".styled").uniform({
            radioClass: 'choice'
        });
        $(".categories").on("change", function() {
            let element = $(this);
            let oldValue = !element.is(":checked");
            $.post("{{ route('admin.transaction.account.category.submit') }}", {
                account: {{ $detail->id }},
                category: this.value,
            }, function(data, status) {
                if (data.status === "success") {
                    new PNotify({
                        text: data.message,
                        delay: 3000,
                        addclass: 'bg-success'
                    });
                } else {
                    new PNotify({
                        text: data.message,
                        delay: 3000,
                        addclass: 'bg-danger'
                    });
                    element.prop('checked', oldValue ? true : false);
                }
            });
        });
    </script>
@endsection