@php
    $dripId = ($drip)? $drip->id : $index;
    $elementIndex = $index;
@endphp
<div class="card shadow mb-5 me-3 dripElement mt-5" id="dripElement-{{$dripId}}">
    <div style="left: 99%;" class="position-absolute top-0 end-0 translate-middle-y displayHideShow">
        <button type="button" class="btn_remove btn btn-danger btn-sm d-flex align-items-center justify-content-center p-0" style="width: 25px; height: 25px;" name="remove" data-id="{{$dripId}}">X</button>
    </div>
    <input type="hidden" name="type[{{$dripId}}]" value="{{$type}}">
    @if($type != "email")
        <div class="d-flex p-4">
            <div class="px-2" style="width: -webkit-fill-available">
                <div class="textAreaDiv">
                    <div class="col-sm-12" style="display:flex; align-items:center">
                        <label class="fs-6 fw-bolder form-label w-100 required">Message
                            @if($auth_user->canany(['carbon-list', 'spin-text-list']))
                                <span class="fs-7 float-end badge badge-secondary cursor-pointer spintext-modal">Create Spintext</span>
                            @endif
                            @if($auth_user->canany(['carbon-list', 'ai-message-generator-list']))
                                <span class="fs-7 me-2 float-end badge badge-primary cursor-pointer get-message-suggestion d-none" data-title="drip-campaign">AI Message Generator</span>
                            @endif
                        </label>
                    </div>
                    <input type="hidden" name="segments[{{$dripId}}]" class="segment" value="0">
                    <textarea name="message[{{$dripId}}]" class="form-control title emoji-area{{$elementIndex}} message_body" rows="4" id="emojiArea{{$dripId}}">{{($drip) ? $drip->title : ''}}</textarea>
                    <label id="message-{{$dripId}}" class="error" for="emojiArea{{$elementIndex}}" style="display:none"></label>
                    <div class="my-2 row">
                        <div class="d-flex justify-content-between bd-highlight">
                            <div>
                                <span class="badge badge-success fs-11">
                                    <strong>Characters : </strong><span class="character_count">0</span>
                                </span>
                                <span class="badge badge-warning fs-11"><strong>Segments : </strong><span class="segment_count">0</span></span>
                            </div>
                            <div class="custom-uiverse-cls mt-2">
                                <span class="custom-tooltip-cls tooltiptext bg-fun{{$elementIndex}}" id="bgFun{{$dripId}}">100% : no spam words detected</span>
                                <span class="bad_word_score_count bad_word_drip_score_count{{$elementIndex}}" id="badWordScoreCount{{$dripId}}" onclick="td_app.badWordScoreCount('emoji-area{{$elementIndex}}', 'emojiArea{{$dripId}}', 'bad_word_drip_score_count{{$elementIndex}}', 'check-spam-btn-drips{{$elementIndex}}', 'check-spam-btn-drips{{$elementIndex}}',2,'bg-fun{{$elementIndex}}');"><span class="btn btn-primary btn-sm"><span class="check-spam-btn-drips{{$elementIndex}}" id="checkSpamBtn{{$dripId}}">Spam free score : 100 <i class="fa fa-arrow-rotate-right"></i></span></span></span>
                            </div>
                            <span class="badge badge-dark h-75 cursor-pointer">
                                <i class="fa-regular fa-face-smile fa-lg emoji-btn{{$elementIndex}}"></i>
                            </span>
                        </div>
                    </div>
                </div>
                <label class="fs-5 fw-bolder form-label">Merge fields</label>
                <div>
                    @include('pages.common.get-constants-field', ['textareaId' => 'emojiArea' . $dripId])
                </div>
            </div>
            @if($auth_user->enable_mms && $auth_user->canany(['carbon-list', 'mms-drips-list']))
                <div class="px-2" style="width: 30%;">
                    <div>
                    <label class="fs-5 fw-bolder form-label">Image<span class="ms-1"><i class="fa fa-info-circle text-primary" data-bs-toggle="tooltip" data-bs-dismiss="click" title="The image will cost six credits"></i></span></label>
                    </div>
                    <div class="image-input image-input-outline" data-kt-image-input="true" style="background-image: url(/assets/media/logos/no-image.svg)">
                        <div class="image-input-wrapper w-125px h-125px" style="background-image: url({{($drip && $drip->media_path) ? $drip->media_path : "/assets/media/logos/no-image.svg" }})"></div>
                        <label class="btn btn-icon btn-circle btn-color-muted btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="change" data-bs-toggle="tooltip" data-bs-dismiss="click" title="Change image">
                            <i class="fa-solid fa-pencil"><span class="path1"></span><span class="path2"></span></i>
                            <input type="file" name="image_file[{{$dripId}}]" accept="image/png, image/jpg, image/jpeg" data-msg-accept="Please upload only .png, .jpg or .jpeg file."/>
                            <input type="hidden" name="avatar_remove" />
                        </label>
                        <span class="btn btn-icon btn-circle btn-color-muted btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="cancel" data-bs-toggle="tooltip" data-bs-dismiss="click" title="Cancel image">X</span>
                        @if($drip && $drip->media_path)
                            <span class="btn btn-icon btn-circle btn-color-muted btn-active-color-primary w-25px h-25px bg-body shadow btn-remove-image" data-kt-image-input-action="remove" data-bs-toggle="tooltip" data-bs-dismiss="click" title="Remove image">X</span>
                        @endif
                            <input type="hidden" value="{{($drip && $drip->media_path) ? $drip->media_path : null }}" class="default_file" name="default_file[{{$dripId}}]">
                    </div>
                    <div class="form-text file_type_error1">Allowed file types: png, jpg, jpeg. Max filesize 3MB.</div>
                    <label class="error" id="image_file-{{$dripId}}" for="fileinput_drip" style="display:none"></label>
                    <label id="image_file[{{$dripId}}]-error" class="error" for="image_file[{{$dripId}}]"></label>
                </div>
            @endif
        </div>
    @else
        <div class="row mt-5 mb-10 px-6">
            <div class="col-md-6">
                <div class="d-flex align-items-center me-2 mb-2">
                    <div>
                        <label class="fs-5 fw-bolder form-label mb-3">
                            <span class="required">Email Template</span>
                        </label>
                        <select class="form-select select2-hidden-accessible emailSelect" name="emailTemplate[{{$dripId}}]" required="" data-control="select2" data-placeholder="Select Template">
                            @foreach($emailTemplates as $emailTemplate)
                            <option value="{{$emailTemplate->id}}" {{($drip && $emailTemplate->id==$drip->emailTemplate_id)? 'selected':''}}>{{$emailTemplate->name}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <a href="/email-drip-campaigns" class="text-primary h6">Create Email template</a>
            </div>
            <div class="col-md-6">
                <div class="d-flex align-items-center me-2 mb-2">
                    <div>
                        <label class="fs-5 fw-bolder form-label mb-3">
                            <span class="required">Email Sender</span>
                        </label>
                        <select class="form-select emailSelect select2-hidden-accessible senderSelect" name="emailSender[{{$dripId}}]" required="" data-control="select2" data-placeholder="Select Sender">
                            @foreach($senders as $sender)
                            <option value="{{$sender->id}}" {{($drip && $sender->id==$drip->emailSender_id)? 'selected':''}}>{{$sender->from_name}}-{{$sender->from_email}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <a href="/email-drip-campaigns" class="text-primary h6">Create Email Sender</a>
            </div>
        </div>
    @endif
    <div class="d-flex p-4">
        <div class="flex-fill px-2">
            <div class="d-flex mb-3 row">
                <div class="col-6">
                    <div class="d-flex me-2 align-items-center">
                        <label class="d-inline fs-5 fw-bolder form-label required">Duration</label>
                    </div>
                    <div class="d-flex me-2 align-items-center">
                        <input class="d-inline form-control durationVal valid check-if-number mw-200px w-100" type="text" max="999" name="duration[{{$dripId}}]" min="1" value="{{($drip) ? $drip->duration : 1}}" maxlength="3" required="" aria-invalid="false">
                        <label class="error" id="duration-{{$dripId}}" for="durationVal" style="display:none"></label>
                    </div>
                </div>
                <div class="col-6">
                    <div class="d-flex me-2 align-items-center">
                        <label class="fs-5 fw-bolder form-label required">Duration Type</label>
                    </div>
                    <div class="d-flex me-2 align-items-center mw-200px w-100">
                        <select class="form-select durationType select2-hidden-accessible durationTypeSelect-{{$dripId}}" name="duration_type[{{$dripId}}]" required="" data-control="select2" data-hide-search="true" data-id="{{$dripId}}" data-select2-id="select2-data-4-j25l" tabindex="-1" aria-hidden="true">
                            <option value="minutes" {{(!$drip) ? 'selected': (('minutes'==$drip->duration_type)? 'selected':'')}}>Minutes</option>
                            <option value="hours" {{($drip && 'hours'==$drip->duration_type)? 'selected':''}}>Hours</option>
                            <option value="days" {{($drip && 'days'==$drip->duration_type)? 'selected':''}}>Days</option>
                        </select>
                        <label class="error" id="duration_type-{{$dripId}}" for="durationType" style="display:none"></label>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>