Bplus/SuperAdmin/SuperAdmin/Views/Admin/CampaignScheduler.cshtml

@{
    ViewBag.Title = "Service Management";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@using SuperAdmin.Models;
@using SuperAdmin.Models.Http;
@using SuperAdmin.Controllers;
@using SuperAdmin.Source;


@{

}

<style>
    img {
        max-width: 100%;
    }
</style>

<div class="content-header row">
    <div class="content-header-left col-md-6 col-xs-12 mb-1">
        <h2 class="content-header-title">Calendar Management</h2>
    </div>
    <div class="content-header-right breadcrumbs-right breadcrumbs-top col-md-6 col-xs-12">
        <div class="breadcrumb-wrapper col-xs-12">
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a href="Index">Admin</a>
                </li>
                <li class="breadcrumb-item">
                    <a href="#">Campaign Scheduler</a>
                </li>
            </ol>
        </div>
    </div>
</div>

<div class="content-body">
    <!-- Basic form layout section start -->
    <section id="basic-form-layouts">
        <div class="row service-height">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title" id="basic-layout-form">Search</h4>
                    </div>
                    <div class="card-content collapse show">
                        <div class="card-body">
                            <div class="card-block">
                                <div class="form-body">
                                    @Html.AntiForgeryToken()
                                    <div class="row">

                                        <div class="col-md-4 col-sm-4 col-6">
                                            <div class="form-group">
                                                <label>From Date</label>
                                                <div class='input-group'>
                                                    <input type="text" class="form-control fromDateSearch" id="fromDateSearch" name="fromDateSearch">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-4 col-sm-4 col-6">
                                            <div class="form-group">
                                                <label>To date</label>
                                                <div class='input-group'>
                                                    <input type="text" class="form-control toDateSearch" id="toDateSearch" name="toDateSearch">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-md-4 col-sm-4 col-6">
                                            <div class="form-group">
                                                <label>Status</label>
                                                <select class="form-control" id="statusSearch" name="statusSearch">
                                                    <option value="-1" selected>-- All --</option>
                                                    <option value="@CommonUtils.CampaignStatus.Pending">Pending</option>
                                                    <option value="@CommonUtils.CampaignStatus.Running">Running</option>
                                                    <option value="@CommonUtils.CampaignStatus.Paused">Paused</option>
                                                    <option value="@CommonUtils.CampaignStatus.Completed">Completed</option>
                                                    <option value="@CommonUtils.CampaignStatus.Closed">Closed</option>
                                                </select>
                                            </div>
                                        </div>


                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <button type="button" class="btn btn-info" onclick="search()" id="btnSearch">
                                                <i class="fa fa-search"></i> Search
                                            </button>

                                            <button type="button" class="btn btn-warning" onclick="exportExcel()" id="btnExportExcel">
                                                <i class="fa fa-export"></i> Export Excel
                                            </button>

                                            <button type="button" class="btn btn-secondary" onclick="toggleView()" id="btnToggleView">
                                                <i class="fa fa-calendar-alt"></i> <span id="viewModeText">Calendar View</span>
                                            </button>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-12">
                <div class="card">
                    <div class="card-content " id="partial-content">
                        @*<div class="col-md-12 table-responsive" style="padding-top: 10px">
                                @Html.Partial("_Campaigns")
                            </div>*@
                    </div>
                </div>
            </div>


        </div>
    </section>
    <!-- // Basic form layout section end -->
</div>


@section Scripts {
    <script>
        var currentViewType = 'calendar'; // Default to calendar view

        $(document).ready(function () {

            $(".fromDateSearch").datetimepicker({
                format: "DD/MM/YYYY",
                defaultDate: moment().startOf('month')
            });

            $(".toDateSearch").datetimepicker({
                format: "DD/MM/YYYY",
                defaultDate: moment().endOf('day')
            });

            search();
        });

        function toggleView() {
            currentViewType = currentViewType === 'calendar' ? 'table' : 'calendar';
            var iconClass = currentViewType === 'calendar' ? 'fa-calendar-alt' : 'fa-table';
            $('#btnToggleView').find('i').removeClass().addClass('fa ' + iconClass);
            $('#viewModeText').text(currentViewType === 'calendar' ? 'Calendar View' : 'Table View');
            search();
        }

        function search() {
            startSpinner('btnSearch');
            $.ajax({
                url: urlConfig("/Admin/SchedulerSearch"),
                data: {
                    fromDate: $("#fromDateSearch").val(),
                    toDate: $("#toDateSearch").val(),
                    status: $("#statusSearch").val(),
                    viewType: currentViewType
                },
                type: "POST",
                success: function (data) {
                    stopSpinner('btnSearch');
                    $("#partial-content").html(data);
                },
                error: function (data) {
                    stopSpinner('btnSearch');
                    console.log(data.error);
                }
            })
        }


        function exportExcel() {
            console.log("Export data");
            startSpinner('btnExportExcel');
            $.ajax({
                url: urlConfig("/Admin/SchedulerExport"),
                data: {
                    fromDate: $("#fromDateSearch").val(),
                    toDate: $("#toDateSearch").val(),
                    status: $("#statusSearch").val()
                },
                type: "POST",
                xhr: function () {
                    var xhr = new XMLHttpRequest();
                    xhr.onreadystatechange = function () {
                        if (xhr.readyState == 2) {
                            if (xhr.status == 200) {
                                xhr.responseType = "blob";
                                console.log("blob");
                            } else {
                                xhr.responseType = "text";
                                console.log("text");
                            }
                        }
                    };
                    return xhr;
                },
                success: function (data, status, xhr) {

                    stopSpinner('btnExportExcel');
                    let filename = "";
                    let disposition = xhr.getResponseHeader('Content-Disposition');
                    if (disposition && disposition.indexOf('attachment') !== -1) {
                        let filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
                        let matches = filenameRegex.exec(disposition);
                        if (matches != null && matches[1]) filename = matches[1].replace(/['"]/g, '');
                    }
                    let a = document.createElement('a');
                    let url = window.URL.createObjectURL(data);
                    a.href = url;
                    a.download = filename.replace('UTF-8', '');;
                    document.body.append(a);
                    a.click();
                    a.remove();
                    window.URL.revokeObjectURL(url);
                    $("#overlay").fadeOut(300);
                },
                error: function (data) {
                    stopSpinner('btnExportExcel');
                    console.log(data.error);
                }
            })
        }

    </script>
}