@extends('layouts.admin')

@section('script')
    <script src="{{ mix('js/admin/admin-maint.js') }}"></script>

    <script>
(function () {
    const config = @json( config('admin.settings.'.$component_name));
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $('#page-submit-btn').click(function(){

        $('#loading-indicator').show();

        postAjax($(this));
    });

    function getFormValues (name,value) {
        let formValue;
        try{
            const divname = `[name=${name}]:visible`;
            if(!divname){
                return;
            }
            switch (value['type']) {
                case 'file[image]':
                    formValue = $(divname).data('value');
                    break;
                case 'radio':
                    formValue = $(divname + ':checked').val();
                    break;
                case 'checkbox':
                    formValue = $(divname).prop('checked');
                    break;
                case 'text':
                case 'int':
                case 'color':
                case 'datetimerange':
                case 'datetime':
                case 'daterange':
                case 'date':
                default:
                    formValue = $(divname).val();
                    break;
            }

        } catch(e){
            console.log('❌',name,{e})
        }
        return formValue;
    }

    function postAjax(cta) {
        if (cta.hasClass('disabled')) {
            return false;
        }
        let formData = {};
        $.each(config, function(name, settings){
            const fValue = getFormValues(name, settings);
            if (fValue !== null && fValue !== undefined && fValue !== '') {
                formData[name] = fValue;
            }
        });

        try {
            cta.addClass('disabled');
            $.ajax({
                url: '{{ route($ajax_post) }}',
                method: "POST",
                mimeType: "multipart/form-data",
                data: formData,
                // processData: false,
                // contentType: false,
                dataType: 'json',

            }).done(function (response) {
                $('#loading-indicator').hide();

                if (!response.errors) {
                    makeToast('bg-success', 'Project created successfully')


                    const modal = $('#modal_confirmation').modal();

                    modal.find('.btn-confirm').on('click', (event) => {
                        event.preventDefault();
                        typeof response != 'undefined' && typeof response.redirect_url != 'undefined'
                            ? window.location = response.redirect_url
                            : location.reload();
                    })
                    modal.find('.btn-default').on('click', (event) => {
                        event.preventDefault();
                        location.reload();
                    });

                } else {
                    $.each(response.errors, function (name, msg) {
                        makeToast('bg-danger', msg);
                    })
                }
            }).fail(function (response) {
                $('#loading-indicator').hide();
                makeToast('bg-danger', 'Page failed to submit');
            }).always(function () {
                cta.removeClass('disabled');
            });
        } catch (e) {
            $('#loading-indicator').hide();
            console.log('❌', e)
            cta.removeClass('disabled');
        }
    }

    $('.custom-file-input').on('change', function() {
        console.log('changed')
        const btn = $(this);
        btn.addClass('disabled');
        const fileinput =btn.parents('.form-group').find('input');
        const file = fileinput.get(0).files[0];

        console.log(file)
        if (!file) {
            return;
        }
        let formData = new FormData();
        if ( fileinput.attr('name') !=='site_icon' ){
            formData.append('image',file);
        } else {
            formData.append('icon',file);
        }

        $.ajax({
            url: '{{ route('admin.settings.ajax_post_upload_image') }}',
            method: "POST",
            mimeType: "multipart/form-data",
            data: formData,
            processData: false,
            contentType: false,
            dataType: 'json',

        }).done(function(response){
            if(!response.errors){
                makeToast('bg-success', 'Image uploaded successfully');
                if(response['16x16']){
                    btn.parents('.form-group').find('input').data('value', response);
                    $.each(response, function(id, image){
                        let size =  id.split('x')[0];
                        let $img = $(`img[width=${size}][height=${size}]`);
                        if( !!$img && image){
                            $img.attr('src',image.toString()).attr('alt',image);
                        }
                    });
                } else {
                    btn.parents('.form-group').find('input').data('value', response['original']).trigger('keypress');
                    btn.parents('.form-group').find('img').attr('src', response['original']);
                }
            }
        }).fail(function(){
            makeToast('bg-danger', 'Image failed to upload')
        }).always(function(){
            btn.removeClass('disabled');
        });
    });

})();
</script>
@endsection
@section('content')

