@extends('layouts.app')

@section('content')
<style>
    .datepicker {
        width: 100%;
    }

    .ui-datepicker-trigger {
        left: 190px;
        top: -36px;
    }

    .input-group-prepend {
        width: 36%;
    }

    .input-group-text {
        width: 100%;
    }

    #calling_frequency_time {
        width: 19%;
    }

    .maintenance-device-dropdown-control,
    .maintenance-device-dropdown-control-app {
        margin-bottom: -7px;
    }

    .maintenance-device-dropdown-control-cont,
    .maintenance-device-dropdown-control-cont-app {
        width: 64%;
    }

    #metaTable_filter input {
        border-radius: 35px !important;
        padding: 10px;
        outline: none;
    }

    .paginate_button {
        border: 2px solid #d7d7d7 !important;
        color: #ebe7e7 !important;
        font-weight: bold;
    }

    .paginate_button:hover {
        border: 2px solid #34548A !important;
        ;
        background: #34548A !important;
        border-color: #34548A !important;
        color: #ebe7e7 !important;
        font-weight: bold !important;
    }

    .paginate_button.disabled:hover {
        color: #ebe7e7 !important;
        font-weight: bold !important;
    }

    .dataTables_paginate a.current {
        color: #ebe7e7 !important;
        background: #34548A !important;
        border-color: #34548A !important;
    }

    .daily-calling-status-table-container {
        padding-right: 5%;
        padding-left: 5%;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button.current,
    .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
        color: #ebe7e7 !important;
        font-weight: bold !important;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
        color: #ebe7e7 !important;
    }

    .dataTables_info {
        color: #34548A !important;
        font-size: 16px;
        font-weight: bold;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button {
        color: #34548A !important;
    }

    table.dataTable {
        border: none !important;
    }

    table.dataTable thead {
        background-color: #34548A !important;
        border: 0 !important;
        padding: 5px !important;
        color: #ebe7e7 !important;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    table.dataTable thead th {
        border: none !important;
    }

    table.dataTable tbody td {
        border: none !important;
    }

    table.dataTable tbody th,
    table.dataTable tbody td {
        padding: 8px 6px;
    }

    .vl {
        border-left: 6px solid #34548A;
        height: 45rem;
        margin-left: 30px;
    }

    /* .popup_box {
        visibility: hidden;
        display: none;
        width: 30%;
        background-color: #34548A;
        position: fixed;
        border-radius: 10px;
        border: 2px solid grey;
        box-shadow: 0px 0px 10px 0px grey;
        font-family: helvetica;
        width: 55%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    } */
    .popup_box {
        visibility: hidden;
        display: none;
        width: 918px;
        background-color: #34548A;
        position: absolute;
        border-radius: 10px;
        border: 2px solid grey;
        box-shadow: 0px 0px 10px 0px grey;
        font-family: helvetica;
        top: -50px;
        left: 18%;
        transform: translateX(-50%);
        z-index: 9999;
    }

    .popup_box .cancel_button {
        float: right;
        margin-top: 4px;
        margin-bottom: 4px;
        margin-right: 5px;
        background-color: #34548A;
        border: none;
        color: white;
        padding: 5px;
        /* border-radius: 1000px; */
        width: 25px;
        /* border: 1px solid #424242; */
        box-shadow: 0px 0px 10px 0px #34548A;
        cursor: pointer;
    }

    .popup_box #info_text {
        padding: 10px;
        clear: both;
        background-color: white;
        color: #6E6E6E;
        overflow: scroll;
        height: 35.5rem;
    }

    .popup_box .close_button {
        margin: 0px;
        padding: 0px;
        width: 70px;
        height: 30px;
        line-height: 30px;
        font-size: 16px;
        background-color: grey;
        color: white;
        border: none;
        margin-bottom: 10px;
        border-radius: 2px;
        cursor: pointer;
    }

    .pop-up-heading {
        width: 25%;
    }

    .pop-up-table {
        border: none !important;
    }

    .new-plan-btn {
        width: 20%;
        cursor: pointer;
    }

    .existing-plan-btn {
        width: 25%;
        cursor: pointer;
    }

    .existing-plan-dropdown-div {
        width: 100%;
        margin-right: 5px;
    }

    .new-plan-input-div {
        margin-right: 5px;
    }

    .new-plan-input-box {
        width: 100%;
    }

    .display_popup {
        min-width: 85px !important;
    }

    .form-group {
        margin-bottom: 1.5rem;
    }

    select {
        margin-right: 0px !important;
    }

    #calling_frequency_time{
        margin-left: 3%;
        text-align: center;
    }

    .icon-col {
        background: white !important;

        &:hover {
            cursor: pointer;
        }
    }

    .copied_cls {
        display: none;
        background: #000;
        color: #fff;
        /* right: -30px; */
        width: 55px;
        height: 23px;
        position: absolute;
        border-radius: 5px;
        left: -50px;
        top: -5px;
    }

    #copy-icon-td {
        position: relative;
    }
    .checkbox-div{
        display: flex;
        align-items: center;
        gap: 10px;
    }
    #did_billing_checkbox{
        height: 18px;
        width: 18px;
    }

    i.fa.fa-pencil.edit-icon {
        float: right;
        margin-right: 17px;
        padding-top: 5px;
    }
