@extends('layouts.master')

@section('title', 'Order form settings')

@push('styles')

    <style>
        .select2-container--bootstrap4 .select2-selection {
            background-color: #ffffff !important;
            font-size: 14px !important;
        }

        .select2-container--bootstrap4 .select2-dropdown {
            background-color: #f5f5f5 !important;
            font-size: 14px !important;
        }
    </style>
@endpush

@section('content')

    <div id="order-settings" class="card featured-services mb-5">
        <div class="container" data-aos="fade-up">
            <div class="row justify-content-center">
                <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 text-center p-0 mt-3 mb-2">
                    <div class="px-0 mb-3" style="overflow: auto;">
                        <table class="table table-bordered" id="settings_table" table-for="product_setting">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>{{ __('Column name') }}</th>
                                    <th>{{ __('Field Name') }}</th>
                                    <th>{{ __('Step') }}</th>
                                    <th>{{ __('Width') }}</th>
                                    <th>{{ __('Edit Ability') }}</th>
                                    <th>{{ __('Column Visibility') }}</th>
                                    <th>{{ __('Group Input') }}</th>
                                    <th>{{ __('Required') }}</th>
                                    <th>{{ __('Hide Optional Label') }}</th>
                                    <th>
                                        {{ __('Move Column') }}
                                        <i class="bi bi-info-circle" data-toggle="tooltip" data-placement="top"
                                            title="" aria-hidden="true"
                                            data-bs-original-title="Drag to move column position">
                                        </i>
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($databaseColumns as $setting)
                                    <tr id="{{ $setting->column_name }}">
                                        <td>{{ $loop->iteration }}</td>
                                        <td>
                                            {{ $setting->column_name }}
                                        </td>
                                        <td>
                                            <input type="text" aria-label="label"
                                                name="label[{{ $setting->column_name }}]"
                                                class="form-control column-change" data-id="{{ $setting->id }}"
                                                data-action="label" value="{{ $setting->label }}">
                                        </td>

                                        <td>
                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <select class="form-control select2bs4 column-change"
                                                        data-id="{{ $setting->id }}" data-action="step"
                                                        id="step-dropdown-{{ $loop->iteration }}" aria-label="step"
                                                        name="step[{{ $setting->column_name }}]" style="width: 100%;"
                                                        data-placeholder="Choose a step"
                                                        data-minimum-results-for-search="Infinity">
                                                        <option></option>
                                                        <option value="1" {{ $setting->step == 1 ? 'selected' : '' }}>
                                                            {{ __('Step 1') }}</option>
                                                        <option value="2" {{ $setting->step == 2 ? 'selected' : '' }}>
                                                            {{ __('Step 2') }}</option>
                                                        <option value="3" {{ $setting->step == 3 ? 'selected' : '' }}>
                                                            {{ __('Step 3') }}</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <select class="form-control select2bs4 column-change"
                                                        data-id="{{ $setting->id }}" data-action="column_width"
                                                        id="width-dropdown-{{ $loop->iteration }}" aria-label="width"
                                                        name="column_width[{{ $setting->column_name }}]"
                                                        style="width: 100%;" data-placeholder="Choose a width"
                                                        data-minimum-results-for-search="Infinity">
                                                        <option></option>
                                                        <option value="3"
                                                            {{ $setting->column_width == 3 ? 'selected' : '' }}>
                                                            {{ __('25%') }}</option>
                                                        <option value="6"
                                                            {{ $setting->column_width == 6 ? 'selected' : '' }}>
                                                            {{ __('50%') }}</option>
                                                        <option value="9"
                                                            {{ $setting->column_width == 9 ? 'selected' : '' }}>
                                                            {{ __('75%') }}</option>
                                                        <option value="12"
                                                            {{ $setting->column_width == 12 ? 'selected' : '' }}>
                                                            {{ __('100%') }}</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </td>

                                        <td>
                                            <label class="switch mr-2">
                                                <input type="checkbox" id="edit_visibility_{{ $setting->id }}"
                                                    onchange="toggleAction(this, {{ $setting->id }}, 'edit_visibility')"
                                                    name="edit_visibility[{{ $setting->column_name }}]"
                                                    value="{{ $setting->edit_visibility }}"
                                                    {{ $setting->edit_visibility == \App\Models\OrderField::ENABLE ? 'checked' : '' }}>
                                                <span class="slider round" data-toggle="tooltip" data-placement="top"
                                                    title="" aria-hidden="true"
                                                    data-bs-original-title="{{ __('Disable / Enable') }}"></span>
                                            </label>
                                        </td>

                                        <td>
                                            <label class="switch mr-2">
                                                <input type="checkbox" id="view_visibility_{{ $setting->id }}"
                                                    onchange="toggleAction(this, {{ $setting->id }}, 'view_visibility')"
                                                    name="view_visibility[{{ $setting->column_name }}]"
                                                    value="{{ $setting->view_visibility }}"
                                                    {{ $setting->view_visibility == \App\Models\OrderField::ENABLE ? 'checked' : '' }}>
                                                <span class="slider round" data-toggle="tooltip" data-placement="top"
                                                    title="" aria-hidden="true"
                                                    data-bs-original-title="{{ __('Hide / Show') }}"></span>
                                            </label>
                                        </td>

                                        <td>
                                            <label class="switch mr-2">
                                                <input type="checkbox" aria-label="" id="is_grouped_{{ $setting->id }}"
                                                    onchange="toggleAction(this, {{ $setting->id }}, 'is_grouped')"
                                                    name="is_grouped[{{ $setting->column_name }}]"
                                                    value="{{ $setting->is_grouped }}"
                                                    {{ $setting->is_grouped == \App\Models\OrderField::ENABLE ? 'checked' : '' }}>
                                                <span class="slider round" data-toggle="tooltip" data-placement="top"
                                                    title="" aria-hidden="true"
                                                    data-bs-original-title="{{ __('Ungroup/Group') }}"></span>
                                            </label>
                                        </td>

                                        <td>
                                            <label class="switch mr-2">
                                                <input type="checkbox" id="is_required_{{ $setting->id }}"
                                                    onchange="toggleAction(this, {{ $setting->id }}, 'is_required')"
                                                    name="is_required[{{ $setting->column_name }}]"
                                                    value="{{ $setting->is_required }}"
                                                    {{ $setting->is_required == \App\Models\OrderField::ENABLE ? 'checked' : '' }}>
                                                <span class="slider round" data-toggle="tooltip" data-placement="top"
                                                    title="" aria-hidden="true"
                                                    data-bs-original-title="{{ __('Optional/Required') }}"></span>
                                            </label>
                                        </td>

                                        <td>
                                            <label class="switch mr-2">
                                                <input type="checkbox" id="is_default_{{ $setting->id }}"
                                                    onchange="toggleAction(this, {{ $setting->id }}, 'is_default')"
                                                    name="is_default[{{ $setting->column_name }}]"
                                                    value="{{ $setting->is_default }}"
                                                    {{ $setting->is_default == \App\Models\OrderField::ENABLE ? 'checked' : '' }}>
                                                <span class="slider round" data-toggle="tooltip" data-placement="top"
                                                    title="" aria-hidden="true"
                                                    data-bs-original-title="Show/Hide"></span>
                                            </label>
                                        </td>

                                        <td>
                                            <span class="drag-column">
                                                <i class="fas fa-bars"></i>
                                            </span>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div><!-- End Featured Services Section -->

@endsection


@push('scripts')
    <script
        src="{{ asset('backend/js/pages-js/product-settings-blade.js') }}">
    </script>
@endpush