@extends('admin.layouts.app')
@section('panel')
    <div class="row mb-none-30">
        <div class="col-lg-12 col-md-12 mb-30">
            <div class="form-group col-md-12">
                <div class="alert alert-danger p-3">
                    @lang("Please be very careful about changing the File Upload Server. If you change the setting of File Upload Server, make sure to copy all product files to your new server. Otherwise, anything related to the product won't be shown on the site.")
                </div>
            </div>
            <div class="card">
                <div class="card-body">
                    <form method="POST">
                        @csrf
                        <div class="row">
                            <div class="col-xl-3 col-sm-6">
                                <div class="form-group ">
                                    <label> @lang('Site Title')</label>
                                    <input class="form-control" type="text" name="site_name" required
                                           value="{{ gs('site_name') }}">
                                </div>
                            </div>
                            <div class="col-xl-3 col-sm-6">
                                <div class="form-group ">
                                    <label>@lang('Currency')</label>
                                    <input class="form-control" type="text" name="cur_text" required
                                           value="{{ gs('cur_text') }}">
                                </div>
                            </div>
                            <div class="col-xl-3 col-sm-6">
                                <div class="form-group ">
                                    <label>@lang('Currency Symbol')</label>
                                    <input class="form-control" type="text" name="cur_sym" required
                                           value="{{ gs('cur_sym') }}">
                                </div>
                            </div>
                            <div class="form-group col-xl-3 col-sm-6">
                                <label class="required"> @lang('Timezone')</label>
                                <select class="select2 form-control" name="timezone">
                                    @foreach ($timezones as $key => $timezone)
                                        <option value="{{ @$key }}" @selected(@$key == $currentTimezone)>{{ __($timezone) }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group col-xl-3 col-sm-6">
                                <label class="required"> @lang('Site Base Color')</label>
                                <div class="input-group">
                                    <span class="input-group-text p-0 border-0">
                                        <input type='text' class="form-control colorPicker"
                                               value="{{ gs('base_color') }}">
                                    </span>
                                    <input type="text" class="form-control colorCode" name="base_color"
                                           value="{{ gs('base_color') }}">
                                </div>
                            </div>
                            <div class="form-group col-xl-3 col-sm-6">
                                <label> @lang('Record to Display Per page')</label>
                                <select class="select2 form-control" name="paginate_number"
                                        data-minimum-results-for-search="-1">
                                    <option value="20" @selected(gs('paginate_number') == 20)>@lang('20 items per page')</option>
                                    <option value="50" @selected(gs('paginate_number') == 50)>@lang('50 items per page')</option>
                                    <option value="100" @selected(gs('paginate_number') == 100)>@lang('100 items per page')</option>
                                </select>
                            </div>

                            <div class="form-group col-xl-3 col-sm-6 ">
                                <label class="required"> @lang('Currency Showing Format')</label>
                                <select class="select2 form-control" name="currency_format"
                                        data-minimum-results-for-search="-1">
                                    <option value="1" @selected(gs('currency_format') == Status::CUR_BOTH)>@lang('Show Currency Text and Symbol Both')</option>
                                    <option value="2" @selected(gs('currency_format') == Status::CUR_TEXT)>@lang('Show Currency Text Only')</option>
                                    <option value="3" @selected(gs('currency_format') == Status::CUR_SYM)>@lang('Show Currency Symbol Only')</option>
                                </select>
                            </div>
                            <div class="form-group col-xl-3 col-sm-6 ">
                                <label>@lang('File Upload Server')</label>
                                <select class="form-control select2" name="file_server"
                                        data-minimum-results-for-search="-1">
                                    <option value="{{ Status::SERVER_CURRENT }}" @selected(gs('file_server') == Status::SERVER_CURRENT)>
                                        @lang('Current Server')
                                    </option>
                                    <option value="{{ Status::SERVER_FTP }}" @selected(gs('file_server') == Status::SERVER_FTP)>
                                        @lang('FTP')
                                    </option>
                                    <option value="{{ Status::SERVER_WASABI }}" @selected(gs('file_server') == Status::SERVER_WASABI)>
                                        @lang('Wasabi')
                                    </option>
                                    <option value="{{ Status::SERVER_DIGITAL_OCEAN }}" @selected(gs('file_server') == Status::SERVER_DIGITAL_OCEAN)>
                                        @lang('Digital Ocean')
                                    </option>
                                    <option value="{{ Status::SERVER_BACKBLAZE }}" @selected(gs('file_server') == Status::SERVER_BACKBLAZE)>
                                        @lang('Backblaze')
                                    </option>
                                </select>
                                <span class="text--small text--info d-none storage--info"></span>
                            </div>
                            <div class="col-xl-3 col-sm-6">
                                <div class="form-group">
                                    <label>@lang('Referral Commission Fixed')</label>
                                    <div class="input-group">
                                        <input class="form-control" type="number" step="any" name="referral_fixed"
                                               required value="{{ getAmount(gs('referral_fixed')) }}">
                                        <span class="input-group-text">{{ gs('cur_text') }}</span>
                                    </div>
                                    <em class="text--primary text--small"><i class="las la-info-circle"></i>
                                        @lang('Referral commission on purchase product')</em>
                                </div>
                            </div>
                            <div class="col-xl-3 col-sm-6">
                                <div class="form-group">
                                    <label>@lang('Referral Commission Percentage')</label>
                                    <div class="input-group">
                                        <input class="form-control" type="number" step="any" name="referral_percentage"
                                               required value="{{ gs('referral_percentage') }}">
                                        <span class="input-group-text">%</span>
                                    </div>
                                    <em class="text--primary text--small"><i class="las la-info-circle"></i>
                                        @lang('Referral commission on purchase product')</em>
                                </div>
                            </div>
                            <div class="col-xl-3 col-sm-6">
                                <div class="form-group">
                                    <label>@lang('Minimum Number of Reviews to Display')</label>
                                    <input class="form-control" type="number" step="any" name="min_reviews" required
                                           value="{{ gs('min_reviews') }}">
                                </div>
                            </div>
                            <div class="col-xl-3 col-sm-6">
                                <div class="form-group">
                                    <label>@lang('Trending Products Count')</label>
                                    <input class="form-control" type="number" name="trending_count" required
                                           value="{{ getAmount(gs('trending_count')) }}">
                                    <em class="text--primary text--small"><i class="las la-info-circle"></i>
                                        @lang('How many products mark as trending')</em>
                                </div>
                            </div>
                            <div class="col-xl-3 col-sm-6">
                                <div class="form-group">
                                    <label>@lang('Preview Video File Size')</label>
                                    <div class="input-group">
                                        <input class="form-control" type="number" name="preview_video_size" required
                                               value="{{ getAmount(gs('preview_video_size')) }}">
                                        <span class="input-group-text">@lang('MB')</span>
                                    </div>
                                    <em class="text--primary text--small"><i class="las la-info-circle"></i>
                                        @lang('Maximum file size for preview video')</em>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <button type="submit" class="btn btn--primary w-100 h-45">@lang('Submit')</button>
                        </div>

                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection


@push('script-lib')
    <script src="{{ asset('assets/admin/js/spectrum.js') }}"></script>
@endpush

@push('style-lib')
    <link rel="stylesheet" href="{{ asset('assets/admin/css/spectrum.css') }}">
@endpush

@push('script')
    <script>
        (function($) {
            "use strict";


            $('.colorPicker').spectrum({
                color: $(this).data('color'),
                change: function(color) {
                    $(this).parent().siblings('.colorCode').val(color.toHexString().replace(/^#?/, ''));
                }
            });

            $('.colorCode').on('input', function() {
                var clr = $(this).val();
                $(this).parents('.input-group').find('.colorPicker').spectrum({
                    color: clr,
                });
            });
        })(jQuery);
    </script>
@endpush