@php
    $isForIndividualContact = !__isEmpty($contact);
@endphp
@extends('layouts.app', ['title' => $isForIndividualContact ? __tr('Send WhatsApp Template Message') : __tr('Create New Campaign')])
@section('content')
@include('users.partials.header', [
'title' => $isForIndividualContact ? __tr('Send WhatsApp Template Message') : __tr('Create New Campaign'),
'description' => '',
// 'class' => 'col-lg-7'
])
<style>
    .card-header {
        padding: 6px 1.5rem;
    }

    .text-primary1 {
        /* color: #5f72e4 !important; */
    }

    .card-header:first-child {
        border-left: 2px solid;
    }

    .h1,
    .h2,
    .h3,
    .h4,
    .h5,
    .h6,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        color: #495057;
    }

    .alert.alert-light {
        background-color: #6f6f6f !important;
    }

    .card-body {
        padding: 10px 1.5rem;
    }

    .form-group {
        margin-top: 0;
    }

    html>body {
        padding-bottom: 10px !important;
    }

    .selectize-dropdown,
    .selectize-dropdown.form-control {
        height: 0px;
    }

    .selectize-dropdown-content {
        background: #fff;
        /* border: 1px solid rgba(0, 0, 0, .15); */
        border-radius: 0.25rem;
        /* box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); */
    }

    .selectize-dropdown,
    .selectize-dropdown.form-control {
        border: 0;
    }

    .card {
        backdrop-filter: none;
    }

    @media (max-width: 1159px) {
        .d-flex.gap-2.mb-3 {
            flex-direction: column !important;
        }
    }
    /* .lw-whatsapp-preview {
        height: 490px;
        overflow: auto;
    } */
    .lw-form-in-process .lw-spinner-box {
        align-self: auto;
        position: absolute;
        z-index: 2;
    }
    .lw-spinner-box {
        margin-top: 20% !important;
        /* margin-left: 50% !important; */
	}
</style>
@if ($isForIndividualContact)
<style>
    .toggle-switch {
        display: none !important;
    }
    .progress-container-custom {
        display: none !important;
    }
