@extends('admin.layouts.master')

@section('contents')
<div class="content-wrapper">
    <div class="content-header row">
        <div class="content-header-left col-md-9 col-12 mb-2">
            <div class="row breadcrumbs-top">
                <div class="col-12">
                    <h2 class="content-header-title float-left mb-0">إرسال رسالة لمستخدم</h2>
                    <div class="breadcrumb-wrapper col-12">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ route('admin.home') }}">{{ __('Home') }}</a></li>
                            <li class="breadcrumb-item"><a href="{{ route('user-messages.index') }}">رسائل المستخدمين</a></li>
                            <li class="breadcrumb-item active">إرسال جديد</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="content-body">
        <div class="card">
            <div class="card-content">
                <div class="card-body">
                    <form method="POST" action="{{ route('user-messages.store') }}" id="user-message-form">
                        @csrf

                        <ul class="nav nav-tabs mb-2" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link {{ $defaultMode === 'single' ? 'active' : '' }}" id="tab-single" data-toggle="tab" href="#pane-single" role="tab">مستخدم واحد</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link {{ $defaultMode === 'bulk' ? 'active' : '' }}" id="tab-bulk" data-toggle="tab" href="#pane-bulk" role="tab">عدة مستخدمين</a>
                            </li>
                        </ul>

                        <input type="hidden" name="send_mode" id="send_mode" value="{{ old('send_mode', $defaultMode) }}">

                        <div class="tab-content">
                            <div class="tab-pane fade {{ $defaultMode === 'single' ? 'show active' : '' }}" id="pane-single" role="tabpanel">
                                <div class="form-group">
                                    <label>المستخدم <span class="text-danger">*</span></label>
                                    <select name="user_id" id="user_id_single" class="form-control select2-user-single" style="width:100%"
                                        @if($prefillLocked) disabled @endif>
                                        <option value="">{{ __('Choose') }}</option>
                                        @if($selectedUser)
                                            <option value="{{ $selectedUser->id }}" selected>{{ $selectedUser->name }} ({{ $selectedUser->email }})</option>
                                        @endif
                                    </select>
                                    @if($prefillLocked && $selectedUser)
                                        <input type="hidden" name="user_id" value="{{ $selectedUser->id }}">
                                    @endif
                                    @error('user_id')
                                    <div class="text-danger mt-1">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="tab-pane fade {{ $defaultMode === 'bulk' ? 'show active' : '' }}" id="pane-bulk" role="tabpanel">
                                <div class="form-group">
                                    <label>المستخدمون <span class="text-danger">*</span> <small class="text-muted">(حد أقصى {{ \App\Services\AdminUserMessageService::BULK_MAX_USERS }})</small></label>
                                    <select name="user_ids[]" id="user_ids_bulk" class="form-control select2-user-bulk" multiple style="width:100%"></select>
                                    <small id="bulk-count-hint" class="text-muted d-none mt-1"></small>
                                    @error('user_ids')
                                    <div class="text-danger mt-1">{{ $message }}</div>
                                    @enderror
                                    @error('user_ids.*')
                                    <div class="text-danger mt-1">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <hr>

                        <div class="form-group">
                            <label>عنوان الرسالة <span class="text-danger">*</span></label>
                            <input type="text" name="title" class="form-control @error('title') is-invalid @enderror"
                                   maxlength="255" required placeholder="عنوان الرسالة"
                                   value="{{ old('title') }}">
                            @error('title')
                            <div class="text-danger mt-1">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label>نص الرسالة <span class="text-danger">*</span></label>
                            <textarea name="body" class="form-control @error('body') is-invalid @enderror"
                                      rows="3" maxlength="500" required placeholder="نص الرسالة">{{ old('body') }}</textarea>
                            @error('body')
                            <div class="text-danger mt-1">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label>نوع الإرسال <span class="text-danger">*</span></label>
                            <div>
                                <div class="custom-control custom-radio custom-control-inline">
                                    <input type="radio" id="channel_notification" name="channel" value="notification"
                                           class="custom-control-input" {{ old('channel', 'both') === 'notification' ? 'checked' : '' }} required>
                                    <label class="custom-control-label" for="channel_notification">إشعار فقط</label>
                                </div>
                                <div class="custom-control custom-radio custom-control-inline">
                                    <input type="radio" id="channel_email" name="channel" value="email"
                                           class="custom-control-input" {{ old('channel') === 'email' ? 'checked' : '' }}>
                                    <label class="custom-control-label" for="channel_email">بريد فقط</label>
                                </div>
                                <div class="custom-control custom-radio custom-control-inline">
                                    <input type="radio" id="channel_both" name="channel" value="both"
                                           class="custom-control-input" {{ old('channel', 'both') === 'both' ? 'checked' : '' }}>
                                    <label class="custom-control-label" for="channel_both">الاثنين معاً</label>
                                </div>
                            </div>
                            @error('channel')
                            <div class="text-danger mt-1">{{ $message }}</div>
                            @enderror
                        </div>

                        <button type="submit" class="btn btn-primary waves-effect waves-light" id="btn-submit">إرسال</button>
                        <a href="{{ route('user-messages.index') }}" class="btn btn-outline-warning waves-effect">إلغاء</a>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
$(document).ready(function () {
    var searchUrl = '{{ route("user-messages.searchUsers") }}';
    var prefillLocked = @json($prefillLocked);

    var select2Opts = {
        placeholder: '{{ __("Search for a user...") }}',
        allowClear: !prefillLocked,
        minimumInputLength: 0,
        ajax: {
            url: searchUrl,
            dataType: 'json',
            delay: 300,
            data: function (params) { return { q: params.term || '' }; },
            processResults: function (data) { return { results: data.results }; },
            cache: true
        }
    };

    if (!prefillLocked) {
        $('.select2-user-single').select2(select2Opts);
    }

    $('.select2-user-bulk').select2($.extend({}, select2Opts, { multiple: true }));

    function updateSendMode(mode) {
        $('#send_mode').val(mode);
        if (mode === 'bulk') {
            $('#user_id_single').prop('disabled', true);
        } else {
            $('#user_id_single').prop('disabled', prefillLocked);
            $('#user_ids_bulk').prop('disabled', true);
        }
        if (mode === 'single') {
            $('#user_ids_bulk').prop('disabled', true);
            if (!prefillLocked) {
                $('#user_id_single').prop('disabled', false);
            }
        } else {
            $('#user_ids_bulk').prop('disabled', false);
        }
    }

    $('#tab-single').on('shown.bs.tab', function () { updateSendMode('single'); });
    $('#tab-bulk').on('shown.bs.tab', function () { updateSendMode('bulk'); });

    updateSendMode($('#send_mode').val());

    $('#user_ids_bulk').on('change', function () {
        var n = ($(this).val() || []).length;
        var $hint = $('#bulk-count-hint');
        if (n > 0) {
            $hint.removeClass('d-none').text('سيتم الإرسال لـ ' + n + ' مستخدم');
        } else {
            $hint.addClass('d-none').text('');
        }
    });

    $('#user-message-form').on('submit', function () {
        var mode = $('#send_mode').val();
        if (mode === 'bulk') {
            $('#user_id_single').prop('disabled', true);
            $('#user_ids_bulk').prop('disabled', false);
        } else {
            $('#user_ids_bulk').prop('disabled', true);
            if (!prefillLocked) {
                $('#user_id_single').prop('disabled', false);
            }
        }
    });
});
</script>
@endsection