@extends('admin.layouts.master')


@section('title')
   نوع الرد على الرسالة 
@endsection

@section('css')


@endsection


@section('content-header')
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0 text-dark">نوع الرد على الرسالة </h1>
                </div><!-- /.col -->
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item active">نوع الرد على الرسالة </li>
                    </ol>
                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.container-fluid -->
    </div>
@endsection


@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <form action="{{route('chatBootReply.store')}}" method="post">
                            @csrf

                            <input type="hidden" value="{{$boot_button_id}}" name="boot_button_id">
                            <input type="hidden" value="{{$reply_boot_button_id}}" name="reply_boot_button_id">
                            <input type="hidden" value="button" name="status">
                            <div class="row">
                                <div class="col">
                                    <label>نوع الرد</label>
                                    <select class="form-control" name="type" required onchange="handleAjaxResponse()"
                                            id="type">
                                        <option value="" disabled selected>-- اختر نوع الرد --</option>
                                        <option value="list">قائمة منسدلة</option>
                                        <option value="button">زرار تفاعلى</option>
                                        <option value="message">رد مباشر</option>
                                    </select>
                                </div>
                            </div>

                            <br>

                            <div class="row" id="list" style="display: none;">
                                <select class="form-control" name="boot_list_id">
                                    <option value="" disabled selected>-- اختر القائمة --</option>
                                    @foreach (getInformationData('BootList') as $button)
                                        <option value="{{ $button->id }}">{{ $button->name }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <br>

                            <div class="row" id="button" style="display: none;">
                                <div class="col">
                                    <label>قائمة الرد تفاعلى</label>
                                    <select class="form-control" name="boot_button_id">
                                        <option value="" disabled selected>-- اختر القائمة --</option>
                                        @foreach (getInformationData('BootButton') as $button)
                                            <option value="{{ $button->id }}">{{ $button->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <br>

                            <div class="row" id="message" style="display: none;">
                                <div class="col">
                                    <label>الرد</label>
                                    <select class="form-control" name="reply_message_id">
                                        <option value="" disabled selected>-- اختر من القائمه --</option>
                                        @foreach (getInformationData('ReplyMessage') as $reply)
                                            <option value="{{ $reply->id }}">{{ $reply->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <br>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">تراجع</button>
                                <button type="submit" class="btn btn-info">حفظ</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection


@section('js')
    <script>
        function handleAjaxResponse() {
            var selectedType = document.getElementById('type').value;

            var listDiv = document.getElementById('list');
            var buttonDiv = document.getElementById('button');
            var messageDiv = document.getElementById('message');

            // Reset display properties for all divs
            listDiv.style.display = 'none';
            buttonDiv.style.display = 'none';
            messageDiv.style.display = 'none';

            // Show the corresponding div based on the selected type
            if (selectedType === 'list') {
                listDiv.style.display = 'block';
            } else if (selectedType === 'button') {
                buttonDiv.style.display = 'block';
            } else if (selectedType === 'message') {
                messageDiv.style.display = 'block';
            }
        }
    </script>
@endsection