@extends('reachassuree_admin/layouts.main')
@section('title', $data['title'])
@section('content')

<style>
    .rounded-pill {
        margin: 5px auto !important;
        line-height: 10px !important;
        padding: 0.26rem 0.6rem 0.2rem !important;
    }

    .modal-dialog.modal-xxl {
        max-width: calc(90% - 1rem);
        width: calc(90% - 1rem);
        margin: 0.5rem;
    }

    tr.zabuto-calendar__week--last .zabuto-calendar__day:hover,
    tr.zabuto-calendar__week--first .zabuto-calendar__day:hover,
    tr.zabuto-calendar__week .zabuto-calendar__day:hover {
        cursor: pointer;
    }

    tr.zabuto-calendar__week--last .zabuto-calendar__day--today:hover,
    tr.zabuto-calendar__week--first .zabuto-calendar__day--today:hover,
    tr.zabuto-calendar__week .zabuto-calendar__day--today:hover {
        cursor: pointer;
    }

    .contact-links {
        display: flex;
        /* Use flexbox layout */
        align-items: center;
        /* Center the items vertically */
        justify-content: flex-start;
        /* Align the items to the left */
        list-style: none;
        /* Remove the default bullet points */
        margin: 0;
        /* Remove any default margin */
        padding: 0;
        /* Remove any default padding */
    }

    .contact-links li {
        margin-right: 5px;
        /* Add some horizontal spacing between the items */
    }

    ::-webkit-scrollbar {
        width: 20px;
    }

    ::-webkit-scrollbar-track {
        background-color: transparent;
    }

    ::-webkit-scrollbar-thumb {
        background-color: #C7C7C7;
        border-radius: 20px;
        border: 6px solid transparent;
        background-clip: content-box;
    }

    ::-webkit-scrollbar-thumb:hover {
        background-color: #a8bbbf;
    }

    .pos-middle {
        vertical-align: middle;
    }

    .custom-dropdown-toggle-top.show {
        top: 70% !important;
    }

    #datatable tbody td:nth-child(13) {
        white-space: normal;
        word-wrap: break-word;
    }

    #datatable tbody td:nth-child(19) {
        white-space: normal;
        word-wrap: break-word;
        width: 300px;
    }

    #datatable tbody td:nth-child(20) {
        white-space: normal;
        word-wrap: break-word;
    }

    #datatable tbody td:nth-child(21) {
        white-space: normal;
        word-wrap: break-word;
    }

    #datatable tbody td:nth-child(25) {
        white-space: normal;
        word-wrap: break-word;
    }

    #datatableFeedBackReport tbody tr td:nth-child(4) {
        white-space: normal;
        word-wrap: break-word;
        max-width: 300px;
    }

    #datatable tbody td {
        white-space: normal;
        word-wrap: break-word;
    }

    /* navbaar */

    .nav {
        padding: 10px 0;
        width: fit-content;
        border-radius: 0.8rem;
        background-color: #f1f5fe;
    }

    div#myTabContent {
        padding: 1rem;
        border-radius: 0.8rem;
    }

    li.nav-item {
        border-right: 1px solid #074193;
        padding: 0 15px;
    }

    li.nav-item:last-child {
        border-right: none;
    }

    .nav-tabs {
        border-bottom: 0;
    }

    .nav-link {
        padding: 0.5rem 1.2rem;
        font-weight: 500;
    }

    .nav-tabs .nav-item.show .nav-link,
    .nav-tabs .nav-link.active {
        border-color: unset;
        border: none;
        color: #fff !important;
        background-color: #0c63e4;
        border-radius: 0.25rem;
    }

    .nav-tabs .nav-link:focus,
    .nav-tabs .nav-link:hover {
        border-color: unset;
        border: 0;
    }

    .nav-tabs .nav-link {
        border-radius: 0.6rem;
        border: none;
    }

    /* SCROLLBAR */

    .col-md-2.col-md-3 {
        max-width: 73%;
        margin: 0 .25rem;
        /* margin-bottom: 2rem; */
        border: 0;
        flex-basis: 73%;
        flex-grow: 0;
        flex-shrink: 0;
    }

    .row.col-md-2.col-md-3 {
        align-items: stretch;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
    }

    ul.nav.nav-pills.nav-justified {
        padding-top: 30px;
    }

    /* datatables */

    table.dataTable thead tr>.dtfc-fixed-left,
    table.dataTable thead tr>.dtfc-fixed-right,
    table.dataTable tfoot tr>.dtfc-fixed-left,
    table.dataTable tfoot tr>.dtfc-fixed-right {
        top: 0;
        bottom: 0;
        z-index: 3;
        background-color: white
    }

    table.dataTable tbody tr>.dtfc-fixed-left,
    table.dataTable tbody tr>.dtfc-fixed-right {
        z-index: 1;
        background-color: white
    }

    div.dtfc-left-top-blocker,
    div.dtfc-right-top-blocker {
        background-color: white
    }

    p {
        margin-top: 0;
        margin-bottom: 0rem;
    }

    /* Highcharts */

    .highcharts-menu-item:nth-child(7),
    .highcharts-menu-item:nth-child(8),
    .highcharts-menu-item:nth-child(9),
    .highcharts-menu-item:nth-child(10) {
        display: none;
    }

    .status-pedding {
        padding: 20px 0px 20px 0px;
    }

    button#dropdownMenuButton1 {
        margin-left: 10px;
        margin-bottom: 3px;

    }

    input[type="radio"] {
        display: none;
        /* Hide the default radio button */
    }

    /* Custom radio button styles */
    input[type="radio"]+label {
        display: inline-block;
        padding: 5px 10px;
        background-color: #f1f5fe;
        border-radius: 4px;
        cursor: pointer;
    }

    /* Custom radio button styles when selected */
    input[type="radio"]:checked+label {
        background-color: #2762e4;
        color: #fff;
    }

    .modal-content .form-check input[type="radio"]+label {
        display: inline-block;
        padding: 10px 30px;
        background-color: #f1f5fe;
        border-radius: 4px;
        cursor: pointer;
    }

    .modal-content .form-check input[type="radio"]:checked+label {
        background-color: #2762e4;
        color: #fff;
    }


    .cal-year .form-check-label {
        padding: 10px 30px;
    }

    .cal-year .form-check {
        padding-left: 0px !important;
    }

    .currentdatedash h5 {
        color: #556ee6;
        font-weight: 500;
    }

    .currentdatedash {
        padding: 7px 0;
        width: fit-content;
        border-radius: 0.8rem;
        background-color: #F1F5FE;
    }

    figure.highcharts-figure {
        margin: 0 0 0 !important;
    }

    .datareport {
        padding: 7px 0 !important;
    }

    .details-report .highcharts-data-table table {
        width: 100%;
    }

    #datatableContactReport tbody tr td:nth-child(6) {
        white-space: normal;
        word-wrap: break-word;
        max-width: 100px;
    }

    .dash-lable span.badge.bg-warning {
        width: 63px;
    }

    .dash-labl-complain span.bg-danger.badge.me-2 {
        width: 70px;
    }

    .dash-lable-feedback span.badge.bg-warning {
        width: 63px;
    }

    .timepicker_div {
        text-align: center;
        padding: 40px;
    }

    td {
        padding: 9px 9px !important;
    }


    @media(max-width:1600px) {
        td {
            padding: unset !important;
        }
    }

    @media(max-width:1199px) {
        td {
            padding: 9px !important;
        }
    }

    .custom-dropdown-toggle-top.show {
        top: 8% !important;
        inset: unset !important;
        margin: unset !important;
        transform: unset !important;
        right: 2% !important;
    }

    button#dropdownMenuButton1 {
        margin-left: 10px;
    }

    button#dropdownMenuButton1 {
        padding: 3px 8px;
        margin-right: 10px;
    }

    /* view report modal close buttton  */
    .report-close {
        vertical-align: middle;
        opacity: 0.7;
    }

    .modal-body {
        background-color: #F1F5FE;
    }

    .smsBalanceArea .card {
        border: 2px solid #cdcdcd6b;
        border-radius: 12px;
        padding: 5px 0 0;
    }

    @media (max-width: 1550px) {
        #myTab {
            align-items: stretch;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            overflow-x: auto !important;
        }
    }
   
