@extends('layouts.master')
@section('css')
    <link rel="stylesheet" type="text/css" href="{{ asset('plugins/table/datatable/datatables.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('plugins/table/datatable/dt-global_style.css') }}">
  <style>  .pointer {
     cursor:pointer;
  }
  </style>
@stop
@section('content')
   <!--  BEGIN CONTENT AREA  -->
   <div id="content" class="main-content">
     <!-- Page-Title -->
     <div class="page-title-box">
        <div class="btn-group float-right">
            <ol class="breadcrumb hide-phone p-0 m-0">
                <li class="breadcrumb-item active"><a href="{{ route('dashboard') }}">{!! __('Dashboard') !!}</a></li>
                <li class="breadcrumb-item active">{!! __('countries_list') !!}</li>
            </ol>
        </div>
    </div>
            <div class="layout-px-spacing">

                <div class="row layout-top-spacing" id="cancel-row">
                
                    <div class="col-xl-12 col-lg-12 col-sm-12  layout-spacing">
                  
                        <div class="widget-header">
                        <div class="row">
                            <div class="col-xl-12 col-md-12 col-sm-12 col-12">
                                <h4>{!! __('countries_list') !!}</h4>
                            </div>                 
                        </div>
                    </div>
                        <div class="widget-content widget-content-area br-6">
                            <table id="zero-config" class="table dt-table-hover" style="width:100%">
                                <thead>
                                    <tr>
                                        <th>S.No</th>
                                        <th>Country</th>
                                        <th>Country Code</th>
                                        <th>Dial Code</th>
                                        <th>Active/Deactive</th>
                                    </tr>
                                </thead>
                                <tbody>
                                @foreach ($country->all() as $countries)
                                    <tr>
                                    <td>{{$loop->iteration}}</td>
                                        <td>{{$countries->country_name}}</td>
                                        <td>{{$countries->sortname}}</td>
                                        <td>{{'+'.$countries->dial_code}}</td>
                                        <td>   
                                                <label class="switch">
                                                <input type="checkbox" onchange="changeCountryStatus(this, {{ $countries->id }});" {{($countries->is_activated) ? 'checked' : ''}}>
                                                <span class="slider round"></span>
                                                </label>   
                                     </td>
                                   
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                    
                </div>

                </div>
      
        <!--  END CONTENT AREA  -->
    @section('script')

    <script src="{{ asset('plugins/table/datatable/datatables.js') }}"></script>

    <script>
        $('#zero-config').DataTable({
            "dom": "<'dt--top-section'<'row'<'col-12 col-sm-6 d-flex justify-content-sm-start justify-content-center'l><'col-12 col-sm-6 d-flex justify-content-sm-end justify-content-center mt-sm-0 mt-3'f>>>" +
        "<'table-responsive'tr>" +
        "<'dt--bottom-section d-sm-flex justify-content-sm-between text-center'<'dt--pages-count  mb-sm-0 mb-3'i><'dt--pagination'p>>",
            "oLanguage": {
                "oPaginate": { "sPrevious": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>', "sNext": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>' },
                "sInfo": "Showing page _PAGE_ of _PAGES_",
                "sSearch": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>',
                "sSearchPlaceholder": "Search...",
               "sLengthMenu": "Results :  _MENU_",
            },
            "stripeClasses": [],
            "lengthMenu": [7, 10, 20, 50],
            "pageLength": 7 
        });
    </script> 
  <script>
function changeCountryStatus(_this, id) {
    var status = $(_this).prop('checked') == true ? 1 : 0;
    $.ajax({
        url: `country/changeCountryStatus`,
        type: 'post',
        data: {
            "_token": "{{ csrf_token() }}",
            id: id,
            status: status 
        },
        success: function (result) {
            alert(result.success);
        }
    });
}


</script>
    @stop
@stop