@extends('layouts.app')
@section('title', 'Agent')

@section('content')
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1 class="tw-text-xl md:tw-text-3xl tw-font-bold tw-text-black">Agent</h1>
    </section>

    <!-- Main content -->
    <section class="content">
        <!-- Button to open modal -->
        <div class="box-tools">
            <a class="tw-dw-btn tw-bg-gradient-to-r tw-from-indigo-600 tw-to-blue-500 tw-font-bold tw-text-white tw-border-none tw-rounded-full btn-modal"
               style="margin-left:87%;"
               data-toggle="modal" 
               data-target="#fundiModal">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                     stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                     class="icon icon-tabler icons-tabler-outline icon-tabler-plus">
                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                    <path d="M12 5l0 14" />
                    <path d="M5 12l14 0" />
                </svg> Add Agent
            </a>
        </div>

        <!-- Table of Agent -->
        <div class="table-responsive card" style="background:white;border-radius:10px;margin-top:20px;margin-bottom:50%;padding:20px;">
            <table class="table mt-3 table-bordered table-striped">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Name</th>
                        <th>Location</th>
                        <th>Mobile</th>
                        <th  style="text-align:center;">National ID</th>
                        <th>Specialization</th>
                        <th style="text-align:center;">Total Sales</th>
                        <th style="text-align:center;">Total Commission</th>
                        <th style="text-align:center;">Withheld Tax</th>
                        <th style="text-align:center;">Net Payable Commission</th>
                        <th style="text-align:center;">Commission Paid</th>
                        <th style="text-align:center;">Commission <br> Not Paid</th>
                        <th style="text-align:center;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($fundis as $index => $fundi)
                        <tr>
                            <td>{{ $index + 1 }}</td>
                            <td>{{ $fundi->name }}</td>
                            <td>{{ $fundi->location }}</td>
                            <td>{{ $fundi->mobile }}</td>
                            <td>{{ $fundi->national_id }}</td>
                            <td>{{ $fundi->specialization}}</td>
                            <td>{{ number_format($fundi->total_sales, 2) }}</td>
		            <td>{{ number_format($fundi->total_commision, 2) }}</td>
		            <td>{{ number_format($fundi->withheld_tax, 2) }}</td>
		            <td>{{ number_format($fundi->net_payable_commission, 2) }}</td>
		            <td>{{ number_format($fundi->commision_paid, 2) }}</td>
		            <td>{{ number_format($fundi->commission_not_paid, 2) }}</td>
<td>
    <div class="custom-dropdown">
        <button class="dropbtn">Actions</button>
        <div class="dropdown-content">
            <a href="#" data-toggle="modal" data-target="#transactionModal" data-fundi-id="{{ $fundi->id }}">Show</a>
            <a href="{{ route('fundi.edit', $fundi->id) }}" style="color:blue;">Edit</a>
            <a href="#" class="delete-button" onclick="confirmDelete(event, '{{ route('fundi.destroy', $fundi->id) }}')" style="color:red;">Delete</a>
        </div>
    </div>
</td>

<style>
    .custom-dropdown {
        position: relative;
        display: inline-block;
    }

    .dropbtn {
        background-color: #4CAF50; /* Green */
        color: white;
        padding: 5px;
        font-size: 16px;
        border: none;
        cursor: pointer;
        border-radius:10%;
    }

    .custom-dropdown:hover .dropbtn {
        background-color: #3e8e41; /* Darker green */
    }

    .dropdown-content {
        display: none;
        position: absolute;
        background-color: white;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }

    .custom-dropdown:hover .dropdown-content {
        display: block;
    }

    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
    }

    .dropdown-content a:hover {
        background-color: #f1f1f1; /* Light grey */
    }

    .delete-button {
        color: red; /* Red color for delete button */
    }
</style>