</style>

<!-- display calender and Event Add-->
<div class="page-content">
    <div class="row">
        <!-- Calendar and Event Add -->
        <div class="col-xxl-3 col-xl-10">
            <div class="card calender-margin">
                <div class="card-body">
                    <div class="d-flex justify-content-center">
                        @php
                            $check_privileges = userPrivilegesReturn(1, 3);
                        @endphp
                        @if (($check_privileges == 1) || (Session::get('admin_type') == 0))
                            <div class="mb-3">
                                <button class="btn btn-primary px-3 form-control" onclick="return addEvent();" type="button"><span>+ Add Event</span></button>
                            </div>
                        @endif
                    </div>
                    <div id="my-calander"></div>
                </div>
            </div>

            {{-- @if (getSMSBalance()['error'] == 1)
                <div class="card calender-margin">
                    <div class="card-body text-center smsBalanceArea">
                        <p class="text-center mb-3"><strong>SMS Balance</strong></p>

                        <div class="card mb-3">
                            <p class="mb-2">Transactional bal.</p>

                            @if (getSMSBalance()['Trans'] < 2000)
                                <h5 class="alert-animation">{{ number_format((float) getSMSBalance()['Trans'], 2, '.', ',') }}</h5>
                            @else
                                <h5>{{ number_format((float) getSMSBalance()['Trans'], 2, '.', ',') }}</h5>
                            @endif  

                        </div>
                        <div class="d-flex">
                            <div class="card mb-0 w-100 me-1">
                                <p class="mb-2">Promotional bal.</p>

                                @if (getSMSBalance()['Promo'] < 2000)
                                    <h5 class="alert-animation">{{ number_format((float) getSMSBalance()['Promo'], 2, '.', ',') }}</h5>
                                @else
                                    <h5>{{ number_format((float) getSMSBalance()['Promo'], 2, '.', ',') }}</h5>
                                @endif  
                            </div>
                            <div class="card mb-0 w-100 ms-1">
                                <p class="mb-2">DLT bal.</p>
                                @if (getSMSBalance()['DLT'] < 2000)
                                    <h5 class="alert-animation">{{ number_format((float) getSMSBalance()['DLT'], 2, '.', ',') }}</h5>
                                @else
                                    <h5>{{ number_format((float) getSMSBalance()['DLT'], 2, '.', ',') }}</h5>
                                @endif  
                            </div>
                        </div>
                    </div>
                </div>
            @endif --}}

            @if (getSMSBalance()['error'] == 1)
            <div class="card calender-margin">
                <div class="card-body text-center smsBalanceArea">
                    <p class="text-center mb-3"><strong>SMS Balance</strong></p>

                    <div class="card mb-3">
                        <p class="mb-2">DLT Balance</p>

                        @if (getSMSBalance()['balance']['sms_wallet'] < 2000)
                            <h5 class="alert-animation">{{ number_format((float) getSMSBalance()['balance']['sms_wallet'], 2, '.', ',') }}</h5>
                        @else
                            <h5>{{ number_format((float) getSMSBalance()['balance']['sms_wallet'], 2, '.', ',') }}</h5>
                        @endif  

                    </div>
                </div>
            </div>
        @endif
        </div>

        <!-- Data Tabs -->
        <div class="col-xxl-9 col-xl-12">
            <div class="card">
                <div class="card-body">
                    <div class="row justify-content-center">
                        <div class="col-md-8">
                            <ul class="nav nav-tabs mb-3 datareport" id="myTab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link waves-effect active" id="all_data" data-bs-toggle="tab" data-bs-target="#all" type="button" role="tab" aria-controls="all" aria-selected="true">All</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link waves-effect" id="subscription_date" data-bs-toggle="tab" data-bs-target="#subscription" type="button" role="tab" aria-controls="subscription" aria-selected="false">Subscription Due</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link waves-effect" id="greeting_id" data-bs-toggle="tab" data-bs-target="#greetings" type="button" role="tab" aria-controls="greetings" aria-selected="false">Greetings</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link waves-effect" id="my_today_date" data-bs-toggle="tab" data-bs-target="#today" type="button" role="tab" aria-controls="today" aria-selected="false">My Today</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link waves-effect" id="followup_data" data-bs-toggle="tab" data-bs-target="#followup" type="button" role="tab" aria-controls="followup" aria-selected="false">Follow Up</button>
                                </li>                                
                            </ul>
                        </div>
                        <div class="col-md-4">
                            <div class="text-center mb-2 float-end currentdatedash">
                                <h5 id="display" type="button" class="btn btn-light w-md waves-effect waves-light m-0"></h5>
                            </div>
                        </div>
                    </div>

                    <div class="row g-0">
                        <div class="col-md-9 mb-3"></div>
                        <div class="col-md-1 mb-2 mt-2">
                            <label for="calender_status" class="form-label">Calender:</label>
                        </div>
                        <div class="col-md-2 mb-3 px-0">
                            <select class="form-control" name="calender_status" id="calender_status">
                                <option value="-2">This Day</option>
                                <option value="-1">All</option>
                                <option value="0">Week</option>
                                <option value="1">Next Week</option>
                            </select>
                        </div>
                    </div>

                    <!-- Tab Content -->
                    <div class="tab-content p-0" id="myTabContent">
                        <!-- All Data Tab -->
                        <div class="tab-pane fade show active" id="all" role="tabpanel" aria-labelledby="all_data">
                            <div class="table-responsive">
                                <table id="datatable" class="table align-middle table-nowrap table-striped display nowrap w-100">
                                    <thead class="table-light">
                                        <tr>
                                            <th>Sr. No.</th>
                                            <th>Dept Name</th>
                                            <th>Client Info.</th>
                                            <th>Action</th>
                                            <th>Status</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                                @csrf
                            </div>
                        </div>

                        <!-- Greetings Tab -->
                        <div class="tab-pane fade" id="greetings" role="tabpanel" aria-labelledby="greeting_id">
                            <div class="table-responsive">
                                <table id="datatable5" class="table align-middle table-nowrap table-striped display nowrap w-100 scrollable-element">
                                    <thead class="table-light">
                                        <tr>
                                            <th>Sr. No.</th>
                                            <th>Greeting Type</th>
                                            <th>Agent Name</th>
                                            <th>Date</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                                @csrf
                            </div>
                        </div>

                        <!-- My Today Tab -->
                        <div class="tab-pane fade" id="today" role="tabpanel" aria-labelledby="my_today_date">
                            <div class="table-responsive">
                                <div class="row g-0">
                                    <div class="col-md-9 mb-3"></div>
                                    <div class="col-md-1 mb-2 mt-2">
                                        <label for="event_status" class="form-label">Status:</label>
                                    </div>
                                    <div class="col-md-2 mb-3">
                                        <select class="form-control" name="event_status" id="event_status">
                                            <option value="-2">Select</option>
                                            <option value="-1">All</option>
                                            <option value="0">Prev.Pending</option>
                                            <option value="1">Complete</option>
                                        </select>
                                    </div>
                                </div>

                                <table id="datatable7" class="table align-middle table-nowrap table-striped display nowrap w-100 scrollable-element">
                                    <thead class="table-light">
                                        <tr>
                                            <th>Sr. No.</th>
                                            <th>Event Name</th>
                                            <th>Event Date</th>
                                            <th>Event Time</th>
                                            <th>Event Repeated</th>
                                            <th>Action</th>
                                            <th>Status</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                                @csrf
                            </div>
                        </div>

                        <!-- FollowupTab -->
                        <div class="tab-pane fade" id="followup" role="tabpanel" aria-labelledby="followup_data">
                            <div class="table-responsive">
                                <div class="row g-0">
                                    <div class="col-md-9 mb-3"></div>
                                </div>

                                <table id="datatable8" class="table align-middle table-nowrap table-striped display nowrap w-100 scrollable-element">
                                    <thead class="table-light">
                                        <tr>
                                            <th>Sr. No.</th>
                                            <th>Client Name</th>
                                             <th>followup date</th>
                                            <th>Type</th>
                                            <th>Notes</th>
                                            <th>Action</th>
                                            {{-- <th>Status</th> --}}
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                                @csrf
                            </div>
                        </div>


                        <!-- Subscription Due Tab -->
                        <div class="tab-pane fade" id="subscription" role="tabpanel" aria-labelledby="subscription_date">
                            <div class="table-responsive">
                                <table id="datatable3" class="table align-middle table-nowrap table-striped display nowrap w-100 scrollable-element">
                                    <thead class="table-light">
                                        <tr>
                                            <th>Sr. No.</th>
                                            <th>Firm Name</th>
                                            <th>Agent Name</th>
                                            <th>Payment Date</th>
                                            <th>Expiry Date</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                                @csrf
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Add Event Modal -->
    <div class="modal fade" id="modalAddEvent" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="modalAddEventLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalAddEventLabel">Add Event</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="formAddEvent" method="POST" class="needs-validation" novalidate>
                    <input type="hidden" name="event_id" id="event_id">
                    @csrf
                    <div class="modal-body">
                        @if(getSpacesFolder() != "Reachassuree")
                        <div class="row">
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="event_date" class="form-label">Select Date<span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="event_date" name="event_date" placeholder="dd-mm-yyyy" required autocomplete="off">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="event_time" class="form-label">Select Time</label>
                                    <input type="time" class="form-control" id="event_time" name="event_time" placeholder="hh:mm" autocomplete="off" onclick="this.showPicker()">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="event_repeated" class="form-label">Event Repeated<span class="text-danger">*</span></label>
                                    <select class="form-control select2-ajax" id="event_repeated" name="event_repeated" required>
                                        <option value=""></option>
                                        <option value="One-Time Event">One-Time Event</option>
                                        <option value="Every Day">Every Day</option>
                                        <option value="Every Week">Every Week</option>
                                        <option value="Every Month">Every Month</option>
                                        <option value="Every Year">Every Year</option>
                                        <option value="After Days">After Days</option>
                                    </select>
                                    <div class="invalid-feedback">This value is required.</div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-2 d-none after_days_id">
                                <div class="mb-3">
                                    <label for="after_days" class="form-label">Days<span class="text-danger">*</span></label>
                                    <input type="text" name="after_days" id="after_days" class="form-control" placeholder="Enter days" autocomplete="off" required onkeypress="return isNumber(event)" maxlength="3">
                                </div>
                            </div>
                            <div class="col-md-12 event_note_id">
                                <div class="mb-3">
                                    <label for="event_note" class="form-label">Note<span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="event_note" name="event_note" placeholder="Enter Event Note" required autocomplete="off">
                                </div>
                            </div>
                        </div>
                    @else
                        <div class="row">
                            <div class="col-md-2">
                                <div class="mb-3">
                                    <label for="add_event_date" class="form-label">Select Date<span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="add_event_date" name="add_event_date" placeholder="Select Event Date" required>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="mb-3">
                                    <label for="example-time-input" class="form-label">Time</label>
                                    <input class="form-control" type="time" id="time_event" name="time_event" placeholder="hh:mm" onclick="this.showPicker()">
                                </div>
                            </div>
                            <div class="col-md-8">
                                <div class="mb-3">
                                    <label for="add_event_note" class="form-label">Note<span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="add_event_note" name="add_event_note" placeholder="Enter Event Note" required autocomplete="off">
                                </div>
                            </div>
                        </div>
                    @endif
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                        <button type="button" id="btnevent" class="btn btn-primary px-3">Save</button>
                    </div>
                </form>
                </div>
            </div>
        </div>
    </div>