</style>
{{-- <div class="margin-top-bottom textlabel">
    <h2>Custom Plan</h2>
</div> --}}
{{-- <div class="margin-top-bottom">
    <a href="{{route('holiday')}}" class="TestCallBTN">Holiday List</a>
</div> --}}
<div class="row maintenance-device-list-cont">
    {{-- <div class="col-md-1"></div>  --}}
    <div class="col-md-4" style="margin-left: 50px;">
        <div class="margin-top-bottom textlabel">
            <h2>New Custom Plan</h2>
            <h6 style="color: #34548A;">NOTE: This feature only works for recurring billing & monthly interval</h6>
        </div>
        {{-- @if($errors->any())
    {!! implode('', $errors->all('<div>:message</div>')) !!}
@endif --}}
        @if(Session::has('status'))
        <p class="alert {{ Session::get('alert-class', 'alert-success') }}">{{ Session::get('status') }}</p>
        @endif
        @if(Session::has('error'))
        <p class="alert {{ Session::get('alert-class', 'alert-success') }}">{{ Session::get('error') }}</p>
        @endif
        <form action="{{route('StoreCustomPlan')}}" method="post">
            @csrf
            <div class="form-group">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text" id="">Plan Name</span>
                    </div>
                    <input type="text" class="form-control" id="plan_name" name="plan_name" placeholder="Plan Name">
                </div>
                @error('plan_name')
                <div class="alert alert-danger">{{ $message }}</div>
                @enderror
            </div>
            <div class="form-group" id="existing_plan_group_div">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text" id="">Existing Plan Group</span>
                    </div>
                    <div class="maintenance-device-dropdown-control-cont input-group-append">
                        <div class="maintenance-device-dropdown-control existing-plan-dropdown-div">
                            <select class="maintenance-device-select-plangroup" name="plan_group_with_id" id="plangroup_name" placeholder="Search Plan Group">

                            </select>
                        </div>
                        <span class="input-group-text new-plan-btn" id="new_plan_btn">
                            <b>New</b>
                        </span>
                        <div class="blink-me blink-text" id="maintenance-device-progress" style="padding: 0 20px;">
                            Loading ...
                        </div>
                    </div>

                </div>
                @error('plan_group_with_id')
                <div class="alert alert-danger">{{ $message }}</div>
                @enderror
            </div>
            <div class="form-group" id="new_plan_group_div">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text" id="">New Plan Group</span>
                    </div>
                    <div class="maintenance-device-dropdown-control-cont input-group-append">
                        <div class="new-plan-input-div">
                            <input type="text" class="form-control new-plan-input-box" id="plan_group_name" name="plan_group_name" placeholder="New Plan Group">
                        </div>
                        <span class="input-group-text existing-plan-btn" id="existing_plan_btn">
                            <b>Existing</b>
                        </span>
                    </div>
                </div>
                @error('plan_group_name')
                <div class="alert alert-danger">{{ $message }}</div>
                @enderror
            </div>
            {{-- <div class="form-group">
            <div class="input-group">
                <div class="input-group-prepend">
                  <span class="input-group-text" id="">OBN Test Call Launch Method</span>
                </div>
                <input type="text" class="form-control" id="launch_method" name="launch_method" placeholder="Launch Method">
              </div>
            @error('launch_method')
                <div class="alert alert-danger">{{ $message }}
    </div>
    @enderror
</div>

<div class="form-group">
    <div class="input-group">
        <div class="input-group-prepend">
            <span class="input-group-text" id="">Interval (in minutes)</span>
        </div>
        <input type="text" class="form-control" id="interval" name="interval" placeholder="Interval">
    </div>
    @error('interval')
    <div class="alert alert-danger">{{ $message }}</div>
    @enderror
</div> --}}
<div class="form-group">
    <div class="input-group">
        <div class="input-group-prepend">
            <span class="input-group-text" id="">Plan OBN Capacity</span>
        </div>
        <input type="text" class="form-control" id="max_phone_numbers" name="max_phone_numbers" placeholder="Plan Obn Capacity">
    </div>
    @error('max_phone_numbers')
    <div class="alert alert-danger">{{ $message }}</div>
    @enderror
</div>
<div class="form-group">
    <div class="input-group">
        <div class="input-group-prepend">
            <span class="input-group-text" id="">Billing Type</span>
        </div>
        <select name="billing_type" id="billing_type" class="form-control" style="width: 39%">
            <option value="recurring">Recurring</option>
            <!-- <option value="single">One-Time</option> -->
        </select>
    </div>
    @error('billing_type')
    <div class="alert alert-danger">{{ $message }}</div>
    @enderror
</div>
<div class="form-group" id="hide_interval">
    <div class="input-group">
        <div class="input-group-prepend">
            <span class="input-group-text" id="">Interval</span>
        </div>
        <select id="interval_type" name="interval" class="form-control interval_type" style="width: 39%">
            <option value="months_1">Monthly&nbsp;</option>
            <option value="years_1">Yearly&nbsp;</option>
            <option value="weeks_1">Weekly&nbsp;</option>
            <option value="quarter_3">Every 3 Months&nbsp;</option>
            <option value="semi-annual_6">Every 6 Months&nbsp;</option>
            {{-- <option value="custom">Custom&nbsp;</option> --}}
        </select>
    </div>
    @error('interval')
    <div class="alert alert-danger">{{ $message }}</div>
    @enderror
</div>
<!-- <div class="form-group" id="hide_access" style="display: none">
    <div class="input-group">
        <div class="input-group-prepend">
            <span class="input-group-text" id="">Access</span>
        </div>
        <select name="interval" id="interval" class="form-control interval_type1" style="width: 39%" disabled>
            <option value="none_1" selected="selected">Lifetime&nbsp;</option>
            {{-- <option value="delay">Expire&nbsp;</option>
                    <option value="fixed">Fixed Expire&nbsp;</option> --}}
        </select>
    </div>
    @error('interval')
    <div class="alert alert-danger">{{ $message }}</div>
    @enderror
