@extends('layouts.app')

@section('title', 'Send WhatsApp Message')

@section('content')
<div class="bg-light p-3 p-md-4 rounded-3 mb-4 mt-5">
    <div class="row">
        <div class="col-12">
            <h4 class="mb-4 fw-bold"><i class="bi bi-whatsapp me-2"></i>Send WhatsApp Message</h4>
        </div>
    </div>

    @if(session('success'))
        <div class="row">
            <div class="col-12">
                <div class="alert alert-success alert-dismissible fade show">
                    <i class="bi bi-check-circle me-2"></i>{{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            </div>
        </div>
    @endif
    @if(session('error'))
        <div class="row">
            <div class="col-12">
                <div class="alert alert-danger alert-dismissible fade show">
                    <i class="bi bi-exclamation-circle me-2"></i>{{ session('error') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            </div>
        </div>
    @endif

    <div class="row">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-body p-4">
                    <form action="{{ route('messages.send') }}" method="POST" enctype="multipart/form-data">
                        @csrf

                         <div class="mb-3 type-field type-text">
                                <label for="whatsapp_number" class="form-label small fw-bold">Select Sender WhatsApp Number</label>
                                <select name="whatsapp_number" id="whatsapp_number" class="form-control" required>
                                    <option value="">Choose which number to send from</option>
                                    @foreach($whatsappNumbers as $number)
                                        <option value="{{ $number['id'] }}" {{ old('whatsapp_number') == $number['id'] ? 'selected' : '' }}>
                                            > {{ $number['whatsapp_user_id'] }} - {{ $number['status'] }}
                                        </option>
                                    @endforeach
                                </select>
                        </div>
                        
                        <!-- Recipients and Message Type -->
                        <div class="row g-3 mb-3">
                            <div class="col-12 col-md-6">
                                <label for="recipients" class="form-label small fw-bold">
                                    Recipients (comma-separated)
                                    <span class="ms-1 text-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="Enter WhatsApp numbers in international format (e.g. 2547XXXXXXXX), separated by commas. No plus sign. Example: 254712345678, 254798765432">
                                        <i class="bi bi-info-circle"></i>
                                    </span>
                                </label>
                                <input type="text" 
                                    name="recipients" 
                                    id="recipients" 
                                    class="form-control" 
                                    value="{{ old('recipients') }}"
                                    placeholder="254712345678, 254798765432" 
                                    required>
                            </div>
                            <div class="col-12 col-md-6">
                                <label for="type" class="form-label small fw-bold">Message Type</label>
                                <select name="type" id="type" class="form-select" required>
                                    <option value="text">Text</option>
                                    <option value="image">Image</option>
                                    <option value="video">Video</option>
                                    <option value="audio">Audio</option>
                                    <option value="document">Document</option>
                                </select>
                            </div>
                        </div>

                        <!-- Text Message -->
                        <div class="mb-3 type-field type-text">
                            <label for="text" class="form-label small fw-bold">Message Text</label>
                            <textarea name="text" id="text" class="form-control" rows="4"
                                      placeholder="Type your message">{{ old('text') }}</textarea>
                        </div>

                        <!-- Caption -->
                        <div class="mb-3 type-field type-image type-video d-none">
                            <label for="caption" class="form-label small fw-bold">Caption (optional)</label>
                            <input type="text" name="caption" id="caption" class="form-control"
                                   placeholder="Add a caption" value="{{ old('caption') }}">
                        </div>

                        <!-- File Upload and URL -->
                        <div class="row g-3 mb-3">
                            <div class="col-12 col-md-6 type-field type-image type-video type-audio type-document d-none">
                                <label for="file" class="form-label small fw-bold">Upload File</label>
                                <input type="file" name="file" id="file" class="form-control">
                            </div>
                            <div class="col-12 col-md-6 type-field type-image type-video type-audio type-document d-none">
                                <label for="url" class="form-label small fw-bold">File URL (optional)</label>
                                <input type="url" name="url" id="url" class="form-control"
                                       placeholder="https://example.com/file.jpg" value="{{ old('url') }}">
                            </div>
                        </div>

                        <!-- Submit -->
                        <button type="submit" class="btn btn-primary btn-sm">Send Message</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const typeSelect = document.getElementById('type');
        const fields = document.querySelectorAll('.type-field');

        function updateFields() {
            const selectedType = typeSelect.value;
            fields.forEach(field => {
                field.classList.add('d-none');
                if (field.classList.contains(`type-${selectedType}`)) {
                    field.classList.remove('d-none');
                    field.classList.add('d-block');
                }
            });
        }

        typeSelect.addEventListener('change', updateFields);
        updateFields();

        // Initialize Bootstrap tooltips
        const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl);
        });
    });
</script>
@endpush