@extends('backend.layout.main')
@section('content')
    <x-success-message key="message" />
    <x-error-message key="not_permitted" />
    @if ($errors->any())
        <div class="alert alert-danger alert-dismissible text-center">
            <button type="button" class="close" data-dismiss="alert"
                aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <ul class="mb-0">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <section>
        <div class="container-fluid">
            <div class="card">
                <div class="card-header d-flex align-items-center justify-content-between">
                    <h4>{{ __('db.send_whatsapp_message') }}</h4>
                </div>
                <div class="card-body">
                    {{-- Form Start --}}
                    <form method="POST" action="{{ route('whatsapp.send') }}" enctype="multipart/form-data">
                        @csrf
                        <div class="row">
                            {{-- Receiver --}}
                            <div class="col-md-6 form-group">
                                <label>{{ __('db.receiver') }}</label>
                                <select name="receiver_phone[]" class="form-control selectpicker" data-live-search="true"
                                    multiple required>
                                    @foreach ($receivers as $group => $items)
                                        <optgroup label="{{ $group }}">
                                            <!-- "Select All" option for functionality, not submitted -->
                                            <option class="select-all text-success" data-group="{{ $group }}"
                                                value="">{{ __('db.Select All') }}</option>

                                            @foreach ($items as $receiver)
                                                <option value="{{ preg_replace('/\D/', '', $receiver->phone) }}"
                                                    @if($selectedPhone && $selectedGroup)
                                                        {{ $selectedGroup == $group && $selectedPhone == preg_replace('/\D/', '', $receiver->phone) ? 'selected' : '' }}
                                                    @else
                                                        {{ $group == array_key_first($receivers) && $loop->first ? 'selected' : '' }}
                                                    @endif
                                                    >
                                                    {{ $receiver->name }} ({{ $receiver->phone }})
                                                </option>
                                            @endforeach
                                        </optgroup>
                                    @endforeach
                                </select>
                            </div>

                            {{-- Template --}}
                            <div class="col-md-6 form-group">
                                <label>{{ __('db.template') }}</label>
                                <select name="template_info" class="form-control selectpicker" data-live-search="true">
                                    <option value="">{{ __('db.no_template_type_message') }}</option>
                                    @foreach ($templates as $tpl)
                                        <option value="{{ $tpl['name'] }}|{{ $tpl['language'] }}">{{ $tpl['name'] }}
                                            ({{ $tpl['language'] }})</option>
                                    @endforeach
                                </select>
                            </div>

                            {{-- Message --}}
                            <div class="col-md-12 form-group">
                                <label>{{ __('db.message') }}</label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <button type="button" class="btn btn-outline-secondary emoji-btn"
                                            data-emoji-picker="true">😊</button>
                                    </div>
                                    <textarea id="messageInput" name="message" class="form-control" rows="3"
                                        placeholder="{{ __('db.type_your_message') }}"></textarea>
                                </div>
                            </div>

                            <!-- Attachment -->
                            <div class="col-md-12 form-group">
                                <label>{{ __('db.attachment') }}</label><br>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-outline-primary mr-2" id="attachImageBtn">
                                        {{ __('db.image') }}
                                    </button>
                                    <button type="button" class="btn btn-outline-primary" id="attachDocBtn">
                                        {{ __('db.document') }}
                                    </button>
                                </div>
                                <input type="file" name="attachment" id="attachmentInput" class="d-none">
                                <input type="hidden" name="attachment_type" id="attachmentType" value="">
                                <span id="fileName" class="ms-2 text-muted"></span>
                            </div>
                            {{-- Submit Button --}}
                            <div class="col-md-12 mt-3">
                                <input type="hidden" name="_from_form" value="1">
                                <button type="submit" class="btn btn-primary">
                                    {{ __('db.send') }}
                                </button>
                            </div>
                        </div>
                    </form>
                    {{-- Form End --}}
                </div>
            </div>
        </div>
    </section>
@endsection


@push('scripts')
    @if (!config('database.connections.saleprosaas_landlord'))
        <script type="text/javascript" src="