</div> -->
<div class="form-group">
    <div class="input-group">
        <div class="input-group-prepend">
            <span class="input-group-text" id="">Price</span>
        </div>
        <input type="text" class="form-control" id="price" name="price" placeholder="Price">
    </div>
    @error('price')
    <div class="alert alert-danger">{{ $message }}</div>
    @enderror
</div>
<div class="form-group">
    <div class="input-group">
        <div class="input-group-prepend">
            <span class="input-group-text" id="">Payment Method</span>
        </div>
        <select name="payment_method" id="payment_method" class="form-control" style="width: 39%">
            <option value="qt3kcu-519">Invoice</option>
            <option value="pu1vjh-3yi">Credit Card</option>
        </select>
    </div>
    @error('payment_method')
    <div class="alert alert-danger">{{ $message }}</div>
    @enderror
</div>
<div class="form-group">
    <div class="input-group">
        <div class="input-group-prepend">
            <span class="input-group-text" id="">Calling Frequency</span>
        </div>
        @php
            $selectedFrequency = old('calling_frequency', 'One per Day');
        @endphp
        <select name="calling_frequency" id="calling_frequency" class="form-control" style="width: 39%">
            <option value="One per Day" {{ $selectedFrequency == 'One per Day' ? 'selected' : '' }}>One per Day</option>
            <option value="Every Other Day" {{ $selectedFrequency == 'Every Other Day' ? 'selected' : '' }}>Every Other Day</option>
            <option value="One per Week" {{ $selectedFrequency == 'One per Week' ? 'selected' : '' }}>One per Week</option>
            <option value="Dynamic Calling" {{ $selectedFrequency == 'Dynamic Calling' ? 'selected' : '' }}>Dynamic Calling</option>
        </select>
        <input type="text" class="form-control" id="calling_frequency_time" name="calling_frequency_time" value="24" readonly>
    </div>
</div>
<div class="form-group" id="test-calling-interval" style="{{ $selectedFrequency == 'Dynamic Calling' ? 'display:block' : 'display:none' }}">
    <div class="input-group">
        <div class="input-group-prepend">
            <span class="input-group-text" id="">Test Call Interval</span>
        </div>
        <div class="maintenance-device-dropdown-control-cont">
            <div class="maintenance-device-dropdown-control-app">
                <select class="maintenance-device-select-test-call-interval" name="test_call_interval[]" id="testCallInterval" placeholder="Search Test Call Interval" multiple="multiple">
                    <option value=''></option>
                    <option value="60">Every Hour</option>
                    <option value="120">Every 2 Hour</option>
                    <option value="240">Every 4 Hour</option>
                    <option value="1440">Daily</option>
                    <option value="3600">Twice a Week</option>
                    <option value="2400">Three times a Week</option>
                    <option value="oncealifetime">Once a Lifetime</option>
                </select>
            </div>
            <div class="blink-me blink-text" id="maintenance-device-progress-app" style="padding: 0 20px;">
                Loading ...
            </div>
        </div>
    </div>
    @error('test_call_interval')
    <div class="alert alert-danger">{{ $message }}</div>
    @enderror
</div>
<div class="form-group">
    <div class="input-group">
        <div class="input-group-prepend">
            <span class="input-group-text" id="">Carrier Name</span>
        </div>
        <div class="maintenance-device-dropdown-control-cont">
            <div class="maintenance-device-dropdown-control">
                <select class="maintenance-device-select" name="carrier_name[]" id="carrierName" placeholder="Search Device" multiple="multiple">

                </select>
            </div>
            <div class="blink-me blink-text" id="maintenance-device-progress" style="padding: 0 20px;">
                Loading ...
            </div>
        </div>
    </div>
    @error('carrier_name')
    <div class="alert alert-danger">{{ $message }}</div>
    @enderror
</div>
<div class="form-group">
    <div class="input-group">
        <div class="input-group-prepend">
            <span class="input-group-text" id="">App Name</span>
        </div>
        <div class="maintenance-device-dropdown-control-cont">
            <div class="maintenance-device-dropdown-control-app">
                <select class="maintenance-device-select-app" name="app_name[]" id="appName" placeholder="Search App" multiple="multiple">

                </select>
            </div>
            <div class="blink-me blink-text" id="maintenance-device-progress-app" style="padding: 0 20px;">
                Loading ...
            </div>
        </div>
    </div>
    @error('app_name')
    <div class="alert alert-danger">{{ $message }}</div>
    @enderror
</div>
<div class="form-group">
    <div class="input-group">
        <div class="checkbox-div">
            <input type="checkbox" id="did_billing_checkbox">Includes per DID Billing</input>
        </div>
    </div>
    <input type="hidden" name="did_billing" id="did_billing_hidden" value="0">
    @error('did_billing')
    <div class="alert alert-danger">{{ $message }}</div>
    @enderror
</div>
<button type="submit" id="create_custom_pln_btn" class="btn btn-default">Submit</button>
</form>
<div id="loaderModal" class="modal">
    <img class="loader-img" src="../images/ajax-spinner.gif">
    <span class="loader-text">Please wait ...</span>
