@extends("components.layout.master")
@section('title',' Mandi List')
@section('module-icon','far fa-building')
@section('breadcrumb')
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="javascript:void(0);">Master Configuration</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-lg-12">
                                <button type="button" title="" id="addMandiBtn"
                                class="btn btn-success waves-effect waves-light float-right">
                                <i class="fa fa-plus" aria-hidden="true"></i> Add New
                        </button>
                               
                            </div>
                        </div>
                        <br>
                        
                        <table id="MandiTable" class="table table-bordered dt-responsive nowrap" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                            <thead>
                                <tr>
                                    <th>No.</th>
                                    <th>Mandi Name</th>
                                    <th>State Name</th>
                                    <th>City Name</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                            </thead>

                            <tbody>
                                @if ($mandiList->isEmpty())
                                    <tr>
                                        <td colspan="6">No records found.</td>
                                    </tr>
                                @else
                                    @foreach ($mandiList as $mandi)
                                        <tr>
                                            <td>{{ $loop->iteration }}</td>
                                            <td>{{ $mandi->mandi_name }}</td>
                                            <td>{{ $mandi->states->state_name }}</td>
                                            <td>{{ $mandi->city->city_name }}</td>
                                            <td>
                                                @if ($mandi->active_status == 1)
                                                    <span class="badge bg-success">Active</span>
                                                @elseif ($mandi->active_status == 2)
                                                    <span class="badge bg-danger">Inactive</span>
                                                @endif
                                            </td>
                                            
                                            <td>
                                                <button class="btn btn-purple btn-xs  editMandi " data-id="{{ $mandi->id }}"><i class="fa fa-edit" aria-hidden="true"></i> Edit</button>
                                               
                                            </td>
                                        </tr>
                                    @endforeach
                                @endif
                            </tbody>
                        </table>

                    </div>
                </div>
            </div> <!-- end col -->
        </div> <!-- end row -->
        
        <!-- Start Add State Modal -->
        <div class="modal fade admin-query" id="addMandiModal">
            <div class="modal-dialog modal-dialog-centered small-modal">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Add Mandi
                        </h4>
                        <button type="button" class="close dismissBtn" data-dismiss="modal">&times;</button>
                    </div>
                    <div class="modal-body">
                        <form id="addMandiForm" enctype="multipart/form-data">
                            
                        <div class="row mb-3">
                            
                            <div class="col-lg-12">
                                <div class="primary_input" id="">
                                    <label class="primary_input_label" for="">Mandi Name<span class="text-danger"> *</span></label>
                                    <input class="form-control" type="text" onkeypress="onlyAlphabets(event)" name="mandi_name" id="mandi_name" placeholder="Enter Mandi Name" autocomplete="off">
                                    <span class="text-danger" id="mandi_name_error"></span>
                                </div><br>
                                <div class="primary_input" id="">
                                    <label class="primary_input_label" for="">State<span class="text-danger"> *</span></label>
                                    <select class="form-control" id="state_id" name="state_name">
                                        <option value="">Select State</option>
                                        @foreach ($states as $state)
                                            <option value="{{ $state->id }}">{{ $state->state_name }}</option>
                                        @endforeach
                                    </select>
                                    <span class="text-danger" id="state_name_error"></span>
                                </div><br>
                                <div class="primary_input" id="">
                                    <label class="primary_input_label" for="">City<span class="text-danger"> *</span></label>
                                    <select class="form-control" id="city_id" name="city_name">
                                        <option value="">Select City</option>
                                    </select>
                                    <span class="text-danger" id="city_name_error"></span>
                                    
                                </div>
                            </div>
                        </div>
                        <div class="row mt-40">
                            <div class="col-lg-12 text-center">
                                <button class="btn btn-success waves-effect waves-light" type="submit" id="">
                                    {!! BTN_SAVE !!}
                                </button>
                                <button class="btn btn-secondary btn-sm ml-2" type="reset" id="">
                                    <span class="ti-reload"></span> Reset
                                </button>    
                            </div>
                        </div>
                    </form>
                    </div>
                </div>
            </div>
        </div>
        <!-- End Add State Modal -->
        
        <!-- Start Edit State Modal -->
        <div class="modal fade admin-query" id="editMandiModal">
            <div class="modal-dialog modal-dialog-centered small-modal">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Modify Mandi 
                        </h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <div class="modal-body">
                        <form id="editMandiForm" enctype="multipart/form-data">
                            <input type="hidden" id="id" name="id">
                            <div class="col-lg-12">
                                <div class="add-visitor">
                                    <div class="row mb-3">
                                        <div class="col-lg-12">
                                            <div class="primary_input" id="">
                                                <label class="primary_input_label" for="">Mandi Name<span class="text-danger"> *</span></label>
                                                <input type="text" class="form-control" onkeypress="onlyAlphabets(event)" id="edit_mandi_name" name="mandi_name"
                                                placeholder="Enter Mandi Name">
                                            <span class="text-danger" id="edit_mandi_name_error"></span>
                                            </div><br>
                                            <div class="primary_input" id="">
                                                <label class="primary_input_label" for="">State<span class="text-danger"> *</span></label>
                                                <select class="form-control" id="edit_state_id" name="state_name">
                                                    <option value="">Select State</option>
                                                    @foreach ($states as $state)
                                                        <option value="{{ $state->id }}">{{ $state->state_name }}</option>
                                                    @endforeach
                                                </select>
                                                <span class="text-danger" id="edit_state_name_error"></span>
                                            </div><br>
                                            <div class="primary_input" id="">
                                                <label class="primary_input_label" for="">City<span class="text-danger"> *</span></label>
                                                <select class="form-control" id="edit_city_id" name="city_name">
                                                    <option value="">Select City</option>
                                                </select>
                                                <span class="text-danger" id="edit_city_name_error"></span>
                                            </div><br>
                                            <div class="primary_input" id="">
                                                <label class="primary_input_label" for="">Status</label>
                                                <select class="form-control" id="edit_active_status" name="active_status">
                                                    <option value="1">Active</option>
                                                    <option value="2">Inactive</option>
                                                </select>
                                            </div>
                                        </div>
                                        
                                    </div>
                                    <div class="row mt-40">
                                        <div class="col-lg-12 text-center">
                                            <button class="btn btn-success btn-sm" type="submit" id="">
                                                <i class="fa fa-plus" aria-hidden="true"></i> Update
                                            </button>
                                            <button class="btn btn-secondary btn-sm ml-2" type="reset" id="">
                                                <span class="ti-reload"></span> Reset
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
    
                </div>
            </div>
        </div>

      
        <!-- End Edit State Modal -->
    </div><!-- container -->
    @include('components.footertext')
