@extends('layouts.master')

@section('page_title','Create Campaign')
@section('title','Create Campaign')
@section('main_item','Create Campaign')
@section('sub_item','Create Campaign Details')

@section('content')
<div class="col-md-12">
    <div class="card">
        <div class="card-body">
            <h4 class="card-title">Create Campaign</h4>
            <div class="row">
            <div class="col-md-8">
                
            <form action="{{ route('campaigns.store') }}" method="POST">
                @csrf

                <div class="form-group">
                    <label for="name">Campaign Name</label>
                    <input type="text" name="name" id="name" placeholder="Enter campaign name" class="form-control" required>
                </div>

                <div class="form-group">
                    <label for="message">Message</label>
                    <textarea name="message" id="message" placeholder="Enter the message for the campaign" class="form-control" rows="4" required></textarea>
                </div>
<style>
    .switch {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 18px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  background-color: #ccc;
  border-radius: 34px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: teal;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #88d0c0;
}

input:checked + .slider:before {
  transform: translateX(26px);
}

/* Rounded switch */
.slider.round {
  border-radius: 34px;
}
</style>
               <div class="d-flex align-items-center mb-3">
    <label class="mb-0 mr-2">Send Now</label>

    <label class="switch mb-0">
        <input type="checkbox" id="send_option_switch">
        <span class="slider round"></span>
    </label>

    <label class="mb-0 ml-2">Send Later</label>
</div>
<input type="hidden" name="send_type" id="send_type_input" value="send_now" />
<!-- These fields are hidden by default and shown only if "Schedule Message" is selected -->
<div id="schedule_fields" style="display: none;">

    <div class="form-group">
        <label for="schedule_type">Schedule Type</label>
        <select name="schedule_type" id="schedule_type" class="form-control">
            <option value="" disabled selected>Select Schedule Type</option>
            <option value="daily">Daily</option>
            <option value="weekly">Weekly</option>
            <option value="monthly">Monthly</option>
        </select>
    </div>

   <div class="form-row" id="date-wrapper">
        <div class="col-md-12 form-group">
            <label for="start_date">Date</label>
            <input type="date" name="start_date" id="start_date" class="form-control">
        </div>
    </div>

    <div class="form-group">
        <label for="send_time">Send Time</label>
        <input type="time" name="send_time" id="send_time" class="form-control">
    </div>
</div>

               

                <div class="form-group">
                    <label for="recipients">Recipients</label><br>
                    <div class="btn-group mb-3" role="group" aria-label="Customer Filter">
                        <button type="button" class="btn btn-primary" id="allCustomers">All Customers</button>
                        <button type="button" class="btn btn-secondary" id="oneOrder">1 Order</button>
                        <button type="button" class="btn btn-success" id="twoThreeOrders">2-3 Orders</button>
                        <button type="button" class="btn btn-danger" id="moreThanThreeOrders">More than 3 Orders</button>
                    </div>
                    
                     <div class="border rounded p-2" style="max-height: 200px; overflow-y: auto;" id="customerList">
        @foreach($contacts as $contact)
            <div class="form-check customer-item" data-order-count="{{ $contact->delivered_sales_count }}">
                <input 
                    class="form-check-input customer-checkbox" 
                    type="checkbox" 
                    name="recipients[]" 
                    value="{{ $contact->mobile }}" 
                    id="recipient_{{ $contact->id }}"
                >
                <label class="form-check-label" for="recipient_{{ $contact->id }}">
                    {{ $contact->name }} ({{ $contact->mobile }}) - Orders: {{ $contact->delivered_sales_count }}
                </label>
            </div>
        @endforeach
    </div>
                    <div class="form-check ml-2">
                        <input 
                            class="form-check-input" 
                            type="checkbox" 
                            id="checkAll" 
                        >
                        <label class="form-check-label" for="checkAll">
                            Select All
                        </label>
                    </div>
                    
                </div>

                <button type="submit" class="btn btn-primary btn-block">Create Campaign</button>
            </form>
            </div>
            <div class="col-md-4">
  <div class="card-content white-text" style="background-color: #eeeff1; padding: 20px; border-radius: 8px;">
    
    

    <h6 class="m-t-md right-align">
      <b><span>&#128221;</span> Characters</b>
    </h6>
    <div style="background-color: #455A64; border-radius: 5px; height: 10px; overflow: hidden;">
      <div id="char_bar" style="background-color: #4caf50; height: 100%; width: 100%;"></div>
    </div>
    <h5 class="right-align"><span id="char_count">160</span></h5>
    <div class="divider" style="border-bottom: 1px solid #ccc;"></div>

    <h6 class="m-t-md right-align">
      <b><span>&#128196;</span> Page Count</b>
    </h6>
    <h5 class="right-align"><span id="pg_count">1</span> page(s)</h5>
    <div class="divider" style="border-bottom: 1px solid #ccc;"></div>

    <h6 class="m-t-md right-align">
      <b><span>&#128101;</span> Recipients</b>
    </h6>
    <h5 class="right-align"><span id="to_count">0</span></h5>
    <div class="divider" style="border-bottom: 1px solid #ccc;"></div>

    <h6 class="m-t-md right-align" title="Based on page count and recipients">
      <b><span>&#128178;</span> Estimated Cost</b>
    </h6>
    <h5 class="right-align"><span id="ext_cost">0.00</span></h5>
    <div class="divider d-none" style="border-bottom: 1px solid #ccc;"></div>

    <h6 class="m-t-md right-align d-none">
      <b><span>&#128179;</span> Current Balance</b>
    </h6>
    <h5 class="right-align d-none"><span id="balance">760.000</span></h5>

    <div class="divider d-none" style="border-bottom: 1px solid #ccc; margin-top: 15px;"></div>

    <!-- Summary Section -->
    <div style="margin-top: 20px; padding: 15px; background-color: #eeeff1; border-radius: 8px;" class="d-none">
      <h6 class="center-align"><b>Total Cost:</b> <span id="total_cost">0.00</span></h6>
      <h6 class="center-align"><b>Balance After Send:</b> <span id="new_balance">760.00</span></h6>
    </div>

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

