@extends('layouts.app') @section('appjs')
<script type="application/javascript" src="{{ asset('js/app.js') }}"></script>
@endsection @section('content') @section('page_title') SMS Template
Details list @endsection
<style>
    .d-inline-flex {
    margin-bottom: -50px;
    position:relative;
    z-index:1;
    }
    .table-responsive #maindashboard_filter{
    margin-bottom: 10px;
    }
    #sales_dropdown{
        width: max-content;
        padding-right: 40px;
    }
    #datalist_filter input{
        margin-top: 44px
    }
    .top_message{
        text-align: center;
        font-weight: 400;
        margin-top: -20px;
        font-size: 0.8rem;
    }
    .dataTables_length{
        margin-top: 48px  
    }
  .card-container {
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
    }

    .card-container .card {
      background-color: #ffffff;
      padding: 20px 30px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
      border-radius: 12px;
      width: 500px;
      min-height: 180px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    
    .card-container .card h3 {
      margin-top: 0;
      font-size: 1.2em;
      color: #333;
    }

    .card p {
      color: #555;
    }

    .card-container .card strong {
      color: #1a73e8;
      font-size: 1.5em;
    } 
    .between{
        display:flex;
        justify-content:space-between;
    }
    .strong{
        font-weight:bold;
    }

</style>
<div class="container-fluid">
    <div class="card">
        <div class="row ml-3  mt-4 mb-n6">
            <div class="form-group col-md-2">
                @include('whatsapp_menu')
            </div>
            @can('hasExcelPermission')
            <div class="col-md-2 mt-2">
                <form class="pull-right mr-3" method="post" action="{{ url('exporWhatsAppTransdashboard') }}">
                @csrf
                <input type="hidden" name="fromdate" id="from_date_hidden" />
                <input type="hidden" name="todate" id="to_date_hidden"/>
                <input type="hidden" name="account[]" id="account_filter_export"/>
                <input type="hidden" name="account_name[]" id="account_name_filter"/>
                <input type="hidden" name="template_name" id="template_name_filter"/>
                </form>

            @endcan  
            </div>
        </div>             
		<div class="card-body">
            <form class="d-flex">

            <div class="form-group col-md-2"> 
                <label for="langOpt">Choose Whatsapp Account &nbsp; </label><br>
                <select class="form-control" name="langOpt[]" multiple id="langOpt">
                <optgroup label="Phone Numbers" id="wa-number-options">
                    <!-- Options will be loaded dynamically -->
                </optgroup>
                </select>
            </div>

                <div class="form-group col-md-2 date_picker date_picker_from">
                    <label for="start_date">From Date</label>
                    <input type="text" class="form-control" id="start_date" name="start_date" placeholder="Select Date" value="{{date('Y-m-d')}}">
                </div>
                <div class="form-group col-md-2 date_picker date_picker_to">
                    <label for="end_date">To Date</label>
                    <input type="text" class="form-control" id="end_date" name="end_date" placeholder="Select Date" value="{{date('Y-m-d')}}">
                </div>

            </form>
            <div class="card-container">
                <div class="card">
                    <div class='between'>
                        <div class="strong">
                            <h3 class="strong"><span>---</span> All Conversations</h3>
                        </div>
                        <div class="strong" id="all_conversations">0</div>
                    </div>
                    <div class='between'>
                        <div><span>---</span> Marketing</div>
                        <div id="marketing_count">0</div>
                    </div>
                    <div class='between'>
                        <div><span>---</span> Utility</div>
                        <div id="utility_count">0</div>
                    </div>
                    <div class='between'>
                        <div><span>---</span> Authentication</div>
                        <div id="authentication_count">0</div>
                    </div>
                    <div class='between'>
                        <div><span>---</span> Authentication-international</div>
                        <div id="authentication_international_count">0</div>
                    </div>
                    <div class='between'>
                        <div><span>---</span> Service</div>
                        <div id="service_count">0</div>
                    </div>
                </div>

                <div class="card">
                    <div class='between'>
                        <div class="strong">
                            <h3 class="strong"><span>---</span> Approximate Charges</h3>
                        </div>
                        <div class="strong" id="total_cost">0</div>
                    </div>
                    <div class='between'>
                        <div><span>---</span> Marketing</div>
                        <div id="marketing_cost">0</div>
                    </div>
                    <div class='between'>
                        <div><span>---</span> Utility</div>
                        <div id="utility_cost">0</div>
                    </div>
                    <div class='between'>
                        <div><span>---</span> Authentication</div>
                        <div id="authentication_cost">0</div>
                    </div>
                    <div class='between'>
                        <div><span>---</span> Authentication-international</div>
                        <div id="authentication_international_cost">0</div>
                    </div>
                    <div class='between'>
                        <div><span>---</span> Service</div>
                        <div id="service_cost">0</div>
                    </div>
                </div>
            </div>
		</div>
	</div>
</div>
<link rel="stylesheet" href="{{asset('css/jquery-ui.css')}}" />
<script type="application/javascript" src="{{ asset('js/jquery-ui.js') }}"></script>
<script>

let total=0;

$(document).ready(function () {
        fetchAccountDropdown();

        function fetchAccountDropdown() {
            $.ajax({
                url: "{{ url('/get_whatsapp_accounts') }}",
                type: 'POST',
                data: {
                    _token: "{{ csrf_token() }}"
                },
                success: function(response) {
                    if (response.status === 'success') {
                        const options = response.data;
                        const $select = $('#langOpt');
                        $select.empty();

                        options.forEach(({ label, value }) => {
                            const option = $('<option>', {
                                value,
                                text: label
                            });
                            $select.append(option);
                        });

                        $select.multiselect('destroy');
                        $select.multiselect({
                            enableFiltering: true,
                            selectAllJustVisible: false,
                            includeSelectAllOption: true,
                            allSelectedText: 'All Accounts selected',
                            nonSelectedText: 'No Account selected',
                            selectAllValue: 'all',
                            selectAllText: 'Select all',
                            unselectAllText: 'Unselect all',
                            buttonWidth: '100%',
                            enableCaseInsensitiveFiltering: true,
                            templates: {
                                filterClearBtn: '<span class="input-group-btn"><button class="btn btn-default multiselect-clear-filter border-radius-0" type="button">Clear</button></span>',
                            },
                            onChange: function(option, checked) {
                                listconversation();
                            },
                            onSelectAll: function() {
                                listconversation();
                            },
                            onDeselectAll: function() {
                                listconversation();
                            }
                        });
                    }
                },
                error: function(xhr) {
                    console.error("Error loading WhatsApp accounts:", xhr.responseText);
                }
            });
        }
    });

     $('#langOpt').multiselect({
        enableFiltering: true,
        selectAllJustVisible: false,
        includeSelectAllOption: true,
        allSelectedText: 'All Accounts selected',
        nonSelectedText: 'No  Account selected',
        selectAllValue: 'all',
        selectAllText: 'Select all',
        unselectAllText: 'Unselect all',
        buttonWidth: '100%',
        templates: {
                filterClearBtn: '<span class="input-group-btn"><button class="btn btn-default multiselect-clear-filter border-radius-0" type="button">Clear</button></span>',
            },
            enableCaseInsensitiveFiltering: true
    });

    $("#start_date").datepicker({
        dateFormat: 'yy-mm-dd',
        maxDate: 0,
        autoclose: true,
        todayHighlight: true,
        endDate: 'today',
        onSelect: function (selectedDate) {
            var startDate = $('#start_date').datepicker('getDate');
            $('#end_date').datepicker('option', 'minDate', startDate);
            listconversation(true);
            $('#period_filter').val('');
        }
    });
    $("#end_date").datepicker({
        dateFormat: 'yy-mm-dd',
        minDate: $("#start_date").datepicker("getDate"),
        maxDate: 0,
        autoclose: true,
        todayHighlight: true,
        onClose: function () {
            var startDate = $('#start_date').datepicker('getDate');
            var endDate = $('#end_date').datepicker('getDate');
            if (startDate == null) {
                $('#start_date').datepicker('setDate', endDate);
            }
            if (endDate < startDate) {
                var minDate = $('#end_date').datepicker('option', 'minDate', startDate);
                $('#end_date').datepicker('setDate', minDate);
            }
            listconversation(true);
        },
        onSelect: function () {
            $('#period_filter').val('');
        }
    });
    $("body").on("change", "#period_filter", function () {
        var periodValue = $(this).val();
        $("#start_date").val('');
        $("#end_date").val('');
        if (periodValue == '') {
            listconversation();
        }
    });

    function listconversation(dateSelected) {
        var start_date = $('#start_date').val();
        var end_date = $('#end_date').val();
        var phone_numbers =JSON.stringify( $('#langOpt').val());
        var whatsapp_account_names = $('#whatsapp_account_name').val();
        var template_name = $('#whatsapp_template_name').val();
        $.ajax({
            url: "{{ url('whatsAppConvDashboard') }}",
            dataType: "json",
            type: "POST",
            data: {
                _token: "{{ csrf_token() }}",
                start_date: start_date,
                end_date: end_date,
                whatsapp_account_names: whatsapp_account_names,
                template_name: template_name,
                phone_numbers: phone_numbers
            },
            success: function(response) {
                const data = response.data || {};
                $('#all_conversations, #total_cost').text(0);
                $('#marketing_count, #utility_count, #authentication_count, #authentication_international_count, #service_count').text(0);
                $('#marketing_cost, #utility_cost, #authentication_cost, #authentication_international_cost, #service_cost').text(0);

                let totalCount = 0;
                let totalCost = 0;
                let uniquePhoneNumbers = new Set();

                $.each(data, function(category, values) {
                    let countId = category.toLowerCase().replace(/ /g, '_') + '_count';
                    let costId = category.toLowerCase().replace(/ /g, '_') + '_cost';

                    if ($('#' + countId).length) {
                        $('#' + countId).text(values.conversation);
                    }
                    if ($('#' + costId).length) {
                        $('#' + costId).text(parseFloat(values.cost).toFixed(2));
                    }

                    totalCount += values.conversation;
                    totalCost += parseFloat(values.cost);

                    if (Array.isArray(values.phone_numbers)) {
                    values.phone_numbers.forEach(function(phone) {
                        uniquePhoneNumbers.add(phone);
                    });
                    }
                });

                $('#all_conversations').text(totalCount);
                $('#total_cost').text(totalCost.toFixed(2));

                let waSelect = $('#wa-number-options');
                waSelect.empty();

                if (uniquePhoneNumbers.size > 0) {
                    uniquePhoneNumbers.forEach(function(phone) {
                        waSelect.append(`<option value="${phone}">${phone}</option>`);
                    });
                } else {
                    waSelect.append(`<option disabled>No numbers found</option>`);
                }
            },
            error: function(xhr, status, error) {
                console.error('Error fetching data:', error);
            }
        });
        // 
        function transformPhoneData(data) {
            const arr = [];
            const uniqueNum = new Set();
            for (const category in data) {
                const { phone_numbers } = data[category] || {};
                if(Object.keys(phone_numbers).length>0){
                    for (let key in phone_numbers){
                        arr.push({
                            label:`${key} ${phone_numbers[key]}`,
                            value:key
                        })
                    }
                }else {
                arr.push({ label: '', value: '' });
               }
            }
            const uniqueByValue = Array.from(
                new Map(arr.map(item => [item.value, item])).values()
            );
            return uniqueByValue;
        }
        function loadMultiselectOptions(data) {
        const options = transformPhoneData(data);
        const $select = $('#langOpt');

        $select.empty();

        options.forEach(({ label, value }) => {
            const option = $('<option>', {
                value,
                text: label
            });
            $select.append(option);
        });

        $select.multiselect('destroy');
        $select.multiselect({
            enableFiltering: true,
            selectAllJustVisible: false,
            includeSelectAllOption: true,
            allSelectedText: 'All Accounts selected',
            nonSelectedText: 'No Account selected',
            selectAllValue: 'all',
            selectAllText: 'Select all',
            unselectAllText: 'Unselect all',
            buttonWidth: '100%',
            enableCaseInsensitiveFiltering: true,
            templates: {
                filterClearBtn: '<span class="input-group-btn"><button class="btn btn-default multiselect-clear-filter border-radius-0" type="button">Clear</button></span>',
            },
            onChange: function(option, checked) {
                listconversation();
            },
            // onSelectAll: function() {
            //     listconversation();
            // },
            onDeselectAll: function() {
                listconversation();
            }
        });
    }

}

</script>
@endsection