@extends('layouts.admin')

@section('content')
<!--App-Content-->
<div class="app-content my-3 my-md-5">
    <div class="side-app">
        <x-page.header>Country Settings</x-page.header>
        <div class="row">
            <div class="col-md-12">

            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Countries List</h3>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table
                                class=" table table-striped table-bordered table-vcenter text-nowrap" id="countries-table">
                                <thead>
                                    <tr>

                                        <th style="text-align: center;">Id</th>
                                        <th style="text-align: center;">country name</th>
                                        <th style="text-align: center;">phone code</th>
                                        <th style="text-align: center;">action</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @php
                                        $count=0
                                    @endphp
                                        @foreach ($countries as $country)
                                        <tr>
                                         <td style="text-align: center;">{{++$count}}</td>
                                         <td style="text-align: center;">{{$country->nicename}}</td>
                                         <td style="text-align: center;">{{$country->phonecode}}</td>
                                         <td style="text-align: center;">
                                            <div class="">
                                                <label class="form-swich">
                                                <input type="checkbox" value="{{$country->is_active ? '1' : '0'}}" {{ $country->is_active ? 'checked' : ''}}  country-id={{$country->id}} id="is_active_{{$country->id}}" name="is_active" class="form-switch-input">
                                                <span class="form-switch-indicator"></span>
                                                <span class="form-switch-description"></span>
                                                </label>

                                            </div>
                                        </td>
                                         <td style="text-align: center;" class="d-flex">
                                            {{-- <div data-bs-toggle="tooltip"  data-bs-original-title="Edit" class="mx-2">
                                                <button type="button"
                                                    value="{{$country->id}}"
                                                    class="modal-effect btn btn-outline-light btn-sm waves-effect waves-light edit"
                                                    data-bs-effect="effect-sign" data-bs-toggle="modal" data-bs-original-title="Edit" data-bs-target="#edit"><i
                                                        class="fa fa-edit-2 fs-16"></i></button>
                                            </div> --}}
                                            <a href="javascript:void(0)" onClick="confirmDelete(event,{{$country->id}})" class="btn btn-outline-light btn-sm waves-effect waves-light"
                                                        data-bs-toggle="tooltip" data-bs-original-title="Delete"
                                                        title='Delete'>
                                                        <i class="fa fa-trash fs-16"></i>
                                                <form method="POST" action="{{ route('admin.system-settings.destroy', $country->id) }}" id="delete-form-{{$country->id}}">
                                                    @csrf
                                                    <input name="_method" type="hidden" value="DELETE">

                                                </form>
                                            </a>

                                        </td>

                                        </tr>

                                         @endforeach

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('admin-js')
    <script>
        $(document).ready(function(){
            $('#countries-table').dataTable( {

              "drawCallback": function( settings ) {
                    const country_id = $('.form-switch-input').attr('country-id');
                    // update country status
                    $('.form-switch-input').on('change', function () {
                        $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                        }
                        });
                        const country_id = $(this).attr('country-id');
                        var formData = new FormData();
                        var checkbox_value=jQuery('#is_active_'+country_id).val()

                        if(checkbox_value == 1){
                            checkbox_value = 0
                        }else{
                            checkbox_value = 1
                        }

                        formData.append('is_active', checkbox_value);

                        $.ajax({
                            url: "country-settings/updateCountryStatus/" + country_id,
                            type: 'POST',
                            processData: false,
                            contentType: false,
                            cache: false,
                            data: formData,
                            enctype: 'multipart/form-data',
                            success: function (data) {
                                notif({
                                    type: "success",
                                    msg: "The Status Updated Successfully",
                                    position: "center",
                                    opacity: 0.8,
                                    autohide: true
                                    });
                                    setTimeout(location.reload.bind(location), 1000);
                            }
                        });
                    });
                }
            })
        })

    </script>
@endsection