</style>
@endif
<div class="container-fluid container-fluid-padding p-1">
    <div class="row">
        <!-- button -->
        <div class="col-xl-12 mb-3 text-right">
            @if ($contact)
            <a class="lw-btn btn btn-secondary" href="{{ route('vendor.contact.read.list_view') }}">{{ __tr('Back to Contacts') }}</a>
            @endif
            <a class="lw-btn btn btn-light lw-ajax-link-action" data-confirm="{{ __tr('On template sync page will be refreshed') }}" data-callback="__Utils.viewReload" data-method="post" href="{{ route('vendor.whatsapp_service.templates.write.sync') }}"> {{ __tr('Sync WhatsApp Templates') }}</a>
            <a class="lw-btn btn btn-dark" href="{{ route('vendor.campaign.read.list_view') }}">{{ __tr('Manage Campaigns') }}</a>
        </div>
        <!--/ button -->
        {{-- <div class="col-12 pl-15" style="height: 80vh;overflow: auto;"> --}}
        <div class="col-12 pl-15" style="height: 100%;overflow: auto;">
            @if(session('loggedBySuperAdmin') and !getAppSettings('enable_queue_jobs_for_campaigns') and (!getAppSettings('cron_setup_done_at')))
        <div class="alert alert-danger text-left">
            <strong>{{  __tr('App Alert!!') }}</strong> {{  __tr('Cron Job or Queue Worker setup is required to execute campaigns. Please see Setup and Integration page in SuperAdmin area.') }}
        </div>
        @endif
            <div class="card responsive-card">
                @if ($contact)
                <div class="card-header">
                    <div>{{ __tr('Name') }}: <span class="fw-semibold">{{ $contact->full_name }}</span></div>
                    <div>{{ __tr('Phone') }}: <span class="fw-semibold">{{ $contact->wa_id }}</span></div>
                    <div>{{ __tr('Country') }}: <span class="fw-semibold">{{ $contact->country?->name }}</span></div>
                </div>
                @else
                @if(!getVendorSettings('test_recipient_contact'))
                <div class="card-body">
                    <div class="alert alert-danger">
                        {{ __tr('Test Contact missing, You need to set the Test Contact first, do it under the WhatsApp Settings') }}
                    </div>
                </div>
                @endif
                @endif
                <div class="card-body p-2" x-data="{selectedTemplate:'' }">
                    <div class="col-sm-12 col-md-8 col-lg-6">
                        @if (!$contact)
                        {{-- <h2 class="text-warning">{{  __tr('Step 1') }}</h2> --}}
                        @endif
                        <x-lw.form lwSubmitOnChange data-event-callback="lwPrepareUploadPlugIn"
                            :action="route('vendor.request.template.view')" data-pre-callback="clearTemplateContainer"  data-callback="onTemplateChangeProcess">
                            <div x-cloak x-show="!selectedTemplate">
                                <x-lw.input-field x-model="selectedTemplate"
                                    placeholder="{!! __tr('Select & Configure Template') !!}" type="selectize"
                                    data-lw-plugin="lwSelectize" data-selected=" " type="select"
                                    id="lwField_templateSelection" name="template_selection" data-form-group-class="mt-1"
                                    class="custom-select" data-selected=" " :label="__tr('Select Template')">
                                    <x-slot name="selectOptions">
                                        <option value="">{{ __tr('Select & Configure Template') }}</option>
                                        @foreach ($whatsAppTemplates as $whatsAppTemplate)
                                        <option value="{{ $whatsAppTemplate->_uid }}">{{ $whatsAppTemplate->template_name }}
                                            ({{ $whatsAppTemplate->language }}) - ({{ $whatsAppTemplate->category }})</option>
                                        @endforeach
                                    </x-slot>
                                </x-lw.input-field>
                            </div>
                        </x-lw.form>
                    </div>
                    {{-- <div x-cloak class="col-12" x-data="{ tab: 'inputs' }"> --}}
                    <div x-cloak class="col-12" x-data="{
                        currentStep: 0,
                        goToStep(stepIndex) {
                            this.currentStep = stepIndex;
                            this.updateProgress();
                        },
                        nextStep() {
                            if (this.currentStep < 3) {
                                this.currentStep++;
                                this.updateProgress();
                            }
                        },
                        prevStep() {
                            if (this.currentStep > 0) {
                                this.currentStep--;
                                this.updateProgress();
                            }
                            },
                            updateProgress() {
                                const progress = document.getElementById('progress');
                                const steps = document.querySelectorAll('.step');
                                
                                const progressPercent = (this.currentStep / (steps.length - 1)) * 100;
                                progress.style.width = progressPercent + '%';
                                
                                steps.forEach((step, index) => {
                                    step.classList.remove('active', 'completed');
                                    
                                    if (index < this.currentStep) {
                                        step.classList.add('completed');
                                    } else if (index === this.currentStep) {
                                        step.classList.add('active');
                                    }
                                });
                            }
                        }">
                        @if ($contact)
                        <x-lw.form x-show="selectedTemplate" :action="route('vendor.template_message.contact.process', [
                            'contactUid' => $contact->_uid
                        ])">
                            <input type="hidden" name="contact_uid" value="{{ $contact->_uid }}">
                            <div id="lwTemplateStructureContainer">
                                {{-- Load carousel template structure --}}
                                {{-- @if(isset($carouselTemplateData) && !empty($carouselTemplateData['cards']))
                                    @include('whatsapp-service.message-preparation', [
                                        'template' => $carouselTemplateData['template'],
                                        'carouselTemplateData' => $carouselTemplateData,
                                        'headerFormat' => null,
                                        'headerParameters' => [],
                                        'bodyParameters' => [],
                                        'buttonParameters' => [],
                                        'buttonItems' => [],
                                        'bodyComponentText' => '',
                                        'templateComponents' => [],
                                        'onlyTemplatePreview' => false,
                                        'contactDataMaps'=> $contactDataMaps
                                    ])
                                @else --}}
                                    {!! $template !!}
                                {{-- @endif --}}
                            </div>
                            @include('whatsapp.from-phone-number')
                            <button type="submit" class="btn btn-primary mt-4">{{ __tr('Send') }}</button>
                        </x-lw.form>
                        @else
                        {{-- Campaign Creation --}}
                        <x-lw.form x-show="selectedTemplate" :action="route('vendor.campaign.schedule.process')" data-confirm="#lwScheduleMessageConfirmation">
                            <div id="lwTemplateStructureContainer">
                                {!! $template !!}
                            </div>

                            {{-- <div class="mt-2" x-show="tab === 'schedule'" style="animation: fadeIn 0.5s ease-in-out;"> --}}
                            <div class="mt-2 form-step" :class="{ 'active': currentStep === 1 }" style="animation: fadeIn 0.5s ease-in-out;">
                                <div class="row">
                                    <div class="col-lg-6">
                                        <div class="">
                                            {{-- <div class="">
                                                <h4 class="mb-3 text-primary1 fw-bold">{{ __tr('Contacts and Schedule') }}</h4>
                                            </div> --}}
                                            <div class="card-body p-0">
                                                <div class="form-group">
                                                    <label class="form-label">{{ __tr('Campaign Title') }}</label>
                                                    <div class="">
                                                        <input type="text" class="form-control" id="lwCampaignTitle" name="title" required="required" placeholder="{{ __tr('Enter campaign title') }}">
                                                    </div>
                                                </div>

                                                {{-- <div class="card mb-4"> --}}
                                                {{-- <div class="card-header bg-garay"> --}}
                                                {{-- <label class="form-label">{{ __tr('Target Contacts') }}</label> --}}
                                                {{-- </div> --}}
                                                {{-- <div class="card-body"> --}}
                                                <div class="mt-3">
                                                    <div class="d-flex gap-2 mb-2">
                                                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#lwAddNewContact">
                                                            <i class="mdi mdi-account-plus fs-15  me-2"></i>{{ __tr('Create New Contact') }}
                                                        </button>
                                                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#lwAddNewGroup">
                                                            <i class="mdi mdi-account-group-outline fs-15  me-2"></i>{{ __tr('Create New Group') }}
                                                        </button>
                                                    </div>
                                                    <div class="row">
                                                        <div class="form-group mb-2 col-md-6">
                                                            <x-lw.input-field type="selectize" data-lw-plugin="lwSelectize" id="lwSelectGroupsField"
                                                                data-form-group-class="" data-selected=" " :label="__tr('Groups/Contact')" name="contact_group">
                                                                <x-slot name="selectOptions">
                                                                    <option value="">{{ __tr('Select Contacts Group') }}</option>
                                                                    <option value="all_contacts">{{ __tr('All Contacts') }}</option>
                                                                    @foreach($vendorContactGroups as $vendorContactGroup)
                                                                    <option value="{{ $vendorContactGroup['_id'] }}">{{ $vendorContactGroup['title'] }}</option>
                                                                    @endforeach
                                                                </x-slot>
                                                            </x-lw.input-field>
                                                        </div>

                                                        @if (isset($allLabels) && count($allLabels) > 0)
                                                        <div class="form-group mb-3 col-md-6">
                                                            <x-lw.input-field :label="__tr('Labels/Tags')" type="selectize" data-lw-plugin="lwSelectize" id="lwAssignLabelsField" data-form-group-class="" name="contact_labels[]" multiple>
                                                                <x-slot name="selectOptions">
                                                                    <option value="">{{ __tr('Select Labels') }}</option>
                                                                    @foreach($allLabels as $label)
                                                                    <option value="{{ $label['_id'] }}">{{ $label['title'] }}</option>
                                                                    @endforeach
                                                                </x-slot>
                                                            </x-lw.input-field>
                                                        </div>
                                                        @endif
                                                    </div>

                                                    <div class="form-check form-switch pl-0">
                                                        <label for="lwOnlyForTemplateLanguageMatchingContact" class="text-muted fw-400">
                                                            <input type="checkbox" id="lwOnlyForTemplateLanguageMatchingContact" data-lw-plugin="lwSwitchery" data-color="#ff0000" name="restrict_by_templated_contact_language">
                                                            {!! __tr('Restrict by Language Code - Send only to the contacts whose language code matches with template language code.') !!}
                                                        </label>
                                                    </div>
                                                </div>
                                                {{-- </div> --}}
                                                {{-- <div class="card"> --}}
                                                {{-- <div class="card-header bg-garay"> --}}
                                                <label class="form-label mt-1">{{ __tr('Schedule') }}</label>
                                                {{-- </div> --}}
                                                <div class="mt-1" x-data="{scheduleNow:true}">
                                                    <div class="form-group mb-0">
                                                        <label for="lwNowCampaign">
                                                            <input x-model="scheduleNow" type="checkbox" id="lwNowCampaign" data-secondary-color="orange" data-lw-plugin="lwSwitchery" checked value="" name="schedule_now">
                                                            <span x-show="scheduleNow">{{ __tr('Now') }}</span>
                                                            <span x-show="!scheduleNow">{{ __tr('Later') }}</span>
                                                        </label>
                                                    </div>
                                                    <div x-show="!scheduleNow">
                                                        <x-lw.input-field type="selectize" data-form-group-class="" name="timezone" :label="__tr('Select your Timezone')" data-selected="{{ getVendorSettings('timezone') }}">
                                                            <x-slot name="selectOptions">
                                                                @foreach (getTimezonesArray() as $timezone)
                                                                <option value="{{ $timezone['value'] }}">{{ $timezone['text'] }}</option>
                                                                @endforeach
                                                            </x-slot>
                                                        </x-lw.input-field>
                                                    </div>
                                                    <template x-if="!scheduleNow">
                                                        <div x-show="!scheduleNow">
                                                            <x-lw.input-field type="datetime-local" data-jsx-set="datetimepicker" id="lwScheduleAt" data-form-group-class="" min="{{ formatDateTime(now(), 'Y-m-d\TH:i:s') }}" :label="__tr('Schedule At')" name="schedule_at" required />
                                                        </div>
                                                    </template>
                                                    <fieldset class="shadow-0 border-0 p-0 mt-2" x-data="{expiryOn:false}">
                                                        <label class="form-label mt-1 mb-3">{{ __tr('Expiry') }}</label>
                                                        <div class="alert alert-danger">
                                                            {{  __tr("Messages will be set as expired if delayed in sending and won't be sent for the further processing.") }}
                                                        </div>
                                                        <div class="form-group pt-3">
                                                            <label for="lwExpiryCampaign">
                                                                <input x-model="expiryOn" type="checkbox" id="lwExpiryCampaign"  data-secondary-color="#D3D3D3" data-lw-plugin="lwSwitchery" value="" name="expire_on">
                                                            <span x-show="expiryOn">{{ __tr('Set Expiry for Messages') }}</span>
                                                            <span x-show="!expiryOn">{{ __tr('No Expiry for Processing') }}</span>
                                                            </label>
                                                        </div>
                                                        <template x-if="expiryOn">
                                                            <div x-show="expiryOn" x-data="{ minDate: '{{ formatDateTime(now(), 'Y-m-d\TH:i:s') }}' }">
                                                                <x-lw.input-field  type="datetime-local" data-jsx-set="datetimepicker" id="lwExpireAt" data-form-group-class="" min="{{ formatDateTime(now(), 'Y-m-d\TH:i:s') }}" :label="__tr('Expire At')" name="expire_at" required />
                                                            </div>
                                                            
                                                        </template>
                                                    </fieldset>
                                                </div>
                                                {{-- </div> --}}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @include('whatsapp.from-phone-number')
                            {{-- <div class="mt-3 mb-3 text-end">
                                <button type="submit" class="btn btn-primary btn-lg">
                                    <i class="mdi mdi-send fs-15  me-2"></i>{{ __tr('Schedule Campaign') }}
                                </button>
                            </div> --}}
                            </div>
                            <!-- Step Navigation -->
                            <div class="step-navigation col-md-6 mt-2">
                                <button type="button" class="btn-step btn-prev" 
                                    :disabled="currentStep === 0" 
                                    @click="prevStep()">
                                    <i class="mdi mdi-arrow-left-thick fs-15 "></i> {{ __tr('Previous') }}
                                </button>
                                
                                <button type="button" class="btn-step btn-next" 
                                    x-show="currentStep < 1"
                                    @click="nextStep()">
                                    {{ __tr('Next') }} <i class="mdi mdi-arrow-right-thick fs-15 "></i>
                                </button>
                                <button type="submit" class="btn btn-sm btn-primary ml-20"  x-show="currentStep === 1">
                                    <i class="mdi mdi-send fs-15  me-2"></i>{{ __tr('Schedule Campaign') }}
                                </button>
                            </div>
                        </x-lw.form>
                        <template type="text/template" id="lwScheduleMessageConfirmation">
                            <h3>{{ __tr('Are you sure?') }}</h3>
                            <p>{{ __tr('You want to schedule a WhatsApp Template Message. Test message will be sent to your selected test contact immediately and on success it will get scheduled for the selected group contacts') }}</p>
                        </template>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Add New Contact Modal -->
    <x-lw.modal id="lwAddNewContact" :header="__tr('Add New Contact')" :hasForm="true"
        data-pre-callback="appFuncs.clearContainer">
        <!--  Add New Contact Form -->
        <x-lw.form id="lwAddNewContactForm" :action="route('vendor.contact.write.create')"
            :data-callback-params="['modalId' => '#lwAddNewContact', 'datatableId' => '#lwContactList']"
            {{-- data-callback="appFuncs.modelSuccessCallback"> --}}
            data-callback="reloadContactGroupsDropdown">
            <!-- form body -->
            <div class="lw-form-modal-body">
                        <!-- form fields form fields -->
                        <div class="row">
                            <div class="col-md-6">
                                <!-- First_Name -->
                                <x-lw.input-field type="text" id="lwFirstNameField" data-form-group-class=""
                                    :label="__tr('First Name')" name="first_name" placeholder="First Name" />
                                <!-- /First_Name -->
                            </div>
                            <div class="col-md-6">
                                <!-- Last_Name -->
                                <x-lw.input-field type="text" id="lwLastNameField" data-form-group-class=""
                                    :label="__tr('Last Name')" name="last_name" placeholder="Last Name" />
                                <!-- /Last_Name -->
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <!-- Country -->
                                <x-lw.input-field type="selectize" data-lw-plugin="lwSelectize" id="lwCountryField"
                                    data-form-group-class="" data-selected=" " :label="__tr('Country')" name="country">
                                    <x-slot name="selectOptions">
                                        <option value="">{{ __tr('Country') }}</option>
                                        @foreach (getCountryPhoneCodes() as $getCountryCode)
                                            <option value="{{ $getCountryCode['_id'] }}">{{ $getCountryCode['name'] }}
                                            </option>
                                        @endforeach
                                    </x-slot>
                                </x-lw.input-field>
                                <!-- /Country -->
                            </div>
                            <div class="col-md-6">
                                <!-- Phone_Number -->
                                <x-lw.input-field type="number" id="lwPhoneNumberField" data-form-group-class=""
                                    :label="__tr('Mobile Number')" name="phone_number" minlength="9" placeholder="Mobile Number"
                                    :helpText="__tr('Number should be with country code without 0 or +')" required="true" />
                                <!-- /Phone_Number -->
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <!-- Language Code -->
                                <x-lw.input-field type="text" id="lwLanguageCodeField" data-form-group-class=""
                                    :label="__tr('Language Code')" name="language_code" placeholder="Language Code" />
                                <!-- /Language Code -->
                            </div>
                            <div class="col-md-6">
                                <!-- Email -->
                                <x-lw.input-field type="email" id="lwEmailField" data-form-group-class=""
                                    :label="__tr('Email')" name="email" placeholder="Email" />
                                <!-- /Email -->
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                @if (!$contact)
                                <x-lw.input-field type="selectize" data-lw-plugin="lwSelectize" id="lwSelectGroupsField"
                                    data-form-group-class="" data-selected=" " :label="__tr('Groups')" name="contact_groups[]"
                                    multiple>
                                    <x-slot name="selectOptions">
                                        <option value="">{{ __tr('Select Groups') }}</option>
                                        @foreach ($vendorContactGroups as $vendorContactGroup)
                                            <option value="{{ $vendorContactGroup['_id'] }}">
                                                {{ $vendorContactGroup['title'] }}
                                                {{ $vendorContactGroup['status'] == 5 ? __tr('(Archived)') : '' }}</option>
                                        @endforeach
                                    </x-slot>
                                </x-lw.input-field>
                                @endif
                            </div>
                            <div class="col-md-6">
                            </div>
                        </div>
                        <div class="d-flex gap-3">
                            <div class="my-3">
                                <x-lw.checkbox id="lwPromotionalOpt" name="whatsapp_opt_out" data-color="#ff0000"
                                    data-size="small" value="1" data-lw-plugin="lwSwitchery" :label="__tr('Opt out Marketing Messages')" />
                            </div>
                            <div class="my-3">
                                @if (isAiBotAvailable())
                                    <x-lw.checkbox id="lwAiBotEnable" :checked="getVendorSettings('default_enable_flowise_ai_bot_for_users')" name="enable_ai_bot"
                                        value="1" data-size="small" data-lw-plugin="lwSwitchery"
                                        :label="__tr('Enable AI Bot')" />
                                @endif
                            </div>
                        </div>
                        <fieldset class="shadow-0 border-0 my-0 p-1">
                            <h3 class="fw-semibold" >{{ __tr('Other Information') }}</h3>
                            <hr class="my-3">
                            <div class="oii-dark-content">
                                @php
                                    $vendorContactCustomFields = app(App\Yantrana\Components\Contact\Repositories\ContactCustomFieldRepository::class)->fetchItAll([
                                        'vendors__id' => getVendorId(),
                                    ]);
                                @endphp
                                @foreach ($vendorContactCustomFields as $index => $vendorContactCustomField)
                                
                                    @if ($index % 2 === 0)
                                        <div class="row">
                                    @endif
                                    <x-lw.input-field type="{{ $vendorContactCustomField->input_type }}"
                                        id="lwCustomField{{ $vendorContactCustomField->_id }}" data-form-group-class="col-md-6"
                                        :label="$vendorContactCustomField->input_name"
                                        name="custom_input_fields[{{ $vendorContactCustomField->_uid }}]"
                                        placeholder="{{ $vendorContactCustomField->input_name }}" />

                                    @if ($index % 2 === 1 || $loop->last)
                                        </div>
                                    @endif
                                @endforeach
                            </div>
                        </fieldset>
                    </div>
            <!-- form footer -->
            <div class="modal-footer">
                <!-- Submit Button -->
                <button type="submit" class="btn btn-primary">{{ __tr('Submit') }}</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ __tr('Close') }}</button>
            </div>
        </x-lw.form>
        <!--/  Add New Contact Form -->
    </x-lw.modal>
    <!--/ Add New Contact Modal -->
    <!-- Add New Group Modal -->
    <x-lw.modal id="lwAddNewGroup" :header="__tr('Add New Group')" :hasForm="true">
        <!--  Add New Group Form -->
        <x-lw.form id="lwAddNewGroupForm" :action="route('vendor.contact.group.write.create')"
            :data-callback-params="['modalId' => '#lwAddNewGroup', 'datatableId' => '#lwGroupList']"
            {{-- data-callback="appFuncs.modelSuccessCallback"> --}}
            data-callback="reloadContactGroupsDropdown">
            <!-- form body -->
            <div class="lw-form-modal-body">
                <!-- form fields form fields -->
                <!-- Title -->
                <x-lw.input-field type="text" id="lwTitleField" data-form-group-class="" :label="__tr('Title')" name="title" required="true" />
                <!-- /Title -->
                <!-- Description -->
                <div class="form-group">
                    <label for="lwDescriptionField">{{ __tr('Description') }}</label>
                    <textarea cols="10" rows="3" id="lwDescriptionField" class="lw-form-field form-control"
                        placeholder="{{ __tr('Description') }}" name="description"></textarea>
                </div>
                <!-- /Description -->
            </div>
            <!-- form footer -->
            <div class="modal-footer">
                <!-- Submit Button -->
                <button type="submit" class="btn btn-primary">{{ __tr('Submit') }}</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ __tr('Close') }}</button>
            </div>
        </x-lw.form>
        <!--/  Add New Group Form -->
    </x-lw.modal>
    <!--/ Add New Group Modal -->
</div>
@endsection()
@push('appScripts')