@if($country->count())
    <h2> {{ _t('settings.country_settings') }} </h2>
    <form class="updateCountry">
        <div class="row state-sortOrder">
            <div class="col-sm-2">
                <label class="title">{{ _t('settings.sort_order') }}</label>
            </div>
            <div class="col-sm-10">
                <div class="twoWaySwitch">
                    <label>{{ _t('settings.alphabetic') }}</label>
                    <input type="hidden" @if(getConfig('localization', 'country_order') == 'sort_order') checked @endif
                    name="countryOrder" class="prettySwitch">
                    <label>{{ _t('settings.sort_order') }}</label>
                </div>
            </div>
        </div>
        <div class="row table-responsive">
            <table class="table table-striped table-bordered table-hover countryList-table">
                <thead>
                <tr>
                    <th>{{ _t('settings.country') }} </th>
                    <th>{{ _t('settings.phonemask') }} </th>
                    <th>{{ _t('settings.sort_order') }} </th>
                    <th>{{ _t('settings.status') }} </th>
                    <th>{{ _t('settings.Action') }} </th>
                </tr>
                </thead>
                <tbody>
                @foreach($country as $country)
                    <tr>
                        <td> {{ $country->name }} </td>
                        <td> {{ $country->phonemask }} </td>
                        <td> {{ $country->sort_order }} </td>
                        <td><input type="checkbox" class="changeCountryStatus" value="{{ $country->code }}"
                                   @if($country->active == 1) checked
                                   @endif id="active" name="country[]"></td>
                        <td>
                            <button type="button" class="btn btn-primary editCountry"
                                    data-id="{{$country->id}}"><i class="fa fa-edit"></i>
                            </button>
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>
        <div class="row" style="margin: 0px;">
            <button type="button" class="btn primaryButton editButton ladda-button" data-style="contract"
                    data-id="Country">{{ _t('settings.save') }}</button>
        </div>
    </form>
@else
    {{ _t('settings.no_country_found') }}
@endif

<script>

    $(function () {
        Ladda.bind('.ladda-button');

        $('.prettySwitch').prettySwitch({
            checkedValue: 'sort_order',
            unCheckedValue: 'alpha',
        });
    });

    $('.editButton').click(function () {
        var slug = $(this).attr('data-id');
        updateCountry(slug);
    });
    $('.changeCountryStatus').prettySwitch({});

    function updateCountry(slug) {
        $.post("{{ route('country.update') }}", $('.updateCountry').serialize(), function (response) {
            $('.settings').html(response);
            Ladda.stopAll();
            toastr.success('updated');
            loadLocalisation(slug);
        }).fail(function () {
            toastr.error('failed');
        });
    }

    $('.editCountry').click(function () {
        var id = $(this).attr('data-id');
        simulateLoading('.settingsWrapper');
        $.get("{{ route('country.edit') }}", {countryId: id}, function (response) {
            $('.settingsWrapper').html(response);
        })
    });
</script>
<style>
    form.updateCountry {
        background-color: #f1f2f7;
    }

    form.updateCountry .row.table-responsive {
        margin: 0px;
        height: 300px;
        overflow-y: auto;
    }

    form.updateCountry .row.table-responsive table.table {
        width: 97%;
        margin: 10px;
        background-color: #fff;
    }

    form.updateCountry button.btn.editButton {
        margin: 10px 15px 10px;
        width: 100px;
    }

    .hybridMLMPrettySwitch {
        border: 2px solid #dadada;
    }
</style>