<!-- add event modal end-->
@endsection

@section('custom-scripts')

<script src="{{ asset('ra-assets/libs/moment/min/moment.min.js') }}"></script>
<script src="{{ asset('ra-assets/libs/chance/chance.min.js') }}"></script>
<!-- dashboard report -->
<script src="{{ asset('ra-assets/js/dashboard-report/feedback.js') }}"></script>
<script src="{{ asset('ra-assets/js/dashboard-report/contact.js') }}?v=1"></script>
<script src="{{ asset('ra-assets/js/dashboard-report/complain.js') }}"></script>
<script src="{{ asset('ra-assets/js/dashboard-report/subscription-amount-current-month.js') }}"></script>
<script src="{{ asset('ra-assets/js/dashboard-report/subscription-amount-current-year.js') }}"></script>
<script src="{{ asset('ra-assets/js/dashboard-report/new-subscription-current-year.js') }}"></script>
<script src="{{ asset('ra-assets/js/dashboard-report/new-subscription-current-month.js') }}"></script>
<script src="{{ asset('ra-assets/js/dashboard-report/subscription-reactive-current-month.js') }}"></script>
<script src="{{ asset('ra-assets/js/dashboard-report/active-subscription.js') }}"></script>
<script src="{{ asset('ra-assets/js/dashboard-report/unactive-subscription.js') }}"></script>
<script src="{{ asset('ra-assets/js/dashboard-report/active-free-crm.js') }}"></script>
<script src="{{ asset('ra-assets/js/dashboard-report/unactive-free-crm.js') }}"></script>
<script src="{{ asset('ra-assets/js/dashboard-report/weekly-new-subscription.js') }}"></script>
<script src="{{ asset('ra-assets/js/dashboard-report/today-new-reactive-subscriotion.js') }}"></script>
<script src="{{ asset('ra-assets/js/dashboard-report/today-new-upgrade-subscriotion.js') }}"></script>
<script src="{{ asset('ra-assets/js/dashboard-report/today-subscription-amount.js') }}"></script>

