@extends('layout.index')
@section('title', 'Producer Group List')

<!-- Dashboard Ecommerce start -->
@section('content')
<section>
    <div class="content-header row">
        <div class="content-header-left col-md-9 col-12 mb-2">
            <div class="row breadcrumbs-top">
                <div class="col-12 d-flex">
                    <h2 class="content-header-title float-start mb-0">Producer Group List</h2>
                </div>
            </div>
        </div>
    </div>       
</section>
    <section>
        @if ($message = Session::get('success'))
            <div class="demo-spacing-0 mb-1">
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    <div class="alert-body">
                        <i class="fa fa-check-circle" style="font-size:16px;" aria-hidden="true"></i>
                        {{ $message }}
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    </div>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            </div>
        @elseif ($message = Session::get('error'))
            <div class="demo-spacing-0 mb-1">
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <div class="alert-body">
                        <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
                        {{ $message }}
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    </div>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            </div>
        @endif

        <div class="content-body">
            <!-- Bordered table start -->
            <div class="row" id="table-bordered">
                <div class="col-12">
                    <div class="card ">
                        <form class="dt_adv_search" method="POST">
                            <div class="card-header w-100 m-0">
                                <div class="row w-100">
                                    <div class="col-sm-12">
										@csrf
										<input type="hidden" name='form_type' value='search_data'>
										<div class="row">
											<div class="col-sm-3">
												<label class="form-label"> Producer Group Name:</label><br>
												<input type="text" id="search_text" class="form-control" placeholder="Name" name="search_text" value="{{ $search_text }}" autocomplete="off" />
											</div>
                                           
                                            <div class="col-md-2 col-12">   
                                            <div class="form-group">
                                                <label class="form-label"> Country </label>
                                                <select class="form-control form-select country_filter" id="countryId" name='countryId' onchange="get_state()">
                                                <option value=''>Select Country</option>
                                                                                                    </select>
                                                <h5 class="mt-1"><small class="text-danger" id="country_err"></small></h5>
                                                @error('countryId')
                                                    <span class="error" style="color:red;">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                        
                                        <div class="col-md-2 col-12" >
                                            <div class="form-group mb-0">
                                                <lable class="text-primary"> States</label>
                                                    
                                                <select class="text-primary form-control form-select state_filter" id="stateId" name='stateId' >
                                                    <option value='0'>All States</option>
                                                                                                    </select>
                                            </div>
                                        </div>
											<div class="col-sm-4 mt-2">
												<button type="submit" class="btn btn-primary">Search</button>
												@if ($search_text != '' || !empty($countryId) || !empty($stateId))
													<a title="Clear" href="{{ url('producer_group/clear_search') }}" type="button" class="btn btn-outline-primary">
														<i data-feather="rotate-ccw" class="me-25"></i> Clear Search
													</a>
												@endif
                                                <a href="{{ url('/producer_group/add_edit') }}" class="btn btn-outline-primary pull-right"><i data-feather="plus"></i><span>Add Producer Group</span></a>

											</div>
											<!-- <div class="col-sm-4 mt-2">
                                                <button type="button" id="exportList" class="btn btn-primary pull-right ml-1" onclick="return export_list();" name="button" value="exportList">Export</button>
                                                <a href="{{ url('/producer_group/add_edit') }}" class="btn btn-outline-primary pull-right"><i data-feather="plus"></i><span>Add Producer Group</span></a>
											</div> -->
										</div>
                                    </div>
                                </div>
                            </div>
                        </form>
                        <div class="table-responsive">
                            <table class="table table-striped table-bordered">
                                <thead>
									<tr>
                                        <th class="text-center">Sr. No</th>
                                        <th class="text-left">PG Name</th>
                                        <th class="text-left">PG Code</th>
                                        <th class="text-left">Country</th>
                                        <th class="text-left">State</th>
                                        <th class="text-left">Active</th>
                                        <th class="text-left">Action</th>
                                    </tr>
                                </thead>
                                <tbody class="text-center">
                                                                            <tr>
                                            <td colspan="8" style="text-align:center; color:red;">No Record Found</td>
                                        </tr>
                                                                    </tbody>
                            </table>
							<div class="card-body">
                                <div class="d-flex justify-content-end">
                                    {{ $Paginator }}
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <!-- Bordered table end -->
        </div>
    </section>

<!-- Bootstrap Modal -->
<div class="modal fade" id="villageMappingModal" tabindex="-1" role="dialog" aria-labelledby="villageMappingModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="villageMappingModalLabel">Village Mapping</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-4">
                        <select class="form-control" id="programId" name="programId">
                            <option value="0">Select Program</option>
                                                    </select>
                    </div>
                    <div class="col-md-4">
                        <select class="form-control" id="brandId" name="brandId">
                            <option value="0">Select Brand</option>
                                                    </select>
                    </div>
                    <div class="col-md-4">
                        <select class="form-control" id="season" name="season">
                            <option value="0">Select Season</option>
                                                    </select>
                    </div>
                    <div class="col-md-8 mt-1">
                        <select class="form-control select2" id="village" name="village">
                            <option value="0">Select Villages</option>
                        </select>
                    </div>
                    <div class="col-md-4 mt-1">
                        <input type="hidden" id="pgId" name="pgId" value="">
                        <input type="hidden" id="countryId" name="countryId" value="">
                        <button class="btn btn-primary mr-1" onClick="submit_pg_mapping()">Submit</button>
                        <button type="button" id="exportList" class="btn btn-primary" onclick="return export_list();" name="button" value="exportList">Export</button>
                    </div>
                </div>
                <hr>
                <div class="row">
                    <div class="col-md-12" id="village_mapped"></div>
                </div>
                <!-- Content for village mapping goes here -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <!-- <button type="button" class="btn btn-primary">Save changes</button> -->
            </div>
        </div>
    </div>
</div>

<script>
    var aVillage = null;
    var aProgram = null;
    var aBrand = null;
    var aState = null;
    var selected_state =null;
    $(document).ready(function() {
        get_state();
    });
    
    function get_state() {
        var country_id = $('#countryId').val();
        var a_states = aState || [];
        var s_states_options = '<option value="">Select State</option>';
       
        $.each(a_states, function(key, state_obj) {
            var selected = '';
            if((selected_state) == state_obj.id){
                selected = 'selected';
            } 

            if (country_id != 0 && state_obj.country_id == country_id) {
                
                s_states_options += '<option value=' + state_obj.id + ' country_id='+state_obj.country_id+' ' + selected + '>' + state_obj.state_name + '</option>'
            }
        })
        $('#stateId').html(s_states_options);
    }

    
    function show_village_mapping(pgId, countryId, stateId){
        let countryVillage = aVillage
        let allVillage = countryVillage[countryId][stateId];
        
        let html = '<option value="0">Select Village</option>'
        for (let key in allVillage) {
            html += `<option value="${key}">${allVillage[key]}</option>`;
        }
        
        $('#pgId').val(pgId);
        $('#countryId').val(countryId);
        $('#village').html(html);

        get_mapped_villages(pgId, countryId);
        $('#villageMappingModal').modal('show');
    }

    function get_mapped_villages(pgId, countryId){
        $.ajax({
            url: "