@extends('layouts.app')

@section('title', 'Transaksi Kas Musholla KPP Pratama Solok')

@push('style')
    <!-- CSS Libraries -->
    <link rel="stylesheet" href="{{ asset('library/bootstrap-daterangepicker/daterangepicker.css') }}">
    <link rel="stylesheet" href="{{ asset('library/bootstrap-colorpicker/dist/css/bootstrap-colorpicker.min.css') }}">
    <link rel="stylesheet" href="{{ asset('library/select2/dist/css/select2.min.css') }}">
    <link rel="stylesheet" href="{{ asset('library/selectric/public/selectric.css') }}">
    <link rel="stylesheet" href="{{ asset('library/bootstrap-timepicker/css/bootstrap-timepicker.min.css') }}">
    <link rel="stylesheet" href="{{ asset('library/bootstrap-tagsinput/dist/bootstrap-tagsinput.css') }}">
    <link rel="stylesheet" href="https://cdn.datatables.net/2.0.8/css/dataTables.dataTables.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/3.0.2/css/buttons.dataTables.css">
@endpush

@section('main')
    <div class="main-content">
        <section class="section">
            <div class="section-header">
                <h1>Kas Musholla KPP Pratama Solok</h1>
            </div>

            <div class="section-body">
                <h2 class="section-title">Transaksi</h2>
                <div class="row">
                    <div class="col-12 col-md-4 col-lg-4">
                        <div class="card" style="background-color: #47c363 !important;">
                            <div class="card-header">
                                <h4>Form Transaksi</h4>
                            </div>
                            <div class="card-body">
                                @if (session('success'))
                                    <div class="alert alert-success">
                                        {{ session('success') }}
                                    </div>
                                @endif
                                @if ($errors->all())
                                    @foreach ($errors->all() as $msg)
                                        <span class="text-danger">{{ $msg }}</span>
                                    @endforeach
                                @endif
                                <form method="POST"
                                      action="#"
                                      class="needs-validation"
                                      novalidate="">
                                    @csrf
                                    <div class="form-group">
                                        <div class="control-label">Tanggal Transaksi</div>
                                        <input type="text" name="tanggal" class="form-control datepicker" required>
                                    </div>
                                    <div class="form-group">
                                        <div class="control-label">Keterangan</div>
                                        <input type="text" name="keterangan" class="form-control" required>
                                    </div>
                                    <div class="form-group">
                                        <div class="control-label">Debet</div>
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <div class="input-group-text">
                                                    Rp
                                                </div>
                                            </div>
                                            <input type="text" name="nominal_debet" class="form-control currency">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="control-label">Kredit</div>
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <div class="input-group-text">
                                                    Rp
                                                </div>
                                            </div>
                                            <input type="text" name="nominal_kredit" class="form-control currency2">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="control-label">Jenis Pembayaran</div>
                                        <div class="custom-switches-stacked mt-2">
                                            <label class="custom-switch">
                                                <input type="radio" name="jenis_payment" value="1" class="custom-switch-input" checked="">
                                                <span class="custom-switch-indicator"></span>
                                                <span class="custom-switch-description">Kas Tunai</span>
                                            </label>
                                            <label class="custom-switch">
                                                <input type="radio" name="jenis_payment" value="2" class="custom-switch-input">
                                                <span class="custom-switch-indicator"></span>
                                                <span class="custom-switch-description">Transfer</span>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="form-group text-right">
                                        <button type="submit"
                                                class="btn btn-primary btn-lg btn-icon icon-right"
                                                id="btn-submit"
                                                tabindex="4">
                                            Simpan
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-md-8 col-lg-8">
                        <div class="card" style="background-color: #47c363 !important;">
                            <div class="card-header">
                                <h4>Status Saldo Saat Ini</h4>
                            </div>
                            <div class="card-body">
                                @foreach($saldo as $val)
                                    <div class="row">
                                        <div class="col-lg-6 col-md-6 col-sm-6 col-12">
                                            <div class="card card-statistic-1">
                                                <div class="card-icon bg-primary">
                                                    <i class="fas {{ $val->jenisPayment->id == 2 ? 'fa-bank' : 'fa-dollar-sign' }}"></i>
                                                </div>
                                                <div class="card-wrap">
                                                    <div class="card-header">
                                                        <h4>{{ $val->jenisPayment->id == 2 ? 'Saldo Rekening' : $val->jenisPayment->keterangan_payment }}</h4>
                                                    </div>
                                                    <div class="card-body">
                                                        Rp. {{ number_format($val->saldo,2,',','.') }}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                                <div class="row">
                                    <div class="col-lg-6 col-md-6 col-sm-6 col-12">
                                        <a href="{{ url(route('kas-musholla.laporan', [date('Y'),date('n')])) }}" class="btn btn-primary btn-lg">
                                            Laporan Bulanan
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12 col-md-12 col-lg-12">
                        <div class="card">
                            <div class="card-header">
                                <h4>History Transaksi</h4>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <div class="row">
                                        <div class="col-12">
                                            <table class="table-striped table"
                                                   id="table-transaksi-kas">
                                                <thead>
                                                <tr>
                                                    <th>#</th>
                                                    <th>Tanggal</th>
                                                    <th>Keterangan</th>
                                                    <th>Debet</th>
                                                    <th>Kredit</th>
                                                    <th>Payment</th>
                                                    <th>Saldo Rekening</th>
                                                    <th>Cash</th>
                                                    <th>Saldo Total</th>
                                                    <th>Aksi</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach($transaksis as $key => $val)
                                                        <tr>
                                                            <td>{{ $key+1 }}</td>
                                                            <td>{{ $val->tanggal }}</td>
                                                            <td>{{ $val->keterangan }}</td>
                                                            <td>{{ $val->nominal_debet != null ? number_format($val->nominal_debet,2,',','.') : '' }}</td>
                                                            <td>{{ $val->nominal_kredit != null ? number_format($val->nominal_kredit,2,',','.') : '' }}</td>
                                                            <td>{{ $val->jenisPayment->keterangan_payment }}</td>
                                                            <td>{{ $val->saldo_rekening != null ? number_format($val->saldo_rekening,2,',','.') : '' }}</td>
                                                            <td>{{ $val->saldo_kas != null ? number_format($val->saldo_kas,2,',','.') : '' }}</td>
                                                            <td>{{ $val->saldo_total != null ? number_format($val->saldo_total,2,',','.') : '' }}</td>
                                                            <td>
                                                                <a href="{{ url(route('kas-musholla.home.edit',[\Vinkla\Hashids\Facades\Hashids::encode($val->id)])) }}" class="btn btn-icon btn-sm btn-primary" data-toggle="tooltip" data-original-title="Edit" >
                                                                    <i class="fas fa-edit"></i>
                                                                </a>
                                                                <a href="#"
                                                                   class="btn btn-icon btn-sm btn-danger"
                                                                   data-toggle="tooltip"
                                                                   data-original-title="Hapus"
                                                                   data-confirm="Peringatan...|Aksi ini tidak dapat dibatalkan. Lanjutkan?"
                                                                   data-confirm-text-yes="Ya"
                                                                   data-confirm-yes="window.location.href = '{{ url(route('kas-musholla.home.delete',[(\Vinkla\Hashids\Facades\Hashids::encode($val->id))])) }}';">
                                                                    <i class="fas fa-times"></i>
                                                                </a>
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection


@push('scripts')
    <!-- JS Libraies -->
    <script src="{{ asset('library/cleave.js/dist/cleave.min.js') }}"></script>
    <script src="{{ asset('library/cleave.js/dist/addons/cleave-phone.us.js') }}"></script>
    <script src="{{ asset('library/bootstrap-daterangepicker/daterangepicker.js') }}"></script>
    <script src="{{ asset('library/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js') }}"></script>
    <script src="{{ asset('library/bootstrap-timepicker/js/bootstrap-timepicker.min.js') }}"></script>
    <script src="{{ asset('library/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js') }}"></script>
    <script src="{{ asset('library/select2/dist/js/select2.full.min.js') }}"></script>
    <script src="{{ asset('library/selectric/public/jquery.selectric.min.js') }}"></script>
    <script src="https://cdn.datatables.net/2.0.8/js/dataTables.js"></script>
    <script src="https://cdn.datatables.net/buttons/3.0.2/js/dataTables.buttons.js"></script>
    <script src="https://cdn.datatables.net/buttons/3.0.2/js/buttons.dataTables.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/3.0.2/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/3.0.2/js/buttons.print.min.js"></script>

    <!-- JS Libraies -->

    <!-- Page Specific JS File -->
    <script src="{{ asset('js/page/forms-advanced-forms.js') }}"></script>
    <script src="{{ asset('js/page/modules-datatables.js') }}"></script>

@endpush