</div>

@endsection


@push('script')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
<script>
    $(document).ready(function() {
        $('#datatable').DataTable();
        $('#addMandiBtn').on('click', function() {
           
            $('#addMandiModal').modal('show');
        });

        // Populate city dropdown based on selected state
        $('#state_id').on('change', function() {
            var state_id = $(this).val();
            if (state_id) {
                $.ajax({
                    url: '{{ url('get-cities-by-state') }}/' + state_id,
                    type: 'GET',
                    dataType: 'json',
                    success: function(data) {
                        $('#city_id').empty();
                        $('#city_id').append('<option value="">Select City</option>');
                        $.each(data, function(key, value) {
                            $('#city_id').append('<option value="' + value.id +
                                '">' + value.city_name + '</option>');
                        });
                    }
                });
            } else {
                $('#city_id').empty();
                $('#city_id').append('<option value="">Select City</option>');
            }
        });

        $('#addMandiForm').on('submit', function(e) {
         
            e.preventDefault();
            var formData = new FormData(this);
            showLoader();
            $.ajax({
                url: '{{ route('mandistore') }}',
                method: 'POST',
                data: formData,
                headers: {
                    'X-CSRF-TOKEN': $('input[name="_token"]').attr('content')
                },
                contentType: false,
                processData : false,
                dataType: 'json',
                success: function(response) {
                   
                    if (response.success) {
                    $('#addMandiModal').modal('hide');
                    toastr.success(response.message);  // Toastr success notification
                    setTimeout(function() {
                        hideLoader();
                        location.reload(); // Delay to allow Toastr message to display
                    }, 1000);
                } else {
                    hideLoader();
                        $.each(response.errors, function(key, value) {
                            $('#' + key + '_error').text(value);
                        });
                    }
                },
                error: function(xhr) {
                    hideLoader();
                    let response = xhr.responseJSON;
                    let errorMessage = response.message || 'Something went wrong.';
                    Swal.fire('Error', errorMessage, 'error');
                }
            });
        });

        $('#MandiTable').DataTable({
            "language": {
                "paginate": {
                    "previous": "<",
                    "next": ">"
                }
            }
        });
        $(document).on('click', '.editMandi', function() {
            var id = $(this).data('id');
            $('#editMandiModal').modal('show');

            // Fetch existing data
            $.ajax({
                url: '{{ route('mandistoreEdit') }}', // Define your edit route in the backend
                type: 'GET',
                data: {
                    id: id
                },
                dataType: 'json',
                success: function(data) {
                    $('#id').val(data.id);
                    $('#edit_mandi_name').val(data.mandi_name);
                    $('#edit_state_id').val(data.state_id);
                    $('#edit_active_status').val(data.active_status);
                    // Fetch cities based on state_id
                    fetchCitiesByState(data.state_id, data
                    .city_id); // Call function to fetch cities
                    
                }
            });
        });

        // Function to fetch cities based on the state_id
        function fetchCitiesByState(state_id, selectedCityId = null) {
            $.ajax({
                url: '{{ url('get-cities-by-state') }}/' + state_id,
                type: 'GET',
                dataType: 'json',
                success: function(cities) {
                    $('#edit_city_id').empty();
                    $('#edit_city_id').append('<option value="">Select City</option>');
                    $.each(cities, function(key, value) {
                        $('#edit_city_id').append('<option value="' + value.id + '">' +
                            value.city_name + '</option>');
                    });

                    if (selectedCityId) {
                        $('#edit_city_id').val(selectedCityId); // Set the selected city
                    }
                }
            });
        }

        // Trigger city dropdown update when state is changed
        $(document).on('change', '#edit_state_id', function() {
            var stateId = $(this).val();
            if (stateId) {
                fetchCitiesByState(stateId); // Fetch cities when state is changed
            } else {
                $('#edit_city_id').empty();
                $('#edit_city_id').append(
                '<option value="">Select City</option>'); // Reset city dropdown if no state is selected
            }
        });

        $('#editMandiForm').on('submit', function(e) {
            e.preventDefault();
            var formData = new FormData(this);
            showLoader();
            $.ajax({
                url: '{{ route('mandistoreUpdate') }}',
                method: 'POST',
                data: formData,
                
                headers: {
                    'X-CSRF-TOKEN': $('input[name="_token"]').attr('content')
                },
                contentType: false,
                processData : false,
                dataType: 'json',
                success: function(response) {
                    if (response.success) {
                        $('#editMandiModal').modal('hide');
                        toastr.success(response.message);  // Toastr success notification
                        setTimeout(function() {
                            hideLoader();
                            location.reload(); // Delay to allow Toastr message to display
                        }, 1000);
                    } else {
                        hideLoader();
                        $.each(response.errors, function(key, value) {
                            $('#edit_' + key + '_error').text(value);
                        });
                    }
                },
                error: function(xhr) {
                    hideLoader();
                    let response = xhr.responseJSON;
                    let errorMessage = response.message || 'Something went wrong.';
                    Swal.fire('Error', errorMessage, 'error');
                }
            });
        });
            $('#addMandiModal').on('click', function() {
                    // Clear the text input
                    // $('#mandi_name').val('');
                   
                    $('#mandi_name_error').text('');
                    $('#state_name_error').text('');
                    $('#city_name_error').text('');
                });

                $('#editMandiModal').on('click', function() {
                    // Clear the text input
                    // $('#mandi_name').val('');
                   
                    $('#edit_mandi_name_error').text('');
                    $('#edit_state_name_error').text('');
                    $('#edit_city_name_error').text('');
                });

                $('#addMandiModal').on('hidden.bs.modal', function() {
                tags = [];
                $('#mandi_name').val('');
                $('#state_id option:first').prop('selected', true);
                $('#city_id option:first').prop('selected', true);
                $('#mandi_name_error').text('');
                $('#state_name_error').text('');
                $('#city_name_error').text('');
            
            });
    });
</script>
@endpush