</div>
</div>
<div class="vl"></div>
<div class="col-md-7">
    <div class="margin-top-bottom textlabel">
        <h2>Custom Plans</h2>
    </div>
    <div class="container daily-calling-status-table-container">
        <table id="metaTable" class="stripe">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Plan Name</th>
                    <th>Plan Obn Capacity</th>
                    <th>Calling Frequency</th>
                    <th>View</th>
            </thead>
            <tbody class="maintenance-device-list-tbody">
                @foreach($data as $key => $value)
                <tr>
                    <td>{{$key + 1}}</td>
                    <td>{{$value->plan_group}}</td>
                    <td>{{$value->max_phone_numbers}}</td>
                    <td>{{$value->calling_frequency}}</td>
                    <td><input type="button" class="btn btn-default display_popup" id="display_popup-{{$key}}" value="View">
                        <div class="popup_box" id="popup_box-{{$key}}">
                            <div class="cancel_button" id="cancel_button-{{$key}}">X</div>
                            <div id="info_text">
                                <table class="pop-up-table table table-striped">
                                    <tr>
                                        <td class="pop-up-heading"><b>Plan Group</b></td>
                                        <td>{{$value->plan_group}}</td>
                                    </tr>
                                    <tr>
                                        <td class="pop-up-heading"><b>Plan Obn Capacity</b></td>
                                        <td>{{$value->max_phone_numbers}}</td>
                                    </tr>
                                    <tr>
                                        <td class="pop-up-heading"><b>Plan Id</b></td>
                                        <td>{{$value->plan_id}}</td>
                                    </tr>
                                    <tr>
                                        <td class="pop-up-heading"><b>Plan Group Id</b></td>
                                        <td>{{$value->plan_group_id}}</td>
                                    </tr>
                                    <tr>
                                        <td class="pop-up-heading"><b>Calling Frequency</b></td>
                                        <td>
                                            <div>
                                                <span class="view-mode" id="calling-frequency-text-{{$key}}">{{$value->calling_frequency}}</span>
                                                <i class="fa fa-pencil edit-icon" data-key="{{$key}}" data-type="calling-frequency"></i>
                                            </div>
                                            <div class="edit-mode d-none d-flex align-items-center gap-2" style="gap: 6px; margin-left:267px" id="calling-frequency-wrapper-{{$key}}">
                                                <select class="form-control calling-frequency-select d-none" style="width: 180px;" data-key="{{$key}}" id="calling-frequency-select-{{$key}}">
                                                    <option value="One per Day" {{ $value->calling_frequency == 'One per Day' ? 'selected' : '' }}>One per Day</option>
                                                    <option value="Every Other Day" {{ $value->calling_frequency == 'Every Other Day' ? 'selected' : '' }}>Every Other Day</option>
                                                    <option value="One per Week" {{ $value->calling_frequency == 'One per Week' ? 'selected' : '' }}>One per Week</option>
                                                    <option value="Dynamic Calling" {{ $value->calling_frequency == 'Dynamic Calling' ? 'selected' : '' }}>Dynamic Calling</option>
                                                </select>
                                                <i class="fa fa-check save-icon d-none" data-key="{{$key}}" data-type="calling-frequency" data-id="{{$value->ID}}" style="margin-left: 202px;"></i>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr id="testCallIntervalRow-{{$key}}">
                                        <td class="pop-up-heading"><b>Test Call Interval</b></td>
                                            
                                        <td>
                                            <span class="view-mode" id="test-call-text-{{$key}}">{{ $testCall }}</span>

                                            <div class="edit-mode d-none align-items-center gap-2" id="test-call-edit-{{$key}}" style="gap: 6px; margin-left:182px">
                                                <div class="maintenance-device-dropdown-control-cont">
                                                    <div class="maintenance-device-dropdown-control-app">
                                                        @php
                                                            $selectedIntervals = is_array(json_decode($value->test_call_interval, true)) 
                                                                ? json_decode($value->test_call_interval, true) 
                                                                : [];
                                                        @endphp

                                                        <select class="maintenance-device-select-test-call-interval"
                                                                name="test_call_interval[]"
                                                                id="testCallInterval-{{$key}}"
                                                                placeholder="Search Test Call Interval"
                                                                multiple="multiple">
                                                            @foreach ($intervalMap as $intervalKey => $intervalLabel)
                                                                <option value="{{ $intervalKey }}"
                                                                    {{ in_array($intervalKey, $selectedIntervals) ? 'selected' : '' }}>
                                                                    {{ $intervalLabel }}
                                                                </option>
                                                            @endforeach
                                                        </select>

                                                        {{-- Validation Error Message Placeholder --}}
                                                        <div class="test-call-error-message-{{$key}}" style="margin-top: 5px;"></div>
                                                    </div>
                                                </div>
                                                <i class="fa fa-check save-icon testIntervalCall d-none" data-key="{{$key}}" data-type="test-call" data-id="{{$value->ID}}" style="float: right; margin-top:-27px; margin-right: 16px;"></i>
                                            </div>

                                            <i class="fa fa-pencil edit-icon" data-key="{{$key}}" data-type="test-call"></i>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="pop-up-heading"><b>Calling Frequency Time</b></td>
                                        <td>{{$value->calling_frequency_time}}</td>
                                    </tr>
                                    <tr>
                                        <td class="pop-up-heading"><b>Price</b></td>
                                        <td>{{ $wp_plans[$value->plan_id][2]->meta_value }}</td>
                                    </tr>
                                    <tr>
                                        <td class="pop-up-heading"><b>Period</b></td>
                                        <td>{{ $wp_plans[$value->plan_id][0]->meta_value ." ". $wp_plans[$value->plan_id][1]->meta_value }}</td>
                                    </tr>
                                    <tr>
                                        <td class="pop-up-heading"><b>Carrier Name</b></td>
                                        <td>{{$value->carrier_name}}</td>
                                    </tr>
                                    <tr>
                                        <td class="pop-up-heading"><b>App Name</b></td>
                                        <td>{{$value->app_name}}</td>
                                    </tr>
                                    {{--Added by Akash(25-04-2024) to show URL of memberships and plan group--}}
                                    <tr>
                                        <td class="pop-up-heading"><b>Plan Group Url</b></td>
                                        <td class="membership-url url" id="plan-group-url-{{$key}}">{{$Url."plans/".$value->plan_group_name."/"}}</td>
                                        <td class="icon-col" id="copy-icon-td" data-row="{{$key}}"><i class="fa fa-clone copy-icon" aria-hidden="true"></i> <span class="copied_cls">Copied!</span></td>

                                    </tr>
                                    <tr>
                                        <td class="pop-up-heading"><b>Membership URL</b></td>
                                        <td id="membership-url-{{$key}}" class="plan-group-url url">{{$Url."signup/".$value->plan_name."/"}}</td>
                                        <td class="icon-col" id="copy-icon-td" data-row="{{$key}}"><i class="fa fa-clone copy-icon" aria-hidden="true"></i> <span class="copied_cls">Copied!</span></td>
                                    </tr>

                                </table>
                                <input type="hidden" class="data-info" id="data-info-{{$key}}" name="data" value="{{ json_encode($value) }}">
                                <input type="hidden" class="price-and-period" id="price-and-period-{{$key}}" name="wp_plans" value="{{ json_encode($wp_plans[$value->plan_id]) }}">
                                <button class="download_info_btn" data-row="{{$key}}">Download</button>
                            </div>
                            {{-- <input type="button" value="Close" class="close_button" id="close_button-{{$key}}"> --}}
                        </div>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

