@extends('layouts.master')
@section('title', 'Newsletter')

@section('breadcrumb-text')
    <h1 class="w-100">
        {{__('Create Newsletter')}}
        <a href="{{route('admin.newsletter.index')}}" data-toggle="tooltip" data-placement="top" title="Back" class="btn btn-primary float-end">
            {!! renderIconHtml('back') !!}{{__('Back')}}
        </a>
    </h1>
@endsection

@section('content')
<section class="main_section">
    <form method="POST" action="{{ route('admin.newsletter.store') }}" class="newsletter_filter_form" id="newsLetterForm" onsubmit="return false;">
        <div class="card">
            <div class="card-body">
                @csrf
                <div class="row">
                    <div class="col-md-12">
                        <div class="row align-items-end">
                            <div class="col-12 col-md-8 mb-3 d-flex justify-content-start">
                            <div class="float-left">
                                <div class="relative z-0 w-full mb-0 group">
                                <input type="text" class="form-control rounded-lg p-2.5 w-full text-sm text-gray-900 bg-transparent border-gray-300 appearance-none focus:outline-none border-2 focus:ring-1 peer pl-15 h-11 subject-validation" name="name" id="name" placeholder="">
                                <label for="name" class="ml-2 p-2 py-0 peer-focus:font-medium absolute left-0 text-sm text-gray-600 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-indigo-400 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white peer-focus:z-10">{{ __('List Name') }} <span class="text-danger">*</span></label>
                                <div class="error text-danger name_error"></div>
                                </div>
                            </div>
                                <button type="button" class="btn btn-primary btn-advance-filter mt-1 mx-2 h-50">{!! renderIconHtml('filter') !!}{{ __('Advance Filter') }}</button>
                                <button type="button" class="btn btn-primary btn-clear-filter mt-1 mx-2 h-50" style="display:none">{!! renderIconHtml('delete') !!}{{ __('Clear Filter') }}</button>
                            </div>

                            <div class="advance_filter_section" style="display:none;">
                                <div class="row">
                                    <div class="col-12 col-md-4 mb-3">
                                    <div class="relative z-0 w-full mb-1 group">
                                        <label for="uni_level" class="ml-2 p-2 py-0 peer-focus:font-medium absolute text-sm text-gray-600 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-indigo-400 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white z-50 custom-label" >{{ __('Uni-level status') }}</label>
                                        <select class="select2 form-select rounded-lg block py-2.5 px-2.5 w-full text-sm text-gray-800 bg-transparent border-2 border-gray-300 appearance-none dark:text-gray-400 dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer h-11" data-placeholder="{{ __('Please Select Uni-level') }}" name="uni_level[]" id="uni_level" multiple>
                                            @foreach ($level as $row)
                                                <option value="{{$row}}">{{$row}}</option>
                                            @endforeach
                                        </select>
                                        <div class="error text-danger uni_level_error"></div>
                                        </div>
                                    </div>

                                    <div class="col-12 col-md-4 mb-3">
                                    <div class="relative z-0 w-full mb-1 group">
                                        <label for="star_rank" class="ml-2 p-2 py-0 peer-focus:font-medium absolute text-sm text-gray-600 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-indigo-400 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white z-50 custom-label">{{ __('Star Rank') }}</label>
                                        <select class="form-select rounded-lg block py-2.5 px-2.5 w-full text-sm text-gray-800 bg-transparent border-2 border-gray-300 appearance-none dark:text-gray-400 dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer select2" data-placeholder="{{ __('Please Select Star Rank') }}" name="star_rank[]" id="star_rank" multiple>
                                            @foreach ($rank as $row)
                                                <option value="{{$row}}">{{$row}}</option>
                                            @endforeach
                                        </select>
                                        <div class="error text-danger star_rank_error"></div>
                                    </div>
                                    </div>

                                    <div class="col-12 col-md-4 mb-3">
                                    <div class="relative z-0 w-full mb-1 group">
                                        <label for="country_id" class="ml-2 p-2 py-0 peer-focus:font-medium absolute text-sm text-gray-600 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-indigo-400 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white z-50 custom-label">{{ __('Country') }}</label>
                                        <select class="form-select rounded-lg block py-2.5 px-2.5 w-full text-sm text-gray-800 bg-transparent border-2 border-gray-300 appearance-none dark:text-gray-400 dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer select2" data-placeholder="{{ __('Please Select Country') }}" name="country_id[]" id="country_id" multiple>
                                        @foreach ($country as $row)
                                            <option value="{{$row->id}}" data-name="{{$row->country_name}} ( {{$row->country_code}} )">{{$row->country_name}} ( {{$row->country_code}} )</option>
                                        @endforeach
                                        </select>
                                        <div class="error text-danger country_error"></div>
                                    </div>
                                    </div>

                                    <div class="col-12 col-md-4 mb-3">
                                    <div class="relative z-0 w-full mb-1 group">
                                        <label for="language_id" class="ml-2 p-2 py-0 peer-focus:font-medium absolute text-sm text-gray-600 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-indigo-400 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white z-50 custom-label">{{ __('Language') }}</label>
                                        <select name="language_id[]" id="language_id" class="form-select rounded-lg block py-2.5 px-2.5 w-full text-sm text-gray-800 bg-transparent border-2 border-gray-300 appearance-none dark:text-gray-400 dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer select2" data-placeholder="{{ __('Please Select Language') }}" multiple>
                                            @foreach ($language as $row)
                                                <option value="{{$row->id}}" data-name="{{$row->name}}">{{$row->name}}</option>
                                            @endforeach
                                        </select>
                                        <div class="text-danger error language_id_error"></div>
                                    </div>
                                    </div>

                                <div class="col-12 col-md-4 mb-3">
                                    <div class="relative z-0 w-full mb-1 group">
                                        <label for="user_status" class="form-label z-50 form-label ml-2 p-2 py-0 peer-focus:font-medium absolute text-sm text-gray-600 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-indigo-400 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white peer-focus:z-10">{{ __('User Status') }}</label>
                                        <select name="user_status" id="user_status" class="form-select rounded-lg block py-2.5 px-2.5 w-full text-sm text-gray-800 bg-transparent border-2 border-gray-300 appearance-none dark:text-gray-400 dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer h-12 pt-2">
                                            <option value="">{{__('Select User Status')}}</option>
                                            <option value="active">{{__('Active')}}</option>
                                            <option value="deleted">{{__('Deleted')}}</option>
                                            <option value="suspended">{{__('Suspended')}}</option>
                                            <option value="abandoned">{{__('Abandoned')}}</option>
                                            <option value="lockout">{{__('Lockout')}}</option>
                                        </select>
                                        <div class="text-danger error user_status_error"></div>
                                    </div>
                                </div>

                                    <div class="col-12 col-md-4 mb-3">
                                    <div class="relative z-0 w-full mb-1 group">
                                        <label for="kyc_status" class="form-label z-50 form-label ml-2 p-2 py-0 peer-focus:font-medium absolute text-sm text-gray-600 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-indigo-400 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white peer-focus:z-10">{{ __('KYC Status') }}</label>
                                        <select name="kyc_status" id="kyc_status" class="form-select rounded-lg block py-2.5 px-2.5 w-full text-sm text-gray-800 bg-transparent border-2 border-gray-300 appearance-none dark:text-gray-400 dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer h-12 pt-2">
                                            <option value="">{{__('Select KYC Status')}}</option>
                                            <option value="pending">{{__('Pending')}}</option>
                                            <option value="approved">{{__('Approved')}}</option>
                                            <option value="rejected">{{__('Rejected')}}</option>
                                            <option value="dropped">{{__('Dropped')}}</option>
                                        </select>
                                        <div class="text-danger error kyc_status_error"></div>
                                    </div>
                                    </div>

                                    <div class="col-12 col-md-6">
                                    <div class="relative z-0 w-full mb-1 group">
                                        <label class="mb-2 p-2 py-1 font-bold text-sm text-gray-600 duration-300 transform text-indigo-400 bg-white" class="col-form-label">{{__('Gender') }}</label>
                                                <div class="d-flex">
                                                    <label class="radio radio-primary me-2">
                                                        <input type="radio" name="gender" value="male">
                                                        <span>{{__('Male')}}</span>
                                                        <span class="checkmark"></span>
                                                    </label>
                                                    <label class="radio radio-primary me-2">
                                                        <input type="radio" name="gender" value="female">
                                                        <span>{{__('Female')}}</span>
                                                        <span class="checkmark"></span>
                                                    </label>
                                                    <label class="radio radio-primary">
                                                        <input type="radio" name="gender" value="">
                                                        <span>{{__('All')}}</span>
                                                        <span class="checkmark"></span>
                                                    </label>
                                                </div>
                                            <div class="text-danger error gender_error"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-footer">
                <div class="col-md-12 d-flex justify-content-start">
                    <button class="btn btn-save btn-primary btn-save-record btn-modal" type="button">{!! renderIconHtml('save') !!}{{ __('Save') }}</button>
                </div>
            </div>
        </div>
    </form>

    <div class="card filterUser mt-4">
        <div class="card-body">
            <div class="row">
                <div id="normal-table user_tables_ajax">
                    <table class="table table-bordered" id="bstable" data-unique-id="counter" table-for="newsletter_user"
                            data-toolbar="#custom_toolbar_user" data-toggle="bstable" data-show-export="false"
                            data-ajax="getNewsletterFilterUser" data-show-button-text="true"
                            data-show-columns="true" data-show-toggle="false" data-show-columns-toggle-all="false"
                            data-side-pagination="server" data-pagination="true"
                            data-total-field="count" data-sortable="true" data-data-field="items" data-filter-control="true"
                            data-icons="icons" data-icons-prefix="bi" data-show-search-clear-button="true" data-loading-template="DataTaleLoadingTemplate" data-search-on-enter-key="true">

                        <thead>
                            <tr>
                                <th data-field="counter" data-sortable="false" title="#" data-width-unit="px">#</th>
                                <th data-field="username" data-sortable="false" data-filter-control="input" title="Username" data-filter-control-placeholder="Username">Username</th>
                                <th data-field="first_name" data-sortable="false" data-filter-control="input" title="First Name" data-filter-control-placeholder="First Name">First Name</th>
                                <th data-field="last_name" data-sortable="false" data-filter-control="input" title="Last Name" data-filter-control-placeholder="Last Name">Last Name</th>
                                <th data-field="email" data-sortable="false" data-filter-control="input" title="Email" data-filter-control-placeholder="Email">Email</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <input type="hidden" value="{{ route('admin.newsletter.filterUser') }}" id="getNewsletterFilterUser">
</section>
@endsection
@push('scripts')
<script src="{{ asset('backend/js/pages-js/newsletter.js') }}"></script>
@endpush