@extends("components.layout.master")
@section('title', 'Mandi Broker')
@section('module-icon', 'far fa-building')
@section('breadcrumb')
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="javascript:void(0);">Mandi</a></li>
        <li class="breadcrumb-item active">@yield('title')</li>
    </ol>
@endsection

@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">
                        <!-- State, City, Mandi selection -->
                        <div class="row">
                            <div class="col-md-4">
                                <label for="state">State</label>
                                <select id="state" class="form-control">
                                    <option value="">Select State</option>
                                    @foreach($states as $state)
                                        <option value="{{ $state->id }}">{{ $state->state_name }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-4">
                                <label for="city">City</label>
                                <select id="city" class="form-control" disabled>
                                    <option value="">Select City</option>
                                </select>
                            </div>

                            <div class="col-md-4">
                                <label for="mandi">Mandi</label>
                                <select id="mandi" class="form-control" disabled>
                                    <option value="">Select Mandi</option>
                                </select>
                            </div>
                        </div>

                        <br>

                        <!-- Broker Table -->
                        <table id="BrokerTable" class="table table-bordered dt-responsive nowrap" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                            <thead>
                                <tr>
                                    <th>Broker Name</th>
                                    <th>Mobile Number</th>
                                    <th>Total Sales</th>
                                    <th>Total Commissions</th>
                                    <th>Number of Employees</th>
                                    <th>Number of Auctions</th>
                                </tr>
                            </thead>
                            <tbody id="broker-table-body">
                    @if(count($brokers) > 0)
                        @foreach($brokers as $broker)
                       
                            <tr>
                            <td>{{ $broker->name }}</td>
                            <td>{{ $broker->mobile_number}}</td>
                            <td>{{ $broker->total_sales }}</td>
                            <td>{{ $broker->total_commissions}}</td>
                            <td>{{ $broker->number_of_employees }}</td>
                            <td>{{ $broker->number_of_auctions}}</td> 
                            </tr>
                           
                        @endforeach
                    @else
                        <tr>
                            <td colspan="6" class="text-center">No brokers found</td>
                        </tr>
                    @endif
                </tbody>
                        </table>

                    </div>
                </div>
            </div> <!-- end col -->
        </div> <!-- end row -->
    </div><!-- container -->
    @include('components.footertext')
</div>
@endsection

@push('script')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
<script>
  
  $(document).ready(function() {
    // Initialize DataTable
    $('#datatable').DataTable();
    $('#BrokerTable').DataTable({
        "language": {
            "paginate": {
                "previous": "<",
                "next": ">"
            }
        }
    });

    // Initially load brokers (without any filters) on page load
   
    // On state change, update city options
    $('#state').change(function() {
        var stateId = $(this).val();
        
        
        if (stateId) {
            $.ajax({
                url: '{{ route("mandiBroker") }}',
                type: 'GET',
                data: { state_id: stateId },
                success: function(response) {
                    var cityOptions = '<option value="">Select City</option>';
                    response.cities.forEach(function(city) {
                        cityOptions += '<option value="' + city.id + '">' + city.city_name + '</option>';
                    });
                    $('#city').html(cityOptions).prop('disabled', false); // Enable city dropdown
                    $('#mandi').html('<option value="">Select Mandi</option>').prop('disabled', true); // Disable mandi dropdown
                    // $('#broker-table-body').empty();
                    $('#broker-table-body').html(rows);
                }
            });
        } else {
            $('#city').html('<option value="">Select City</option>').prop('disabled', true);
            $('#mandi').html('<option value="">Select Mandi</option>').prop('disabled', true);
            $('#broker-table-body').empty(); 
        }
    });

    // On city change, update mandi options
    $('#city').change(function() {
        var cityId = $(this).val();
        if (cityId) {
            $.ajax({
                url: '{{ route("mandiBroker") }}',
                type: 'GET',
                data: { city_id: cityId },
                success: function(response) {
                    var mandiOptions = '<option value="">Select Mandi</option>';
                    response.mandis.forEach(function(mandi) {
                        mandiOptions += '<option value="' + mandi.id + '">' + mandi.mandi_name + '</option>';
                    });
                    $('#mandi').html(mandiOptions).prop('disabled', false); // Enable mandi dropdown
                    // $('#broker-table-body').empty(); // Clear previous broker results
                    $('#broker-table-body').html(rows);
                }
                
            });
        } else {
            $('#mandi').html('<option value="">Select Mandi</option>').prop('disabled', true);
            $('#broker-table-body').empty(); // Clear previous broker results
        }
    });

    // On mandi change, fetch brokers
    $('#mandi').change(function() {
        var mandiId = $(this).val();
        var stateId = $('#state').val();
        var cityId = $('#city').val();

        if (mandiId && stateId && cityId) {
            $.ajax({
                url: '{{ route("mandiBroker") }}',
                type: 'GET',
                data: {
                    state_id: stateId,
                    city_id: cityId,
                    mandi_id: mandiId
                },
                success: function(response) {
                    var rows = '';
                    if (response.brokers.length === 0) {
                        rows = '<tr><td colspan="6" class="text-center">No records found</td></tr>';
                    } else {
                        response.brokers.forEach(function(broker) {
                            rows += '<tr>';
                            rows += '<td>' + broker.name + '</td>';
                            rows += '<td>' + broker.mobile_number + '</td>';
                            rows += '<td>' + broker.total_sales + '</td>';
                            rows += '<td>' + broker.total_commissions + '</td>';
                            rows += '<td>' + broker.number_of_employees + '</td>';
                            rows += '<td>' + broker.number_of_auctions + '</td>';
                            rows += '</tr>';
                        });
                    }
                    $('#broker-table-body').html(rows); // Populate the table body
                }
            });
        }
    });
});

   
</script>
@endpush