<link href="{{ asset('ra-assets/js/zabunto_calander/demo.css') }}" rel="stylesheet">
<link href="{{ asset('ra-assets/js/zabunto_calander/zabuto_calendar.min.css') }}" rel="stylesheet">
<script src="{{ asset('ra-assets/js/zabunto_calander/zabuto_calendar.min.js') }}"></script>

{{-- for Highcharts --}}
<script src="{{ asset('ra-assets/js/highchart/highcharts.js') }}"></script>
<script src="{{ asset('ra-assets/js/highchart/highcharts-more.js') }}"></script>
<script src="{{ asset('ra-assets/js/highchart/solid-gauge.js') }}"></script>
<script src="{{ asset('ra-assets/js/highchart/data.js') }}"></script>
<script src="{{ asset('ra-assets/js/highchart/drilldown.js') }}"></script>
<script src="{{ asset('ra-assets/js/highchart/exporting.js') }}"></script>
<script src="{{ asset('ra-assets/js/highchart/offline-exporting.js') }}"></script>
<script src="{{ asset('ra-assets/js/highchart/export-data.js') }}"></script>
<script src="{{ asset('ra-assets/js/highchart/accessibility.js') }}"></script>

<script type="text/javascript">
    var ajaxCalendarData = "{{ route('calender') }}";
    var saveEventCalander = "{{ route('event.save.calender') }}";
    var forwardEvent = "{{ route('event.forword.calender') }}";
    var deleteEvent = "{{ route('event.delete.calender') }}";
    var completeEvent = "{{ route('event.complete.calender') }}";
    var csrfToken = $("[name=_token]").val();
    var followupDelete = "{{route('delete.followup')}}";
    var currentDate = new Date();
    var table, table1, table2, table3, table4, table5, table7, table11, table8;

    // show current date in calendar
    var date = new Date();
    var year = date.getFullYear();
    var month = date.getMonth() + 1; // getMonth() returns 0-11, so add 1 to get 1-12
    var day = date.getDate();

    var convertDate = date.toLocaleDateString("en-GB");
    document.getElementById("display").innerHTML = convertDate;
    var is_renewable = "";
    var startDate = year + "-" + month + "-" + day;

    //- show data according to Calendar status
    $("#calender_status").select2({placeholder: "Select Calendar Status"}).on('change', function() {
        $('#datatable, #datatable3, #datatable5, #datatable7, #datatable8').DataTable().ajax.reload(null, false);
    });

    $("#event_status").select2().change(function() {
        $('#datatable7').DataTable().ajax.reload(null, false);
    });

    // ZABUTO CALANDER
    $('#my-calander').zabuto_calendar({
        ajax: ajaxCalendarData,
        cell_border: true,
        today: true,
        classname: 'table-bordered',
        navigation_markup: {
            prev: '<i class="fas fa-chevron-circle-left"></i>',
            next: '<i class="fas fa-chevron-circle-right"></i>'
        }
    });

    $("#add_event_date").datepicker({
        format: "dd-mm-yyyy",
        container: "#modalAddEvent",
        startDate: date,
        // todayHighlight:new Date()
    }).on('changeDate', function() {
        $('.datepicker').hide();
    });

    // $("#event_repeated").select2({placeholder:"Select status"}).on('change',function(){
    //     var value = $(this).val();

    //     if(value == "After Days"){
    //         $(".after_days_id").removeClass('d-none');
    //         $(".event_note_id").removeClass('col-md-12').addClass('col-md-10');
            
    //     }else{
    //         $(".after_days_id").addClass('d-none');
    //         $(".event_note_id").removeClass('col-md-10').addClass('col-md-12')
    //     }
    // });

    function getMinTime() {
        const now = new Date();
        const hours = now.getHours().toString().padStart(2, '0');
        const minutes = now.getMinutes().toString().padStart(2, '0');
        return `${hours}:${minutes}`;
    }

    function addEvent() {
        // document.getElementById("formAddEvent").reset();
        $("#modalAddEvent").modal('show');
        
        $("#modalAddEventLabel").html("Add Event");
        $("#btnevent").html("Save");
        
        $("#event_id").val('');
        $("#event_repeated").val('').trigger('change');
        
        $("#editevent").attr("id", "btnevent");
        
        $('#formAddEvent').removeClass('was-validated').trigger('reset');
    }

    //event add
    $("#btnevent").on('click', function() {
        var eventId = $("#event_id").val();
        var eventDate = $("#add_event_date").val();
        var eventTime = $("#time_event").val();
        var eventRepeated = $("#event_repeated").val();
        var eventAftreDays = $("#after_days").val();
        var eventNote = $("#add_event_note").val();

        if (eventId == '') {
            // EventAdd(eventDate, eventNote, eventTime, eventRepeated, eventAftreDays);
            EventAdd(eventDate, eventNote, eventTime);

        } else {
            // EventEdit(eventDate, eventNote, eventTime, eventRepeated, eventAftreDays, eventId);
            EventEdit(eventDate, eventNote, eventTime, eventId);

        }
    });

    // function EventAdd(eventDate, eventNote, eventTime, eventRepeated, eventAftreDays) {
        function EventAdd(eventDate, eventNote, eventTime) {
        $.ajax({
            url: saveEventCalander,
            type: 'POST',
            data: {
                "_token": csrfToken,
                "event_date": eventDate,
                "event_time": eventTime,
                "event_note": eventNote,
                // "event_repeated": eventRepeated,
                // "after_days": eventAftreDays,
            },
            beforeSend: function showLoader(){
                $('#preloader, #status').show();
                $('#preloader').css('background-color', '#ffffff69');
            },
            success: function(response) {
                $('#preloader, #status').hide();

                if (response['status'] == 1) {
                    toastr["success"](response['msg']);
                    $('#datatable, #datatable7').DataTable().ajax.reload(null, false);
                    $("#modalAddEvent").modal('hide');
                    refreshCalendar();
                } else {
                    toastr["error"](response['msg']);
                }
            }
        });
    }

    function eventForword(id) {
        $("#modalAddEvent").modal('show');

        $.ajax({
            type: 'GET',
            url: forwardEvent + "?id=" + id,
            success: function(resultData) {
                if (resultData['status'] == 1) {
                    $("#modalAddEventLabel").html("Edit Event #" + id);
                    $("#btnevent").html("Update");

                    $("#event_id").val(resultData['data']['event_id']);
                    $("#add_event_date").val(resultData['data']['event_date']);
                    $("#time_event").val(resultData['data']['event_time']);
                    $("#add_event_note").val(resultData['data']['event_title']);
                    // $("#event_repeated").val(resultData['data']['event_repeated']).trigger('change');
                    // $("#after_days").val(resultData['data']['event_days']);

                    setTimeout(function() {
                        $("#add_event_date").datepicker({
                            update: resultData['data']['event_date'],
                            format: "dd-mm-yyyy",
                            container: "#modalAddEvent",
                        }).on('changeDate', function() {
                            $('.datepicker').hide();
                        });
                    }, 400);
                }
            }
        });
    }

    // function EventEdit(eventDate, eventNote, eventTime, eventRepeated, eventAftreDays, id) {
    function EventEdit(eventDate, eventNote, eventTime, id) {

        $.ajax({
            url: saveEventCalander,
            type: 'POST',
            data: {
                "_token": csrfToken,
                "id": id,
                "event_date": eventDate,
                "event_note": eventNote,
                "event_time": eventTime,
                // "event_repeated": eventRepeated,
                // "after_days": eventAftreDays,
            },
            success: function(response) {
                if (response['status'] == 1) {
                    $('#datatable, #datatable7').DataTable().ajax.reload(null, false);
                    $("#modalAddEvent").modal('hide');
                    refreshCalendar();
                    toastr["success"](response['msg']);
                } else {
                    toastr["error"](response['msg']);
                }
            }
        });
    }

    function eventDelete(id) {
        swal.fire({
            title: "Are you sure want to delete this?",
            text: "You won't be able to revert this!",
            showCancelButton: true,
            confirmButtonColor: "#526BDF",
            cancelButtonColor: "#EC6767",
            confirmButtonText: "Yes, delete it!",
            cancelButtonText: "No, cancel it!",
        }).then((result) => {
            if (result.isConfirmed) {
                remove(id);
            }
        });
    }

    function remove(id) {
        $.ajax({
            type: 'GET',
            url: deleteEvent + "?id=" + id,
            success: function(resultData) {
                if (resultData['status'] == 1) {
                    toastr["success"](resultData['msg']);
                    refreshCalendar();
                    $('#datatable, #datatable7').DataTable().ajax.reload(null, false);
                }
            }
        });
    }

    function followupDeleteFunction(id) {
        swal.fire({
            title: "Are you sure want to delete this?",
            text: "You won't be able to revert this!",
            showCancelButton: true,
            confirmButtonColor: "#526BDF",
            cancelButtonColor: "#EC6767",
            confirmButtonText: "Yes, delete it!",
            cancelButtonText: "No, cancel it!",
        }).then((result) => {
            if (result.isConfirmed) {
                remove(id);
            }
        });
    }

    function remove(id) {
        $.ajax({
            type: 'GET',
            url: followupDelete + "?id=" + id,
            success: function(resultData) {
                if (resultData['status'] == 1) {
                    toastr["success"](resultData['msg']);
                    $('#my-calander').zabuto_calendar('data');
                    $('#datatable, #datatable7').DataTable().ajax.reload(null, false);
                }
            }
        });
    }

    function eventDone(id) {
        swal.fire({
            title: "Are you sure complete this event?",
            text: "You won't be able to revert this!",
            showCancelButton: true,
            confirmButtonColor: "#526BDF",
            cancelButtonColor: "#EC6767",
            confirmButtonText: "Yes, Done it!",
            cancelButtonText: "No, cancel it!",
        }).then((result) => {
            if (result.isConfirmed) {
                complete(id);
            }
        });
    }

    function complete(id) {
        $.ajax({
            url: completeEvent + "?id=" + id,
            type: 'GET',
            data: {
                "_token": csrfToken,
                "id": id,
            },
            success: function(response) {
                toastr["success"](response['msg']);
                table.ajax.url(ajaxAllDataList + "?label=" + response.label).draw();
                table7.ajax.url(ajaxMyTodayList + "?label=" + response.label).draw();
            }
        });
    }

    // more highchart
    function moreHighChart() {
        $("#modal_more_highchart_lable").html("More High Charts");
        $("#more_highchrt_modal").modal('show');
    }

    function refreshCalendar() {
        $('#my-calander').zabuto_calendar('data');
    }

    // ALL DATA
    var ajaxAllDataList = "{{ route('all.dept.data') }}";

    table = $('#datatable').DataTable({
        "order": [],
        "columnDefs": [{"targets": 'no-sort',"orderable": false,}],
        // "scrollCollapse": true,
        // "fixedColumns": { right: 1, },
        "scrollX": true,
        "processing": true,
        "serverSide": true,
        // "sScrollX": "100%",
        "scrollY": function() {return $(window).height() - 525},
        "language": {"processing": '<button type="button" class="btn btn-dark waves-effect waves-light"><i class="bx bx-loader bx-spin font-size-16 align-middle me-2"></i> Processing...</button>'},
        "ajax": {
            "url": ajaxAllDataList,
            "type": "POST",
            "data": {
                "_token": csrfToken,
                "is_renewable": function() { return is_renewable },
                "startDate": function() { return startDate },
                "calender_status": function() { return $("#calender_status").val()},
            }
        },
        "aoColumns": [
            {"mData": "id"},
            {"mData": "dept_name"},
            {"mData": "client_info"},
            {"mData": "action", "bSortable" : false},
            {"mData": "label"},
        ],
    });

    //  MY TODAY
    var ajaxMyTodayList = "{{ route('today.event') }}";

    table7 = $('#datatable7').DataTable({
        "order": [],
        "columnDefs": [{"targets": 'no-sort',"orderable": false,}],
        "scrollX": true,
        "processing": true,
        "serverSide": true,
        "scrollY": function() {return $(window).height() - 525},
        "language": {"processing": '<button type="button" class="btn btn-dark waves-effect waves-light"><i class="bx bx-loader bx-spin font-size-16 align-middle me-2"></i> Processing...</button>'},
        "ajax": {
            "url": ajaxMyTodayList,
            "type": "POST",
            "data": {
                "_token": csrfToken,
                "is_renewable": function() {return is_renewable},
                "startDate": function() {return startDate},
                "event_status": function() {return $("#event_status").val()},
                "calender_status": function() {return $("#calender_status").val()},
            }
        },
        "aoColumns": [
            {"mData": "id"},
            {"mData": "event_name"},
            {"mData": "event_date"},
            {"mData": "event_time"},
            {"mData": "event_repeated"},
            {"mData": "action", "bSortable" : false},
            {"mData": "label"},
        ],
    });

    // followup
    var ajaxDashboardFollowUp = "{{ route('dashboard.followup.ajax') }}";

    table8 = $('#datatable8').DataTable({
        "order": [],
        "columnDefs": [{"targets": 'no-sort',"orderable": false,}],
        "scrollX": true,
        "processing": true,
        "serverSide": true,
        "scrollY": function() {return $(window).height() - 525},
        "language": {"processing": '<button type="button" class="btn btn-dark waves-effect waves-light"><i class="bx bx-loader bx-spin font-size-16 align-middle me-2"></i> Processing...</button>'},
        "ajax": {
            "url": ajaxDashboardFollowUp,
            "type": "POST",
            "data": {
                "_token": csrfToken,
                "startDate": function() {return startDate},
                "calender_status": function() {return $("#calender_status").val()},
            }
        },
        "aoColumns": [
            {"mData": "id"},
            {"mData": "client_name"},
            {"mData": "followup_date"},
            {"mData": "type"},
            {"mData": "notes",
                "render": function(data, type, full, meta) {
                    if (type === 'display' && data != null && data.length > 15) {
                        return '<span title="' + data + '">' + data.substr(0, 15) + '...</span>';
                    } else {
                        return data;
                    }
                }
            },
            {"mData": "action", "bSortable" : false},
         //   {"mData": "lable", "bSortable" : false},
        ],
    });

    // GREETINGS
    var ajaxGreetingList = "{{ route('calendar.greeting') }}";

    table5 = $('#datatable5').DataTable({
        "order": [],
        "columnDefs": [{"targets": 'no-sort',"orderable": false,}],
        "scrollX": true,
        "processing": true,
        "serverSide": true,
        "scrollY": function() {return $(window).height() - 525;},
        "language": {"processing": '<button type="button" class="btn btn-dark waves-effect waves-light"><i class="bx bx-loader bx-spin font-size-16 align-middle me-2"></i> Processing...</button>'},
        "ajax": {
            "url": ajaxGreetingList,
            "type": "POST",
            "data": {
                "_token": csrfToken,
                "is_renewable": function() {return is_renewable},
                "startDate": function() {return startDate},
                "calender_status": function() {return $("#calender_status").val()},
            }
        },
        "aoColumns": [
            {"mData": "id"},
            {"mData": "greeting_type"},
            {"mData": "agent_name"},
            {"mData": "date"},
            {"mData": "action", "bSortable" : false},
        ],
    });

    // Subscriptions
    var ajaxsubscriptionList = "{{ route('subscription.list') }}";

    table3 = $('#datatable3').DataTable({
        "order": [],
        "columnDefs": [{"targets": 'no-sort',"orderable": false,}],
        "scrollX": true,
        "processing": true,
        "serverSide": true,
        "scrollY": function() {return $(window).height() - 525},
        "language": {"processing": '<button type="button" class="btn btn-dark waves-effect waves-light"><i class="bx bx-loader bx-spin font-size-16 align-middle me-2"></i> Processing...</button>'},
        "ajax": {
            "url": ajaxsubscriptionList,
            "type": "POST",
            "data": {
                "_token": csrfToken,
                "is_renewable": function() {return is_renewable},
                "startDate": function() {return startDate},
                "calender_status": function() {return $("#calender_status").val()},
            }
        },
        "aoColumns": [
            {"mData": "id"},
            {"mData": "firm_name"},
            {"mData": "agent_name"},
            {"mData": "payment_date"},
            {"mData": "expiry_date"},
            {"mData": "action", "bSortable" : false},
        ],
    });

    // CALANDER CLICK EVENT
    $('#my-calander').on('click', '.zabuto-calendar__event', function() {
        var eventdate = $(this).data('date');
        $('#all_data').tab('show');

        startDate = eventdate;

        var parts = eventdate.split('-');
        convertDate = `${parts[2]}/${parts[1]}/${parts[0]}`;

        document.getElementById('display').innerHTML = convertDate;

        reloadTable();
        reloadTable3();
        reloadTable5();
        reloadTable7();

        $("#calender_status").val(-2).trigger('change');
    });

    $("#all_data").on('click', function() {
        // table.ajax.reload(null, false);
        reloadTable();
    });

    $("#my_today_date").on('click', function() {
        reloadTable7();
    });
    $("#followup_data").on('click', function() {
        reloadTable8();
    });

    $("#greeting_id").on('click', function() {
        reloadTable5();
    });

    $("#subscription_date").on('click', function() {
        reloadTable3();
    });

    function reloadTable() {
        setTimeout(function() {
            var table = $('#datatable').DataTable();
            table.columns.adjust().draw();
        }, 200);
    }

    function reloadTable3() {
        setTimeout(function() {
            var table3 = $('#datatable3').DataTable();
            table3.columns.adjust().draw();
        }, 200);
    }

    function reloadTable5() {
        setTimeout(function() {
            var table5 = $('#datatable5').DataTable();
            table5.columns.adjust().draw();
        }, 200);
    }

    function reloadTable7() {
        setTimeout(function() {
            var table7 = $('#datatable7').DataTable();
            table7.columns.adjust().draw();
        }, 200);
    }
    function reloadTable8() {
        setTimeout(function() {
            var table8 = $('#datatable8').DataTable();
            table8.columns.adjust().draw();
        }, 200);
    }

    // when email- mobile - whatsup number does not found show error 
    function NotFound(id) {
        if (id == 1) {
            setTimeout(function() {
                Swal.fire({
                    title: 'Client Mobile Number Not Found',
                    icon: 'error',
                    showClass: {
                        popup: 'animate__animated animate__fadeInDown'
                    },
                    hideClass: {
                        popup: 'animate__animated animate__fadeOutUp'
                    },
                });
            }, 1000)

        } else if (id == 2) {
            setTimeout(function() {
                Swal.fire({
                    title: 'Client Whatsapp Number Not Found',
                    icon: 'error',
                    showClass: {
                        popup: 'animate__animated animate__fadeInDown'
                    },
                    hideClass: {
                        popup: 'animate__animated animate__fadeOutUp'
                    },
                });
            }, 1000)
        } else if (id == 3) {
            setTimeout(function() {
                Swal.fire({
                    title: 'Client Email Not Found',
                    icon: 'error',
                    showClass: {
                        popup: 'animate__animated animate__fadeInDown'
                    },
                    hideClass: {
                        popup: 'animate__animated animate__fadeOutUp'
                    },
                });
            }, 1000)
        }
    }

    // Text sms send Subscription
    function TextMsgSend(agent_id) {
        $.ajax({
            type: 'GET',
            url: ajaxTextSmsSend + "?agent_id=" + agent_id,
            success: function(resultData) {
                if (resultData['status'] == 1) {
                    toastr["success"](resultData['msg']);
                }
            }
        });
    }

    // Text sms send BirthWish
    function TextMsgSendBirth(agent_id) {
        $.ajax({
            type: 'GET',
            url: ajaxTextSmsSendBirth + "?agent_id=" + agent_id,
            success: function(resultData) {
                if (resultData['status'] == 1) {
                    toastr["success"](resultData['msg']);
                }
            }
        });
    }
    function followUpPenddingTOComplete(id){
    swal.fire({
        title: "Are you sure want to complete this?",
        text: "You won't be able to revert this!",
        showCancelButton: true,
        confirmButtonColor: "#526BDF",
        cancelButtonColor: "#EC6767",
        confirmButtonText: "Yes, complete it!",
        cancelButtonText: "No, cancel it!",
    }).then((result) => {
        if (result.isConfirmed) {
            CompleteFollowUp(id);
        }
    });
}

