@extends('layouts.app')
@section('title', 'SMS')

@section('content')
<section class="content-header">
    <h1 class="tw-text-xl md:tw-text-3xl tw-font-bold tw-text-black">SMS</h1>
</section>

@if (session('success'))
    <div class="tw-mb-4 tw-bg-green-100 tw-border tw-border-green-400 tw-text-green-700 tw-px-4 tw-py-3 tw-rounded">
        {{ session('success') }}
    </div>
@endif

@if (session('error'))
    <div class="tw-mb-4 tw-bg-red-100 tw-border tw-border-red-400 tw-text-red-700 tw-px-4 tw-py-3 tw-rounded">
        {{ session('error') }}
    </div>
@endif

@if(session('logs'))
    <ul class="alert alert-info">
        @foreach(session('logs') as $log)
            <li>{{ $log }}</li>
        @endforeach
    </ul>
@endif


<section class="content mt-4">
    <form action="{{ route('sms.send') }}" method="POST">
        @csrf

        <!-- Recipient Type -->
        <div class="tw-mb-4">
            <label for="recipient_type" class="tw-block tw-mb-2 tw-font-semibold">Send To:</label>
            <select id="recipient_type" name="recipient_type" class="tw-w-full tw-border tw-rounded tw-p-2" onchange="handleRecipientTypeChange(this.value)">
                <option value="all">All</option>
                <option value="individual">Individual</option>
                <option value="custom">Custom</option>
            </select>
        </div>

        <!-- Individual Contact Dropdown -->
        {{-- <div class="tw-mb-4" id="individual_contact_container" style="display: none;">
            <label for="contact_id" class="tw-block tw-mb-2 tw-font-semibold">Select Contact:</label>
            <select id="contact_id" name="contact_id" class="tw-w-full tw-border tw-rounded tw-p-2">
                <option value="">-- Select Contact --</option>
                @foreach ($contacts as $contact)
                    <option value="{{ $contact->contact_id }}">({{ $contact->contact_id }}) {{ $contact->name }} </option>
                @endforeach
            </select>
        </div> --}}

        <div id="individual_contact_container" class="tw-mb-4" style="display: none;">
            <label for="member_id" class="tw-block tw-font-semibold tw-mb-1">Member</label>
            <select name="member_id" id="member_id" class="tw-w-full tw-border tw-rounded tw-p-2">
                <option value="">-- All Members --</option>
                @foreach($contacts as $contact)
                    <option value="{{ $contact->contact_id }}">
                        {{ $contact->contact_id }} - {{ $contact->name }}
                    </option>
                @endforeach
            </select>
        </div>

        <!-- Custom Numbers -->
        <div class="tw-mb-4" id="custom_numbers_container" style="display: none;">
            <label for="custom_numbers" class="tw-block tw-mb-2 tw-font-semibold">Enter Phone Numbers (comma separated):</label>
            <input type="text" id="custom_numbers" name="custom_numbers" class="tw-w-full tw-border tw-rounded tw-p-2" placeholder="e.g. 1234567890,0987654321">
        </div>

        <!-- Message Type -->
        <div class="tw-mb-4">
            <label for="message_type" class="tw-block tw-mb-2 tw-font-semibold">Message Type:</label>
            <select id="message_type" name="message_type" class="tw-w-full tw-border tw-rounded tw-p-2">
                <option value="promotional">Promotional</option>
                <option value="custom">Custom</option>
                <option value="alert">Alert</option>
            </select>
        </div>

        <!-- Message -->
        <div class="tw-mb-4">
            <label for="message" class="tw-block tw-mb-2 tw-font-semibold">Message:</label>
            <textarea id="message" name="message" rows="4" class="tw-w-full tw-border tw-rounded tw-p-2" placeholder="Write your message..."></textarea>
        </div>

        <button type="submit" class="tw-bg-blue-600 tw-text-white tw-px-4 tw-py-2 tw-rounded hover:tw-bg-blue-700">Send SMS</button>
    </form>
</section>

<script>
    function handleRecipientTypeChange(value) {
        document.getElementById('individual_contact_container').style.display = (value === 'individual') ? 'block' : 'none';
        document.getElementById('custom_numbers_container').style.display = (value === 'custom') ? 'block' : 'none';
    }
</script>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
    $(document).ready(function () {
        $('#member_id').select2({
            placeholder: '-- Select Member --',
            allowClear: true,
            width: '100%'
        });
    });
</script>

<script>
    setTimeout(() => {
        document.querySelectorAll('.tw-mb-4').forEach(el => el.remove());
    }, 5000); // 5 seconds
</script>

@endpush