@extends("components.layout.master")
@section('title', ' Broker')
@section('module-icon','mdi mdi-account-outline')

@section('content')
<!-- Content Wrapper. Contains page content -->
<div class="page-content">
    <div class="container-fluid"> 
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        
                        <table id="BrokerTable" class="table table-bordered dt-responsive" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                            <thead>
                                <tr>
                                    <th>No.</th>
                                    <th>Broker Name</th>
                                    <th>Mobile No.</th>
                                    <th>Registration Date</th>
                                    <th>State Name</th>
                                    <th>City Name</th>
                                    <th>Mandi Name</th>
                                    <th>Number Of Employees</th>
                                    <th>Details</th>
                                    <th>Status</th>
                                </tr>
                            </thead>

                            <tbody>
                                @if ($getAllUser->isEmpty())
                                    <tr>
                                        <td colspan="10">No records found.</td>
                                    </tr>
                                @else
                                    @foreach ($getAllUser as $getuser)
                                        <tr>
                                            <td>{{ $loop->iteration ?? ''}}</td>
                                            <td>{{ $getuser->name ?? '' }}</td>
                                            <td>{{ $getuser->mobile_number ?? ''}}</td>
                                            <td>{{ \Carbon\Carbon::parse($getuser->created_at)->format('d/m/Y') ?? '' }}</td>
                                            <td>{{ $getuser->states->state_name ?? '' }}</td>
                                            <td>{{ $getuser->city->city_name ?? ''}}</td>
                                            <td>{{ $getuser->mandi->mandi_name ?? ''}}</td>
                                            <td>{{ $getuser->employee_count }}</td>
                                            <td>
                                                
                                                <button class="btn btn-purple btn-xs editMandi"  data-id="{{ $getuser->id }}">View</button>
                                            </td>
                                            <td>
                                                @if ($getuser->active_status == 1)
                                                    <span class="badge bg-success">Active</span>
                                                @elseif ($getuser->active_status == 0)
                                                    <span class="badge bg-danger">Inactive</span>
                                                @endif
                                            </td>
                                            
                                        </tr>
                                    @endforeach
                                @endif
                            </tbody>
                        </table>
                   
                    </div>
                </div>
            </div> 
        </div> 
    </div>
    <div class="modal fade" id="detailsModal" tabindex="-1" role="dialog" aria-labelledby="detailsModalLabel" aria-hidden="true" >
        <div class="modal-dialog modal-lg" role="document" style="max-width:950px;">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="detailsModalLabel">Broker Details</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                     <table id="" class="table table-bordered table-striped rounded-table text-center"
                                cellspacing="0" width="100%">
                                <thead>
                                    <tr>
                                        <th>Company Name.</th>
                                        <th>Total Selling Amount</th>
                                        <th>Total Commision (₹)</th>
                                        <th>Total Credited Amount</th>
                                        <th>Total Paid Amount</th>
                                    </tr>
                                </thead>
                                <tbody>
                                   
                                </tbody>
                            </table>
                </div>
            </div>
        </div>
    </div>
    @include('components.footertext')
</div>
@endsection
@push('script')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
<script>
    $(document).ready(function() {
        $('#BrokerTable').DataTable({
            "language": {
                "paginate": {
                    "previous": "<",
                    "next": ">"
                }
            }
        });

        $(document).on('click', '.editMandi', function() {
            var id = $(this).data('id'); // Get the ID of the selected row

            // Clear the modal content before loading new data
            $('#detailsModal tbody').empty();

            // Show the modal
            $('#detailsModal').modal('show');

            // Make an AJAX call to fetch data from the server
            $.ajax({
                url: '/getBrokerDetails', // Your route to fetch broker details
                type: 'GET',
                data: { id: id }, // Pass the ID to the server
                success: function(response) {
                    
                    if (response.success) {
                        // Assuming the response contains an array of broker details
                        var details = response.data;

                        // Populate the modal's table with the fetched data
                        var rows = '';
                        $.each(details, function(index, detail) {
                            rows += `<tr>
                                        <td>${detail.company.company_name ?? ''}</td>
                                        <td>${detail.total ?? ''}</td>
                                        <td>${detail.commission ?? ''}</td>
                                        <td>${detail.credit ?? ''}</td>
                                        <td>${detail.paid ?? ''}</td>
                                    </tr>`;
                        });

                        // Append rows to the table body
                        $('#detailsModal tbody').html(rows);
                    } else {
                        // Handle the case where no data is returned
                        $('#detailsModal tbody').html('<tr><td colspan="5">No data found</td></tr>');
                    }
                },
                error: function(xhr, status, error) {
                    console.log(error); // Log errors if any
                }
            });
        });

    });
</script>
@endpush