<script>
    function confirmDelete(event, url) {
        event.preventDefault(); // Prevent the default link behavior
        const confirmation = confirm("Warning: Are you sure you want to delete this Agent? This action cannot be undone.");
        if (confirmation) {
            // If confirmed, create a form and submit it
            const form = document.createElement('form');
            form.action = url;
            form.method = 'POST';
            form.innerHTML = '@csrf @method("DELETE")'; // Include CSRF token and method
            document.body.appendChild(form);
            form.submit();
        }
    }
</script>
			
                        </tr>
                    @endforeach
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="6" class="text-right"><strong>Totals</strong></td>
                        <td><strong>{{ number_format($fundis->sum('total_sales'), 2) }}</strong></td>
                        <td><strong>{{ number_format($fundis->sum('total_commision'), 2) }}</strong></td>
                        <td><strong>{{ number_format($fundis->sum('withheld_tax'), 2) }}</strong></td>
                        <td><strong>{{ number_format($fundis->sum('net_payable_commission'), 2) }}</strong></td>
                        <td><strong>{{ number_format($fundis->sum('commision_paid'), 2) }}</strong></td>
                        <td><strong>{{ number_format($fundis->sum('commission_not_paid'), 2) }}</strong></td>
                        <td></td>
                    </tr>
                </tfoot>
            </table>
        </div>

        <!-- Modal for Transactions -->
        <div class="modal fade" id ="transactionModal" tabindex="-1" role="dialog" aria-labelledby="transactionModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="transactionModalLabel">Sales & Commissions for <span style="font-weight:bold;" id="fundiName"></span></h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <table class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th>Transaction Date</th>
                                    <th>Total Commission</th>
                                    <th>Commission</th>
                                    <th>Paid</th>
                                    <th>Not Paid</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody id="transactionBody">
                                <!-- Transactions will be populated here via JavaScript -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- Modal Form -->
        <div class="modal fade" id="fundiModal" tabindex="-1" role="dialog" aria-labelledby="fundiModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="fundiModalLabel">Add New Agent</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <form action="{{ route('fundi.store') }}" method="POST">
                        @csrf
                        <div class="modal-body">
                            <div class="form-group">
                                <label for="name">Name</label>
                                <input type="text" class="form-control" name="name" id="name" required>
                            </div>
                            <div class="form-group">
                                <label for="location">Location</label>
                                <input type="text" class="form-control" name="location" id="location" required>
                            </div>
                            <div class="form-group">
                                <label for="mobile">Mobile</label>
                                <input type="number" class="form-control" name="mobile" id="mobile" required>
                            </div>
                            <div class="form-group">
                                <label for="national_id">National ID</label>
                                <input type="number" class="form-control" name="national_id" id="national_id" required>
                            </div>
                             <div class="form-group">
                                <label for="national_id">Specialization</label>
                                <input type="text" class="form-control" name="specialization" id="specialization" required>
                            </div>
                            <div class="form-group">
                                <label for="national_id">KRA Pin</label>
                                <input type="text" class="form-control" name="kra_pin" id="kra_pin" style="text-transform: uppercase;" required>
                            </div>
                            <div class="form-group">
                                <label for="national_id">Withholding Tax</label>
                                <select name="withholding_tax" class="form-control" id="withholding_tax">
		                    <option value="">Please Select</option>
		                    @foreach($taxRates as $tax)
		                        <option value="{{ $tax->id }}" >{{ $tax->name }}</option>
		                    @endforeach
		                </select>
                            </div>
                            
                           {{-- <div class="form-group">
                                <label for="commision">Commission %:</label>
                                <input type="number" class="form-control" name="commision" step="0.01" required>
                            </div>--}}
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-primary">Save Agent</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Modal for Payment -->
        <div class="modal fade" id="paymentModal" tabindex="-1" role="dialog" aria-labelledby="paymentModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="paymentModalLabel">Process Payment</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <form id="paymentForm" method="POST">
                        @csrf
                        <div class="modal-body">
                            <div class="form-group">
                                <label for="transaction_date">Transaction Date</label>
                                <input type="text" class="form-control" id="transaction_date" name="transaction_date" readonly>
                            </div>
                            <div class="form-group">
                                <label for="sales_amount">Total Commission</label>
                                <input type="text" class="form-control" id="sales_amount" name="sales_amount" readonly>
                            </div>
                            <div class="form-group">
                                <label for="commission">Commission Payable</label>
                                <input type="text" class="form-control" id="total_payable_commission" name="commission" readonly>
                            </div>
                            <div class="form-group">
                                <label for="commission_not_paid">Commission Not Paid</label>
                                <input type="text" class="form-control" id="commission_not_paid" name="commission_not_paid" readonly>
                            </div>
                           {{-- <div class="form-group">
                                <label for="payment_method">Payment Method</label>
                                <select class="form-control" id="method" name="method" required>
                                    <option value="">Select Payment Method</option>
                                    <!-- Options will be populated dynamically -->
                                </select>
                            </div>--}}
    
				
		
		<div class="form-group">
			{!! Form::label("method_$row_index" , __('lang_v1.payment_method') . ':*') !!}
			<div class="input-group">
				<span class="input-group-addon">
					<i class="fas fa-money-bill-alt"></i>
				</span>
				@php
					$_payment_method = empty($payment_line['method']) && array_key_exists('cash', $payment_types) ? 'cash' : $payment_line['method'];
				@endphp
				{!! Form::select("payment[$row_index][method]", $payment_types, $_payment_method, ['class' => 'form-control col-md-12 payment_types_dropdown', 'required', 'id' => !$readonly ? "method_$row_index" : "method_advance_$row_index", 'style' => 'width:100%;', 'disabled' => $readonly]); !!}

				@if($readonly)
					{!! Form::hidden("payment[$row_index][method]", $payment_line['method'], ['class' => 'payment_types_dropdown', 'required', 'id' => "method_$row_index"]); !!}
				@endif
			</div>
		
                            
                            <div class="form-group">
                                <label for="payment_account">Payment Account</label>
                                <select class="form-control" id="payment_account" name="payment_account" >
                                    <option value="">Select Payment Account</option>
                                    <!-- Options will be populated dynamically -->
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="expense_category">Expense Category</label>
                                <select class="form-control" id="expense_category" name="expense_category" required>
                                    <option value="">Select Expense Category</option>
                                    <!-- Options will be populated dynamically -->
                                </select>
                            </div>
                           <div class="form-group">
		    <label for="amount_paid">Amount Being Paid</label>
		    <input type="number" class="form-control" id="amount_paid" name="amount_paid" step="0.01" required>
		</div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-primary">Submit Payment</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

    </div>
    
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
    $(document).ready(function() {
        $('#transactionModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget); // Button that triggered the modal
            var fundiId = button.data('fundi-id'); // Extract info from data-* attributes
            var fundiName = button.closest('tr').find('td:nth-child(2)').text(); // Get the fundi name from the row

            // Set the fundi name in the modal header
            $('#fundiName').text(fundiName);

            // Clear previous transaction data
            $('#transactionBody').empty();

            // AJAX request to fetch transactions
            $.ajax({
                url: '/fundi/' + fundiId + '/transactions', // Adjust the URL to match your route
                method: 'GET',
                success: function(data) {
                    // Populate the modal body with transaction data
                     data.forEach(function(transaction) {
            // Determine the status and corresponding styles
            var statusText = 'Due'; // Default status
            var statusClass = 'text-warning'; // Default class for "Due"
            var actionButton = `<button class="btn btn-success pay-button" data-transaction-id="${transaction.id}">Pay</button>`; // Default action button

            if (transaction.custom_field_2 === 'paid') {
                statusText = 'Paid';
                statusClass = 'text-success'; // Green color for "Paid"
                actionButton = `<button class="btn btn-secondary" disabled>Paid</button>`; // Disabled button
            } else if (transaction.custom_field_2 === 'partial') {
                statusText = 'Partial';
                statusClass = 'text-info'; // Blue color for "Partial"
            }
                       $('#transactionBody').append(`
		            <tr>
		                <td>${transaction.transaction_date}</td>
		                <td>${transaction.sales_amount}</td>
		                <td>${transaction.total_payable_commission}</td>
		                <td>${transaction.total_commission_paid}</td>
		                <td>${transaction.total_commission_not_paid}</td>
		                <td class="${statusClass}">${statusText}</td> <!-- Status with color -->
		                <td>${actionButton}</td>
		            </tr>
		        `);
	          });

                 // Attach click event to Pay buttons
		$('.pay-button').click(function() {
		    var transactionId = $(this).data('transaction-id');
		    var row = $(this).closest('tr');
		    
		    // Get transaction details from the row
		    var transactionDate = row.find('td:nth-child(1)').text();
		    var salesAmount = row.find('td:nth-child(2)').text();
		    var total_payable_commission = row.find('td:nth-child(3)').text();
		    var commissionNotPaid = row.find('td:nth-child(5)').text(); // This line captures the commission not paid
		
		    // Populate the payment modal fields
		    $('#transaction_date').val(transactionDate);
		    $('#sales_amount').val(salesAmount);
		    $('#total_payable_commission').val(total_payable_commission);
		    $('#commission_not_paid').val(commissionNotPaid); // This line sets the value in the payment modal
		    
		    // Set the form action for payment submission
		    $('#paymentForm').attr('action', '/fundi/pay-transaction/' + transactionId);
		    
		    // Show the payment modal
		    $('#paymentModal').modal('show');
		});
                },
                error: function() {
                    $('#transactionBody').append(`
                        <tr>
                            <td colspan="7" class="text-center">No transactions found.</td>
                        </tr>
                    `); // Adjust column span to 7 for the new commission columns
                }
            });
        });

        // Fetch accounts, expense categories, and payment methods
        $.ajax({
            url: "{{ route('payroll.payment_data') }}", // Adjust the URL as necessary
            type: 'GET',
            success: function(response) {
                if (response.success) {
                    // Populate Payment Account dropdown
                    var accountSelect = $('#payment_account');
                    accountSelect.empty(); // Clear existing options
                    $.each(response.accounts, function(id, name) {
                        accountSelect.append(new Option(name, id));
                    });

                    // Populate Expense Category dropdown
                    var expenseCategorySelect = $('#expense_category');
                    expenseCategorySelect.empty(); // Clear existing options
                    $.each(response.expense_categories, function(id, name) {
                        expenseCategorySelect.append(new Option(name, id));
                    });

                    // Populate Payment Method dropdown
                    var paymentMethodSelect = $('#method');
                    paymentMethodSelect.empty(); // Clear existing options
                    $.each(response.method, function(method, name) {
                        paymentMethodSelect.append(new Option(name, method)); // Method name as value
                    });
                } else {
                    alert('Failed to load payment data.');
                }
            },
            error: function(xhr) {
                alert('An error occurred: ' + xhr.responseJSON.message);
            }
        });
    });
    
    function payTransaction(transactionId) {
        $.ajax({
            url: '/fundi/pay-transaction/' + transactionId,
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') // Ensure CSRF token is included
            },
            success: function(response) {
                if (response.success) {
                    alert(response.message); // Show success message
                    $('#transactionModal').modal('hide'); // Close the modal
                    location.reload(); // Reload the page to refresh data
                } else {
                    alert(response.message); // Show error message if not successful
                }
            },
            error: function(xhr) {
                console.error(xhr.responseText); // Log the error response for debugging
                alert('Error updating transaction status: ' + xhr.responseText); // Show error message
            }
        });
    }
    </script>

</section>
<!-- /.content -->

@endsection