@extends('admin.layout.pop')
@section('content')
<div class="container-fluied" style='background-color:#777777 !important;'>
    <div class="container">
        <div class="re_ps">
            <div class="positon_ab">
                <!-- Button trigger modal -->
                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
                    active 2
                </button>
            </div>
        </div>
    </div>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content" style="background-color:transparent">
            <div class="p-2 bg-white rounded">
                <div class='cross'>
                    <button type="button" class="border-0  cancel_icon" data-bs-dismiss="modal" style="background-color: ">
                        <i class="bi bi-x"></i>
                    </button>
                </div>
                <div class='p-4'>
                    <form>
                        <div class="row">
                            <div class='justify-content-center text-center'>
                                <div class="mb-3 text-center col-6 mx-auto">
                                    <select id=" Select" class="form-select rounded-pill orange cat">
                                        <option>Arbic</option>
                                        <option>English</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="mb-3">
                                    <label for="exampleInputEmail1" class="form-label label">TO</label>
                                    <input type="text" class="form-control  rounded-pill bg-light_c" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder='Customer Name'>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="mb-3">
                                    <label for="exampleInputEmail1" class="form-label label">Template</label>
                                    <select id=" Select" class="form-select rounded-pill bg-light_c cat">
                                        <option>Re-Activation</option>
                                        <option>Activation</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="mb-3 mt-2">
                            <textarea class="form-control bg-light_c rounded cat" id="editor" rows="4">Type here</textarea>
                        </div>
                        <hr>
                        <div class='d-flixs'>
                            <div class="btn-group" role="group">
                                <a class="btn btn-info col-upload border-0 rounl click" style=' background-color: transparent;'>
                                    <i class="bi bi-image-fill"></i>
                                    Photo
                                </a>
                                <input id="active_btn" type='file' multiple />
                                <button class="btn btn-info col-upload border-0 rounr" style=' background-color: transparent;'>
                                    <i class="bi bi-emoji-smile-fill"></i>
                                    Emoji
                                </button>
                            </div>
                            <button type="submit" class="btn btn-warning col-bt rounded-pill mt-4 mb-4">Send</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    ClassicEditor
        .create(document.querySelector('#editor'))
        .catch(error => {
            console.error(error);
        });
</script>
<style>
    #active_btn {
        display: none;
    }
</style>
<script>
    $('.click').click(function() {
        $('#active_btn').click();
    });
</script>

@endsection