@extends('layouts/contentLayoutMaster')

@section('title', $dripCampaign->campaign_name)

@section('vendor-style')
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/forms/wizard/bs-stepper.min.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/forms/select/select2.min.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/pickers/flatpickr/flatpickr.min.css')) }}">
@endsection

@section('page-style')
    <link rel="stylesheet" href="{{ asset(mix('css/base/plugins/forms/pickers/form-flat-pickr.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('css/base/plugins/forms/form-wizard.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('css/base/pages/drip-campaign-builder.css')) }}">
@endsection

@section('content')
    @php
        $builderStartStep = 0;
        if (old('wizard_step')) {
            $builderStartStep = max(0, min(4, (int) old('wizard_step') - 1));
        } elseif ($dripCampaign->messages->isEmpty()) {
            $builderStartStep = min(2, max(0, ($dripCampaign->wizard_step ?? 1) - 1));
        } elseif ($dripCampaign->contactGroups->isEmpty()) {
            $builderStartStep = min(1, max(0, ($dripCampaign->wizard_step ?? 1) - 1));
        }
    @endphp
    <section id="drip-campaign-builder" class="drip-builder modern-horizontal-wizard"
             data-campaign-uid="{{ $dripCampaign->uid }}"
             data-start-step="{{ $builderStartStep }}">

        <div class="row g-2 drip-builder-layout">
            <div class="col-12 drip-builder-main">
                <div class="bs-stepper wizard-modern drip-wizard-example">
                    <div class="bs-stepper-header">
                        <div class="step" data-target="#drip-step-setup" role="tab" id="drip-step-setup-trigger">
                            <button type="button" class="step-trigger">
                                <span class="bs-stepper-box">
                                    <i data-feather="settings" class="font-medium-3"></i>
                                </span>
                                <span class="bs-stepper-label">
                                    <span class="bs-stepper-title">{{ __('locale.drip_campaigns.step_setup') }}</span>
                                    <span class="bs-stepper-subtitle">{{ __('locale.drip_campaigns.step_setup_subtitle') }}</span>
                                </span>
                            </button>
                        </div>
                        <div class="line">
                            <i data-feather="chevron-right" class="font-medium-2"></i>
                        </div>
                        <div class="step" data-target="#drip-step-groups" role="tab" id="drip-step-groups-trigger">
                            <button type="button" class="step-trigger">
                                <span class="bs-stepper-box">
                                    <i data-feather="users" class="font-medium-3"></i>
                                </span>
                                <span class="bs-stepper-label">
                                    <span class="bs-stepper-title">{{ __('locale.drip_campaigns.step_groups') }}</span>
                                    <span class="bs-stepper-subtitle">{{ __('locale.drip_campaigns.step_groups_subtitle') }}</span>
                                </span>
                            </button>
                        </div>
                        <div class="line">
                            <i data-feather="chevron-right" class="font-medium-2"></i>
                        </div>
                        <div class="step" data-target="#drip-step-messages" role="tab" id="drip-step-messages-trigger">
                            <button type="button" class="step-trigger">
                                <span class="bs-stepper-box">
                                    <i data-feather="message-square" class="font-medium-3"></i>
                                </span>
                                <span class="bs-stepper-label">
                                    <span class="bs-stepper-title">{{ __('locale.drip_campaigns.step_messages') }}</span>
                                    <span class="bs-stepper-subtitle">{{ __('locale.drip_campaigns.step_messages_subtitle') }}</span>
                                </span>
                            </button>
                        </div>
                        <div class="line">
                            <i data-feather="chevron-right" class="font-medium-2"></i>
                        </div>
                        <div class="step" data-target="#drip-step-scheduling" role="tab" id="drip-step-scheduling-trigger">
                            <button type="button" class="step-trigger">
                                <span class="bs-stepper-box">
                                    <i data-feather="clock" class="font-medium-3"></i>
                                </span>
                                <span class="bs-stepper-label">
                                    <span class="bs-stepper-title">{{ __('locale.drip_campaigns.step_scheduling') }}</span>
                                    <span class="bs-stepper-subtitle">{{ __('locale.drip_campaigns.step_scheduling_subtitle') }}</span>
                                </span>
                            </button>
                        </div>
                        <div class="line">
                            <i data-feather="chevron-right" class="font-medium-2"></i>
                        </div>
                        <div class="step" data-target="#drip-step-review" role="tab" id="drip-step-review-trigger">
                            <button type="button" class="step-trigger">
                                <span class="bs-stepper-box">
                                    <i data-feather="check-circle" class="font-medium-3"></i>
                                </span>
                                <span class="bs-stepper-label">
                                    <span class="bs-stepper-title">{{ __('locale.drip_campaigns.step_review') }}</span>
                                    <span class="bs-stepper-subtitle">{{ __('locale.drip_campaigns.step_review_subtitle') }}</span>
                                </span>
                            </button>
                        </div>
                    </div>

                    <div class="bs-stepper-content">
                        <div id="drip-step-setup" class="content" role="tabpanel" aria-labelledby="drip-step-setup-trigger">
                            <div class="content-header">
                                <h5 class="mb-0">{{ __('locale.drip_campaigns.step_setup') }}</h5>
                                <small class="text-muted">{{ __('locale.drip_campaigns.step_setup_subtitle') }}</small>
                            </div>
                            @include('customer.DripCampaigns._step_setup')
                            @include('customer.DripCampaigns._wizard_nav', ['first' => true])
                        </div>

                        <div id="drip-step-groups" class="content" role="tabpanel" aria-labelledby="drip-step-groups-trigger">
                            <div class="content-header">
                                <h5 class="mb-0">{{ __('locale.drip_campaigns.step_groups') }}</h5>
                                <small class="text-muted">{{ __('locale.drip_campaigns.step_groups_subtitle') }}</small>
                            </div>
                            @include('customer.DripCampaigns._step_groups')
                            @include('customer.DripCampaigns._wizard_nav')
                        </div>

                        <div id="drip-step-messages" class="content" role="tabpanel" aria-labelledby="drip-step-messages-trigger">
                            <div class="content-header">
                                <h5 class="mb-0">{{ __('locale.drip_campaigns.create_messages_heading') }}</h5>
                                <small class="text-muted">{{ __('locale.drip_campaigns.step_messages_subtitle') }}</small>
                            </div>
                            @include('customer.DripCampaigns._step_messages')
                            @include('customer.DripCampaigns._wizard_nav')
                        </div>

                        <div id="drip-step-scheduling" class="content" role="tabpanel" aria-labelledby="drip-step-scheduling-trigger">
                            <div class="content-header">
                                <h5 class="mb-0">{{ __('locale.drip_campaigns.step_scheduling') }}</h5>
                                <small class="text-muted">{{ __('locale.drip_campaigns.step_scheduling_subtitle') }}</small>
                            </div>
                            @include('customer.DripCampaigns._step_scheduling')
                            @include('customer.DripCampaigns._wizard_nav')
                        </div>

                        <div id="drip-step-review" class="content" role="tabpanel" aria-labelledby="drip-step-review-trigger">
                            <div class="content-header">
                                <h5 class="mb-0">{{ __('locale.drip_campaigns.step_review') }}</h5>
                                <small class="text-muted">{{ __('locale.drip_campaigns.step_review_subtitle') }}</small>
                            </div>
                            @include('customer.DripCampaigns._step_review')
                            @include('customer.DripCampaigns._wizard_nav', ['last' => true])
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('vendor-script')
    <script src="{{ asset(mix('vendors/js/forms/wizard/bs-stepper.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/forms/select/select2.full.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/pickers/flatpickr/flatpickr.min.js')) }}"></script>
    <script src="{{ asset(mix('js/scripts/dom-rules.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/extensions/sortable.min.js')) }}"></script>
