<link rel="stylesheet" href="{{ asset('vendor/webkul/web-form/assets/css/web-form.css') }}">

<style>
    button.btn {
        background-color:<?= $webForm->form_submit_button_color ?> !important;
    }

    h1.web-form-title {
        color: <?= $webForm->form_title_color ?> !important;
    }

    .attribute-label {
        color: <?= $webForm->attribute_label_color ?> !important;
    }

    form#krayinWebForm {
        background-color:<?= $webForm->form_background_color ?>;
    }

    .anonymous-layout-container {
        background-color:<?= $webForm->background_color ?>;
    }

    .loaderDiv {
        z-index: 20;
        position: absolute;
        top: 0;
        left:-5px;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.4);
    }

    .imgSpinner {
        position: absolute;
        border: 16px solid #f3f3f3; /* Light grey */
        border-top: 16px solid #3498db; /* Blue */
        border-radius: 50%;
        width: 50px;
        height: 50px;
        top: 40%;
        left:45%;
        animation: spin 2s linear infinite;
	}
	
	@keyframes spin {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}
</style>


<div class="anonymous-layout-container">
    <div class="center-box">
        <section id="loaderDiv">
            <div id="imgSpinner"></div>
        </section>
        <div class="adjacent-center">
            <div class="title-box">
            <img src="{{ url('vendor/webkul/admin/assets/images/logo.svg') }}" alt="krayin">
                <h1 class="web-form-title">{{ $webForm->title }}</h1>
                <p>{{ $webForm->description }}</p>
            </div>

            <div class="panel">
                <div class="panel-body">
                    <div class="alert-wrapper" style="display: none">
                        <div class="alert success">
                            <p>This is message</p>
                            <span class="icon close-white-icon"></span>
                        </div>
                    </div>

                    <form id="krayinWebForm" method="post">
                        @foreach ($webForm->attributes as $attribute)
                            @php
                                $parentAttribute = $attribute->attribute;

                                $fieldName = $parentAttribute->entity_type . '[' . $parentAttribute->code . ']';
                            @endphp

                            <div class="form-group {{ $parentAttribute->type }}">
                                <label class="attribute-label {{ $attribute->is_required ? 'required' : '' }}" for="{{ $attribute->code }}" >
                                    {{ $attribute->name ?? $parentAttribute->name }}
                                </label>

                                @switch($parentAttribute->type)
                                    @case('text')
                                        <input
                                        type="text"
                                        name="{{ $fieldName }}"
                                        class="control"
                                        placeholder="{{ $attribute->placeholder }}"
                                        id="{{ $fieldName }}"
                                        {{ $attribute->is_required ? 'required' : '' }}
                                        />

                                        @break;

                                    @case('date')
                                    @case('datetime')
                                        <input
                                        type="text"
                                        name="{{ $fieldName }}"
                                        class="control"
                                        id="{{ $fieldName }}"
                                        {{ $attribute->is_required ? 'required' : '' }}
                                        />

                                        @break;

                                    @case('textarea')
                                        <textarea
                                        name="{{ $fieldName }}"
                                        class="control"
                                        id="{{ $fieldName }}"
                                        {{ $attribute->is_required ? 'required' : '' }}
                                        ></textarea>

                                        @break;

                                    @case('email')
                                        <input
                                            type="email"
                                            name="{{ $fieldName }}[0][value]"
                                            class="control"
                                            placeholder="{{ $attribute->placeholder }}"
                                            id="{{ $fieldName }}"
                                            {{ $attribute->is_required ? 'required' : '' }}
                                        />

                                        <input
                                        type="hidden"
                                        name="{{ $fieldName }}[0][label]"
                                        class="control"
                                        value="work"
                                        />

                                        @break;

                                    @case('phone')
                                        <input
                                        type="text"
                                        name="{{ $fieldName }}[0][value]"
                                        class="control"
                                        placeholder="{{ $attribute->placeholder }}"
                                        id="{{ $fieldName }}"
                                        {{ $attribute->is_required ? 'required' : '' }}
                                        />

                                        <input
                                            type="hidden"
                                            name="{{ $fieldName }}[0][label]"
                                            class="control"
                                            value="work"
                                            />

                                        @break;

                                    @case('select')
                                    @case('lookup')
                                        <select
                                        class="control"
                                        id="{{ $fieldName }}"
                                        name="{{ $fieldName }}"
                                        {{ $attribute->is_required ? 'required' : '' }}
                                        >
                                            @php
                                                $options = $parentAttribute->lookup_type
                                                    ? app('Webkul\Attribute\Repositories\AttributeRepository')->getLookUpOptions($parentAttribute->lookup_type)
                                                    : $parentAttribute->options()->orderBy('sort_order')->get();
                                            @endphp

                                            <option value="" selected="selected" disabled="disabled">{{ __('admin::app.settings.attributes.select') }}</option>

                                            @foreach ($options as $option)
                                                <option value="{{ $option->id }}">
                                                    {{ $option->name }}
                                                </option>
                                            @endforeach

                                        </select>

                                        @break;

                                    @case('multiselect')
                                        <select class="control" id="{{ $fieldName }}" name="{{ $fieldName }}[]" multiple>

                                            @php
                                                $options = $parentAttribute->lookup_type
                                                    ? app('Webkul\Attribute\Repositories\AttributeRepository')->getLookUpOptions($parentAttribute->lookup_type)
                                                    : $parentAttribute->options()->orderBy('sort_order')->get();
                                            @endphp

                                            @foreach ($options as $option)
                                                <option value="{{ $option->id }}">
                                                    {{ $option->name }}
                                                </option>
                                            @endforeach

                                        </select>

                                        @break;

                                    @case('checkbox')
                                        <div class="checkbox-control">
                                            @php
                                                $options = $parentAttribute->lookup_type
                                                    ? app('Webkul\Attribute\Repositories\AttributeRepository')->getLookUpOptions($parentAttribute->lookup_type)
                                                    : $parentAttribute->options()->orderBy('sort_order')->get();
                                            @endphp

                                            @foreach ($options as $option)
                                                <span class="checkbox">
                                                    <input
                                                        type="checkbox"
                                                        name="{{ $fieldName }}[]"
                                                        value="{{ $option->id }}"
                                                    />
                                        
                                                    <label class="checkbox-view" style="display: inline;"></label>
                                                    {{ $option->name }}
                                                </span>
                                            @endforeach
                                        </div>
                                        
                                        @break;

                                    @case('file')
                                    @case('image')
                                        <input
                                        type="file"
                                        name="{{ $fieldName }}"
                                            class="control"
                                            id="{{ $fieldName }}"
                                            style="padding-top: 5px;"
                                            />

                                        @break;

                                    @case('boolean')
                                        <select class="control" id="{{ $fieldName }}" name="{{ $fieldName }}">
                                            <option value="1">Yes</option>
                                            <option value="0">No</option>
                                        </select>

                                        @break;

                                    @case('address')

                                        @break;
                                @endswitch
                            </div>
                        @endforeach

                        <div class="button-group">
                            <button type="submit" class="btn btn-xl btn-primary">
                                {{ $webForm->submit_button_label }}
                            </button>
                        </div>

                    </form>
                </div>
            </div>
        </div>
    </div>
</div>