@extends('layout.index')

    @section('title', 'Add Mapping')

<!-- Dashboard Ecommerce start -->
@section('content')
    <section>
        <div class="content-body">
            <div class="content-header row">
                <div class="content-header-left col-md-7 col-12 mb-2">
                    <div class="row breadcrumbs-top">
                        <div class="col-12 d-flex">
                            <h2 class="content-header-title float-start mb-0">Add Program Brand Region Mapping</h2>
                        </div>
                    </div>
                </div>
              
            </div>
        </div>

        <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="categoryform" action="" method="POST" enctype="multipart/form-data">
									<input type="hidden" name="form_type" value="add_mapping">
                                    {{ csrf_field() }}
                                  
                                    <div class="row">
                                        <div class="col-md-3 col-12">
                                            <div class="form-group">
                                                <label>Program <span style="color:red;">*</span></label>
                                                <select id="programId" name="programId" class="form-control" onchange="get_brands()">
                                                    <option value="">Select Program</option>
                                                    @foreach($aPrograms as $item)
                                                        <option value="{{$item->id}}">{{$item->program_name}}</option>
                                                    @endforeach
                                                </select>
                                                @error('programId')
                                                    <span class="text-danger">{{ $message }}</span>
                                                @enderror
                                                <h5><small class="text-danger" id="programId_err"></small></h5>
                                            </div>
                                        </div>
                                        <div class="col-md-3 col-12">
                                            <div class="form-group">
                                                <label>Brand <span style="color:red;">*</span></label>
                                                <select id="brandId" name="brandId" class="form-control">
                                                    <option value="">Select Brand</option>
                                                    {{--@foreach($aBrands as $item)
                                                        <option value="{{$item->id}}">{{$item->brand_name}}</option>
                                                    @endforeach--}}
                                                </select>
                                                @error('brandId')
                                                    <span class="text-danger">{{ $message }}</span>
                                                @enderror
                                                <h5><small class="text-danger" id="brandId_err"></small></h5>
                                            </div>
                                        </div>
                                        <div class="col-md-3 col-12">
                                            <div class="form-group">
                                                <label>Season <span style="color:red;">*</span></label>
                                                <select id="season" name="season" class="form-control">
                                                    <option value="">Select season</option>
                                                    @foreach($aSeasons as $item)
                                                        <option value="{{$item->season}}">{{$item->season}}</option>
                                                    @endforeach
                                                </select>
                                                @error('season')
                                                    <span class="text-danger">{{ $message }}</span>
                                                @enderror
                                                <h5><small class="text-danger" id="season_err"></small></h5>
                                            </div>
                                        </div>
                                        <div class="col-md-3 col-12">
                                            <div class="form-group">
                                                <label>Country <span style="color:red;">*</span></label>
                                                <select id="countryId" name="countryId" class="form-control" onchange="get_districts()">
                                                    <option value="">Select Country</option>
                                                </select>
                                                @error('countryId')
                                                    <span class="text-danger">{{ $message }}</span>
                                                @enderror
                                                <h5><small class="text-danger" id="countryId_err"></small></h5>
                                            </div>
                                        </div>
                                                                                <div class="col-md-12 col-12">
                                            <div class="form-group">
                                                <label>District <span style="color:red;">*</span></label>
                                                <select id="districtId" name="districtIds[]" class="form-control select2" multiple="multiple">
                                                    <!-- <option value="">Select District</option> -->
                                                </select>
                                                @error('districtId')
                                                    <span class="text-danger">{{ $message }}</span>
                                                @enderror
                                                <h5><small class="text-danger" id="districtId_err"></small></h5>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 text-center mt-1">
                                        <input type="submit" class="btn btn-primary mr-1" onClick="return validation_form()" value="Submit">
                                        <a href="{{ url('/program_brand_region') }}" class="btn btn-outline-secondary">Cancel</a>
                                    </div>
                                </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </section>

<script>
    var aBrandsProgramMapping = [];
    var aBrands = [];
    var aCountries = [];
    var aStates = [];
    var aDistricts = [];
    
    $( document ).ready(function() {
        get_countries()

        $('#districtId').select2({
            closeOnSelect: false
        });
    });

    function get_brands(){
        let html = '<option value="">Select Brand</option>';
        let programId = $('#programId').val()
        
        for(let i=0;i<aBrands.length;i++){
            if(is_brand_program_map(programId, aBrands[i].id)){
                html += '<option value="'+aBrands[i].id+'">'+aBrands[i].brand_name+'</option>';
            }
        }
        
        $('#brandId').html(html)
    }

    function is_brand_program_map(programId, brandId){
        let flag = false;
        for (let index = 0; index < aBrandsProgramMapping.length; index++) {
            if(programId==aBrandsProgramMapping[index].program_id && brandId==aBrandsProgramMapping[index].brand_id){
                flag = true;
                break;
            }
        }
        return flag
    } 

    function get_countries(){
        let html = '<option value="">Select Country</option>';
        
        for(let i=0;i<aCountries.length;i++){
            html += '<option value="'+aCountries[i].id+'">'+aCountries[i].country_name+'</option>';
        }
        
        $('#countryId').html(html)
        get_states()
    }

    function get_states(){
        let countryId = $('#countryId').val()
        let html = '<option value="">Select State</option>';
        
        for(let i=0;i<aStates.length;i++){
            if(countryId==aStates[i].country_id){
                html += '<option value="'+aStates[i].id+'">'+aStates[i].state_name+'</option>';
            }
        }

        $('#stateId').html(html)
        get_districts()
    }

    function get_districts(){
        let countryId = $('#countryId').val()
        // let stateId = $('#stateId').val()
        // let html = '<option value="">Select District</option>';
        let html = '';
        
        for(let i=0;i<aDistricts.length;i++){
            if(countryId==aDistricts[i].country_id){
                html += '<option value="'+aDistricts[i].state_id+'_'+aDistricts[i].id+'">'+aDistricts[i].district_name+'</option>';
            }
        }

        $('#districtId').html(html)
        $('#districtId').select2({
            closeOnSelect: false
        });
    }

    function validation_form(){
        let flag = true;
        
        if($('#programId').val()==''){
            flag = false;
            $('#programId_err').html('Please Select Program');
            $('#programId').on('click', function () {
                $('#programId_err').html('');
            });
        }
        
        if($('#brandId').val()==''){
            flag = false;
            $('#brandId_err').html('Please Select Brand');
            $('#brandId').on('click', function () {
                $('#brandId_err').html('');
            });
        }
        
        if($('#season').val()==''){
            flag = false;
            $('#season_err').html('Please Select Season');
            $('#season').on('click', function () {
                $('#season_err').html('');
            });
        }
        
        if($('#countryId').val()==''){
            flag = false;
            $('#countryId_err').html('Please Select Country');
            $('#countryId').on('click', function () {
                $('#countryId_err').html('');
            });
        }
        
        if($('#stateId').val()==''){
            flag = false;
            $('#stateId_err').html('Please Select State');
            $('#stateId').on('click', function () {
                $('#stateId_err').html('');
            });
        }
        
        if($('#districtId').val()==''){
            flag = false;
            $('#districtId_err').html('Please Select District');
            $('#districtId').on('click', function () {
                $('#districtId_err').html('');
            });
        }

        return flag;
    }
</script>
@endsection