@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/toastr@2.1.4/toastr.min.js"></script>
@if(session('error_message'))
    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function() {
            toastr.options = {
                "positionClass": "toast-top-right",
                "timeOut": "5000"
            };
            toastr.error("{{ session('error_message') }}", "Error");
        });
    </script>
@endif

@if(session('success_message'))
    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function() {
            toastr.options = {
                "positionClass": "toast-top-right",
                "timeOut": "5000"
            };
            toastr.success("{{ session('success_message') }}", "Success");
        });
    </script>
@endif

<script>
    document.getElementById('send_option_switch').addEventListener('change', function () {
        const scheduleFields = document.getElementById('schedule_fields');
        const label = document.getElementById('send_option_label');

        if (this.checked) {
            scheduleFields.style.display = 'block';
            label.innerText = 'Schedule Message';
        } else {
            scheduleFields.style.display = 'none';
            label.innerText = 'Send Now';
        }
    });
</script>
<script>
    // JavaScript to filter the customers based on the selected button
    document.getElementById('allCustomers').addEventListener('click', function() {
        filterCustomers('all');
    });

    document.getElementById('oneOrder').addEventListener('click', function() {
        filterCustomers('1');
    });

    document.getElementById('twoThreeOrders').addEventListener('click', function() {
        filterCustomers('2-3');
    });

    document.getElementById('moreThanThreeOrders').addEventListener('click', function() {
        filterCustomers('moreThan3');
    });

    // Function to filter the customers based on the order count
    function filterCustomers(filterType) {
        const customers = document.querySelectorAll('.customer-item');

        customers.forEach(function(customer) {
            const orderCount = parseInt(customer.getAttribute('data-order-count'));

            // Show or hide customers based on the filter
            if (filterType === 'all') {
                customer.style.display = 'block';
            } else if (filterType === '1' && orderCount === 1) {
                customer.style.display = 'block';
            } else if (filterType === '2-3' && orderCount >= 2 && orderCount <= 3) {
                customer.style.display = 'block';
            } else if (filterType === 'moreThan3' && orderCount > 3) {
                customer.style.display = 'block';
            } else {
                customer.style.display = 'none';
            }
        });
    }
</script>
<script>
    // JavaScript to handle "Select All" functionality
    document.getElementById('checkAll').addEventListener('change', function() {
        const isChecked = this.checked;  // Check if the "Select All" checkbox is checked
        const checkboxes = document.querySelectorAll('.customer-checkbox');  // Get all the checkboxes
        
        // Loop through each checkbox and set its checked state to the same as "Select All"
        checkboxes.forEach(function(checkbox) {
            checkbox.checked = isChecked;
        });
    });
