@php
    $reDripAllow = getCampaignTypeStatus();
    $eventDripAllow = getEventTypeStatus();
@endphp
<div class="stepper stepper-links d-flex flex-column gap-2" id="createDripCampaingStepper">
    <div class="stepper-nav justify-content-center py-2">
        <div class="stepper-item steps step-1 current" data-kt-stepper-element="nav">
            <h3 class="stepper-title">Campaign Name</h3>
        </div>
        @if($reDripAllow == 1 || $eventDripAllow == 1)
            <div class="stepper-item steps step-2" data-kt-stepper-element="nav">
                <h3 class="stepper-title">Campaign Type</h3>
            </div>
        @endif
        <div class="stepper-item" data-kt-stepper-element="nav">
            <h3 class="stepper-title">Setup Drips</h3>
        </div>
    </div>
    <form class="mx-auto w-100 mw-600px pt-0 pb-0" id="frmCreateDripCampaing" method="GET" action="{{ route("campaigns.create") }}">
        <input type="hidden" name="campaign_type" id="selectedCampaignType" value="1">
        <div class="current steps step-1" data-kt-stepper-element="content">
            <div class="w-100">
                <div class="pb-10 pb-lg-8">
                    <h2 class="fw-bold d-flex align-items-center text-gray-900">Campaign Name</h1>
                    <div class="text-muted fw-semibold fs-6">If you need more info, Check out
                        <a href="javascript:void(0);" class="link-primary fw-bold drip-campaign-help">Help Page</a>
                    </div>
                </div>
                <div class="mb-5 fv-row fv-plugins-icon-container">
                    <label class="form-label mb-3">
                        <span class="required">Campaign Name</span>
                    </label>
                    <input type="text" class="form-control form-control-lg" placeholder="Enter campaign name" value="" name="name" required data-msg-required="The campaign name field is required." />
                </div>
                <div class="d-flex justify-content-center flex-stack pt-0">
                    @if($reDripAllow == 1 || $eventDripAllow == 1)
                        <button type="button" class="btn btn-lg btn-primary" data-kt-element="type-next" id="btnNextStep">
                            <span class="indicator-label">Continue <i class="ms-2 bi bi-arrow-right"></i></span>
                        </button>
                    @else
                        <button type="submit" class="btn btn-lg btn-primary" id="btnCompleteStep">
                            <span class="indicator-label">Create <i class="ms-2 bi bi-arrow-right"></i></span>
                        </button>
                    @endif
                </div>
            </div>
        </div>
        @if($reDripAllow == 1 || $eventDripAllow == 1)
            <div class="steps step-2" data-kt-stepper-element="content">
                <div class="w-100">
                    <div class="pb-lg-8">
                        <h1 class="fw-bold text-dark">Campaign Type</h1>
                        <div class="text-muted fw-semibold fs-6">If you need more info, Check out
                            <a href="javascript:void(0);" class="link-primary fw-bold drip-campaign-help">Help Page</a>
                        </div>
                    </div>
                    <div class="mb-5">
                        <label class="form-label mb-3">
                            <span class="required">Campaign Type</span>
                        </label>
                        <div class="row row-cols-1 row-cols-md-2 g-5">
                            <div class="{{ ($reDripAllow == 1 && $eventDripAllow == 1) ? 'col-lg-4' : 'col-lg-6' }}">
                                <input type="radio" class="btn-check" name="campaign_type" value="1" checked="checked" id="radioCampaignDrips">
                                <label class="btn btn-outline btn-outline-dashed btn-active-light-primary d-flex" for="radioCampaignDrips">
                                    <i class="fa fa-forward fs-2x me-5 pt-5" aria-hidden="true"></i>
                                    <span class="d-block fw-semibold text-start">
                                        <span class="text-gray-900 fw-bold d-block fs-4 mb-2">Drip Messages</span>
                                        <span class="text-muted fw-semibold fs-6">Works like a normal drip campaign.</span>
                                    </span>
                                </label>
                            </div>
                            @if($reDripAllow == 1 && $eventDripAllow == 0)
                            <div class="col-lg-6">
                                <input type="radio" class="btn-check" name="campaign_type" value="2" id="radioCampaignReverse">
                                <label class="btn btn-outline btn-outline-dashed btn-active-light-primary d-flex" for="radioCampaignReverse">
                                    <i class="fa fa-backward fs-2x me-5 pt-5" aria-hidden="true"></i>
                                    <span class="d-block fw-semibold text-start">
                                        <span class="text-gray-900 fw-bold d-block fs-4 mb-2">Reminder Messages</span>
                                        <span class="text-muted fw-semibold fs-6">Best with event based reminder drips</span>
                                    </span>
                                </label>
                            </div>
                            @elseif($eventDripAllow == 1 && $reDripAllow == 0)
                                <div class="col-lg-6">
                                    <input type="radio" class="btn-check" name="campaign_type" value="3" id="radioCampaignEvent">
                                    <label class="btn btn-outline btn-outline-dashed btn-active-light-primary d-flex" for="radioCampaignEvent">
                                        <i class="fa fa-calendar-alt fs-2x me-5 pt-5" aria-hidden="true"></i>
                                        <span class="d-block fw-semibold text-start">
                                            <span class="text-gray-900 fw-bold d-block fs-4 mb-2">Event Messages</span>
                                            <span class="text-muted fw-semibold fs-6">Ideal for event-driven messaging.</span>
                                        </span>
                                    </label>
                                </div>
                            @elseif($reDripAllow == 1 && $eventDripAllow == 1)
                                <div class="col-lg-4">
                                    <input type="radio" class="btn-check" name="campaign_type" value="2" id="radioCampaignReverse">
                                    <label class="btn btn-outline btn-outline-dashed btn-active-light-primary d-flex" for="radioCampaignReverse">
                                        <i class="fa fa-backward fs-2x me-5 pt-5"></i>
                                        <span class="d-block fw-semibold text-start">
                                            <span class="text-gray-900 fw-bold d-block fs-4 mb-2">Reminder Messages</span>
                                            <span class="text-muted fw-semibold fs-6">Best with event-based reminder drips.</span>
                                        </span>
                                    </label>
                                </div>
                                <div class="col-lg-4">
                                    <input type="radio" class="btn-check" name="campaign_type" value="3" id="radioCampaignEvent">
                                    <label class="btn btn-outline btn-outline-dashed btn-active-light-primary p-5 d-flex mb-10" for="radioCampaignEvent">
                                        <i class="fa fa-calendar-alt fs-2x me-5 pt-5"></i>
                                        <span class="d-block fw-semibold text-start">
                                            <span class="text-gray-900 fw-bold d-block fs-4 mb-2">Event Messages</span>
                                            <span class="text-muted fw-semibold fs-6">Ideal for event-driven messaging.</span>
                                        </span>
                                    </label>
                                </div>
                            @endif   
                        </div>
                    </div>
                    <div class="d-flex flex-stack pt-10">
                        <button type="button" class="btn btn-lg btn-secondary me-2" id="btnPreviousStep"><i class="me-2 bi bi-arrow-left"></i>Previous</button>
                        <button type="submit" class="btn btn-lg btn-primary" id="createDrip">
                            <span class="indicator-label">Create <i class="ms-2 bi bi-arrow-right"></i></span>
                        </button>
                    </div>
                </div>
            </div>
        @endif
    </form>
</div>
<script type="text/javascript" src="{{asset('assets/js/pagesModals/createCampaignModal.js')}}"></script>