@endsection

@section('page-script')
    <script src="{{ asset(mix('js/scripts/sms-counter.js')) }}"></script>
    <script src="{{ asset(mix('js/scripts/sms-compose-core.js')) }}"></script>
    <script>
        window.dripBuilderConfig = {
            uid: @json($dripCampaign->uid),
            isEdit: true,
            routes: {
                setup: @json(route('customer.drip_campaigns.setup', $dripCampaign->uid)),
                groups: @json(route('customer.drip_campaigns.groups', $dripCampaign->uid)),
                messages: @json(route('customer.drip_campaigns.messages', $dripCampaign->uid)),
                launch: @json(route('customer.drip_campaigns.launch', $dripCampaign->uid)),
                smsCount: @json(route('customer.drip_campaigns.sms_count')),
                tags: @json(route('customer.drip_campaigns.tags')),
            },
            originator: @json($originator ?? 'sender_id'),
            messages: @json($builderMessages),
            groups: @json($dripCampaign->contactGroups->pluck('id')),
            groupNames: @json($dripCampaign->contactGroups->pluck('name')),
            labels: {
                saved: @json(__('locale.drip_campaigns.saved')),
                launched: @json(__('locale.drip_campaigns.launched')),
                messageScheduleImmediate: @json(__('locale.drip_campaigns.message_schedule_immediate')),
                messageScheduleRelative: @json(__('locale.drip_campaigns.message_schedule_relative')),
                messageScheduleRelativePrev: @json(__('locale.drip_campaigns.message_schedule_relative_prev')),
                messageScheduleAt: @json(__('locale.drip_campaigns.message_schedule_at')),
                editMessage: @json(__('locale.drip_campaigns.edit_message')),
                deleteMessage: @json(__('locale.buttons.delete')),
                messageTitle: @json(__('locale.drip_campaigns.message_title')),
            },
            flatpickr: {
                today: @json(date('Y-m-d')),
                nowTime: @json(\Carbon\Carbon::now()->setTimezone(config('app.timezone'))->format('H:i')),
            },
        };
    </script>
    <script src="{{ asset(mix('js/scripts/drip-campaign-builder.js')) }}"></script>
@endsection