</script>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        const customerItems = document.querySelectorAll('.customer-item');
        const checkAllBox = document.getElementById('checkAll');
        const charCountEl = document.getElementById('char_count');
        const pageCountEl = document.getElementById('pg_count');
        const recipientCountEl = document.getElementById('to_count');
        const costEl = document.getElementById('ext_cost');
        const totalCostEl = document.getElementById('total_cost');
        const newBalanceEl = document.getElementById('new_balance');
        const balance = parseFloat(document.getElementById('balance').textContent);

        const filterButtons = {
            all: document.getElementById('allCustomers'),
            one: document.getElementById('oneOrder'),
            twoThree: document.getElementById('twoThreeOrders'),
            more: document.getElementById('moreThanThreeOrders')
        };

        const messageBox = document.getElementById('message');

        function updateVisibility(filterFunc) {
            customerItems.forEach(item => {
                const count = parseInt(item.dataset.orderCount);
                if (filterFunc(count)) {
                    item.style.display = '';
                } else {
                    item.style.display = 'none';
                    item.querySelector('.customer-checkbox').checked = false;
                }
            });
            updateRecipientCount();
        }

        filterButtons.all.addEventListener('click', () => updateVisibility(() => true));
        filterButtons.one.addEventListener('click', () => updateVisibility(count => count === 1));
        filterButtons.twoThree.addEventListener('click', () => updateVisibility(count => count >= 2 && count <= 3));
        filterButtons.more.addEventListener('click', () => updateVisibility(count => count > 3));

        checkAllBox.addEventListener('change', function () {
            document.querySelectorAll('.customer-item').forEach(item => {
                if (item.style.display !== 'none') {
                    item.querySelector('.customer-checkbox').checked = this.checked;
                }
            });
            updateRecipientCount();
        });

        document.querySelectorAll('.customer-checkbox').forEach(cb => {
            cb.addEventListener('change', updateRecipientCount);
        });

        function updateRecipientCount() {
            const count = [...document.querySelectorAll('.customer-checkbox')]
                .filter(cb => cb.checked && cb.closest('.customer-item').style.display !== 'none')
                .length;
            recipientCountEl.textContent = count;
            updateCost();
        }

        function updateCost() {
        const messageLength = messageBox.value.length;

        const pages = Math.ceil(messageLength / 160) || 1;
        pageCountEl.textContent = pages;

        const charsLeftInCurrentPage = 160 - (messageLength % 160 || 160);
        charCountEl.textContent = charsLeftInCurrentPage;

        const recipientCount = parseInt(recipientCountEl.textContent);
        const estimated = (recipientCount * pages * 1.50).toFixed(2); // Assuming 0.10 per page per recipient

        costEl.textContent = estimated;
        totalCostEl.textContent = estimated;
        newBalanceEl.textContent = (balance - estimated).toFixed(2);

        // Optional: Update progress bar
        const percentage = Math.min((messageLength % 160) / 160 * 100, 100);
        document.getElementById('char_bar').style.width = `${percentage}%`;
    }

        messageBox.addEventListener('input', () => {
            updateCost();
        });

        // Initialize on load
        updateRecipientCount();
    });
    
</script>
<script>
    document.getElementById('schedule_type').addEventListener('change', function () {
        const dateWrapper = document.getElementById('date-wrapper');
        if (this.value === 'daily') {
            dateWrapper.style.display = 'none';
        } else {
            dateWrapper.style.display = 'block';
        }
    });

    // Run on page load to apply initial state
    window.addEventListener('DOMContentLoaded', () => {
        document.getElementById('schedule_type').dispatchEvent(new Event('change'));
    });
</script>
<script>
document.addEventListener('DOMContentLoaded', () => {
  const switchInput = document.getElementById('send_option_switch');
  const sendTypeInput = document.getElementById('send_type_input');

  // Initialize hidden input value on page load
  sendTypeInput.value = switchInput.checked ? 'send_later' : 'send_now';

  // Listen for changes and update hidden input value accordingly
  switchInput.addEventListener('change', () => {
    sendTypeInput.value = switchInput.checked ? 'send_later' : 'send_now';
  });
});
</script>
@endsection