@extends("components.layout.master")
@section('title', 'Mandi Product')
@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">
                    <div class="row">
                            <div class="col-md-4">
                                <label for="start_date">Start Date</label>
                                <input type="date" id="start_date" class="form-control">
                            </div>

                            <div class="col-md-4">
                                <label for="end_date">End Date</label>
                                <input type="date" id="end_date" class="form-control">
                            </div>
                        </div>
                        <br>
                        <!-- 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>Product Name</th>
                                    <th>Mandi Name</th>
                                    <th>Average Price (Kg)</th>
                                    <th>Quantities Sold (Kg)</th>
                                </tr>
                            </thead>
                            <tbody id="broker-table-body">
                            @if(count($products) > 0)
        @foreach($products as $product)
            <tr>
                <td>{{ $product->product_name }} - {{ $product->product_type_name }}</td>
                <td>{{ $product->mandi_name }}</td> <!-- Display Mandi Name -->
                <td>{{ $product->avg_rate_per_kg }}</td>
                <td>{{ $product->total_qty }}</td>
            </tr>
        @endforeach
    @else
        <tr>
            <td colspan="4" class="text-center">No products 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() {
            $('#BrokerTable').DataTable({
                "language": {
                    "paginate": {
                        "previous": "<",
                        "next": ">"
                    }
                }
            });

            // Get selected start date and end date
            function getSelectedDates() {
                var startDate = $('#start_date').val();
                var endDate = $('#end_date').val();
                return { start_date: startDate, end_date: endDate };
            }

            // On state change, update city options
            $('#state').change(function() {
                var stateId = $(this).val();
                var dates = getSelectedDates();
                if (stateId) {
                    $.ajax({
                        url: '{{ route("mandiProduct") }}',
                        type: 'GET',
                        data: {
                            state_id: stateId,
                            start_date: dates.start_date,
                            end_date: dates.end_date
                        },
                        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').html(response.products);
                        }
                    });
                } else {
                    $('#city').html('<option value="">Select City</option>').prop('disabled', true); // Disable city dropdown
                    $('#mandi').html('<option value="">Select Mandi</option>').prop('disabled', true); // Disable mandi dropdown
                    $('#broker-table-body').empty();
                }
            });

            // On city change, update mandi options
            $('#city').change(function() {
                var cityId = $(this).val();
                var dates = getSelectedDates();
                if (cityId) {
                    $.ajax({
                        url: '{{ route("mandiProduct") }}',
                        type: 'GET',
                        data: {
                            city_id: cityId,
                            start_date: dates.start_date,
                            end_date: dates.end_date
                        },
                        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').html(response.products);
                        }
                    });
                } else {
                    $('#mandi').html('<option value="">Select Mandi</option>').prop('disabled', true); // Disable mandi dropdown
                    $('#broker-table-body').empty();
                }
            });

            // On mandi change, fetch products
            $('#mandi').change(function() {
                var mandiId = $(this).val();
                var stateId = $('#state').val();
                var cityId = $('#city').val();
                var dates = getSelectedDates();
                if (mandiId && stateId && cityId) {
                    $.ajax({
                        url: '{{ route("mandiProduct") }}',
                        type: 'GET',
                        data: {
                            state_id: stateId,
                            city_id: cityId,
                            mandi_id: mandiId,
                            start_date: dates.start_date,
                            end_date: dates.end_date
                        },
                        success: function(response) {
                            var rows = '';
                            // Check if there are any products
                            if (response.products.length === 0) {
                                rows = '<tr><td colspan="4" class="text-center">No records found</td></tr>';
                            } else {
                                response.products.forEach(function(product) {
                                    rows += '<tr>';
                                    rows += '<td>' + product.product_name + ' - ' + product.product_type_name + '</td>';
                                    rows += '<td>' + product.mandi_name + '</td>';
                                    rows += '<td>' + product.avg_rate_per_kg + '</td>';
                                    rows += '<td>' + product.total_qty + '</td>';
                                    rows += '</tr>';
                                });
                            }
                            $('#broker-table-body').html(rows);
                        }
                    });
                }
            });
        });
</script>
@endpush