@extends('modal_pages.base')
<style>
    .listFlag{
        height: 20px;
        border-radius: 50%;
        width: 20px;
        margin-right: 5px;
    }
</style>
@section('main')
 
    <div class="container mt-3" style="background-color: white; border-radius: 6px;">
        <div class="row">
            <div class="co-md-12 p-3">
                <div class="form-icon position-relative" style="display:flex;">
                    <i class="fa fa-search ms-3" style="position: absolute; margin-top: 14px; font-size: 13px;"></i>
                    <input type="text" class="form-control search-box" id="search_add" placeholder="Search" name="" required="" style="padding: 0.4rem 0.9rem 0.4rem 2.5rem !important; background: linear-gradient(to bottom, #FFF 0%,#FFF 55%,#eeedf1 80%,#f5f5f5 100%); font-size: 13px;">
                </div>  
                <div class="load_list_add"></div>
                {{-- <table class="table table-bordered list_table mt-3">
                    <thead>
                        <tr>
                            <th class="text-center" style="width: 13%;">Sl</th>
                            <th>Country</th>
                            <th class="text-center"><i class="fa fa-cog"></i></th>
                        </tr>
                    </thead>
                    <tbody style="border-style: dashed;">
                        <tr> 
                            <td class="text-center" style="font-size: 11px;">1</td>
                            <td style="font-size: 11px;">
                                <img src="{{ asset('web/images/au.svg') }}" alt="" style="height: 20px; border-radius: 50%; width: 20px; margin: 3px;">
                                Australia
                            </td>
                            <td class="text-center" style="font-size: 11px;">
                                <div class="form-check form-switch" id="">
                                    <input class="form-check-input" type="checkbox" name="" value="" style="height:18px; width: 30px; position: absolute;">
                                    <label class="form-check-label" for=""></label>
                                </div>
                            </td>  
                        </tr>
                    </tbody>
                </table>  --}}
            </div>
        </div> 
    </div>
    <div class="container">
    <div class="col-md-12 text-end">
            <button type="button" class="btn btn1 mt-3 done_btn" data-dismiss="modal"  style="padding: 3px 18px;">Done</button>
        </div>
    </div>
 
    <input type="hidden" value="{{url('/')}}" id="base">
<script>
    
    $(function(){
        // $('.select2').select2();
        $('#modal_page_footer').hide();
        
        $(document).ready(function(){
            load_list_add(0);
        });
        $('#search_add').on('keyup', function(){
            var search = encodeURIComponent($('#search_add').val().trim());
            if(search.length == 0){
                load_list_add(0);
            }else{
            load_list_add(search);
            }
        }); 

        function load_list_add(text){ 
            var base = $('#base').val();
            $.get(base+'/admin/dashboard/load_country_list/'+text, function(data) { 
                $('.load_list_add').html(data);
            });
        }

       
    });

    $(document).ready(function(){
        $('.done_btn').on('click', function(text){
            window.location.reload(base+'/admin/dashboard');
            //load_list_add(0);
            
        }); 
    });
    </script>
@endsection