@extends('layouts/contentLayoutMaster')

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

@section('vendor-style')
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/dataTables.bootstrap5.min.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/responsive.bootstrap5.min.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/extensions/sweetalert2.min.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/charts/apexcharts.css')) }}">
@endsection

@section('page-style')
    <link rel="stylesheet" href="{{ asset(mix('css/base/pages/drip-campaign-builder.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('css/base/pages/analytics-reports.css')) }}">
@endsection

@section('content')
    <section class="drip-campaign-show">
        <div class="row">
            <div class="col-12">
                <ul class="nav nav-pills mb-2" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" id="drip-overview-tab" data-bs-toggle="tab" href="#drip-overview"
                           aria-controls="drip-overview" role="tab" aria-selected="true">
                            <i data-feather="pie-chart" class="font-medium-3 me-50"></i>
                            <span class="fw-bold">{{ __('locale.menu.Overview') }}</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="drip-delivery-logs-tab" data-bs-toggle="tab" href="#drip-delivery-logs"
                           aria-controls="drip-delivery-logs" role="tab" aria-selected="false">
                            <i data-feather="list" class="font-medium-3 me-50"></i>
                            <span class="fw-bold">{{ __('locale.drip_campaigns.delivery_logs') }}</span>
                        </a>
                    </li>
                </ul>

                <div class="tab-content">
                    <div class="tab-pane active" id="drip-overview" aria-labelledby="drip-overview-tab" role="tabpanel">
                        <section class="drip-analytics mb-2">
                            @include('customer.DripCampaigns._overview')
                        </section>
                    </div>

                    <div class="tab-pane" id="drip-delivery-logs" aria-labelledby="drip-delivery-logs-tab" role="tabpanel">
                        <section class="analytics-reports-section">
                            <div class="card mb-0">
                                <div class="card-body pb-0">
                                    <div class="mb-2 d-flex flex-wrap align-items-center gap-1">
                                        <div class="input-group input-group-sm flex-nowrap" style="min-width: 9rem; max-width: 12rem;">
                                            <label class="input-group-text fw-bold mb-0 px-75 py-50" for="drip-log-filter-status">{{ __('locale.labels.status') }}</label>
                                            <select id="drip-log-filter-status" class="form-select form-select-sm fw-bold">
                                                <option value="">{{ __('locale.labels.all') }}</option>
                                                @foreach($dripLogStatusFilterOptions as $filterRow)
                                                    <option value="{{ e($filterRow['value']) }}">{{ $filterRow['label'] }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="input-group input-group-sm flex-nowrap ms-auto" style="max-width: 10rem;">
                                            <label class="input-group-text fw-bold mb-0 px-75 py-50" for="drip-log-filter-to">{{ __('locale.labels.to') }}</label>
                                            <input type="text" class="form-control fw-bold" id="drip-log-filter-to" placeholder="{{ __('locale.labels.to') }}">
                                        </div>
                                        <div class="btn-group btn-group-sm" role="group">
                                            <button type="button" class="btn btn-primary waves-light waves-effect fw-bold" id="drip-log-apply-filters">
                                                {{ __('locale.buttons.apply') }} <i data-feather="check" class="font-small-3"></i>
                                            </button>
                                            <button type="button" class="btn btn-outline-primary waves-light waves-effect fw-bold" id="drip-log-reset-filters">
                                                {{ __('locale.buttons.reset') }} <i data-feather="rotate-ccw" class="font-small-3"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-12">
                                    <div class="card">
                                        <div id="processingLoader" class="processing-loader" style="display: none;">
                                            <div class="card">
                                                <div class="card-body">
                                                    <div class="d-flex align-items-center">
                                                        <strong class="text-success">{{ __('locale.datatables.processing') }}</strong>
                                                        <div class="spinner-border ms-auto text-success spinner-grow" role="status" aria-hidden="true"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <table class="table datatables-basic analytics-reports-table datatables-drip-logs mb-0">
                                            <thead>
                                            <tr>
                                                <th></th>
                                                <th></th>
                                                <th></th>
                                                <th>{{ __('locale.labels.id') }}<br><small class="text-muted">{{ __('locale.labels.date') }}</small></th>
                                                <th>{{ __('locale.drip_campaigns.message_sequence') }}<br><small class="text-muted">{{ __('locale.drip_campaigns.sender_type') }}</small></th>
                                                <th>{{ __('locale.labels.from') }}<br><small class="text-muted">{{ __('locale.labels.to') }}</small></th>
                                                <th>{{ __('locale.labels.sms_count') }}<br><small class="text-muted">{{ __('locale.labels.cost') }}</small></th>
                                                <th>{{ __('locale.labels.status') }}</th>
                                                <th>{{ __('locale.labels.actions') }}</th>
                                            </tr>
                                            </thead>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </section>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('vendor-script')
    <script src="{{ asset(mix('vendors/js/tables/datatable/jquery.dataTables.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/dataTables.bootstrap5.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/dataTables.responsive.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/responsive.bootstrap5.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/extensions/sweetalert2.all.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/charts/apexcharts.min.js')) }}"></script>
@endsection

@section('page-script')
    @php
        $dripLogDatatableInfo = __('locale.datatables.showing_entries', [
            'start' => '_START_',
            'end' => '_END_',
            'total' => '_TOTAL_',
        ]);
    @endphp
    <script>
        window.dripShowConfig = {
            uid: @json($dripCampaign->uid),
            reportsUrl: @json(route('customer.drip_campaigns.reports', $dripCampaign->uid)),
            reportsViewUrl: @json(url('/reports')),
            actions: {
                pause: @json(route('customer.drip_campaigns.pause', $dripCampaign->uid)),
                resume: @json(route('customer.drip_campaigns.resume', $dripCampaign->uid)),
                stop: @json(route('customer.drip_campaigns.stop', $dripCampaign->uid)),
            },
            labels: {
                loading: @json(__('locale.labels.loading')),
                from: @json(__('locale.labels.from')),
                to: @json(__('locale.labels.to')),
                message: @json(__('locale.labels.message')),
                status: @json(__('locale.labels.status')),
                cost: @json(__('locale.labels.cost')),
                sequence: @json(__('locale.drip_campaigns.message_sequence')),
                error: @json(__('locale.labels.error')),
                attention: @json(__('locale.labels.attention')),
                smsCount: @json(__('locale.labels.sms_count')),
                sent: @json(__('locale.drip_campaigns.sent')),
            },
            datatable: {
                noResults: @json(__('locale.datatables.no_results')),
                search: @json(__('locale.datatables.search')),
                processing: @json(__('locale.datatables.processing')),
                info: @json($dripLogDatatableInfo),
            },
            charts: {
                labels: @json($presentation['chart']['labels']),
                series: @json($presentation['chart']['series']),
            }
        };

        document.addEventListener('DOMContentLoaded', function () {
            document.querySelectorAll('.drip-campaign-show a[data-bs-toggle="tab"]').forEach(function (tabTrigger) {
                tabTrigger.addEventListener('shown.bs.tab', function () {
                    if (typeof feather !== 'undefined') {
                        feather.replace();
                    }

                    const target = tabTrigger.getAttribute('href');

                    if (target === '#drip-delivery-logs' && typeof $ !== 'undefined' && $.fn.dataTable) {
                        $($.fn.dataTable.tables(true)).DataTable().columns.adjust().responsive.recalc();
                    }

                    if (target === '#drip-overview') {
                        window.dispatchEvent(new Event('resize'));
                    }
                });
            });
        });
    </script>
    <script src="{{ asset(mix('js/scripts/analytics/datatables-reports.js')) }}"></script>
    <script src="{{ asset(mix('js/scripts/drip-campaign-show-overview.js')) }}"></script>
    <script src="{{ asset(mix('js/scripts/drip-campaign-show.js')) }}"></script>
@endsection