<div class="row">

    <div class="col-sm-8">
        <div class="campaign_section campaign-card-section">
           <div class="card-body">
            <div class="form-group mt-3">
                <label for="" class="label-head">Campaign Title</label>
                <input type="text" class="form-control" value="{{old('title')??(isset($campaign)?$campaign->title:'')}}" required placeholder="Enter Campaign Title" name="title">
            </div>

            <div class="form-group from-number-section pb-3" id="select_campaign_devices">
                <label for="" class="label-head">From Devices : <span class="ml-2 what-font-size icon-position" data-toggle="tooltip" data-placement="right" title="@lang('customer.campaign_no_device')">
                    <i class="fa fa-question-circle"></i>
                </span></label>
                <select name="from_devices[]" id="campaignFromDevices" class="select2 compose-select"
                        multiple="multiple"
                        data-placeholder="{{trans('customer.device')}}:">
                        @foreach($users_from_devices as $device)
                            @if($device->sim_info)
                                @php $simInfo=json_decode($device->sim_info) @endphp
                                @if(is_array($simInfo))
                                    @foreach($simInfo as $item)
                                        @php $simData=explode(':',$item); @endphp
                                        <option value="{{$device->id}}|{{$item}}">{{$device->name}}-{{$device->model}} ({{$simData[2]}}-SIM {{$simData[0]+1}})</option>
                                    @endforeach
                                @endif
                            @endif
                        @endforeach
                </select>
            </div>



            {{-- <ul class="nav nav-pills mb-3 mt-5" id="pills-tab" role="tablist">
                <li class="nav-item contact-data mr-2">
                  <a class="nav-link custom nav-link-hover active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">@lang('customer.devices')</a>
                </li>
                <li class="nav-item contact-data">
                  <a class="nav-link custom nav-link-hover" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">@lang('customer.wa_devices')</a>
                </li>
            </ul> --}}
            {{-- <div class="tab-content" id="myTabContent">
                <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
                    <div class="form-group from-number-section pb-3" id="select_campaign_devices">
                        <label for="" class="label-head">From Devices : <span class="ml-2 what-font-size icon-position" data-toggle="tooltip" data-placement="right" title="@lang('customer.campaign_no_device')">
                            <i class="fa fa-question-circle"></i>
                        </span></label>
                        <select name="from_devices[]" id="campaignFromDevices" class="select2 compose-select"
                                multiple="multiple"
                                data-placeholder="{{trans('customer.device')}}:">
                                @foreach($users_from_devices as $device)
                                    @if($device->sim_info)
                                        @php $simInfo=json_decode($device->sim_info) @endphp
                                        @if(is_array($simInfo))
                                            @foreach($simInfo as $item)
                                                @php $simData=explode(':',$item); @endphp
                                                <option value="{{$device->id}}|{{$item}}">{{$device->name}}-{{$device->model}} ({{$simData[2]}}-SIM {{$simData[0]+1}})</option>
                                            @endforeach
                                        @endif
                                    @endif
                                @endforeach
                        </select>
                    </div>
                </div>
                <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
                    <div class="form-group from-number-section pb-3" id="select_campaign_devices">
                        <label for="" class="label-head">From WA Devices : <span class="ml-2 what-font-size icon-position" data-toggle="tooltip" data-placement="right" title="@lang('customer.campaign_no_device')">
                            <i class="fa fa-question-circle"></i>
                        </span></label>
                        <select name="from_devices[]" id="campaignFromwaDevices" class="select2 form-control"
                        multiple="multiple" data-placeholder="{{trans('customer.wa_devices')}}:">
                        @foreach($users_from_wadevices as $device)
                            <option value="{{$device->id}}">{{$device->name}}</option>
                        @endforeach
                        </select>
                    </div>
                </div>
            </div> --}}

            <div class="row mt-3">
                <div class="col-sm-12">

                    <div class="form-group">
                            <label class="d-block label-head" for="">{{trans('Send Using')}}
                                <span> <input type="radio" class="recipient_type ml-3" checked id="paste_t" name="recipient_type" value="paste_number"></span>
                                <span class=""> <label class="label-head" for="paste_t">{{trans('Type Numbers')}}</label></span>
                                <span><input type="radio" class="recipient_type ml-4"  id="group_t" name="recipient_type" value="group"></span>
                                <span> <label class="label-head" for="group_t">{{trans('Group')}}</label></span>
                                <span><input type="radio" class="recipient_type ml-4"  id="import_xls" name="recipient_type" value="import_xls"></span>
                                <span> <label class="label-head" for="import_xls">{{trans('Import Contacts')}}</label></span>
                            </label>
                    </div>
                    <div class="form-group to-number-section recipient-section recipient_group" style="display: none" id="number_section">
                        <select id="select_group" name="group_id[]" class="form-control" multiple="multiple">
                            @if($groups)
                                @foreach($groups as $group)
                                    <option data-number="{{$group->contacts_count}}" value="{{$group->id}}">{{$group->name."(".$group->contacts_count.")"}}</option>
                                @endforeach
                            @endif
                        </select>
                        <div class="text-right">
                            Total Contacts (<b class="sms-text" id="contectCount">0</b>) || Total Message (<b class="sms-text amountCount_g" id="amountCount_g">0</b>)
                        </div>
                    </div>
                    <div class="form-group to-number-section recipient-section recipient_import_xls" style="display: none" id="import_section">
                        <div class="row">
                            <div class="col-6">
                                <input type="file" name="import_xls" class="form-control">
                            </div>
                            <div class="col-6">
                                <button id="checkDuplicate" type="button" class="btn btn-sm btn-info">Check Duplicate</button>
                            </div>
                            <div class="col-12 mt-2">
                                <div class="row">
                                    <div class="col-6">
                                        {{-- <div class="float-right mb-3"> --}}
                                            <a target="_blank" href="{{route('customer.download.sample',['type'=>'group'])}}" class="text-muted">
                                                @lang('customer.download_sample')
                                            </a>
                                        {{-- </div> --}}
                                    </div>
                                    <div class="col-6 text-right">
                                        Total Contacts (<b class="sms-text " id="import_contact">0</b>) || Total Message (<b class="sms-text" id="amountCount">0</b>)
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group to-number-section recipient-section recipient_paste_number text-right"  id="paste_number_section">
                        <textarea name="paste_numbers" cols="6" rows="6" class="form-control" id="paste_number_field" placeholder="Enter Recipient Numbers....(Number Should Be Separate By New Line)"></textarea>
                        <div class="">
                        <button type="button" class="btn btn-primary btn-sm float-left download_btn mt-1">Duplicates & Invalid (<span class="show_duplicate_numbers"></span>)</button>
                        Total Contacts (<b class="sms-text" id="paste_contactCount">0</b>) || Total Message (<b class="sms-text" id="amountCount_p">0</b>)
                        </div>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <div id="showResponse" class="d-none showResponse">
                    @if($templates->isNotEmpty())
                        @foreach($templates as $template)
                            <h6 data-title="{{isset($template->body)?$template->body:''}}"
                                class="response_value response_sms_data">{{$template->title}}</h6>
                                <input type="hidden" value="{{$template->id}}" name="template_id" class="form-control">
                        @endforeach
                    @else
                        <h6 class="response_value" id="response_value_disabled">No Data Available</h6>
                    @endif
                </div>
            </div>
            <div class="form-group">
                <label for="" class="label-head">Message Body</label>
                <textarea name="template_body[]" class="type_message form-control" autocomplete="off" type="text" required placeholder="Type your message here..." cols="2" rows="2" id="message"></textarea>
                <div class="text-right sms-counter-section">
                    <b id="smsCount" class="text-primary"></b> SMS (<b id="smsLength" class="text-primary"></b>) Characters left
                </div>
                <div>
                    @foreach(sms_template_variables() as $key=>$t)
                        <button type="button" data-name="{{$key}}"
                                class="btn btn-sm btn-primary sms_template_variable mt-2">
                            {{ucfirst(str_replace('_',' ',$t))}}
                        </button>
                    @endforeach
                </div>
            </div>

            <div class="row flex-nowrap  align-items-center">
                <div class="form-group mb-0 col-sm-6 col-12">
                    <input type="checkbox" class="schedule ml-3 mr-2" id="schedule" name="schedule">
                    <label for="schedule" class="label-head">Schedule</label>
                </div>
                <div class="date_time d-none col-sm-6 col-12 ml-2">
                    <input type="datetime-local" name="start_date" id="start_date" class="form-control"  value="{{old('start_date')??(isset($campaign)??$campaign->start_date)}}">
                </div>
            </div>
                 <button type="submit" class="btn btn-primary float-right mt-3">@lang('customer.submit')</button>
           </div>
        </div>
        <input type="hidden" id="template_active_nav">
        <div class="campaign_section campaign-card-section d-none" id="content_section">
            <div class="card-body">
                <h3>Set Your Content</h3>
            <hr>

            <div class="form-group">
                <ul class="nav nav-tabs" id="custom_tabs_one_tab" role="tablist">

                </ul>

            </div>
            <div class="row">
                <div class="form-group col-sm-6 col-6">
                    <label for="">Template</label>
                    <div class="tab-content" id="custom_tabs_one_tabContent">

                    </div>

                </div>
                <div class="form-group col-sm-6 col-6">
                    <label class="d-block" for="">Variables</label>
                    <div>
                        @foreach(sms_template_variables() as $key=>$t)
                            <button type="button" data-name="{{$key}}"
                                    class="btn btn-sm btn-primary sms_template_variable mt-2">{{ucfirst(str_replace('_',' ',$t))}}</button>
                        @endforeach
                    </div>
                </div>
            </div>
            </div>
        </div>

        <div class="campaign_section d-none" id="rate_section" style="display: none;">
            <h3>Select Your Send Rate</h3>
            <hr>

            <div class="form-group mt-3">
                <label for="">Send Speed per hour</label>
                <div>
                        <span class="irs irs--flat js-irs-2"><span class="irs"><span class="irs-line"
                                                                                     tabindex="0"></span><span
                                    class="irs-min" style="visibility: hidden;">0 mm</span><span class="irs-max"
                                                                                                 style="visibility: visible;">10 mm</span><span
                                    class="irs-from" style="visibility: hidden;">0</span><span class="irs-to"
                                                                                               style="visibility: hidden;">0</span><span
                                    class="irs-single" style="left: -1.87562%;">0 mm</span></span><span
                                class="irs-grid"></span><span class="irs-bar irs-bar--single"
                                                              style="left: 0px; width: 1.57947%;"></span><span
                                class="irs-shadow shadow-single" style="display: none;"></span><span
                                class="irs-handle single" style="left: 0%;"><i></i><i></i><i></i></span></span><input
                        id="range_5" type="text" name="send_speed" value="{{isset($campaign)?$campaign->message_send_rate:''}}" class="irs-hidden-input" tabindex="-1"
                        readonly="">
                </div>
            </div>
            <div class="form-group d-none">
                <label class="d-block">Use area code if exist</label>
                <input type="checkbox" name="area_match_code" class="mr-2" id="match_code"> <label for="match_code">Areacode
                    Matching</label>
            </div>
        </div>

    </div>
    <div class="col-md-4 col-4" id="mobileVersion">
        <div class="iphone"
             style="background-image: url('{{asset('images/iphone6.png')}}')">
            <div class="border">
                <div class="responsive-html5-chat">
                    <form class="chat">
                        <span></span>
                        <div class="messages">
                            <div class="message">
                                <div class="myMessage"><p>
                                    <div id="message-box">

                                    </div>
                                </p>
                                    <date><b></b> 23.06.2023 14:30:7</date>
                                </div>
                            </div>
                        </div>
                        <input type="text" placeholder="Your message" disabled="">
                        <input type="submit" value="Send" disabled="">
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
