@extends('includes.main')

@section('main-container')
    {{-- <div class="card">
        <div class="card-body"> --}}
    <div class="row">
        <div class="col-12">
            <h1>Transections ( {{ $customer->name }} )</h1>
            <div class="separator mb-5"></div>
        </div>
    </div>
    <div class="row mb-4">
        <div class="col-lg-12 col-md-12 mb-4">
            {{-- {!! QrCode::size(250)->generate('HDTuto.com'); !!} --}}
            <div class="row icon-cards-row mb-4">
                <div class="col-md-4 col-lg-4 col-sm-4 col-6 mb-4">
                    <a href="#" class="card">
                        <div class="card-body text-center">
                            <img src="https://icons.iconarchive.com/icons/iconsmind/outline/128/Financial-icon.png"
                                width="128" height="128">

                            <p class="card-text font-weight-semibold mb-0">Total Credit</p>
                            <p class="lead text-center">{{ $customerTransections['totalDebit'] }}</p>
                        </div>
                    </a>
                </div>

                <div class="col-md-4 col-lg-4 col-sm-4 col-6 mb-4">
                    <a href="#" class="card">
                        <div class="card-body text-center">
                            <img src="https://icons.iconarchive.com/icons/iconsmind/outline/128/Money-2-icon.png"
                                width="128" height="128">

                            <p class="card-text font-weight-semibold mb-0">Total Debit</p>
                            <p class="lead text-center">{{ $customerTransections['totalCredit'] }}</p>
                        </div>
                    </a>
                </div>

                <div class="col-md-4 col-lg-4 col-sm-4 col-6 mb-4">
                    <a href="#" class="card">
                        <div class="card-body text-center">
                            <img src="https://icons.iconarchive.com/icons/iconsmind/outline/128/Coins-icon.png"
                                width="128" height="128">
                            <p class="card-text font-weight-semibold mb-0">Total Remain</p>
                            <p class="lead text-center">{{ $customerTransections['totalRemain'] }}</p>
                        </div>
                    </a>
                </div>
            </div>
            <div class="card">
                @if (session()->has('type'))
                    <div class="alert alert-{{ session()->get('type') }}" role="alert">
                        <p>{{ session()->get('message') }}</p>
                    </div>
                @endif
                @if ($errors->any())
                    <div class="alert alert-danger" role="alert">
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
                <div class="card-body">
                    <h5 class="card-title float-left">Transections ( {{ $customer->name }} )</h5>
                    <button class="btn btn-success default mb-1 float-right" id="btn-add">Transection</button>
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Debit</th>
                                <th>Credit</th>
                                <th>Remain</th>
                                <th>Total Remain</th>
                                <th>Detail</th>
                                <th scope="col">Action</th>
                            </tr>
                        </thead>
                        <tbody>

                            @forelse ($customerTransections['reverseTransectionArray'] as $transection)
                                <tr class="item-row-{{ $transection->id }}">
                                    <td>{{ $transection->debit }}</td>
                                    <th>{{ $transection->credit }}</th>
                                    <td>{{ $transection->debit - $transection->credit }}</td>
                                    <td>{{ $transection->total_remain }}</td>
                                    <td>{{ $transection->detail }}</td>
                                    <td>
                                        @if (!$transection->invoice_id)
                                            <div class="btn-group" role="group" aria-label="Basic example">
                                                {!! btnDelete('customer-transection.destroy', 'customer_transections', $transection->id) !!}
                                                {!! btnEdit('customer-transection.edit', 'customer-transection.update', $transection->id) !!}
                                            </div>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4" align="center">
                                        No record found.
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    </div>

    {{-- Modal --}}
    <div class="modal fade modal-right" id="transection-modal" role="dialog" aria-labelledby="transection-modal"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modal-title">Transections</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body">
                    <form method="POST" id="frm-transection" action="{{ route('customer-transection.store') }}">
                        <input type="hidden" id="route-store" value="{{ route('customer-transection.store') }}">
                        <input type="hidden" name="customer_id" value="{{ $customerId }}">
                        <input type="hidden" name="_method" id="frm-method" value="">
                        @csrf
                        <x-form-input label="Credit" type="text" name="credit" placeholder="Credit" id="credit"
                        value="" />
   
                       <x-form-input label="Debit" type="text" name="debit" value="" 
                       placeholder="Debit" id="debit" />
   
                       <x-form-input label="Date" type="date" name="date" placeholder="Date" 
                       value="" id="date" />
                      
                       <x-form-input label="Detail" type="text" name="detail" 
                       value="" placeholder="Detail" id="detail" />
                        <div class="modal-footer">
                            <button type="button" class="btn btn-outline-primary" data-dismiss="modal">Cancel</button>
                            <button type="submit" id="btn-submit" class="btn btn-primary">Submit</button>
                        </div>
                </div>
                </form>
            </div>
        </div>
    </div>
@endsection