function CompleteFollowUp(id){
    $.ajax({
        type: 'GET',
        url: completeFollowUpUrl + "?id=" + id,
        success: function(resultData) {
            if (resultData['status'] == 1) {
                toastr["success"](resultData['msg']);
                $('#datatable8,#datatable').DataTable().ajax.reload(null, false);
            }else{
                toastr["error"](resultData['msg']);
            }
        }
    });
}

    var ajaxTextSmsSendBirth = '{{route("text.sms.send.birth")}}';
    var ajaxTextSmsSend = '{{route("text.sms.send")}}';
    var ajaxActiveSubscription = '{{route("active.subscription")}}';
    var ajaxcomplain = '{{route("dashboard.complain.report")}}';
    var ajaxFeedback = '{{route("dashboard.feedback.report")}}';
    var ajaxsubscription = '{{route("subscription.month.report")}}';
    var ajaxSubscriptionYear = '{{route("subscription.year.report")}}';
    var ajaxNewSubscriptionYear = '{{route("new.subscription.year")}}';
    var ajaxNewSubscriptionMonth = '{{route("new.subscription.month")}}';
    var ajaxCurrentMonthSubsReactive = '{{route("current.month.subs.reactive")}}';
    var ajaxUnactiveSubscription = '{{route("unactive.subscription")}}';
    var ajaxActiveFreeCRM = '{{route("active.freecrm")}}';
    var ajaxUnActiveFreeCRM = '{{route("unactive.freecrm")}}';
    var ajaxTodayNewSubscription = '{{route("today.new.subscription")}}';
    var ajaxTodayNewReactiveSubscription = '{{route("today.new.reactive")}}';
    var ajaxTodayNewUpgradeSubscription = '{{route("today.new.upgrade")}}';
    var ajaxTodayNewSubscriptionAmount = '{{route("today.new.subscription.amount")}}';
    var completeFollowUpUrl = "{{route('pendding.to.complete.follow.up')}}";
</script>
@endsection