@extends('layouts.app')

@section('main')
  <!-- Basic Tables start -->
  @if($errors->any())
        <div class="row">
            <div class="col-12">
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <div class="alert-body">
                        <p><strong>Oops. Something went wrong.</strong></p>
                        <ul>
                            @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>    
            </div>
        </div>
    @endif
    <div class="row" id="basic-table">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex align-content-between">
                    
                        <h4 class="card-title mb-1"><a href="{{ url('transactions') }}">Transactions</a></h4>
                        <span class="fs-5 text-danger fw-bolder">Branch Balance: {{ auth()->user()->branch->currency . number_format(auth()->user()->branch->total_balance) }}</span>

                    {{-- <div class="col-md-3">
                        <form action="{{ route('find_users') }}" method="get"> 
                            @csrf
                            <div class="input-group">
                                <input type="text" name="txtsearch" class="form-control col-9" placeholder="Search here" >
                                <div class="input-group-append">
                                    <button class="btn btn-secondary waves-effect waves-float waves-light" type="submit"><i data-feather="search"></i></button>
                                </div>
                            </div>
                        </form>
                    </div>
                     --}}

                    {{-- <div >
                        <button type="button" class="btn btn-primary my-1" data-bs-toggle="modal" data-bs-target="#new-record">New Payment Transfer</button>
                    </div> --}}

                    
                </div>
                {{-- <div class="card-body">
                    <p class="card-text">
                        
                    </p>
                </div> --}}
                <div class="table-responsive" style="min-height: 45vh !important;">
                    <table class="table">
                        <thead>
                            <tr>
                                <tr>
                                    <th>#</th>
                                    <th style="min-width:130px;">Type</th>
                                    <th style="min-width:130px;">Transaction ID</th>
                                    <th style="min-width:200px;">Title</th>
                                    <th>Amount</th>
                                    <th>Balance</th>
                                    <th style="min-width: 150px;">Created</th>
                                    {{-- <th>Actions</th> --}}
                                </tr>
                            </tr>
                        </thead>
                        <tbody>
                        @if($fields->count())
                            @foreach($fields as $key=>$field)
                                <tr>
                                    <td width="10">
                                        {{ ++$key }}
                                    </td>
                                    <td>
                                        {{ $field->type }}
                                    </td>
                                    <td>
                                        {{ $field->reference_id }}
                                    </td>
                                    <td>
                                        <div class="fw-bolder">{{ $field->title }}</div>
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center text-primary fw-bold">    
                                            {{ auth()->user()->branch->currency . number_format($field->amount, 0) }}
                                        </div>
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center text-danger fw-bold">    
                                            {{ auth()->user()->branch->currency . number_format($field->balance, 0) }}
                                        </div>
                                    </td>
                                    {{-- <td>
                                        <div class="fw-bolder">{{ $field-> }}</div>
                                    </td> --}}
                                    <td>
                                        {{ date('M d,  Y', strtotime($field->created_at)) }}
                                    </td>
                                    {{-- <td>
                                        @if($field->status === 'Open' && $field->sender_user_id !== auth()->user()->id )
                                            <a class="btn btn-outline-info btn-mini" href="#" data-bs-toggle="modal" data-bs-target="#fulFillTransfer-{{ $field->id }}">
                                                <i data-feather='check' class=""></i>
                                                <span>Fulfill Transfer</span>
                                            </a>
                                        @endif
                                        <a class="btn btn-outline-primary btn-mini" href="#" data-bs-toggle="modal" data-bs-target="#showDetail-{{ $field->id }}">
                                            <span>Details</span>
                                        </a>
                                    </td> --}}
                                </tr>
                                          
                                
                            
    

                            @endforeach
                        @else
                            <tr>
                                <td colspan="4">No records found.</td>
                            </tr>
                        @endif

                        </tbody>
                    </table>
                    <div class="mt-2 pagination">
                        {{ $fields->links("") }}
                    </div>
                </div>
            </div>
        </div>
    </div>



    
  
    

   
@endsection
@push('styles')
    <link rel="stylesheet" type="text/css" href="theme/app-assets/vendors/css/forms/select/select2.min.css">
    <link rel="stylesheet" type="text/css" href="theme/app-assets/css/plugins/forms/form-validation.css">
    <link rel="stylesheet" type="text/css" href="theme/app-assets/vendors/css/pickers/flatpickr/flatpickr.min.css">
    <link rel="stylesheet" type="text/css" href="theme/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
    <link rel="stylesheet" type="text/css" href="theme/app-assets/css/plugins/forms/pickers/form-pickadate.css">
    
@endpush

@push('scripts')
    <script src="theme/app-assets/vendors/js/forms/select/select2.full.min.js"></script>
    <script src="theme/app-assets/vendors/js/forms/validation/jquery.validate.min.js"></script>
    <script src="theme/app-assets/js/scripts/forms/form-validation.js"></script>
    <script src="theme/app-assets/vendors/js/pickers/flatpickr/flatpickr.min.js"></script>
    <script src="theme/app-assets/js/scripts/forms/pickers/form-pickers.js"></script>
    

    <script>
        $(function () {
        'use strict';
        var addCarBrand = $('.add-record');
        if (addCarBrand.length) {
            addCarBrand.validate({
            rules: {
                'transmitted_amount': {
                    required: true,
                    number: true,
                },
                'transfer_from_branch_id': {
                    required: true,
                },
                'amount_to_be_paid': {
                    required: true,
                    number: true,
                },
                'transfer_to_branch_id': {
                    required: true,
                },
                'transmitter_name': {
                    required: true,
                },
                // // 'transmitter_address': {
                // //     required: true,
                // // },
                // 'transmitter_phone': {
                //     required: true,
                // },

                'recipient_name': {
                    required: true,
                },
                // // 'transmitter_address': {
                // //     required: true,
                // // },
                // 'transmitter_phone': {
                //     required: true,
                // },
                'bank_account_details': {
                    required: true,
                },

            }
            });
        }

        var editCarBrand = $('.edit-car-type');
        if (editCarBrand.length) {
            editCarBrand.validate({
            
                rules: {
                'UserRoleID': {
                    required: true,
                },
                'UserFirstName': {
                    required: true,
                },
                'UserLastName': {
                    required: true,
                    maxlength:10,
                },
                'UserEmail': {
                    required: true,
                    email:true,
                },
                'UserIDCardNumber': {
                    required: true,
                },
                'UserPhone': {
                    required: true,
                },
                'UserPassword': {
                    required: true,
                },
            }
            });
        }
        });

    </script>
    <script>
        toastr.options = {
        debug: false,
        positionClass: "toast-bottom-right",
        fadeIn: 300,
        fadeOut: 1000,
        timeOut: 5000,
        extendedTimeOut: 1000,
        closeButton: true,
        progressBar: true,
        };
                
    </script>
    @if (session()->has('message'))
        @if(session('message_class')=='success')
            <script>
                toastr.success('', "