@extends('../backend/layout/' . $layout)

@section('subhead')
    <title>Settings</title>
@endsection
@section('subcontent')
    <div class="intro-y flex flex-col sm:flex-row items-center mt-8">
        <h2 class="text-lg font-medium mr-auto">Settings</h2>
        <div class="w-full sm:w-auto flex mt-4 sm:mt-0">
        </div>
    </div>
    <div class="grid grid-cols-6 gap-6 mt-5">
        <div class="intro-y col-span-12 lg:col-span-6 box">
            <div class="flex flex-col sm:flex-row items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400">
                <h2 class="font-medium text-base mr-auto">Payment Option</h2>
            </div>
            <div class="p-5">
                <form action="{{ route('settings.payment_option.update') }}" class="validate-form" id="payment_option_form"
                    method="POST">
                    @csrf
                    @method('PUT')
                    <ul class="nav nav-link-tabs" role="tablist">
                        @foreach ($paymentOptions as $key => $paymentOption)
                            <li id="{{ $key }}" class="nav-item flex-1" role="presentation">
                                <button
                                    class="nav-link w-full py-2 capitalize {{ $key == 'cash_on_delivery' ? 'active' : '' }}"
                                    data-tw-toggle="pill" data-tw-target="#{{ $key }}" type="button"
                                    role="tab" aria-controls="{{ $key }}" aria-selected="true">
                                    {{ $paymentOption['name'] }}
                                </button>
                            </li>
                        @endforeach
                    </ul>
                    <div class="tab-content mt-5">
                        @foreach ($paymentOptions as $key => $paymentOption)
                            <div id="{{ $key }}"
                                class="tab-pane leading-relaxed {{ $key == 'cash_on_delivery' ? 'active' : '' }}"
                                role="tabpanel" aria-labelledby="example-5-tab">
                                <div class="mt-2">
                                    <input id="{{ $key }}_option" class="form-check-input" type="checkbox"
                                        value="true" name="{{ $key }}_option" @checked($paymentOption['enable'])>
                                    <label class="form-check-label capitalize"
                                        for="{{ $key }}_option">Enable</label>
                                    @if (isset($paymentOption['credentials']))
                                        <div class="grid grid-cols-2 gap-4">
                                            <div class="input-form mb-4">
                                                <label class="crud-form-1">Client ID</label>
                                                <input type="text" name="{{ $key }}_id"
                                                    id="{{ $key }}_id" class="form-control w-full"
                                                    value="{{ $paymentOption['credentials']['id'] }}"
                                                    data-pristine-required-if="{{ $key }}_option">
                                                <div id="error-{{ $key }}_id"
                                                    class="form__input-error text-danger mt-1"></div>
                                            </div>
                                            <div class="input-form mb-4">
                                                <label class="crud-form-1">Client Secret</label>
                                                <input type="text" name="{{ $key }}_secret"
                                                    id="{{ $key }}_secret" class="form-control w-full"
                                                    value="{{ $paymentOption['credentials']['secret'] }}">
                                                <div id="error-{{ $key }}_id"
                                                    class="form__input-error text-danger mt-1"></div>
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        @endforeach
                    </div>
                    <button type="submit" class="btn btn-primary mt-5">Update</button>
                </form>
            </div>
        </div>
        <div class="intro-y col-span-12 lg:col-span-6 box">
            <div class="flex flex-col sm:flex-row items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400">
                <h2 class="font-medium text-base mr-auto">Currency rates</h2>
            </div>
            <form action="{{ route('settings.currency_rates') }}" method="post">
                @csrf
                <table class="table table-striped">
                    @foreach($currencies as $key => $currency)
                        <tr>
                            <td>
                                <div class="input-group mt-2">
                                    <div class="input-group-text">{{ $currency->symbol }}</div>
                                    <input type="text" name="currencies[{{$key}}][rate]" class="form-control" placeholder="Rate" value="{{ $currency->rate }}" aria-label="Amount (to the nearest dollar)">
                                    <div class="input-group-text">{{ $currency->name }}</div>
                                </div>
                                <input type="hidden" name="currencies[{{$key}}][id]" value="{{ $currency->id }}">
                            </td>
                        </tr>
                    @endforeach
                    <tr>
                        <td>
                            <input type="submit" value="Update" class="btn btn-primary">
                        </td>
                    </tr>
                </table>
            </form>
        </div>
        <div class="intro-y col-span-12 lg:col-span-6 box">
            <div class="intro-y col-span-12 lg:col-span-6 box">
                <div class="flex flex-col sm:flex-row items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400">
                    <h2 class="font-medium text-base mr-auto">Shipping Calculation</h2>
                    <div class="form-check form-switch w-full sm:w-auto sm:ml-auto mt-3 sm:mt-0">
                        <form class="backUp" method="post">
                            @csrf
                            <input type="checkbox" class="form-check-input change-status" name="shipping_status" id="shipping_status" {{ $shipping_status->value == "true" ? 'checked' : '' }}>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="intro-y col-span-12 lg:col-span-6 box">
            <div class="flex flex-col sm:flex-row items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400">
                <h2 class="font-medium text-base mr-auto">Database Backup</h2>
                <div class="form-check form-switch w-full sm:w-auto sm:ml-auto mt-3 sm:mt-0">
                    <form class="backUp" method="post">
                        @csrf
                        <button type="button" id="backup_now" class="btn btn-primary">Backup Now</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
<script src="{{ asset(mix('vendors/jquery/jquery.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/repeater/jquery.repeater.min.js')) }}"></script>
    <script>
        let shippingStatusRoute = '{{ route('shipping.status_change') }}'; 
        $(function() {
            Pristine.addValidator("required-if", function(value, element) {
                // here `this` refers to the respective input element
                let isEnabled = $('#' + element).is(':checked')
                if(isEnabled) {
                    return value != ''
                }
                return true;

            }, "This field is required", 5, false);

            $(".validate-form").each(function() {
                let pristine = new Pristine(this, {
                    classTo: "input-form",
                    errorClass: "has-error",
                    errorTextParent: "input-form",
                    errorTextClass: "text-danger",
                });

                $(this).on("submit", function(e) {
                    e.preventDefault();
                    if (pristine.validate()) {
                        e.currentTarget.submit();
                    }
                });

            });

            var backupDownload = '{{ route('settings.database_backup') }}';

            $("#backup_now").click(function(){
                btnLoader('#backup_now')
                $('#backup_now').prop('disabled', true);
                $.ajax({
                        url: backupDownload,
                        type: "POST",
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function (response) {
                            if(response.status == 1 ){
                                $('#backup_now').html('Backup Now')
                                $('#backup_now').prop('disabled', false);
                                successNotification(response.message);
                            }
                        }
                    });
            });

            $('body').on('click', '.change-status', function (event) {
            $.ajax({
                type: "POST",
                url: shippingStatusRoute,
                dataType: "json",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function (response) {
                    if(response.status == 1 ){
                        successNotification(response.message);
                    }
                }
            });
        });

        });
    </script>
@endsection