<section class="content">
    <div class="container-fluid">

        <div class="row">
            <div class="col-sm-12 col-xl-12">
                {{-- <div class="tab-content" id="custom-tabs-four-tabContent">
                    <div class="tab-pane fade show active" id="custom-tabs-four-home" role="tabpanel"> --}}

                        @include('layouts.flashmessage')

                        <form class="form-horizontal" method="POST"
                              {{--      action="{{ route('admin.settings.edit.business_account') }}"--}}
                              autocomplete="off" enctype="multipart/form-data">
                            @csrf

                            @php $form = config('admin.settings.'.$component_name)@endphp

                            @component('admin.components.card',
                             ['header'=>__('admin_setting.labelDetails')])

                                @php $id = 'company_name'; $hasError = $errors->has($id) @endphp
                                @component('admin.components.form_field_50', ['label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                                    <input name="{{$id}}" id="{{$id}}" placeholder="{{$form[$id]['placeholder']}}" type="text" class="form-control" />
                                    @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                                @endcomponent

                                {{-- <div class="row w-50 pb-2" style="padding-left: 7.5px;"> --}}
                                    @php $id = 'subdomain'; $hasError = $errors->has($id) @endphp
                                    @component('admin.components.form_field', ['class' =>'col-sm-3', 'label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                                        <input name="{{$id}}" id="{{$id}}" placeholder="{{$form[$id]['placeholder']}}" type="text" class="form-control" />
                                        @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent

                                    @endcomponent

                                    @php $id = 'domain'; $hasError = $errors->has($id) @endphp
                                    @component('admin.components.form_field', ['class'=>'col-sm-3','label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                                        <select name="{{$id}}" class="form-control">
                                            @foreach (getDomains() as $domain)
                                                <option value="{{ $domain['domain'] }}" {{ ($domain['domain'] === (old('domain')))  ? 'selected' : '' }}>
                                                    {{ $domain['domain'] }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                                    @endcomponent
                                {{-- </div> --}}


                                @php $id = 'campaign_name'; $hasError = $errors->has($id) @endphp
                                @component('admin.components.form_field_50', ['label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                                    <input name="{{$id}}" id="{{$id}}" placeholder="{{$form[$id]['placeholder']}}" type="text" class="form-control" />
                                    @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                                @endcomponent

                                @php $id = 'country'; $hasError = $errors->has($id) @endphp
                                @component('admin.components.form_field_50', ['label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                                    <select name="{{$id}}" class="form-control select2">
                                        @foreach ($countries as $country)
                                            <option value="{{ $country['id'] }}" {{ ($country['id'] === (old('country') ?? $account['country']))  ? 'selected' : '' }}>
                                                {{ $country['name'] }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                                @endcomponent

                                @php $id = 'icon'; $hasError = $errors->has($id) @endphp
                                @component('admin.components.form_field_50', ['label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                                    <div class="input-group">
                                        <input name="{{$id}}" id="{{$id}}"  type="file" class="custom-file-input" accept="image/*">
                                        <label class="custom-file-label mx-0" for="icon">Choose File</label>
                                    </div>
                                    <div class="file-viewer">
                                        {{--                <img src="{{ asset($account['icon']) }}" alt="preview">--}}
                                        <img src="" alt="preview" class="w-100">
                                    </div>
                                    @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                                @endcomponent

                                @component('admin.components.form_field_50', [
                                    'label' => $form[$id = 'is_agency']['label'],
                                    'required' => $form[$id]['req'],
                                    'description' => $form[$id]['descr'],
                                    'hasError' => $hasError = $errors->has($id),
                                    'roles' => $form[$id]['auth'],
                                ])
                                    <select name="{{$id}}" class="form-control select2">
                                        @foreach ([0 => 'No', 1 => 'Yes'] as $choice => $clabel)
                                            <option value="{{ $choice }}" {{ ($choice=== (old($id) ?? $account['is_agency']))  ? 'selected' : '' }}>
                                                {{ $clabel }}
                                            </option>
                                        @endforeach
                                    </select>

                                    @component('admin.components.form_error_msg', ['hasError' => $hasError]){{ $errors->first($id) }}@endcomponent
                                @endcomponent

                            @endcomponent

                            @component('admin.components.card',
                             ['header'=>'Notifications'])
                                @php $id = 'sms_sender_id'; $hasError = $errors->has($id); @endphp
                                @component('admin.components.form_field_50', ['label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                                    <input name="{{$id}}" id="{{$id}}" placeholder="{{$form[$id]['placeholder']}}" type="text" class="form-control" value="SKALE" disabled />
                                    @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                                @endcomponent

                                @php $id = 'no_reply_email'; $hasError = $errors->has($id) @endphp
                                @component('admin.components.form_field_50', ['label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                                    <input name="{{$id}}" id="{{$id}}" placeholder="{{$form[$id]['placeholder']}}" type="text" class="form-control" />
                                    @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                                @endcomponent
                            @endcomponent

                            {{--@component('admin.components.card',--}}
                            {{-- ['header'=>'Business Terms and Policy'])--}}
                            {{--        @php $id = 'tc_link'; $hasError = $errors->has($id) @endphp--}}
                            {{--        @component('admin.components.form_field_50', ['label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])--}}
                            {{--            <input name="{{$id}}" id="{{$id}}" placeholder="{{$form[$id]['placeholder']}}" type="text" class="form-control" />--}}
                            {{--            @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent--}}
                            {{--        @endcomponent--}}
                            {{--@endcomponent--}}

                        </form>
                        <button id="page-submit-btn" type="submit" class="btn btn-info float-left px-5 mb-4 shadow">{{ __('admin_setting.btnSave') }}</button>
                    {{-- </div>
                </div> --}}
            </div>
        </div>
    </div>
    <div id="loading-indicator" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 9999; text-align: center;">
        <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
            <div class="spinner-border text-light" role="status">
                <span class="sr-only">Loading...</span>
            </div>
        </div>
    </div>
</section>

@component('components.utility.modal_confirmation')
    @slot('slot_header')
    Project created successfully
    @endslot
    @slot('slot_body_info')
    Redirect to new project?
    @endslot
@endcomponent
@endsection