@section('page_title')
<div class="row page-titles mx-0">
    <div class="col-sm-6 p-md-0">
        <div class="welcome-text">
            <h4>{{ $page_title }} - {{ $widget->name }}</h4>
        </div>
    </div>
    <div class="col-sm-6 p-md-0 justify-content-sm-end mt-2 mt-sm-0 d-flex">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="javascript:void(0)">Widgets</a></li>
            <li class="breadcrumb-item active"><a href="javascript:void(0)">Builder</a></li>
        </ol>
    </div>
</div>
@stop

@section('page_content')


    <div class="row">
        @include('lms.channels.widgetbuilder.inc._widget_selectors')
        <div class="col-8">
            <form id="frmBuildWidget" method="post" action="{{ route('tenant.lms.leads.source.widget.update', $widget->id) }}">
    
                @csrf
                
                
                    <div class="card-wrapper">
                        @foreach($sections as $section)
                            <div class="card">
                                <div class="card-header">
                                    <h4 class="card-title">{{ $section->name }}</h4>
                                </div>
                                <div class="card-body">
                                    <div id="web-form" data-id="web-form" class="droppable minH-200">
                                        @foreach($existing_fields[$section->id] as $field)
                                            <div class="drop-item col-{{ $field['column'] }} {{ $field['class_names'] }}">
                                                <div class="field {{ $field['required'] ? 'required':'' }}" data-id="{{ $field['id'] }}" data-properties="{{ json_encode($field) }}">
                                                    <div class="field-content d-inline-flex">
                                                        <div class="field-icon">
                                                            <i class="fa {{ $field_icons[$field['type']] }}"></i>
                                                        </div>
                                                        <div class="field-name">{{ $field['name'] }}</div>
                                                    </div>
                                                    <input type="hidden" name="section_id[]" value="{{ $section->id }}">
                                                    <input type="hidden" name="fields[]" value="{{ $field['id'] }}">
                                                    <div class="dropdown options text-sans-serif position-static show">
                                                        <button class="btn btn-link" type="button" id="order-dropdown-0" data-toggle="dropdown" data-boundary="viewport" aria-haspopup="true" aria-expanded="true">
                                                            <span class="fa fa-ellipsis-h fs--1"></span>
                                                        </button>
                                                        <div class="dropdown-menu dropdown-menu-right border py-0" 
                                                                aria-labelledby="order-dropdown-0" 
                                                                x-placement="bottom-end" 
                                                                style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(717px, 115px, 0px);">
                                                            <div class="py-2">
                                                                <span class="dropdown-item btn-mark-required">Mark as required</span>
                                                                <span class="dropdown-item btn-edit-properties" data-toggle="modal" data-target="#modal-edit-properties">Edit Properties</span>
                                                                <span class="dropdown-item btn-delete-field text-danger">Remove Field</span>
                                                                <div class="dropdown-divider"></div>
                                                                <span class="dropdown-item column-selector" data-col="12">Full Width Column</span>
                                                                <span class="dropdown-item column-selector" data-col="6">1/2 Width Column</span>
                                                                <span class="dropdown-item column-selector" data-col="4">1/3 Third Column</span>
                                                                <span class="dropdown-item column-selector" data-col="3">1/4 Width Column</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        @endforeach
                        <div class="card">
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-bordered table-striped verticle-middle table-responsive-sm sorted_table">
                                        <thead>
                                            <tr>
                                                <th width="50">&nbsp;</th>
                                                <th>Label</th>
                                                <th>Url</th>
                                                <th>Text Color</th>
                                                <th>Background Color</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody id="widget_options_wrapper" data-type="settings">
                                            @include('lms.channels.widgetbuilder.inc._widget_options')                                        
                                        </tbody>
                                    </table>
                                </div>
                                <div class="card-footer">
                                    <div class="row">
                                        <div class="col-4">
                                            <a href="{{ route('tenant.lms.leads.source.widget.index') }}" class="btn btn-danger btn-block">Cancel</a>
                                        </div>
                                        <div class="col-4">
                                            <a href="{{ route('tenant.lms.leads.source.widget.preview', $widget->id) }}" target="_blank" class="btn btn-info btn-block">Preview</a>
                                        </div>
                                        <div class="col-4">
                                            <button type="submit" class="btn btn-primary btn-block">Update Widget</button>
                                        </div>
                                    </div>
                                </div> 
                            </div>
                        </div>
                    </div>
                
            </form>
        </div>
    </div>

@stop

@section('page_modal')
    @include('lms.channels.widgetbuilder.inc._widget_modals')
@stop