@php
    $appbuilder_array = explode(',', $current_user_role_info->appbuilder_permissions);
    if (in_array('2-view', $appbuilder_array)) {
        $index_val = '2-view';
    } else {
        $index_val = '2-create';
    }
@endphp

<div class="card-body">
    <ul class="nav nav-pills">
        @if (in_array('2-view', $appbuilder_array))
            <li class="nav-item">
                <a class="nav-link @if ($index_val == '2-view') active @endif" data-bs-toggle="tab" href="#allforms">
                    <span class="p-tab-name"><i class="bx bx-layer"></i>
                        All Forms </span>
                    <i class="bx bx-layer font-24 d-sm-none"></i>
                </a>
            </li>
        @endif
        @if (in_array('2-create', $appbuilder_array))
            <li class="nav-item">
                <a class="nav-link @if ($index_val == '2-create') active @endif" id="createform-tab"
                    data-bs-toggle="tab" href="#createform">
                    <span class="p-tab-name"><i class="bx bx-layer-plus"></i>
                        Create Form</span>
                    <i class="bx bxs-layer-plus font-24 d-sm-none"></i>
                </a>
            </li>
        @endif
    </ul>
    <div class="tab-content mt-3">
        @if (in_array('2-view', $appbuilder_array))
            <div class="tab-pane fade @if ($index_val == '2-view') show active @endif" id="allforms">
                <div class="card shadow-none border mb-0 radius-15">
                    <div class="card-body">
                        <div class="card-title">
                            <h6 class="mb-0"><b><i class="bx bx-layer"></i> All Forms</b></h6>
                        </div>
                        <hr />
                        <div class="table-responsive">
                            <table id="example2" class="table table-striped table-bordered" style="width:100%">
                                <thead class="thead-primary">
                                    <tr>
                                        <th>#</th>
                                        <th>Title</th>
                                        <th>Description</th>
                                        {{-- <th>Description</th> --}}
                                        @if (in_array('2-labelmanager', $appbuilder_array))
                                            <th> Enable / Disable</th>
                                        @endif
                                        @if (in_array('2-emailservicemanager', $appbuilder_array) or in_array('2-recptchaservicemanager', $appbuilder_array))
                                            <th> Addon Services</th>
                                        @endif
                                        @if (in_array('2-preview', $appbuilder_array) or
                                                in_array('2-edit', $appbuilder_array) or
                                                in_array('2-delete', $appbuilder_array))
                                            <th class="text-center">Action</th>
                                        @endif
                                    </tr>
                                </thead>
                                <tbody>

                                    @foreach ($all_forms as $key => $form)
                                        <tr>
                                            <td>{{ $key + 1 }}
                                            </td>
                                            <td>{{ $form->form_model }}</td>
                                            <td>{{ $form->description }}</td>
                                            @if (in_array('2-labelmanager', $appbuilder_array))
                                                <td>
                                                    <div class="form-check form-switch">
                                                        Label
                                                        <input class="form-check-input" type="checkbox"
                                                            onChange="update_label_status(this)"
                                                            value="{{ $form->id }}" >
                                                    </div>
                                                    <div class="form-check form-switch">
                                                        Form
                                                        <input class="form-check-input" type="checkbox"
                                                            onChange="update_status(this)" value="{{ $form->id }}"
                                                            >
                                                    </div>
                                                </td>
                                            @endif
                                            @if (in_array('2-emailservicemanager', $appbuilder_array) or in_array('2-recptchaservicemanager', $appbuilder_array))
                                                <td>
                                                    @if (in_array('2-emailservicemanager', $appbuilder_array))
                                                        <div class="form-check form-switch">
                                                            E-Mail Service
                                                            <input class="form-check-input" type="checkbox"
                                                                onChange="update_receivingmailstatus(this)"
                                                                value="{{ $form->id }}" >
                                                        </div>
                                                    @endif
                                                    @if (in_array('2-recptchaservicemanager', $appbuilder_array))
                                                        <div class="form-check form-switch">
                                                            Google ReCaptcha
                                                            <input class="form-check-input" type="checkbox"
                                                                onChange="update_recptchastatus(this)"
                                                                value="{{ $form->id }}" >
                                                        </div>
                                                    @endif
                                                </td>
                                            @endif
                                            @if (in_array('2-preview', $appbuilder_array) or
                                                    in_array('2-edit', $appbuilder_array) or
                                                    in_array('2-delete', $appbuilder_array))
                                                <td class="text-center">
                                                    @if (in_array('2-preview', $appbuilder_array))
                                                        <a href="{{ route('preview-form', $form->id) }}"
                                                            class="btn btn-outline-primary m-1 btn-sm" target="_blank"
                                                            data-bs-toggle="tooltip" data-bs-placement="top"
                                                            title="" data-bs-original-title="Preview Form"
                                                            style="line-height: unset; padding: unset; border:none;"><i
                                                                class="bx bx-show-alt"></i></a>
                                                    @endif
                                                    @if (in_array('2-edit', $appbuilder_array))
                                                        <a href="{{ route('form-records', $form->id) }}"
                                                            class="btn btn-outline-primary m-1 btn-sm"
                                                            data-bs-toggle="tooltip" data-bs-placement="top"
                                                            title="" data-bs-original-title="View Collected Data"
                                                            style="line-height: unset; padding: unset; border:none;"><i
                                                                class="bx bx-list-ul"></i></a> <a
                                                            href="{{ route('edit-form', $form->id) }}"
                                                            class="btn btn-outline-dark m-1 btn-sm"
                                                            data-bs-toggle="tooltip" data-bs-placement="top"
                                                            title="" data-bs-original-title="Edit"
                                                            style="line-height: unset; padding: unset; border:none;"><i
                                                                class="bx bx-edit-alt"></i></a>
                                                    @endif
                                                    @if (in_array('2-delete', $appbuilder_array))
                                                        <a href="{{ route('delete-form', $form->id) }}"
                                                            onclick="return confirm('Are you sure you want to delete?');"
                                                            class="btn btn-outline-danger m-1 btn-sm"
                                                            data-bs-toggle="tooltip" data-bs-placement="top"
                                                            title="" data-bs-original-title="Delete This"
                                                            style="line-height: unset; padding: unset; border:none;"><i
                                                                class="bx bx-trash"></i></a>
                                                    @endif
                                                </td>
                                            @endif
                                        </tr>
                                    @endforeach
                                </tbody>

                            </table>
                        </div>
                    </div>
                </div>
            </div>
        @endif
        @if (in_array('2-create', $appbuilder_array))
            <div class="tab-pane fade @if ($index_val == '2-create') show active @endif" id="createform">
                <div class="card shadow-none border mb-0 radius-15">
                    <div class="card-body">

                        <form class="row g-3" action="{{ route('post-create-form') }}" method="POST">
                            @csrf

                            <div class="col-md-6">
                                <label for="inputFirstName" class="form-label">Form Name<span
                                        style="color: red;">*</span></label>
                                <input type="text" class="form-control form-control-sm" id="inputFirstName"
                                    autocomplete="off" onkeydown="return /[0-9a-zA-Z ]/i.test(event.key)"
                                    placeholder="for ex. - Contact Form" name="form_name" required />
                            </div>
                            <div class="col-md-6">
                                <label for="inputFirstName" class="form-label">Title<span
                                        style="color: red;">*</span></label>
                                <input type="text" class="form-control form-control-sm" id="inputFirstName"
                                    name="title" onkeydown="return /[0-9a-zA-Z ]/i.test(event.key)"
                                    placeholder="for ex. - Contact With Experties" autocomplete="off" required />
                            </div>
                            <div class="col-md-4">
                                <label for="inputFirstName" class="form-label">Form Class<span
                                        style="color: red;">*</span> <span class="badge rounded-pill bg-primary"
                                        data-bs-toggle="popover" title="Instruction"
                                        data-bs-content="Keep row g-3 as default OR mention form class received from your theme layout.">Instruction</span></label>
                                <input type="text" class="form-control form-control-sm" id="inputFirstName"
                                    name="form_class" autocomplete="off" value="row g-3" required />
                            </div>
                            <div class="col-md-4">
                                <label for="inputFirstName" class="form-label">Form Style<span
                                        style="color: red;">*</span></label>
                                <select class="form-select form-select-sm" name="form_style" required>
                                    <option value="Horizontal">Horizontal</option>
                                    <option value="Vertical">Vertical</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label for="inputFirstName" class="form-label">Form Type<span
                                        style="color: red;">*</span></label>
                                <select class="form-select form-select-sm" name="form_type" required>
                                    <option value="DATA COLLECTION">Data Collection</option>
                                    @if ($phonepegateway_credentials->status != 0)
                                        <option value="PAYMENT GATEWAY">Data Collection With Payment Gateway</option>
                                    @endif
                                </select>
                            </div>
                            <div class="col-md-md-12">
                                <label class="form-label">Instrutions</label>
                                <textarea class="form-control" rows="2" autocomplete="off" name="instructions"></textarea>
                            </div>
                            <div class="col-md-md-12">
                                <label class="form-label">Short Description</label>
                                <textarea class="form-control" rows="2" autocomplete="off" name="description"></textarea>
                            </div>
                            <hr />
                            <b style="margin-top: 0px;">------ Form Fields ------</b>

                            <div class="row g-3" id="dynamicforms">
                                <div class="form-check pb-2" style="padding-left:3%; margin-top:0px;" required>
                                    <input class="form-check-input" type="checkbox" id="checkAll">
                                    <label class="form-check-label">Select
                                        All</label>
                                </div>
                                <input type="hidden" class="form-control form-control-sm" value="0"
                                    name="col_field_id1[]" id="col_field_id1" />
                                <div class="col-md-3" style="margin-top:0px;">
                                    <label for="inputLastEnterUsername" class="form-label">Grid
                                        (Column)<span class="text-danger">*</span></label>
                                    <div class="input-group">
                                        <select class="form-select form-select-sm" placeholder="Grid (Column)"
                                            name="col2[]" id="col_2">
                                            <option value="">Grid (Column)</option>
                                            <option value="12">col-md-md-12</option>
                                            <option value="11">col-md-md-11</option>
                                            <option value="10">col-md-md-10</option>
                                            <option value="9">col-md-md-9</option>
                                            <option value="8">col-md-md-8</option>
                                            <option value="7">col-md-md-7</option>
                                            <option value="6">col-md-md-6</option>
                                            <option value="5">col-md-md-5</option>
                                            <option value="4">col-md-md-4</option>
                                            <option value="3">col-md-3</option>
                                            <option value="2">col-md-md-2</option>
                                            <option value="1">col-md-md-1</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-3" style="margin-top:0px;">
                                    <label for="inputLastEnterUsername" class="form-label">Label
                                        Title</label>
                                    <div class="input-group">
                                        <input type="text" class="form-control form-control-sm"
                                            placeholder="Label Title" autocomplete="off" name="col3[]"
                                            onkeydown="return /[0-9a-zA-Z ]/i.test(event.key)" id="col_3"
                                            required />
                                    </div>
                                </div>
                                <div class="col-md-3" style="margin-top:0px;">
                                    <label for="inputLastEnterUsername" class="form-label">Input
                                        Type<span class="text-danger">*</span></label>
                                    <div class="input-group">
                                        <select class="form-select form-select-sm" placeholder="Input Type"
                                            name="col4[]" id="col_4" onchange="CheckType(this.value);" required>
                                            <option value="">Select Input Type</option>
                                            <option value="text">Text</option>
                                            <option value="number">Number</option>
                                            <option value="email">Email</option>
                                            <option value="password">Password</option>
                                            <option value="textarea">Textarea</option>
                                            <option value="radio">Radio</option>
                                            <option value="checkbox">Check-Box</option>
                                            <option value="dropdown">Dropdown</option>
                                            <option value="file">File</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-3" style="margin-top:0px;">
                                    <label for="inputLastEnterUsername" class="form-label">Field
                                        Name<span class="text-danger">*</span></label>
                                    <div class="input-group">
                                        <input type="text" class="form-control form-control-sm"
                                            placeholder="Field Name" autocomplete="off" name="col5[]"
                                            onkeydown="return /[0-9a-zA-Z ]/i.test(event.key)" id="col_5"
                                            required />
                                    </div>
                                </div>

                                {{-- DYNAMIC OPTIONS START  --}}

                                <div id="dynamicform_options" style="display:none;">
                                    <hr />
                                    <b style="margin-top: 0px;">------ Input Options ------</b>

                                    <div class="row ">
                                        <div class="form-check pb-2 pt-2" style="padding-left:3%; margin-top:0px;">
                                            <input class="form-check-input" type="checkbox" id="checkAllOptions">
                                            <label class="form-check-label" for="flexCheckDefault">Select
                                                All Options</label>
                                        </div>
                                        <input type="hidden" class="form-control form-control-sm" value="0"
                                            name="col_id1[]" id="col_id1" />
                                        <div class="col-md-6">
                                            <label for="inputLastEnterUsername" class="form-label">Option</label>
                                            <div class="input-group">
                                                <input type="text" class="form-control form-control-sm"
                                                    placeholder="Option" name="col_opval1[]" id="col_opval1" />
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <label for="inputLastEnterUsername" class="form-label">Value</label>
                                            <div class="input-group">
                                                <input type="text" class="form-control form-control-sm"
                                                    placeholder="Value" name="col_opval2[]" id="col_opval2" />
                                            </div>
                                        </div>
                                    </div>

                                </div>

                                <div id="optionsbuttons" style="display:none;">
                                    <div class="row pt-3">
                                        <div class="col-md-12">
                                            <button class="btn btn-danger delete btn-sm" id="removeOptionRowsub"
                                                type="button">-
                                                Delete Option</button>
                                            <button class="btn btn-primary btn-sm" id="addOptionRowsub"
                                                type="button">+ Add
                                                Option</button>
                                        </div>
                                    </div>
                                    <hr />
                                </div>

                                {{-- DYNAMIC OPTIONS END  --}}

                                <div class="col-md-3">
                                    <label for="inputLastEnterUsername" class="form-label">Validation<span
                                            class="text-danger">*</span></label>
                                    <div class="input-group">
                                        <select class="form-select form-select-sm" placeholder="Validation"
                                            autocomplete="off" name="col6[]" id="col_6">
                                            <option value="">Validation</option>
                                            <option value="required">Required</option>
                                            <option value="null">Not Required</option>

                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <label for="inputLastEnterUsername" class="form-label">Placeholder</label>
                                    <div class="input-group">
                                        <input type="text" class="form-control form-control-sm"
                                            placeholder="Placeholder" name="col7[]" autocomplete="off"
                                            onkeydown="return /[0-9a-zA-Z ]/i.test(event.key)" id="col_7" />
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <label for="inputLastEnterUsername" class="form-label">Pattern
                                        <span class="badge rounded-pill bg-primary" data-bs-toggle="popover"
                                            title="Information"
                                            data-bs-content="If this is a dropdown or file field And you want to do multiple selection in it. So you need to type * multiple * keyword in the pattern. else You can set whatever entry patterns you want to apply in it.">How
                                            To Use?</span></label>
                                    <div class="input-group">
                                        <input type="text" autocomplete="off" class="form-control form-control-sm"
                                            placeholder="Pattern" name="col8[]" id="col_8" />
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <label for="inputLastEnterUsername" class="form-label">Field
                                        Class<span class="text-danger">*</span></label>
                                    <div class="input-group">
                                        <input type="text" class="form-control form-control-sm"
                                            value="form-control" name="col10[]" id="col_10" autocomplete="off"
                                            required />
                                    </div>
                                </div>
                                <div class="col-md-9">
                                    <label for="inputLastEnterUsername" class="form-label">Custom
                                        Style <span class="badge rounded-pill bg-primary" data-bs-toggle="popover"
                                            title="Information"
                                            data-bs-content="In this you can write whatever custom style you want. In this you have to write direct style in that text. FOR EXAMPLE : * border-color: red; font-size: 2rem; * etc.">How
                                            To Use?</span></label>
                                    <div class="input-group">
                                        <textarea class="form-control form-control-sm" autocomplete="off" placeholder="Custom Style" rows="1"
                                            name="col9[]" id="col_9"></textarea>
                                    </div>
                                </div>

                            </div>
                            <div class="row g-3">
                                <div class="col-md-12">
                                    <button class="btn btn-danger delete btn-sm" id="removeRowsub" type="button">-
                                        Delete Field</button>
                                    <button class="btn btn-dark btn-sm" id="addRowsub" type="button">+ Add
                                        Field</button>
                                </div>
                                <div class="col-md-2">
                                    <div class="d-grid">
                                        <button type="submit" class="btn btn-primary btn-sm">Save</button>
                                    </div>
                                </div>
                                <div class="col-md-10"></div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        @endif
    </div>
</div>