@extends(backpack_view('blank'))

@section('content')

@if ($errors->any())
    <div class="alert alert-danger">
        <ul class="mb-0">
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

<div class="row d-none">
    <div class="col-md-12 bold-labels">
        <form method="POST" action="{{ url(config('backpack.base.route_prefix').'/dashboard-settings') }}">
            @csrf
            @method('POST')
            <div class="card">
                <div class="card-body row">
                    <div class="form-group">
                        <label for="api_url">Actions after scanning prescription</label>
                        <div class="form-check">
                            <input type="checkbox" class="form-check-input"   id="scan_action_0" name="scan_actions[]" value="0" {{ in_array('0', $scan_action ?? []) ? 'checked' : '' }}>
                            <label class="form-check-label" for="scan_action_0">
                                Mark as ready for collection (and send SMS if appliccable)
                            </label>
                        </div>
                        <div class="form-check">
                            <input type="checkbox" class="form-check-input"  id="scan_action_1"  name="scan_actions[]" value="1"  {{ in_array('1', $scan_action ?? []) ? 'checked' : '' }}>
                            <label class="form-check-label" for="scan_action_1">
                                Update prescription status to "Ready for Collection"
                            </label>
                        </div>
                        <div class="form-check">
                            <input type="checkbox" class="form-check-input"  id="scan_action_2" name="scan_actions[]" value="2"  {{ in_array('2', $scan_action ?? []) ? 'checked' : '' }}>
                            <label class="form-check-label" for="scan_action_2">
                                Close the order line
                            </label>
                        </div>

                    </div>
                    <button type="submit" class="btn btn-primary w-auto">Save Settings</button>
                </div>
            </div>
        </form>
    </div>
</div>


<div class="row pt-4 d-none">
    <div class="col-md-12 bold-labels">
        <form method="POST" action="{{ url(config('backpack.base.route_prefix').'/dashboard-settings-update-readmedicine') }}">
            @csrf
            @method('POST')
            <div class="card">
                <div class="card-body row">
                    <div class="form-group">
                        <label >Read Medicines Setting</label>
                        <div class="form-check">
                            <input type="radio" class="form-check-input" id="read-medicine-setting-always-read" name="read_medicine_setting" value="Always Read" {{  $read_medicine_setting == "Always Read" ? 'checked' : '' }}>
                            <label class="form-check-label" for="read-medicine-setting-always-read">
                                Always Read
                            </label>
                        </div>
                        <div class="form-check">
                            <input type="radio" class="form-check-input" id="read-medicine-setting-only-read-after-pin" name="read_medicine_setting" value="Only Read After Pin" {{  $read_medicine_setting == "Only Read After Pin" ? 'checked' : '' }}>
                            <label class="form-check-label" for="read-medicine-setting-only-read-after-pin">
                                Only Read After Pin
                            </label>
                        </div>
                        <div class="form-check">
                            <input type="radio" class="form-check-input" id="read-medicine-setting-never-read" name="read_medicine_setting" value="Never Read" {{  $read_medicine_setting == "Never Read" ? 'checked' : '' }}>
                            <label class="form-check-label" for="read-medicine-setting-never-read">
                                Never Read
                            </label>
                        </div>

                    </div>
                    <button type="submit" class="btn btn-primary w-auto">Save Settings</button>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="row pt-4">
    <div class="col-md-12 bold-labels">

        <form method="POST" action="{{ url(config('backpack.base.route_prefix').'/dashboard-settings-update-custom-sms') }}">
            @csrf

            <div class="card">
                <div class="card-body">

                    <label class="mb-3">Custom SMS Messages</label>

                    <div id="sms-wrapper">

                        @foreach($smsMessages ?? [] as $i => $sms)
                            <div class="sms-row mb-3 border p-3 rounded">
                                <strong class="sms-title">Message {{ str_pad($i+1, 2, '0', STR_PAD_LEFT) }}</strong>

                                <textarea name="messages[{{ $i }}][message]"
                                          class="form-control sms-text"
                                          maxlength="{{ config('services.2talk.max_sms_length') }}"
                                          placeholder="SMS Message">{{ $sms->sms_message ?? '' }}</textarea>
                                <small class="text-muted sms-counter">0 / {{ config('services.2talk.max_sms_length') }}</small>

                                <button type="button" class="btn btn-danger btn-sm mt-2 remove-row">Remove</button>
                            </div>
                        @endforeach

                    </div>

                    <button type="button" class="btn btn-primary mt-3" id="add-row">
                        + Add SMS Message
                    </button>

                    <hr>

                    <button type="submit" class="btn btn-success">
                        Save Changes
                    </button>

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

    </div>
</div>

@endsection

@push('after_scripts')

<script>
let index = {{ count($smsMessages ?? []) }};

function renumberMessages() {
    document.querySelectorAll('.sms-row').forEach((row, i) => {
        let title = row.querySelector('.sms-title');
        if (title) {
            let num = String(i + 1).padStart(2, '0');
            title.textContent = 'Message ' + num;
        }
    });
}

document.getElementById('add-row').addEventListener('click', function () {
    const wrapper = document.getElementById('sms-wrapper');

    const row = document.createElement('div');
    row.classList.add('sms-row', 'border', 'p-3', 'mb-3', 'rounded');

    row.innerHTML = `
        <strong class="sms-title"></strong>


        <textarea maxlength="{{ config('services.2talk.max_sms_length') }}" name="messages[${index}][message]" class="form-control sms-text" placeholder="SMS Message">\n\nPlease do not reply to this message.</textarea>
        <small class="text-muted sms-counter">0 / {{ config('services.2talk.max_sms_length') }}</small>
        <button type="button" class="btn btn-danger btn-sm mt-2 remove-row">
            Remove
        </button>
    `;

    wrapper.appendChild(row);
    index++;

    renumberMessages();
});

document.addEventListener('click', function (e) {
    if (e.target.classList.contains('remove-row')) {
        e.target.closest('.sms-row').remove();
        renumberMessages();
    }
});

// initial numbering on page load
renumberMessages();

document.addEventListener('input', function (e) {
    if (!e.target.classList.contains('sms-text')) return;
    updateCounter(e.target);
});

function updateCounter(textarea) {

    console.log("update Counter");
    let counter = textarea.parentElement.querySelector('.sms-counter');
    if (!counter) return;

    let length = textarea.value.length;
    counter.textContent = `${length} / {{ config('services.2talk.max_sms_length') }}`;

    if (length > {{ config('services.2talk.max_sms_length') }}) {
        textarea.value = textarea.value.substring(0, {{ config('services.2talk.max_sms_length') }});
        counter.textContent = `{{ config('services.2talk.max_sms_length') }} / {{ config('services.2talk.max_sms_length') }}`;
    }
}

// initial bind
function bindCounters() {
    console.log("bind Counter");
    document.querySelectorAll('.sms-text').forEach(textarea => {
        updateCounter(textarea);

        // textarea.removeEventListener('input', textarea._counterHandler);

        // textarea._counterHandler = function () {
        //     console.log("_counterHandler");
        //     updateCounter(this);
        // };

        // textarea.addEventListener('input', textarea._counterHandler);
    });
}

// call on load
bindCounters();
</script>
@endpush