@section('page_content')
<form method="post" action="{{ route('tenant.layouts.update', $form->id) }}">
    
    @csrf
        
    <input type="hidden" name="form_id" value="{{ $form->id }}" />
    <input type="hidden" name="fields" value="" />

    <div class="row">
        <div class="col-lg-4">
            <div class="card-wrapper">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Field List</h4>
                    </div>
                    <div class="card-body minH-400">
                        <div class="row draggable-wrapper">
                            @foreach($fields as $field)
                                <div class="col-6">
                                    <div class="field draggable" data-id="{{ $field->id }}" data-name="{{ $field->name }}" data-type="{{ $field->type }}">
                                        <div class="field-content d-inline-flex">
                                            <div class="field-icon">
                                                <i class="fa fa-clock-o"></i>
                                            </div>
                                            <div class="field-name">
                                                {{ $field->name }}  
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                            <div class="col-12 hidden">
                                <div class="section draggable">
                                    <div class="section-content d-inline-flex">
                                        <div class="section-icon">
                                            <i class="fa fa-clock-o"></i>
                                        </div>
                                        <div class="section-name">
                                            {{ $field->name }}  
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer">
                        <div class="row">
                            <div class="col-6">
                                <a href="{{ route('tenant.home') }}" class="btn btn-block btn-danger">Cancel</a>
                                
                            </div>
                            <div class="col-6">
                                <button type="submit" class="btn btn-block btn-primary">Save</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-8 section-droppable">
            <div class="card-wrapper">
                
                @foreach($sections as $section)
                    <input type="hidden" name="form_sections[]" value="{{ $section->id }}" />
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">{{ $section->name }}</h4>
                        </div>
                        <div class="card-body ">
                            <div id="{{ $section->id }}" class="droppable minH-200">