</div>

<script>
    /*************************added by 1206 *******************/

    $(function() {
        //$('#test-calling-interval').hide();
        if ($('#calling_frequency').val() == 'Dynamic Calling') {
            $('#test-calling-interval').show();
        } else {
            $('#test-calling-interval').hide();
        }
        
        $(".datepicker").datepicker({
            dateFormat: 'DD,yy-mm-dd',
            //maxDate: 0,
            minDate: 'today',
            showOn: "button",
            buttonImage: "{{env('WP_URL')}}/wp-content/uploads/2022/07/Calender-blue-1.png",
            buttonImageOnly: true
        });

        $('#create_custom_pln_btn').on('click', function(event) {
            var isChecked = $('#did_billing_checkbox').is(':checked');
            $('#did_billing_hidden').val(isChecked ? '1' : '0');
        });

        $('#loaderModal').css('display', 'block');
        $('#billing_type').change(function() {
            var paymentType = $(this).val();
            if (paymentType == 'recurring') {
                $('#hide_interval').css('display', 'block');
                // $('#hide_access').css('display', 'none');
                $('.interval_type').removeAttr('disabled');
                $('.interval_type1').attr('disabled', true);
            } else {
                $('#hide_interval').css('display', 'none');
                // $('#hide_access').css('display', 'block');
                $('.interval_type1').removeAttr('disabled');
                $('.interval_type').attr('disabled', true);
            }
        })
        $('#calling_frequency').change(function() {
            var freq = $(this).val();

            var cft = 24;
            if (freq == 'One per Week') {
                cft = 160;
                $('#test-calling-interval').hide();
                $('#testCallInterval').val([]).trigger('change'); // Clear value
                $('#testCallInterval').fSelect('reload');
            } else if (freq == 'Every Other Day') {
                cft = 48;
                $('#test-calling-interval').hide();
                $('#testCallInterval').val([]).trigger('change'); // Clear value
                $('#testCallInterval').fSelect('reload');
            } else if (freq == 'One per Day') {
                $('#test-calling-interval').hide();
                $('#testCallInterval').val([]).trigger('change'); // Clear value
                $('#testCallInterval').fSelect('reload');
            } else if (freq== 'Dynamic Calling'){
                cft = 0;
                $('#test-calling-interval').show();

                // Set "Daily" (1440) as selected
                $('#testCallInterval').val(['1440']).trigger('change');
                $('#testCallInterval').fSelect('reload'); // Re-render checkboxes with "Daily" selected
            }
            $('#calling_frequency_time').val(cft);
        })
        var baseURL = "{{ URL::to('/') }}" + "/";
        var ajaxApiUrl = baseURL + "GetAllCarriersByCategory?is_app=0";
        jQuery.ajax({
            type: "GET",
            url: ajaxApiUrl,
            success: function(res) {
                if (res.success) {
                    if (res.data.all_devices.length > 0) {
                        var all_device_names = res.data.all_devices;
                        allDevicesArr = res.data.all_devices;
                        var deviceNameOptions = "<option value=''></option>";
                        var deviceMaintenanceNameOptions = "";
                        for (var k = 0; k < all_device_names.length; k++) {
                            deviceNameOptions = deviceNameOptions + "<option value='" + all_device_names[k].carrier_name + "'>" + all_device_names[k].carrier_name + "</option>";

                        }
                    }


                    jQuery(".maintenance-device-select").html('');
                    jQuery(".maintenance-device-select").append(deviceNameOptions);
                    jQuery(".maintenance-device-select").fSelect({
                        placeholder: 'Select Carrier(s)',
                        numDisplayed: 4,
                        overflowText: '{n} carrier(s) selected',
                        noResultsText: 'No carrier(s) found',
                        searchText: 'Search carrier(s)',
                        showSearch: true
                    });
                    jQuery(".maintenance-device-dropdown-control-cont").show();


                    //jQuery("#loaderModal").hide();
                } else {
                    // jQuery("#loaderModal").hide();
                }
            },
            error: function(jqXHR, error, errorThrown) {
                if (jqXHR.status && jqXHR.status == 400) {
                    var res_json = JSON.parse(jqXHR.responseText);
                }
            }
        });

        var ajaxApiUrl = baseURL + "GetAllCarriersByCategory?is_app=1";
        jQuery.ajax({
            type: "GET",
            url: ajaxApiUrl,
            success: function(res) {
                if (res.success) {
                    if (res.data.all_devices.length > 0) {
                        var all_device_names = res.data.all_devices;
                        allDevicesArr = res.data.all_devices;
                        var deviceNameOptions = "<option value=''></option>";
                        var deviceMaintenanceNameOptions = "";
                        for (var k = 0; k < all_device_names.length; k++) {
                            deviceNameOptions = deviceNameOptions + "<option value='" + all_device_names[k].carrier_name + "'>" + all_device_names[k].carrier_name + "</option>";

                        }
                    }


                    jQuery(".maintenance-device-select-app").html('');
                    jQuery(".maintenance-device-select-app").append(deviceNameOptions);
                    jQuery(".maintenance-device-select-app").fSelect({
                        placeholder: 'Select App(s)',
                        numDisplayed: 4,
                        overflowText: '{n} app(s) selected',
                        noResultsText: 'No app(s) found',
                        searchText: 'Search app(s)',
                        showSearch: true
                    });
                    jQuery(".maintenance-device-dropdown-control-cont-app").show();


                    // jQuery("#loaderModal").hide();
                } else {
                    // jQuery("#loaderModal").hide();
                }
            },
            error: function(jqXHR, error, errorThrown) {
                if (jqXHR.status && jqXHR.status == 400) {
                    var res_json = JSON.parse(jqXHR.responseText);
                }
            }
        });


        /** @swati Test call interval*/
        jQuery(".maintenance-device-select-test-call-interval").fSelect({
            placeholder: 'Select Test Call Interval(s)',
            numDisplayed: 4,
            overflowText: '{n} Select Test Call Interval(s) selected',
            noResultsText: 'No Select Test Call Interval(s) found',
            searchText: 'Search Test Call Interval(s)',
            showSearch: true
        });
        /** @swati Test call interval*/

        /*Added By Akash
        API call to get all the existing plan group*/
        var ajaxApiUrl = baseURL + "GetAllExistingPlanGroup";
        jQuery.ajax({
            type: "GET",
            url: ajaxApiUrl,
            success: function(res) {
                if (res.success) {
                    if (res.data.length > 0) {
                        var all_plangroup_names = res.data;
                        allPlanGroupArr = res.data;
                        var allPlanGroupsOptions = "<option value=''>Select Plan Group</option>";
                        var deviceMaintenanceNameOptions = "";
                        for (var k = 0; k < all_plangroup_names.length; k++) {
                            var optionValue = all_plangroup_names[k].plan_group_id + '-' + all_plangroup_names[k].plan_group;
                            allPlanGroupsOptions = allPlanGroupsOptions + "<option value='" + optionValue + "'>" + all_plangroup_names[k].plan_group + "</option>";
                        }
                    }


                    jQuery(".maintenance-device-select-plangroup").html('');
                    jQuery(".maintenance-device-select-plangroup").append(allPlanGroupsOptions);
                    jQuery(".maintenance-device-select-plangroup").fSelect({
                        placeholder: 'Select Plan Group',
                        numDisplayed: 4,
                        overflowText: '{n} app selected',
                        noResultsText: 'No plan found',
                        searchText: 'Search Plan Group',
                        showSearch: true
                    });
                    jQuery(".maintenance-device-dropdown-control-cont-app").show();

                    jQuery("#loaderModal").hide();
                } else {
                    jQuery("#loaderModal").hide();
                }
            },
            error: function(jqXHR, error, errorThrown) {
                if (jqXHR.status && jqXHR.status == 400) {
                    var res_json = JSON.parse(jqXHR.responseText);
                }
            }
        });

        /** Edit calling frequency and test call interval*/
        // Edit button click
        jQuery('.edit-icon').on('click', function () {
            const key = jQuery(this).data('key');
            const type = jQuery(this).data('type');

            jQuery(this).hide(); // hide pencil
            jQuery(`.save-icon[data-key="${key}"][data-type="${type}"]`).removeClass('d-none');

            if (type == 'test-call') {
                jQuery(`#test-call-text-${key}`).hide();
                jQuery(`#test-call-edit-${key}`).removeClass('d-none');
            } else {
                jQuery(`#${type}-text-${key}`).hide();
                jQuery(`#${type}-select-${key}`).removeClass('d-none');
            }
        });

        // Save icon click
        jQuery('.save-icon').on('click', function () {
            jQuery("#loaderModal").show();
            const key = jQuery(this).data('key');
            const type = jQuery(this).data('type');
            const id = jQuery(this).data('id');
            let selectedValue;

            if (type == 'test-call') {
                selectedValue = jQuery(`#testCallInterval-${key}`).val(); // returns array
                const allowedValues = ['60', '120', '240', '1440', '3600', '2400', 'oncealifetime'];
                const selectedValues = $('#testCallInterval-' + key).val(); // assuming it's a multi-select

                //Validate each selected value
                let isValid = true;
                let invalidValue = '';

                selectedValues.forEach(val => {
                    if (!allowedValues.includes(val)) {
                        isValid = false;
                        invalidValue = val;
                    }
                });

                if (!isValid) {
                    jQuery("#loaderModal").hide();
                    // Remove any previous error message
                    $('.test-call-error-message-' + key).html('');

                    // Show flash error message
                    $('.test-call-error-message-' + key).html(`
                        <div class="alert alert-danger">
                            Invalid Test Call Interval "${invalidValue}". Allowed values are: 60, 120, 240, 1440, 3600, 2400, oncealifetime.
                        </div>
                    `);

                    // Auto-hide after 5 seconds
                    setTimeout(() => {
                        $('.test-call-error-message-' + key + ' .alert').fadeOut(300, function () {
                            $(this).remove();
                        });
                    }, 5000);

                    return false; // Stop further actions
                }
            } else {
                selectedValue = jQuery(`#${type}-select-${key}`).val(); // single value
            }

            // Send AJAX call
            var baseURL = "{{ URL::to('/') }}" + "/";
            var ajaxApiUrl = baseURL + "UpdateCustomPlan";
            jQuery.ajax({
                url: ajaxApiUrl, // your Laravel route
                method: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    id: id,
                    key: key,
                    type: type,
                    value: selectedValue
                },
                success: function (response) {
                    console.log("@swati ===>", response);
                    if (type == 'test-call') {
                        const labelMap = {
                            "60": "Every Hour",
                            "120": "Every 2 Hour",
                            "240": "Every 4 Hour",
                            "1440": "Daily",
                            "3600": "Twice a Week",
                            "2400": "Three times a Week",
                            "oncealifetime": "Once a Lifetime"
                        };
                        const labels = selectedValue.map(val => labelMap[val]);
                        jQuery("#loaderModal").hide();
                        jQuery(`#test-call-text-${key}`).text(labels.join(', ')).show();
                        jQuery(`#test-call-edit-${key}`).addClass('d-none');
                    } else {
                        jQuery("#loaderModal").hide();
                        jQuery(`#${type}-text-${key}`).text(selectedValue).show();
                        jQuery(`#${type}-select-${key}`).addClass('d-none');
                    }

                    jQuery(`.save-icon[data-key="${key}"][data-type="${type}"]`).addClass('d-none');
                    jQuery(`.edit-icon[data-key="${key}"][data-type="${type}"]`).show();
                },
                error: function (err) {
                    alert("Update failed");
                }
            });
        });
        /** Edit calling frequency and test call interval*/
    });
