@extends('layout.app')
@section('content')
    <form action="" method="POST">
        @csrf
        <div class="card">
            <div class="card-body">
                <div class="card card-secondary card-tabs">
                    <div class="card-header p-0 pt-1">
                        <ul class="nav nav-tabs" id="reseller-sms-tab" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" id="tab-batch-tab" data-toggle="pill"
                                    href="#tab-batch" role="tab" aria-controls="tab-batch"
                                    aria-selected="true">Batch SMS Send</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="tab-single-tab" data-toggle="pill"
                                    href="#tab-single" role="tab" aria-controls="tab-single"
                                    aria-selected="false">Single SMS Send</a>
                            </li>
                        </ul>
                    </div>
                    <div class="card-body">
                        <div class="tab-content" id="reseller-sms-tabContent">

                            {{-- Batch SMS --}}
                            <div class="tab-pane fade show active" id="tab-batch" role="tabpanel"
                                aria-labelledby="tab-batch-tab">
                                <div class="container col-md-12">
                                    <div class="row">

                                        <div class="form-group col-md-3">
                                            <label>Reseller <span class="text-danger">*</span></label>
                                            <select class="select2 form-control" name="reseller_id" id="batch_reseller">
                                                <option value="">Select One</option>
                                                @foreach ($reseller as $item)
                                                    <option value="{{ $item->id }}">{{ $item->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="form-group col-md-3">
                                            <label>Select POP</label>
                                            <select name="pop_id" id="batch_pop" class="select2 form-control">
                                                <option value="">Select One</option>
                                            </select>
                                        </div>

                                        <div class="form-group col-md-3">
                                            <label>Select Billing Cycle</label>
                                            <select name="billing_cycle" id="batch_billing_cycle"
                                                class="select2 form-control">
                                                <option value="all">ALL Billing Cycle</option>
                                                @foreach (explode(',', $confday) as $conf)
                                                    <option value="{{ $conf }}">{{ $conf }}</option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="form-group col-md-3">
                                            <label>Status <span class="text-danger">*</span></label>
                                            <select name="status" id="batch_status" class="select2 form-control"
                                                multiple required>
                                                <option value="active">Active</option>
                                                <option value="deactive">Deactive</option>
                                                <option value="expired">Expired</option>
                                                <option value="disable">Disable</option>
                                                <option value="close">Close</option>
                                            </select>
                                        </div>

                                        <div class="form-group col-md-3">
                                            <label>Select Area</label>
                                            <select name="area" id="batch_area"
                                                class="select2 form-control" multiple>
                                                <option value="all">ALL Area</option>
                                            </select>
                                        </div>

                                        <div class="form-group col-md-12">
                                            <label>Message <span class="text-danger">*</span></label>
                                            <textarea name="message" class="form-control" id="batch_message" rows="3" required></textarea>
                                        </div>

                                        <div class="form-group col-md-12">
                                            <textarea class="form-control" spellcheck="false" rows="6" readonly>{c_id}&#10;{c_code}&#10;{c_password}&#10;{c_username}&#10;{c_name}&#10;{c_deadline}&#10;{MonthlyBill}&#10;{TotalDue}&#10;{company_cell}&#10;{company_name}&#10;{payment_url}</textarea>
                                        </div>

                                    </div>
                                    <div class="form-group">
                                        <button type="button" id="btn_batch_send" class="btn btn-primary float-right">
                                            Send
                                        </button>
                                    </div>
                                </div>
                            </div>

                            {{-- Single SMS --}}
                            <div class="tab-pane fade" id="tab-single" role="tabpanel"
                                aria-labelledby="tab-single-tab">
                                <div class="container col-md-12">
                                    <div class="row">

                                        <div class="form-group col-md-3">
                                            <label>Single Number <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" id="single_number"
                                                name="number" minlength="11" maxlength="11"
                                                placeholder="11-digit number">
                                        </div>

                                        <div class="form-group col-md-3" id="single_reseller_wrap">
                                            <label>Reseller <span class="text-danger">*</span></label>
                                            <select class="select2 form-control" id="single_reseller" required>
                                                <option value="">Select One</option>
                                                @foreach ($reseller as $item)
                                                    <option value="{{ $item->id }}">{{ $item->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="form-group col-md-6">
                                            <textarea class="form-control" spellcheck="false" rows="6" readonly>{c_id}&#10;{c_code}&#10;{c_password}&#10;{c_username}&#10;{c_name}&#10;{c_deadline}&#10;{MonthlyBill}&#10;{TotalDue}&#10;{company_cell}&#10;{company_name}&#10;{payment_url}</textarea>
                                        </div>

                                        <div class="form-group col-md-12">
                                            <label>Message <span class="text-danger">*</span></label>
                                            <textarea name="message_single" class="form-control" id="single_message" rows="3" required></textarea>
                                        </div>

                                    </div>
                                    <div class="form-group">
                                        <button type="button" id="btn_single_send" class="btn btn-primary float-right">
                                            Send
                                        </button>
                                    </div>
                                </div>
                            </div>

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

    <style>
        #processing {
            background: rgba(0, 0, 0, .5);
            height: 100vh;
            width: 100%;
            text-align: center;
            color: #fff;
            top: 0;
            padding-top: 50vh;
            position: fixed;
            z-index: 999;
        }
    </style>
@endsection

@section('ajax')
    <script type="text/javascript">
        $(function () {

            // Check if number belongs to a known client; show/hide reseller accordingly
            function checkNumber(number) {
                if (!number || number.length !== 11) {
                    showReseller();
                    return;
                }
                $.get('{{ route('checkClientNumber') }}', { number: number }, function (result) {
                    if (result.exists) {
                        hideReseller();
                    } else {
                        showReseller();
                    }
                });
            }

            function hideReseller() {
                $('#single_reseller_wrap').hide();
                $('#single_reseller').prop('required', false).val('').trigger('change');
            }

            function showReseller() {
                $('#single_reseller_wrap').show();
                $('#single_reseller').prop('required', true);
            }

            // Auto-fill single number and activate single tab when redirected from client search
            var urlParams = new URLSearchParams(window.location.search);
            var prefillNumber = urlParams.get('number');
            if (prefillNumber) {
                $('#tab-single-tab').tab('show');
                $('#single_number').val(prefillNumber);
                checkNumber(prefillNumber);
            } else {
                // Default: reseller visible and required
                showReseller();
            }

            // Re-check whenever the user changes the number
            $('#single_number').on('blur change', function () {
                checkNumber($(this).val().trim());
            });

            // Reseller change → load POPs and areas (batch tab)
            $('#batch_reseller').on('change', function () {
                var reseller_id = $(this).val();
                $('body').append('<div class="hidden" id="processing">processing.....</div>');

                $.ajax({
                    type: 'get',
                    url: '{{ route('getResellerAreaPop') }}',
                    data: { id: reseller_id },
                    success: function (result) {
                        $('#batch_pop').empty();
                        $('#batch_pop').append('<option value="all">All POP (SMS Enabled)</option>');
                        result.pops.forEach(function (element) {
                            if (element.sms_send === 'yes') {
                                $('#batch_pop').append('<option value="' + element.id + '">' + element.popname + '</option>');
                            }
                        });

                        $('#batch_area').empty();
                        $('#batch_area').append('<option value="all" selected>ALL Area</option>');
                        result.areas.forEach(function (element) {
                            if (element !== '') {
                                $('#batch_area').append('<option value="' + element + '">' + element + '</option>');
                            }
                        });

                        $('#processing').remove();
                    }
                });
            });

            // Status rule: if "close" selected, force only "close"
            $('#batch_status').on('change', function () {
                var selected = $(this).val() || [];
                if (selected.includes('close') && selected.length > 1) {
                    $(this).val(['close']).trigger('change.select2');
                }
            });

            // Batch Send
            $('#btn_batch_send').on('click', function (e) {
                e.preventDefault();

                var reseller_id    = $('#batch_reseller').val();
                var pop_id         = $('#batch_pop').val();
                var billing_cycle  = $('#batch_billing_cycle').val();
                var status         = $('#batch_status').val();
                var message        = $('#batch_message').val();
                var areas          = $('#batch_area').val();

                if (!reseller_id) {
                    toastr.error('Please select a reseller', 'Error');
                    return;
                }
                if (!pop_id) {
                    toastr.error('Please select a POP', 'Error');
                    return;
                }
                if (!status || status.length === 0) {
                    toastr.error('Please select at least one status', 'Error');
                    return;
                }
                if (!message) {
                    toastr.error('Message is required', 'Error');
                    return;
                }

                $('body').append('<div id="processing">processing.....</div>');

                $.ajax({
                    type: 'post',
                    url: '{{ route('sendResellerSms') }}',
                    data: {
                        reseller_id:   reseller_id,
                        pop_id:        pop_id,
                        billing_cycle: billing_cycle,
                        status:        status,
                        message:       message,
                        areas:         areas,
                    },
                    beforeSend: function () {
                        if (confirm('Are you sure?')) {
                            return true;
                        } else {
                            $('#processing').remove();
                            return false;
                        }
                    },
                    success: function (result) {
                        $('#processing').remove();
                        if (result.error) {
                            toastr.error(result.error, 'Error');
                        }
                        if (result.success) {
                            toastr.success(result.success, 'Success');
                            $('#batch_message').val('');
                        }
                    },
                    error: function (xhr) {
                        $('#processing').remove();
                        toastr.error('Server error (' + xhr.status + '): ' + xhr.responseText.substring(0, 200), 'Error');
                    }
                });
            });

            // Single Send
            $('#btn_single_send').on('click', function (e) {
                e.preventDefault();

                var singel_number      = $('#single_number').val().trim();
                var message            = $('#single_message').val();
                var fallback_reseller  = $('#single_reseller_wrap').is(':visible') ? $('#single_reseller').val() : '';

                if (!singel_number || singel_number.length !== 11) {
                    toastr.error('Single number must be 11 digits', 'Error');
                    return;
                }
                if ($('#single_reseller_wrap').is(':visible') && !fallback_reseller) {
                    toastr.error('Please select a reseller', 'Error');
                    return;
                }
                if (!message) {
                    toastr.error('Message is required', 'Error');
                    return;
                }

                $('body').append('<div id="processing">processing.....</div>');

                $.ajax({
                    type: 'post',
                    url: '{{ route('sendResellerSms') }}',
                    data: {
                        singel_number:     singel_number,
                        message:           message,
                        fallback_reseller: fallback_reseller,
                    },
                    beforeSend: function () {
                        if (confirm('Are you sure?')) {
                            return true;
                        } else {
                            $('#processing').remove();
                            return false;
                        }
                    },
                    success: function (result) {
                        $('#processing').remove();
                        if (result.error) {
                            toastr.error(result.error, 'Error');
                        }
                        if (result.success) {
                            toastr.success(result.success, 'Success');
                            $('#single_number').val('');
                            $('#single_message').val('');
                        }
                    }
                });
            });

        });
    </script>
@endsection