@if($currency->count())
    <h2>  {{ _t('settings.currency_settings') }} </h2>
    <form class="updateCurrency">
{{--        <div class="row" style="margin: 0px;">--}}
{{--            <div class="col-sm-3">--}}
{{--                <label class="title">{{ _t('settings.default_currency') }}</label>--}}
{{--            </div>--}}
{{--            <div class="col-sm-4">--}}
{{--                <select name="defaultCurrency" class="select2" style="margin-bottom: 5px;">--}}
{{--                    <option value="">{{ _t('settings.select_currency') }} </option>--}}
{{--                    @foreach(currency()->getActiveCurrencies() as $name)--}}
{{--                        <option @if(getConfig('localization', 'default_currency') == $name['code'] ) selected--}}
{{--                                @endif value="{{ $name['code'] }}"> {{ $name['name'] }} </option>--}}
{{--                    @endforeach--}}
{{--                </select>--}}
{{--            </div>--}}
{{--            <div class="col-sm-2">--}}
{{--                <button type="button" class="btn green updateDefaultCurrency ladda-button"--}}
{{--                        data-style="contract">{{ _t('settings.save') }}</button>--}}
{{--            </div>--}}
{{--        </div>--}}
        <div class="row" style="margin: 0px;">
            <div class="col-sm-3">
                <button type="button" class="btn secondaryButton addButton"
                        data-id="editCurrency">{{ _t('settings.add') }}</button>
            </div>
        </div>

        <div class="row table-responsive" style="margin: 0px;">
            <table class="table table-striped table-bordered table-hover CurrencyList-table">
                <thead>
                <tr>
                    <th> {{ _t('settings.currency') }}</th>
                    <th> {{ _t('settings.code') }}</th>
                    <th> {{ _t('settings.symbol') }}</th>
                    <th> {{ _t('settings.exchange_rate') }}</th>
                    <th> {{ _t('settings.status') }}</th>
                    <th> {{ _t('settings.action') }}</th>
                </tr>
                </thead>
                <tbody>
                @foreach($currency as $item)
                    <tr>
                        <td> {{ $item->name }} </td>
                        <td> {{ $item->code }} </td>
                        <td> {{ $item->symbol }} </td>
                        <td> {{ $item->exchange_rate }} </td>
                        <td>
                            @if(currency()->config('default') == $item->code)
                                <input type="hidden" value="{{ $item->code }}" name="currencyData[]">
                            @else
                                <input type="checkbox" class="hybridSwitch" @if($item->active == 1) checked @endif
                                value="{{ $item->code }}" name="currencyData[]">
                            @endif
                        </td>
                        <th>
                            @if(currency()->config('default') != $item->code)
                                <button type="button" class="btn btn-primary editCurrency"
                                        data-id="{{$item->id}}"><i class="fa fa-edit"></i>
                                </button>
                            @endif
                        </th>
                    </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="editCurrency">{{ _t('settings.save') }}</button>
        </div>
    </form>
@else
    {{ _t('settings.no_currency_found') }}
@endif

<script>

    $(function () {
        //select2
        $('select').select2();
        Ladda.bind('.ladda-button');
        $('.hybridSwitch').prettySwitch();
    });

    $('.changeCurrencyStatus').prettySwitch({});

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

    function updateCurrency(slug) {
        $.post("{{ route('currency.update') }}", $('.updateCurrency').serialize(), function (response) {
            $('.settings').html(response);
            Ladda.stopAll();
            toastr.success("{{ _t('settings.currency_updated_successfully') }}");
            loadLocalisation(slug)
        }).fail(function () {
            toastr.error("{{ _t('settings.currency_updation_failed') }}");
        });
    }

    $('.addButton').click(function () {
        $.post("{{ route('currency.add') }}", function (response) {
            $('.settingsWrapper').html(response);
            Ladda.stopAll();
        });
    });

    $('.editCurrency').click(function () {
        var currencyId = $(this).attr('data-id');
        simulateLoading('.settingsWrapper');
        $.post("{{ route('currency.add') }}", {currencyId: currencyId}, function (response) {
            $('.settingsWrapper').html(response);
        })
    });

    $('.updateDefaultCurrency').click(function () {
        $.post("{{ route('currency.updateDefaultCurrency') }}", $('.updateCurrency').serialize(), function (response) {
            toastr.success("{{ _t('settings.default_currency_updated_successfully') }}");
            Ladda.stopAll();
        }).fail(function () {
            toastr.error("{{ _t('settings.default_currency_updation_failed') }}");
            Ladda.stopAll();
        });
    });
</script>
<style>

    form.updateCurrency {
        background-color: #f1f2f7;
        padding: 15px 0px;
    }

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

    form.updateCurrency button.btn.addButton {
        margin: 5px 0px;
    }

    form.updateCurrency button.editButton {
        float: right;
        margin: 0px 10px;
    }

    label.switch.CurrencyAction, label.switch.CurrencyMore {
        position: relative;
        display: inline-block;
        height: 62px;
        width: 63px;
        margin: 0;
        min-height: 0px;
        padding: 0px;
        vertical-align: top;
        margin-top: -14px;
    }

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    label.switch.CurrencyAction input:checked + .slider {
        background-color: #32c5d2;
    }

    label.switch.CurrencyMore input:checked + .slider {
        background-color: #2196f3;
    }

    label.switch.CurrencyAction .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #cacaca;
        -webkit-transition: .4s;
        transition: .4s;
        border: 0;
        padding: 0;
        display: block;
        margin: 22px 5px;
        min-height: 10px;
        border-radius: 25px !important;
    }

    label.switch.CurrencyMore .slider {
        background-color: #b7b4b5;
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        -webkit-transition: .4s;
        transition: .4s;
        border: 0;
        padding: 0;
        display: block;
        margin: 17px 5px;
        min-height: 11px;
        border-radius: 25px !important;
    }

    label.switch.CurrencyAction .slider:before, label.switch.CurrencyMore .slider:before {
        position: absolute;
        content: "";
        height: 22px;
        width: 20px;
        left: 4px;
        bottom: -2px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

    label.switch.CurrencyAction input:checked + .slider {
        background-color: #32c5d2;

    }

    input:focus + .slider {
        box-shadow: 0 0 1px transparent;
    }

    input:checked + .slider:before {
        -webkit-transform: translateX(26px);
        -ms-transform: translateX(26px);
        transform: translateX(26px);
    }

    /* Rounded sliders */
    .slider.round {
        border-radius: 34px;
    }

    .slider.round:before {
        border-radius: 50%;
    }
</style>