@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">
                    <div>
                        <h4 class="card-title"><a href="{{ url('payment_transfers') }}">Money Transfers</a></h4>
                    </div>
                    {{-- <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" data-bs-toggle="modal" data-bs-target="#new-record" id="new-money-transfer">New Money 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>ID</th>
                                    <th>Status</th>
                                    <th style="min-width:120px;">Type</th>
                                    <th style="min-width:200px;">Title</th>
                                    <th style="min-width:140px;">Received</th>
                                    <th style="min-width:140px;">To pay</th>
                                    <th style="min-width:160px;">Actually paid</th>
                                    <th style="min-width: 150px;">Date</th>
                                    <th style="min-width: 150px;"></th>
                                </tr>
                            </tr>
                        </thead>
                        <tbody>
                        @if($fields->count())
                            @foreach($fields as $key=>$field)
                                <tr>
                                    <td width="10">
                                        {{ ++$key }}
                                    </td>
                                    <td>
                                        <a href="#" data-bs-toggle="modal" data-bs-target="#showDetail-{{ $field->id }}">
                                            MT{{ $field->id }}
                                        </a>
                                        
                                    </td>
                                    <td>
                                        @if($field->status === 'Open')
                                            <span class="badge rounded-pill badge-light-warning me-1">{{ $field->status }}</span>
                                        @else
                                            <span class="badge rounded-pill badge-light-success me-1">{{ $field->status }}</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if(auth()->user()->branch->id === $field->transfer_to_branch_id)
                                            Pay out
                                        @else
                                            Pay in
                                        @endif
                                    </td>
                                    <td>
                                        <a data-bs-toggle="modal" data-bs-target="#showDetail-{{ $field->id }}">
                                            <span class="fw-bolder">{{ $field->transmitter_name }}</span> for <span class="fw-bolder">{{ $field->recipient_name }}</span>
                                        </a>
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center text-primary fw-bold">    
                                                {{ $field->branchFrom->currency . number_format($field->transmitted_amount, 0) }}
                                        </div>
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center text-primary fw-bold">    
                                                {{ $field->branchTo->currency . number_format($field->amount_to_be_paid, 0) }}
                                        </div>
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center text-primary fw-bold">    
                                            @if($field->amount_paid)
                                                {{ auth()->user()->branch->currency . number_format($field->amount_paid, 0) }}
                                            @else
                                                -
                                            @endif
                                        </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-dark btn-sm round" href="#" data-bs-toggle="modal" data-bs-target="#fulFillTransfer" onclick="fulfillModal({{ $field->id }})" title="Fulfill">
                                                <i data-feather='check' class=""></i>
                                                <span>Fulfill</span>
                                            </a>
                                        @endif
                                        {{-- <a class="btn btn-outline-secondary round btn-sm" href="#" data-bs-toggle="modal" data-bs-target="#showDetail-{{ $field->id }}" title="Details">
                                            <i data-feather='align-justify' class=""></i>
                                            <span>Details</span>
                                        </a> --}}
                                        {{-- <div class="dropdown">
                                            <button type="button" class="btn btn-sm dropdown-toggle hide-arrow py-0" data-bs-toggle="dropdown">
                                                <i data-feather="more-vertical"></i>
                                            </button>
                                            <div class="dropdown-menu dropdown-menu-end">
                                                <a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#showDetail-{{ $field->id }}">
                                                    <i data-feather='align-justify' class="me-50"></i>
                                                    <span>Details</span>
                                                </a>
                                                @if($field->status === 'Open' && $field->sender_user_id !== auth()->user()->id )
                                                    <a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#fulFillTransfer-{{ $field->id }}">
                                                        <i data-feather='check' class="me-50"></i>
                                                        <span>Fulfill Transfer</span>
                                                    </a>
                                                @endif
                                                <form action="{{ route('delete_payment_transfer', $field) }}" method="post" class="m-0 p-0 float-left ml-1">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="dropdown-item" style="width:100%;"  onclick="return confirm('Are you sure to delete?')">
                                                        <i data-feather="trash" class="me-50"></i>
                                                    <span>Delete</span>
                                                    </button>
                                                </form>
                                            </div>
                                        </div> --}}
                                    </td>
                                </tr>
                                          
                                <div class="modal fade" id="showDetail-{{ $field->id }}" tabindex="-1" aria-labelledby="shareProjectTitle" aria-hidden="true">
                                    <div class="modal-dialog modal-dialog-centered ">
                                        <div class="modal-content">
                                            <div class="modal-header bg-transparent">
                                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                            </div>
                                            <div class="modal-body px-sm-3 mx-30 pb-4 " >
                                                <h4 class="text-center mb-1" id="shareProjectTitle">Money Transfer MT{{ $field->id }}</h1>
                                                <hr>
                                                @include('partial.payment_tranfer_details')
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @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>



    <div class="modal fade" id="fulFillTransfer" tabindex="-1" aria-labelledby="shareProjectTitle" aria-hidden="true" >
        <div class="modal-dialog modal-dialog-centered ">
            <div class="modal-content">
                <div class="modal-header bg-transparent">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body px-sm-5 mx-50 pb-4">
                    <h4 class="text-center mb-1" id="shareProjectTitle">Fulfill Transfer MT<span id="fulfill-id-text"></span> </h1>
                    <hr>
                    <ul class="list-group list-group-flush">
                        <form onsubmit="return fulfill_transfer()" method="post" action="{{ route('fulfill_payment_transfer') }}" enctype="multipart/form-data" style="z-index: 10000">
                            @CSRF
                            <input type="hidden" name="id" id="payment_transfer_id">
                                <div class="action-tags">
                                    <div class="mb-1 amount-currency-merge">
                                        <label class="form-label" for="amount_deposited_fulfill">Amount Deposited</label>
                                        <input type="text" class="form-control" id="amount_deposited_fulfill" aria-label="Amount (to the nearest currency)" disabled />
                                        <span class="pt-currency-sign" id="amount_deposited_currency_fulfill"></span>
                                    </div>
                                    <div class="mb-1 amount-currency-merge">
                                        <label class="form-label" for="amount_to_be_paid_fulfill">Amount to be paid</label>
                                        <input type="text" class="form-control" id="amount_to_be_paid_fulfill" aria-label="Amount (to the nearest currency)" disabled />
                                        <span class="pt-currency-sign">{{ auth()->user()->branch->currency }}</span>
                                    </div>

                                    <div class="mb-1 amount-currency-merge">
                                        <label class="form-label" for="amount_paid">Amount Paid<span class="text-danger fs-6">*</span></label>
                                        <input type="text" class="form-control numeral-mask-3" id="amount_paid" name="amount_paid" placeholder="5,000" aria-label="Amount (to the nearest currency)" />
                                        <span class="pt-currency-sign">{{ auth()->user()->branch->currency }}</span>
                                        <span id="amount-paid-error-text" class="text-danger"></span>
                                    </div>
                                    <div class="mb-1">
                                        <label class="form-label" for="reciever_comments">Comments</label>
                                        <textarea class="form-control" id="reciever_comments" name="reciever_comments" rows="3" placeholder="Comments"></textarea>
                                    </div>
                                    

                                    <div class="mb-1">
                                        <ul class="list-group list-group-numbered" id="receipt_fulfill_images">
                                        </ul>
                                    </div>
        
                                    <div class="mb-1">
                                        <label for="receipts_fulfill" class="form-label">Document Receipts</label>
                                        <input class="form-control" type="file" id="receipts_fulfill" name="receipts[]" accept="image/*" multiple />
                                    </div>
        
                                    <div class="my-1">
                                        <button type="submit" class="btn btn-primary add-todo-item me-1">Submit</button>
                                        <button type="button" class="btn btn-outline-secondary add-todo-item" data-bs-dismiss="modal">
                                            Cancel
                                        </button>
                                    </div>
                                </div>                        
                        </form>
                        
                    </ul>
                </div>
            </div>
        </div>
    </div>


        
     <div class="modal modal-slide-in sidebar-todo-modal fade" id="new-record">
        <div class="modal-dialog sidebar-lg">
            <div class="modal-content p-0">
                <form class="add-record" method="post" action="{{ route('store_payment_transfer') }}" enctype="multipart/form-data">
                    @CSRF
                    <div class="modal-header align-items-center mb-1">
                        <h5 class="modal-title">New Money Transfer</h5>
                        <div transmit_amount="todo-item-action d-flex align-items-center justify-content-between ms-auto">   
                            <i data-feather="x" class="cursor-pointer" data-bs-dismiss="modal" stroke-width="3"></i>
                        </div>
                    </div>
                    <div class="modal-body flex-grow-1 pb-sm-0 pb-3">
                        <div class="action-tags">
                            <div class="mb-1">
                                <label class="form-label" for="to_branch">Receiving Branch<span class="text-danger fs-6">*</span></label>
                                <select class="form-select" id="to_branch" name="transfer_to_branch_id" >
                                    {{-- <option value="">Select</option> --}}
                                    @foreach(App\Models\Branch::all() as $b)
                                        <option value="{{ $b->id }}" @if($b->id !== auth()->user()->branch->id) selected @else disabled @endif>
                                                                                    </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="mb-1 amount-currency-merge">
                                <label class="form-label" for="transmitted_amount">You are sending<span class="text-danger fs-6">*</span></label>
                                <input type="text" class="form-control numeral-mask" id="transmitted_amount" name="transmitted_amount" placeholder="5000" aria-label="Amount (to the nearest dollar)" />
                                <span class="pt-currency-sign">{{ auth()->user()->branch->currency }}</span>
                            </div>
                            <div class="mb-1 amount-currency-merge">
                                <label class="form-label" for="amount_to_be_paid">Amount to be Paid<span class="text-danger fs-6">*</span></label>
                                <input type="text" class="form-control numeral-mask2" id="amount_to_be_paid" name="amount_to_be_paid" placeholder="4500" aria-label="Amount (to the nearest euro)" />
                                <span class="pt-currency-sign" id="amount_to_be_paid_currency"></span>
                            </div>
                            <h5>Sender Details</h5>
                            <hr>
                            <div class="mb-1">
                                <label class="form-label" for="transmitter_name">Full Name<span class="text-danger fs-6">*</span></label>
                                <input type="text" class="form-control" id="transmitter_name" name="transmitter_name" placeholder="Full Name" />
                            </div>
                            <div class="mb-1">
                                <label class="form-label" for="transmitter_address">Address</label>
                                <input type="text" class="form-control" id="transmitter_address" name="transmitter_address" placeholder="Address" />
                            </div>
                            <div class="mb-1">
                                <label class="form-label" for="transmitter_phone">Phone</label>
                                <input type="text" class="form-control" id="transmitter_phone" name="transmitter_phone" placeholder="Phone" />
                            </div>
                            <h5>Recipient Details</h5>
                            <hr>
                            <div class="mb-1">
                                <label class="form-label" for="recipient_name">Full Name<span class="text-danger fs-6">*</span></label>
                                <input type="text" class="form-control" id="recipient_name" name="recipient_name" placeholder="Full Name" />
                            </div>
                            <div class="mb-1">
                                <label class="form-label" for="recipient_address">Address</label>
                                <input type="text" class="form-control" id="recipient_address" name="recipient_address" placeholder="Address" />
                            </div>
                            <div class="mb-1">
                                <label class="form-label" for="recipient_phone">Phone</label>
                                <input type="text" class="form-control" id="recipient_phone" name="recipient_phone" placeholder="Phone" />
                            </div>
                            <div class="mb-1">
                                <label class="form-label" for="bank_account_details">Bank Account Details<span class="text-danger fs-6">*</span></label>
                                <textarea class="form-control " id="bank_account_details" name="bank_account_details" rows="3" placeholder="Bank Details"></textarea>
                            </div>
                            <h5>Other Details</h5>
                            <hr>
                            <div class="mb-1">
                                <label class="form-label" for="sender_comments">Comments</label>
                                <textarea class="form-control" id="sender_comments" name="sender_comments" rows="3" placeholder="Comments"></textarea>
                            </div>
                            <div class="mb-1">
                                <ul class="list-group list-group-numbered" id="receipt_store_images">
                                </ul>
                            </div>
                            <div class="mb-1">
                                <label for="receipts_store" class="form-label">Document Receipts</label>
                                <input class="form-control" type="file" name="receipts[]" id="receipts_store" accept="image/*" multiple/>
                                
                            </div>

                            {{-- <div class="card">
                                <div class="card-header">
                                    <h4 class="card-title">Multiple Files Upload</h4>
                                </div>
                                <div class="card-body">
                                    <form action="#" class="dropzone dropzone-area" id="dpz-single-file">
                                        <div class="dz-message" style="height: 100px; width: 200px;">Drop files here or click to upload.</div>
                                    </form>
                                </div>
                            </div> --}}

                            <div class="my-1">
                                <button type="submit" class="btn btn-primary add-todo-item">Send</button>
                                <button type="button" class="btn btn-outline-secondary add-todo-item" data-bs-dismiss="modal">
                                    Cancel
                                </button>
                            </div>
                        </div>                        
                    </div>
                </form>
            </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')

    <!-- BEGIN: Page Vendor JS-->
    <script src="theme/app-assets/vendors/js/forms/cleave/cleave.min.js"></script>
    <script src="theme/app-assets/vendors/js/forms/cleave/addons/cleave-phone.us.js"></script>
    <!-- END: Page Vendor JS-->
    
    <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 addRecord = $('.add-record');
        if (addRecord.length) {
            addRecord.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 amountToBePaid = $('#amount_to_be_paid_val').text();
        // alert(amountToBePaid)
        // var fulfillTransfer = $('.fulfill_transfer');
        // if (fulfillTransfer.length) {
            
        //     fulfillTransfer.validate({    
        //         rules: {
        //             'amount_paid':{
        //                 required: true,
        //                 max:amountToBePaid
        //             },
        //         }
        //     });
        // }


        var numeralMask = $('.numeral-mask');
        var numeralMask2 = $('.numeral-mask2');
        var numeralMask3 = $('.numeral-mask-3');
          //Numeral
        if (numeralMask.length) {
            new Cleave(numeralMask, {
            numeral: true,
            numeralThousandsGroupStyle: 'thousand'
            });
        }
        if (numeralMask2.length) {
            new Cleave(numeralMask2, {
            numeral: true,
            numeralThousandsGroupStyle: 'thousand'
            });
        }

        if (numeralMask3.length) {
            new Cleave(numeralMask3, {
            numeral: true,
            numeralThousandsGroupStyle: 'thousand'
            });
        }


        });

    </script>
    <script>
        toastr.options = {
        debug: false,
        positionClass: "toast-bottom-right",
        fadeIn: 300,
        fadeOut: 1000,
        timeOut: 5000,
        extendedTimeOut: 1000,
        closeButton: true,
        progressBar: true,
        };
                
    </script>

    <script>
        const baseUrl = document.location.origin
        const toBranchId = document.getElementById('to_branch').value
        const toBranchCurrencyTxt = document.getElementById('amount_to_be_paid_currency')
        document.getElementById('new-money-transfer').addEventListener('click', function(){
            fetch(`${baseUrl}/api/get_branch_currency_by_id/${toBranchId}`)
                .then(res => res.json())
                .then(data => {
                    toBranchCurrencyTxt.textContent = data.currency;
                })
        })

        // File upload
        // document.getElementById('reciepts_add').addEventListener('change', function (){
        //     console.log(this.value);
        // })
        let amountToBePaidForCurrentRow
        function fulfillModal(id){
            document.getElementById('fulfill-id-text').textContent = id
            document.getElementById('payment_transfer_id').value = id
            
            fetch(`${baseUrl}/api/get_payment_transfer_by_id/${id}`)
                .then(res => res.json())
                .then(data => {
                    document.getElementById('amount_deposited_fulfill').value = data.transmitted_amount
                    document.getElementById('amount_to_be_paid_fulfill').value = data.amount_to_be_paid
                    document.getElementById('amount_deposited_currency_fulfill').textContent = data.branch_from.currency
                    amountToBePaidForCurrentRow = data.amount_to_be_paid
                })
        }

        let storeImages = []        
        document.getElementById('receipts_store').addEventListener('change', function(){
            // const fileInput = document.getElementById('receipts_store')
            const fileObj = this.files
            storeImages.push(...fileObj)            
            // Now let's create a DataTransfer to get a FileList
            const dataTransfer = new DataTransfer();            
            const imagesHtml = storeImages.map(function(image){
                dataTransfer.items.add(image)
                return `<li class="list-group-item">${image.name}</li>`
            }).join("")
            
            this.files = dataTransfer.files;
            document.getElementById('receipt_store_images').innerHTML = imagesHtml; 
        }) 



        let fulFillImages = []        
        document.getElementById('receipts_fulfill').addEventListener('change', function(){
            
            const fileObj = this.files
            fulFillImages.push(...fileObj)            
            // Now let's create a DataTransfer to get a FileList
            const dataTransfer = new DataTransfer();
            const imagesHtml = fulFillImages.map(function(image){
                dataTransfer.items.add(image)
                return `<li class="list-group-item">${image.name}</li>`
            }).join("")
            this.files = dataTransfer.files;
            document.getElementById('receipt_fulfill_images').innerHTML = imagesHtml; 
        }) 

        function fulfill_transfer(){
     
            const amountPaid = document.getElementById('amount_paid')
            const amountPaidErrorText = document.getElementById('amount-paid-error-text')
            
            if(amountPaid.value == ""){
                amountPaid.style.border = "#ea5455 1px solid"
                amountPaidErrorText.textContent = "The field is required."
                return false
            }

            if(typeof amountPaid.value === 'string'){
                amount = amountPaid.value.replaceAll(',', '')
                amount = parseFloat(amount)
            }
            
            if(typeof amountToBePaidForCurrentRow === 'string'){    
                amountToBePaidForCurrentRow = amountToBePaidForCurrentRow.replaceAll(',', '')
                amountToBePaidForCurrentRow = parseFloat(amountToBePaidForCurrentRow)
            }
            
            if(amount > amountToBePaidForCurrentRow){
                amountPaidErrorText.textContent = `Please enter a value less than or equal to ${amountToBePaidForCurrentRow}`
                amountPaid.style.border = "#ea5455 1px solid"
                return false
            }

            return true
        }   


    </script>
    @if (session()->has('message'))
        @if(session('message_class')=='success')
            <script>
                toastr.success('', "