@extends('includes.main')

@section('main-container')
    <div class="card">
        <div class="card-body">
            
            <h4 class="card-title">Customers</h4>
            @if (session()->has('type'))
                <div class=" mt-5 alert alert-{{ session()->get('type') }}" role="alert">
                    <p>{{ session()->get('message') }}</p>
                </div>
            @endif
            <div class="col-lg-12 col-xl-12">
                <div class="row">
                   <div class="col-md-12 mb-4">
                      <div class="card mb-4">
                         <div class="card-body">
                            <h5 class="mb-4">Transection</h5>
                            <form method="POST"  action="{{ route('transaction.show') }}">
                               @csrf
                               <div class="form-row">
                                  <div class="form-group col-md-4">
                                     <label>Transection Type</label> 
                                     <select name="transection_type" id="transection-type" class="form-control">
                                        <option value="">Select Type</option>
                                        <option value="customerTransection">Customer Transection</option>
                                        <option value="companyTransection">Company Transection</option>
                                     </select>
                                  </div>
    
                                  <div class="form-group col-md-4" style="display: none;" id="row-company">
                                     <label>Companies</label> 
                                     <select name="company_id" id="select-company" class="form-control">
                                        <option value="">Select Company</option>
                                        @foreach ($companies as $company)
                                           <option value="{{ $company->id }}">{{ $company->company_name }}</option>
                                        @endforeach
                                     </select>
                                  </div>
    
                                  <div class="form-group col-md-4" style="display: none;" id="row-customer">
                                     <label>Customers</label> 
                                     <select name="customer_id" id="select-customer" class="form-control">
                                        <option value="">Select Customer</option>
                                        @foreach ($customers as $customer)
                                           <option value="{{ $customer->id }}">{{ $customer->name }}</option>
                                        @endforeach
                                     </select>
                                  </div>
                               </div>
                               <button type="submit" id="btn-transaction" class="btn btn-primary d-block mt-3" disabled>Show Transections</button>
                            </form>
                         </div>
                      </div>
                   </div>
                </div>
             </div>
          </div>
    </div>

          @if (isset($transectionsData['reverseTransectionArray']))
             <div class="row mb-4 mt-3">
                <div class="col-lg-12 col-md-12 mb-4">
                   <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">
                               {{-- <i class="iconsminds-financial"></i> --}}
                               <p class="card-text font-weight-semibold mb-0">Total Credit</p>
                               <p class="lead text-center">{{ $transectionsData['totalDebit'] ?? 0 }}</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">
                               {{-- <i class="far fa-money-bill-alt"></i> --}}
                               <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">{{ $transectionsData['totalCredit'] ?? 0 }}</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">
                               {{-- <i class="iconsminds-coins"></i> --}}
                               <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">{{ $transectionsData['totalRemain'] ?? 0 }}</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 ( {{ $name ?? '' }} )</h5>
                         <button class="btn btn-success default mb-1 float-right" data-toggle="modal" data-backdrop="static" data-target="#transection-modal">Transection</button>
                         <table class="table">
                            <thead>
                               <tr>
                                  <th>Debit</th>
                                  <th>Credit</th>
                                  <th>Remain</th>
                                  <th>Total Remain</th>
                                  <th>Date</th>
                                  <th>Detail</th>
                                  <th scope="col">Action</th>
                               </tr>
                            </thead>
                            <tbody>
                            <input type="hidden" id="x-editable-supply-route" value="{{ route('x.editable') }}">
                            @forelse ($transectionsData['reverseTransectionArray'] ?? [] as $transection)
                               <tr class="item-row-{{$transection->id}}">
                                  <td>
                                     <a 
                                        href="#"  
                                        data-type="text" 
                                        data-pk="{{ $transection->id }}" 
                                        data-table="{{ $table }}"
                                        data-column="debit"
                                        class="editable editable-click x-edit-input" 
                                        data-abc="true" 
                                        style="">{{ $transection->debit }}
                                     </a>
                                  </td>
                                  <th>
                                     <a 
                                        href="#"  
                                        data-type="text" 
                                        data-pk="{{ $transection->id }}" 
                                        data-table="{{ $table }}"
                                        data-column="credit"
                                        class="editable editable-click x-edit-input" 
                                        data-abc="true" 
                                        style="">{{ $transection->credit }}
                                     </a>
                                  </th>
                                  <td>{{ $transection->debit - $transection->credit }}</td>
                                  <td>{{ $transection->total_remain }}</td>
                                  <td>{{ $transection->date }}</td>
                                  <td>
                                     <a 
                                        href="#"  
                                        data-type="text" 
                                        data-pk="{{ $transection->id }}" 
                                        data-table="{{ $table }}"
                                        data-column="detail"
                                        class="editable editable-click x-edit-input" 
                                        data-abc="true" 
                                        style="">{{ $transection->detail }}
                                     </a>
                                  </td>
                                  <td>
                                     @if (!$transection->invoice_id)
                                     {!! btnDelete($deleteRoute, $table, $transection->id) !!}
                                           {{-- <x-delete-btn itemId="{{$transection->id}}" url="supplyTransection/" /> --}}
                                     @endif
                                  </td>
                               </tr>
                            @empty
                               <tr>
                                  <td colspan="4" align="center">
                                     No record found.
                                  </td>
                               </tr>
                            @endforelse
                            </tbody>
                         </table>
                      </div>
                   </div>
                </div>
             </div>
            </div>
         </div>
      </div>
      @else
      <div class="card mt-3">
        <div class="card-body">
          <h3 class="text-center">No data found. </h3>
        </div>
      </div>
      @endif
       {{-- Modal --}}
        <div class="modal fade modal-right" id="transection-modal" tabindex="-1" 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">Attendant</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-pump" action="{{ $transectionRoute ?? '' }}">
                         <input type="hidden" name="primaryKey" value="{{ $primaryKey ?? '' }}">
                         <input type="hidden" name="table" value="{{ $table ?? '' }}">
                         @csrf
                         <div class="form-group">
                            <label for="credit">Credit</label> 
                            <input type="text" name="credit" id="credit" class="form-control" placeholder="">
                         </div>
                         <div class="form-group">
                            <label for="debit">Debit</label> 
                            <input type="text" name="debit" id="debit" class="form-control" placeholder="">
                         </div>
                         <div class="form-group">
                            <label>Date</label> 
                            <input class="form-control datepicker" type="date" autocomplete="off" name="date" id="date" placeholder="Date">
                         </div>
                         <div class="form-group">
                            <label for="address">Detail</label> 
                            <textarea name="address" id="address" class="form-control"></textarea>
                         </div>
                   </div>
                      <div class="modal-footer">
                         <button type="button" class="btn btn-outline-primary" data-dismiss="modal">Cancel</button> 
                         <button type="submit" id="" class="btn btn-primary">Submit</button>
                      </div>
                   </div>
                </form>
            </div>
         </div>
    

@endsection