</script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.1/js/jquery.dataTables.js"></script>
<script>
    $(document).ready(() => {
        $('#metaTable').DataTable({
            bLengthChange: false,
            pageLength: 10,
            language: {
                search: "",
                searchPlaceholder: "Search",
                background: "none"
            },
            "aoColumnDefs": [{
                "bSortable": false,
                "aTargets": [0]
            }],
        });

        $(document).on('click', '.display_popup', function() {
            var str = $(this).attr('id');
            var id = str.split('-')[1];
            showpopup(id);
        });
        $(document).on('click', '.cancel_button', function() {
            var str = $(this).attr('id');
            var id = str.split('-')[1];
            hidepopup(id);
        });
        $(document).on('click', '.close_button', function() {
            var str = $(this).attr('id');
            var id = str.split('-')[1];
            hidepopup(id);
        });
        /*Added By Akash
        hiding the new plan group column by default*/
        $('#new_plan_group_div').hide();

        /*click on new btn will reset the carrier,app name and existing plan group value
        and hide the option for existing plan and show the option of new plan group */
        $('#new_plan_btn').click(function() {
            $('#carrierName').val([]).fSelect('reload');
            $('#appName').val([]).fSelect('reload');
            $('#new_plan_group_div').show();
            $('#existing_plan_group_div').hide();
            $("#plangroup_name").val('').fSelect('reload');
        });

        /*click on exisitng btn will reset the new plan group value
        and hide the option for new plan and show the option of exisitng plan group */
        $('#existing_plan_btn').click(function() {
            $("#plan_group_name").val('');
            $('#existing_plan_group_div').show();
            $('#new_plan_group_div').hide();
        });

        /*on selecting the existing plan group value we extract the plan id
        if the selected value is null the added a check to not call the api
        to get carrier and app name and reset the carrier and app name dropdown */
        $('#plangroup_name').change(function() {
            var selectedValue = $(this).val();
            var plan_group_id = selectedValue.split('-')[0];
            if (selectedValue !== '') {
                getCarrierAndAppByPlan(plan_group_id);
            } else {
                $('#carrierName').val([]).fSelect('reload');
                $('#appName').val([]).fSelect('reload');
            }
        });

        $('#create_custom_pln_btn').click(function() {
            jQuery("#loaderModal").show();
        })

        $(document).on('click', '.download_info_btn', function() {
            var row = $(this).data('row');
            var value = JSON.parse($('#data-info-' + row).val());
            var pricedata = JSON.parse($('#price-and-period-' + row).val());
            var periodValue = pricedata[0].meta_value + " " + pricedata[1].meta_value;
            var priceValue = pricedata[2].meta_value;
            value.price = priceValue;
            value.period = periodValue;
            var membership_url = $(this).closest('tr').find('.membership-url').text();
            var plan_group_url = $(this).closest('tr').find('.plan-group-url').text();
            value.membership_url = membership_url;
            value.plan_group_url = plan_group_url;
            // console.log(value);
            downloadData(value);
        });

        $(document).on('click', '.copy-icon', function() {
            var url = $(this).closest('tr').find('.url').text();
            copyToClipboard(url);
            // $(this).closest('tr').find('.membership-url').fadeOut(1000);
            // $(this).closest('tr').find('.membership-url').fadeIn(1000);
            $(this).closest('tr').find('.copied_cls').show();
            $(this).closest('tr').find('.copied_cls').fadeOut(2000);
        });

    });

    function copyToClipboard(url) {
        var $temp = jQuery("<input>");
        jQuery("body").append($temp);
        $temp.val(url).select();
        document.execCommand("copy");
        $temp.remove();
    }

    function showpopup(id) {
        $("#popup_box-" + id).fadeToggle();
        $("#popup_box-" + id).css({
            "visibility": "visible",
            "display": "block"
        });

        // Get selected Calling Frequency when popup is opened
        var selectedFreq = $("#calling-frequency-select-" + id).val() 
            || $("#calling-frequency-text-" + id).text().trim();

        // Show/hide Test Call Interval row for this popup only
        if (selectedFreq === "Dynamic Calling") {
            $("#testCallIntervalRow-" + id).show();
        } else {
            $("#testCallIntervalRow-" + id).hide();
        }
    }

    // Also handle change event inside popup
    $(document).on("change", ".calling-frequency-select", function() {
        var key = $(this).data("key");
        var selectedValue = $(this).val();
        if (selectedValue === "Dynamic Calling") {
            $("#testCallIntervalRow-" + key).show();
        } else {
            $("#testCallIntervalRow-" + key).hide();
        }
    });

    function hidepopup(id) {
        $("#popup_box-" + id).fadeToggle();
        $("#popup_box-" + id).css({
            "visibility": "hidden",
            "display": "none"
        });
    }

    /*Added By Akash
    getting carrier and app name if we are selecting existing
    plan and it will automatically selected in the dropdown*/
    function getCarrierAndAppByPlan(plan_group_id) {
        var baseURL = "{{ URL::to('/') }}" + "/";
        var ajaxApiUrl = baseURL + "GetCarrierAndAppByPlan?plan_group_id=" + plan_group_id;
        $.ajax({
            type: "GET",
            url: ajaxApiUrl,
            success: function(res) {
                if (res.success) {
                    // var selectElement = $('#carrierName');
                    if (res.data.length > 0) {
                        var carrierArray = res.data[0].carrier_name.split(";").map(function(carrier) {
                            return carrier.trim();
                        });
                        var AppArray = res.data[0].app_name.split(";").map(function(app) {
                            return app.trim();
                        });
                        $('#carrierName').val(carrierArray).fSelect('reload');
                        $('#appName').val(AppArray).fSelect('reload');
                        jQuery("#loaderModal").hide();
                    } else {
                        jQuery("#loaderModal").hide();
                    }
                }
            },
            error: function(jqXHR, error, errorThrown) {
                if (jqXHR.status && jqXHR.status == 400) {
                    var res_json = JSON.parse(jqXHR.responseText);
                }
            }
        });
    }

    function downloadData(content) {
        var columnMapping = {
            'plan_group': 'Plan Group',
            'max_phone_numbers': 'Plan Obn Capacity',
            'plan_id': 'Plan Id',
            'plan_group_id': 'Plan Group Id',
            'calling_frequency': 'Calling Frequency',
            'test_call_interval':'Test Call Interval',
            'calling_frequency_time': 'Calling Frequency Time',
            'price': 'Price',
            'period': 'Period',
            'carrier_name': 'Carrier(s) Name',
            'app_name': 'App(s) Name',
            'membership_url': 'Membership URl',
            'plan_group_url': 'Plan Group URl'
        };

        var intervalMapping = {
            '60': 'Every Hour',
            '120': 'Every 2 hour',
            '240': 'Every 4 hour',
            '1440': 'Daily',
            '3600': 'Twice a week',
            '2400': 'Three times a week',
            'oncealifetime': 'Once a Lifetime'
        };

        var columnsToInclude = Object.keys(columnMapping);

        /* function formatContent(key, value) {
            if (value === null || value === undefined || value === " ") {
                return `${columnMapping[key]}: _`;
            } else {
                return `${columnMapping[key]}: ${value}`;
            }
        } */
        function formatContent(key, value) {
            if (value === null || value === undefined || value === " ") {
                return `${columnMapping[key]}: _`;
            }

            if (key == 'test_call_interval') {
                // If value is a string that looks like an array, parse it
                if (typeof value === 'string') {
                    try {
                        value = JSON.parse(value);
                    } catch (e) {
                        // if not parseable, fallback to displaying raw value
                        return `${columnMapping[key]}: ${value}`;
                    }
                }

                if (Array.isArray(value)) {
                    const formattedIntervals = value.map(v => intervalMapping[v] || v).join(', ');
                    return `${columnMapping[key]}: ${formattedIntervals}`;
                } else {
                    return `${columnMapping[key]}: ${intervalMapping[value] || value}`;
                }
            }

            return `${columnMapping[key]}: ${value}`;
        }

        var formattedContent = Object.entries(content)
            .filter(([key]) => columnsToInclude.includes(key))
            .map(([key, value]) => formatContent(key, value))
            .join('\n\n');

        var blob = new Blob([formattedContent], {
            type: 'text/plain;charset=UTF-8'
        });

        var link = document.createElement('a');
        link.href = window.URL.createObjectURL(blob);
        link.download = `${content.plan_group}_${content.plan_id}_data.txt`;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        window.URL.revokeObjectURL(link.href);
    }
</script>
@endsection