@extends('backend.layout.masterlayout')
@section('content')
    @include('backend.partial.sidebar')
    @include('backend.partial.topbar')
    <!--page-wrapper-->
    <div class="page-wrapper">
        <!--page-content-wrapper-->
        <div class="page-content-wrapper">
            <div class="page-content">
                <div class="user-profile-page">
                    <div class="card radius-15">
                        @if ($current_loggedin_user->role != 0)
                            @include('backend.form-builder.permission-index')
                        @else
                            <div class="card-body">
                                <ul class="nav nav-pills">
                                    <li class="nav-item">
                                        <a class="nav-link active" 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>
                                    <li class="nav-item">
                                        <a class="nav-link" 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>
                                </ul>
                                <div class="tab-content mt-3">
                                    <div class="tab-pane fade show active" 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> --}}
                                                                <th> Enable / Disable</th>
                                                                <th> Addon Services</th>
                                                                <th class="text-center">Action</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            @foreach ($all_forms as $key => $form)
                                                                
                                                                <tr>
                                                                    <td>{{ $key + 1 }}
                                                                    </td>
                                                                    <td>{{ $form->form_model }} <br/>
                                                                        @if ($form->form_type != 'DATA COLLECTION')
                                                                            <a hre="javascript:void(0)"
                                                                                class="badge rounded-pill bg-primary"
                                                                                id="getGatewayParameters"
                                                                                style="font-size:12px;font-weight:100; color:#fff;"
                                                                                data-bs-toggle="modal"
                                                                                data-bs-target="#gateway-parameter"
                                                                                data-url="{{ route('setGatewayParameter', ['id' => $form->id]) }}"><i
                                                                                    class="bx bx-slider-alt"></i> Set Gateway Parameters</a>
                                                                        @endif
                                                                    </td>
                                                                    <td>{{ $form->description }}</td>
                                                                    <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>
                                                                    <td>
                                                                        <div class="form-check form-switch">
                                                                            E-Mail Service
                                                                            <input class="form-check-input" type="checkbox"
                                                                                onChange="update_receivingmailstatus(this)"
                                                                                value="{{ $form->id }}"
                                                                                >
                                                                        </div>
                                                                        <div class="form-check form-switch">
                                                                            Google ReCaptcha
                                                                            <input class="form-check-input" type="checkbox"
                                                                                onChange="update_recptchastatus(this)"
                                                                                value="{{ $form->id }}"
                                                                                >
                                                                        </div>
                                                                    </td>
                                                                    <td class="text-center">

                                                                        <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>

                                                                        <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>
                                                                        <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>

                                                                    </td>
                                                                </tr>
                                                            @endforeach
                                                        </tbody>

                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" 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>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
        <!--end page-content-wrapper-->
        @include('backend.form-builder.modals.gateway-parametrs-modal')
    </div>
    <!--end page-wrapper-->
    <!--start overlay-->
    <div class="overlay toggle-btn-mobile"></div>
    <!--end overlay-->
    <!--Start Back To Top Button-->
    <a href="javaScript:;" class="back-to-top"><i class='bx bxs-up-arrow-alt'></i></a> @include('backend.partial.dashboard_footer')
@endsection
@section('script')
    <script>
        function update_label_status(el) {
            if (el.checked) {
                var status = 1;
            } else {
                var status = 0;
            }
            $.post('{{ route('label-status') }}', {
                _token: '{{ csrf_token() }}',
                id: el.value,
                status: status
            }, function(data) {
                if (data == 1) {
                    update_success_noti();
                } else {
                    update_error_noti();
                }
            });
        }

        //======================

        function update_receivingmailstatus(el) {
            if (el.checked) {
                var status = 1;
            } else {
                var status = 0;
            }
            $.post('{{ route('receiving-mail-status') }}', {
                _token: '{{ csrf_token() }}',
                id: el.value,
                status: status
            }, function(data) {
                if (data == 1) {
                    update_success_noti();
                } else {
                    if (data == 2) {
                        update_smtpconfig_noti();
                        setTimeout(function() {
                            window.location.reload();
                        }, 2000);
                    } else {
                        update_error_noti();
                        setTimeout(function() {
                            window.location.reload();
                        }, 2000);
                    }
                }
            });
        }

        //======================

        function update_recptchastatus(el) {
            if (el.checked) {
                var status = 1;
            } else {
                var status = 0;
            }
            $.post('{{ route('recptcha-status') }}', {
                _token: '{{ csrf_token() }}',
                id: el.value,
                status: status
            }, function(data) {
                if (data == 1) {
                    update_success_noti();
                } else {
                    if (data == 2) {
                        update_recptchaconfig_noti();
                        setTimeout(function() {
                            window.location.reload();
                        }, 2000);
                    } else {
                        update_error_noti();
                        setTimeout(function() {
                            window.location.reload();
                        }, 2000);
                    }
                }
            });
        }

        //======================

        function update_status(el) {
            if (el.checked) {
                var status = 1;
            } else {
                var status = 0;
            }
            $.post('{{ route('form-status') }}', {
                _token: '{{ csrf_token() }}',
                id: el.value,
                status: status
            }, function(data) {
                if (data == 1) {
                    update_success_noti();
                } else {
                    update_error_noti();
                }
            });
        }
        //======================

        $(function() {
            $('[data-bs-toggle="popover"]').popover();
            $('[data-bs-toggle="tooltip"]').tooltip();
        })

        //======================
        var editor1 = new RichTextEditor("#editor");
    </script>
    <script>
        $(document).ready(function() {
            $(document).on('click', '#getGatewayParameters', function(e) {

                e.preventDefault();

                var url = $(this).data('url');

                $('#dynamic-gatewayparameter-content').html(''); // leave it blank before ajax call
                $('#modal-loader').show(); // load ajax loader

                $.ajax({
                        url: url,
                        type: 'GET',
                        dataType: 'html'
                    })
                    .done(function(data) {
                        console.log(data);
                        $('#dynamic-gatewayparameter-content').html('');
                        $('#dynamic-gatewayparameter-content').html(data); // load response
                        $('#modal-loader').hide(); // hide ajax loader
                    })
                    .fail(function() {
                        $('#dynamic-gatewayparameter-content').html(
                            '<i class="bx bx-info-circle"></i> Something went wrong, Please try again...'
                        );
                        $('#modal-loader').hide();
                    });

            });

        });
    </script>
@endsection