@extends('admin.layouts.app')

@section('panel')
    <div class="row mb-none-30">
        <div class="col-lg-12 col-md-12 mb-30">
            <div class="card">
                <div class="card-body">

                    <form action="" method="POST">
                        @csrf
                        <div class="row">
                            
                            <div class="form-group col-md-12">
                                <label class="form-label">@lang('Select Upload Storage')</label>
                                <select class="form-control" name="storage_type">
                                    <option {{ gs('storage_type') == 1 ? 'selected' : '' }} value="1">@lang('Local Storage')</option>
                                    <option {{ gs('storage_type') == 2 ? 'selected' : '' }} value="2">@lang('FTP Storage')</option>
                                    <option {{ gs('storage_type') == 3 ? 'selected' : '' }} value="3">@lang('Wasabi Storage')</option>
                                    <option {{ gs('storage_type') == 4 ? 'selected' : '' }} value="4">@lang('Digital Ocean')</option>
                                </select>
                            </div>
                        </div>

                        <div class="row config">
                        </div>

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

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

@push('script')
    <script>
        $(function() {
            "use strict";
            $('select[name=storage_type]').on('change', function() {
                var val = $(this).val();

                if (val == 1) {
                    $('.config').children().remove();
                } else if (val == 2) {
                    var ftp = `<div class="col-md-4">
                                <div class="form-group">
                                    <label class="required">@lang('FTP Hosting Root Access Path')</label>
                                    <input class="form-control" type="text" name="ftp[host_domain]" placeholder="@lang('https://yourdomain.com/foldername')"
                                           value="{{ @gs('ftp')->host_domain }}" required>
                                    <small class="text-danger">@lang('https://yourdomain.com/foldername')</small>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="required"> @lang('Host')</label>
                                    <input class="form-control" type="text" name="ftp[host]" placeholder="@lang('Host')"
                                           value="{{ @gs('ftp')->host }}" required>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="required">@lang('Username')</label>
                                    <input class="form-control" type="text" name="ftp[username]" placeholder="@lang('Username')"
                                           value="{{ @gs('ftp')->username }}" required>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="required">@lang('Password')</label>
                                    <input class="form-control" type="text" name="ftp[password]" placeholder="@lang('Password')"
                                           value="{{ @gs('ftp')->password }}" required>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="required">@lang('Port')</label>
                                    <input class="form-control" type="text" name="ftp[port]" placeholder="@lang('Port')"
                                           value="{{ @gs('ftp')->port }}" required>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="required">@lang('Upload Root Folder')</label>
                                    <input class="form-control" type="text" name="ftp[root_path]" placeholder="@lang('/html_public/something')" value="{{ @gs('ftp')->root_path }}" required>
                                </div>
                            </div>`;

                    $('.config').html(ftp);
                } else if (val == 3) {
                    var wasabi = `<div class="col-md-4">
                            <div class="form-group">
                                <label class="required">@lang('Driver')</label>
                                <input class="form-control" type="text" name="wasabi[driver]" value="{{ @gs('wasabi')->driver }}" required>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="required"> @lang('Key')</label>
                                <input class="form-control" type="text" name="wasabi[key]" value="{{ @gs('wasabi')->key }}" required>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="required">@lang('Secret')</label>
                                <input class="form-control" type="text" name="wasabi[secret]" value="{{ @gs('wasabi')->secret }}" required>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="required">@lang('Region')</label>
                                <input class="form-control" type="text" name="wasabi[region]" value="{{ @gs('wasabi')->region }}" required>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="required">@lang('Bucket')</label>
                                <input class="form-control" type="text" name="wasabi[bucket]" value="{{ @gs('wasabi')->bucket }}" required>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="required">@lang('Endpoint')</label>
                                <input class="form-control" type="text" name="wasabi[endpoint]" value="{{ @gs('wasabi')->endpoint }}" required>
                            </div>
                        </div>`;
                    $('.config').html(wasabi);
                }else if(val == 4){
                    var digitalOcean = `<div class="col-md-4">
                            <div class="form-group">
                                <label class="required">@lang('Driver')</label>
                                <input class="form-control" type="text" name="digital_ocean[driver]" value="{{ @gs('digital_ocean')->driver }}" required>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="required"> @lang('Key')</label>
                                <input class="form-control" type="text" name="digital_ocean[key]" value="{{ @gs('digital_ocean')->key }}" required>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="required">@lang('Secret')</label>
                                <input class="form-control" type="text" name="digital_ocean[secret]" value="{{ @gs('digital_ocean')->secret }}" required>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="required">@lang('Region')</label>
                                <input class="form-control" type="text" name="digital_ocean[region]" value="{{ @gs('digital_ocean')->region }}" required>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="required">@lang('Bucket')</label>
                                <input class="form-control" type="text" name="digital_ocean[bucket]" value="{{ @gs('digital_ocean')->bucket }}" required>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="required">@lang('Endpoint')</label>
                                <input class="form-control" type="text" name="digital_ocean[endpoint]" value="{{ @gs('digital_ocean')->endpoint }}" required>
                            </div>
                        </div>`;
                    $('.config').html(digitalOcean);
                }
            }).change();

        });
    </script>
@endpush
