@extends('layout.index')
@section('title', 'Export Vendors List')

<!-- Dashboard Ecommerce start -->
@section('content')
    <section>
        <div class="content-header row">
            <div class="content-header-left col-md-6 col-12 mb-2">
                <div class="row breadcrumbs-top">
                    <div class="col-12 d-flex">
                        <h2 class="content-header-title float-start mb-0">Export Vendors Data</h2>
                    </div>
                </div>
            </div>
            <!-- <div class="content-header-right text-md-end col-md-5 col-12 d-md-block d-none">
                <div class="mb-1 breadcrumb-right">
                    <div class="">
                        <ol class="breadcrumb" style="justify-content: flex-end">
                            <li class="breadcrumb-item"><a href="#">Home</a>
                            </li>
                            <li class="breadcrumb-item"><a href="#">Data</a>
                            </li>
                            <li class="breadcrumb-item active">Export Vendors Data
                            </li>
                        </ol>
                    </div>
                </div>
            </div> -->
            <div class="col-md-6">

            </div>
        </div>
    </section>
    <section>
                @if ($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">
            <section id="multiple-column-form">
                <div class="row justify-content-center">
                    <div class="col-sm-12">
                        <div class="card">
                            <div class="card-body">
                                <form class="form" id="downoadfrm" action="" method="post"
                                    enctype="multipart/form-data">
                                    <input type="hidden" name="form_type" value="download_form_data">
                                    {{ csrf_field() }}

                                    <div class="row">
                                        <div class="col-md-4 col-12">

                                            <div class="form-group">
                                                <label for="country-column">Select Country <span
                                                        style="color:red;">*</span></label>

                                                <select name="country" id="country_dropdown"
                                                    class="form-control form-select" onchange=" get_state();">
                                                    <option value="">Select Country</option>
                                                    

                                                </select>
                                                @error('country_ids')
                                                    <span class="text-danger">{{ $message }}</span>
                                                @enderror
                                                <h5><small class="text-danger" id="country_ids_err"></small></h5>
                                            </div>
                                        </div>

                                        <div class="col-md-4 col-12">

                                            <div class="form-group">
                                                <label for="state-column">Select State </label>

                                                <select name="state" id="state_dropdown" class="form-control form-select"
                                                    onchange="get_district()">
                                                    <option value="">Select state</option>



                                                </select>
                                                @error('state_ids')
                                                    <span class="text-danger">{{ $message }}</span>
                                                @enderror
                                                <h5><small class="text-danger" id="state_ids_err"></small></h5>
                                            </div>
                                        </div>

                                        <div class="col-md-4 col-12">

                                            <div class="form-group">
                                                <label for="district-column">Select District </label>

                                                <select name="district" id="district_dropdown"
                                                    class="form-control form-select" onchange="get_block();">
                                                    <option value="">Select District</option>



                                                </select>
                                                @error('district_ids')
                                                    <span class="text-danger">{{ $message }}</span>
                                                @enderror
                                                <h5><small class="text-danger" id="district_ids_err"></small></h5>
                                            </div>
                                        </div>

                                        <div class="col-md-4 col-12">

                                            <div class="form-group">
                                                <label for="block-column">Select Block </label>

                                                <select name="block" id="block_dropdown"
                                                    class="form-control form-select" onchange="get_village()">
                                                    <option value="">Select Block</option>



                                                </select>
                                                @error('block_ids')
                                                    <span class="text-danger">{{ $message }}</span>
                                                @enderror
                                                <h5><small class="text-danger" id="block_ids_err"></small></h5>
                                            </div>
                                        </div>

                                        <div class="col-md-4 col-12">

                                            <div class="form-group">
                                                <label for="village-column">Select Village </label>

                                                <select name="village" id="village_dropdown"
                                                    class="form-control form-select">
                                                    <option value="">Select Village</option>



                                                </select>
                                                @error('village_ids')
                                                    <span class="text-danger">{{ $message }}</span>
                                                @enderror
                                                <h5><small class="text-danger" id="village_ids_err"></small></h5>
                                            </div>
                                        </div>


                                        <div class="col-md-4 col-12">

                                            <div class="form-group">
                                                <label for="brand-column">Select Brand <span
                                                        style="color:red;">*</span></label>

                                                <select name="brand" id="brand_dropdown"
                                                    class="form-control form-select">
                                                    <option value="">Select Brand</option>
                                                    

                                                </select>

                                                <h5><small class="text-danger" id="brand_ids_err"></small></h5>
                                            </div>
                                        </div>

                                        <div class="col-md-4 col-12">

                                            <div class="form-group">
                                                <label for="program-column">Select Stakeholder <span
                                                        style="color:red;">*</span></label>

                                                <select name="program" id="program_dropdown"
                                                    class="form-control form-select" onchange=" get_tabs()">
                                                    <option value=" ">Select Stakeholder</option>
                                                                                                    </select>

                                                <h5><small class="text-danger" id="program_id_err"></small></h5>
                                            </div>
                                        </div>

                                        <div class="col-md-4 col-12">
                                            <div class="form-group">
                                                <label for="tab-column">Select Tab <span
                                                        style="color:red;">*</span></label>

                                                <select name="tab" id="tab_dropdown" class="form-control form-select"
                                                    onchange="get_form();">
                                                    <option value=" ">Select Tab</option>
                                                </select>

                                                <h5><small class="text-danger" id="tab_err"></small></h5>
                                            </div>
                                        </div>

                                        <div class="col-md-4 col-12">
                                            <div class="form-group">
                                                <label for="form-column">Select Form <span
                                                        style="color:red;">*</span></label>

                                                <select name="form" id="form_dropdown"
                                                    class="form-control form-select">
                                                    <option value="">Select Form</option>
                                                </select>

                                                <h5><small class="text-danger" id="form_ids_err"></small></h5>
                                            </div>
                                        </div>

                                        <div class="col-md-3 col-12" style="margin-top:23px">

                                            <div class="form-group">
                                                <button type="submit" id="uplodebtn" class="btn btn-primary"
                                                    onClick="return form_validation()">Download Form Data</button>
                                            </div>
                                        </div>

                                    </div>

                                </form>
                            </div>
                        </div>

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


            </section>
        </div>

    @endsection

    <script>
        var a_country = null;

        function get_state() {
            var country_id = $('#country_dropdown').val();
            var a_states = a_country[country_id]['states'] || [];

            s_states_options = '<option value="" >Select States</option>'
            $.each(a_states, function(key, state_obj) {
                // console.log(state_obj)
                if (country_id != 0 && state_obj.country_id == country_id) {
                    s_states_options += '<option value=' + state_obj.id + ' country_id=' + state_obj.country_id +
                        ' >' + state_obj.state_name + '</option>'
                }
            })
            $('#state_dropdown').html(s_states_options);
        }


        function get_district() {
            var country_id = $('#country_dropdown').val();
            var state_id = parseInt($('#state_dropdown').val());
            var a_districts = a_country[country_id]['districts'] || [];


            s_district_options = '<option value="" >Select Districts</option>'
            $.each(a_districts, function(key, district_obj) {
                // console.log(district_obj)

                if (country_id != 0 || state_id != 0) {

                    if (district_obj.country_id == country_id && district_obj.state_id == state_id) {
                        s_district_options += '<option value=' + district_obj.id + ' country_id=' + district_obj
                            .country_id + ' >' + district_obj.district_name +
                            '</option>'
                    }

                }
            })
            $('#district_dropdown').html(s_district_options);
        }


        function get_block() {
            var country_id = $('#country_dropdown').val();
            var state_id = parseInt($('#state_dropdown').val());
            var district_id = $('#district_dropdown').val();
            var a_block = a_country[country_id]['blocks'] || [];

            s_block_options = '<option value="" >Select Blocks</option>'
            $.each(a_block, function(key, block_obj) {

                if (district_id != 0) {
                    if (block_obj.country_id == country_id && block_obj.district_id == district_id && block_obj
                        .state_id == state_id) {
                        s_block_options += '<option value=' + block_obj.id + ' country_id=' + block_obj.country_id +
                            ' >' + block_obj.block_name +
                            '</option>'
                    }
                }

            })
            $('#block_dropdown').html(s_block_options);

        }

        function get_village() {
            var country_id = $('#country_dropdown').val();
            var state_id = parseInt($('#state_dropdown').val());
            var district_id = $('#district_dropdown').val();
            var block_id = $('#block_dropdown').val();
            var a_village = a_country[country_id]['villages'] || [];

            s_village_options = '<option value="" >Select Villages</option>'
            $.each(a_village, function(key, village_obj) {

                if (village_obj.country_id == country_id && village_obj.state_id == state_id && village_obj
                    .district_id == district_id && village_obj.block_id == block_id) {
                    s_village_options += '<option value=' + village_obj.id + ' country_id=' + village_obj
                        .country_id + '>' + village_obj.village_name +
                        '</option>'
                }
            })
            $('#village_dropdown').html(s_village_options);

        }
        // console.log(a_country)
        function form_validation() {

            if ($('#country_dropdown').val() == "") {
                $('#country_dropdown').parent().addClass('has-error');
                $('#country_ids_err').html('Please Select Country.');
                $('#country_dropdown').focus();
                $('#country_dropdown').change(function() {
                    $('#country_dropdown').parent().removeClass('has-error');
                    $('#country_ids_err').html('');
                });
                return false;
            }

            // if ($('#state_dropdown').val() == "") {
            //     $('#state_dropdown').parent().addClass('has-error');
            //     $('#state_ids_err').html('Please Select State.');
            //     $('#state_dropdown').focus();
            //     $('#state_dropdown').change(function() {
            //         $('#state_dropdown').parent().removeClass('has-error');
            //         $('#state_ids_err').html('');
            //     });
            //     return false;
            // }

            // if ($('#district_dropdown').val() == "") {
            //     $('#district_dropdown').parent().addClass('has-error');
            //     $('#district_ids_err').html('Please Select District.');
            //     $('#district_dropdown').focus();
            //     $('#district_dropdown').change(function() {
            //         $('#district_dropdown').parent().removeClass('has-error');
            //         $('#district_ids_err').html('');
            //     });
            //     return false;
            // }

            // if ($('#block_dropdown').val() == "") {
            //     $('#block_dropdown').parent().addClass('has-error');
            //     $('#block_ids_err').html('Please Select Block.');
            //     $('#block_dropdown').focus();
            //     $('#block_dropdown').change(function() {
            //         $('#block_dropdown').parent().removeClass('has-error');
            //         $('#block_ids_err').html('');
            //     });
            //     return false;
            // }

            // if ($('#village_dropdown').val() == "") {
            //     $('#village_dropdown').parent().addClass('has-error');
            //     $('#village_ids_err').html('Please Select Village.');
            //     $('#village_dropdown').focus();
            //     $('#village_dropdown').change(function() {
            //         $('#village_dropdown').parent().removeClass('has-error');
            //         $('#village_ids_err').html('');
            //     });
            //     return false;
            // }

            if ($('#brand_dropdown').val() == "") {
                $('#brand_dropdown').parent().addClass('has-error');
                $('#brand_ids_err').html('Please Select Brand.');
                $('#brand_dropdown').focus();
                $('#brand_dropdown').change(function() {
                    $('#brand_dropdown').parent().removeClass('has-error');
                    $('#brand_ids_err').html('');
                });
                return false;
            }

            if ($('#program_dropdown').val() == " ") {

                $('#program_dropdown').parent().addClass('has-error');
                $('#program_id_err').html('Please Select Stakeholder.');
                $('#program_dropdown').focus();
                $('#program_dropdown').change(function() {
                    $('#program_dropdown').parent().removeClass('has-error');
                    $('#program_id_err').html('');
                });
                return false;
            }

            if ($('#tab_dropdown').val() == " ") {
                $('#tab_dropdown').parent().addClass('has-error');
                $('#tab_err').html('Please Select Tab.');
                $('#tab_dropdown').focus();
                $('#tab_dropdown').change(function() {
                    $('#tab_dropdown').parent().removeClass('has-error');
                    $('#tab_err').html('');
                });
                return false;
            }


            if ($('#form_dropdown').val() == "") {

                $('#form_dropdown').parent().addClass('has-error');
                $('#form_ids_err').html('Please Select Form.');
                $('#form_dropdown').focus();
                $('#form_dropdown').change(function() {
                    $('#form_dropdown').parent().removeClass('has-error');
                    $('#form_ids_err').html('');
                });
                return false;
            }



        }

        function get_tabs() {

            var program_id = $('#program_dropdown').val();

            var url = '';
            $.ajax({
                url: "