@extends('admin.layout.master')
@section('content')
<style>
    option {
        font-size: 12px !important;
    }
</style>
<div class="container">
    <div class="row justify-content-between p-3 rounded m-2  bg-light">
        <div class="col-12 col-md-6 align-self-center">
            <a class='text-decoration-none fw-bold  text-dark breadc' href="">
                Send Multi Email
            </a>
            <div class='fs-5 float-end'>
                <a href=""><i class="fa fa-history text-dark" aria-hidden="true"></i></a>
            </div>
        </div>
        <div class="col-12 col-md-6 align-self-center float-end ">
            <div class='align-self-center  text-center justify-content-center'>
                <div class="row">
                    <div class="col-4">
                        <div>
                            <select id=" Select" class="form-select rounded-pill" style="font-size: 14px;">
                                <option> Providers</option>
                                <option> 1</option>
                                <option>2</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-4">
                        <div>
                            <select id=" Select" class="form-select rounded-pill" style="font-size: 14px;">
                                <option>All</option>
                                <option>1</option>
                                <option>2</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-4">
                        <div>
                            <select id=" Select" class="form-select rounded-pill" style="font-size: 14px;">
                                <option>iOS</option>
                                <option>1</option>
                                <option>2</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<section>
    <div class="container">
        <div class="row p-2">
            <div class="col-md-7 ">
                <table class="table table-striped|sm|bordered|inverse   table-responsive">
                    <thead>
                        <tr>
                            <th class='text-start text-secondary'>
                                <div class="form-check ms-2">
                                    <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
                                    <label class="form-check-label" for="flexCheckDefault">
                                        Receiver
                                    </label>
                                </div>
                            </th>
                            <th class='text-end text-secondary'>Email</th>
                        </tr>
                    </thead>
                    <tbody>
                        @for($i=0; $i< 4; $i++) <tr>
                            <td>
                                <table>
                                    <tr>
                                        <td>
                                            <label class="container1">
                                                <input type="checkbox" checked="checked">
                                                <span class="checkmark"></span>
                                            </label>
                                        </td>
                                        <td>
                                            <sapn class='fw-bold text-dark'>Business Name</sapn><br>
                                            <span>Provider</span>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                            <td class='text-end align-items-md-center '>
                                <p class='align-items-md-center mt-2 fw-bold fs-6'>example@gmail.com</p>
                            </td>
                            </tr>
                            @endfor
                    </tbody>
                </table>
            </div>
            <!-- END 7 COL  -->
            <div class="col-md-5">
                <form>
                    <div class="mb-3">
                        <label for="exampleInputEmail1" class="form-label">Enter Title</label>
                        <input type="text" class="form-control  rounded-pill bg-light_c" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder='Name'>
                    </div>
                    <div class="mb-3 position-relative">
                        <label for="exampleFormControlTextarea1" class="form-label">Description</label>
                        <textarea class="form-control bg-light_c rounded cat" id="exampleFormControlTextarea1" rows="6">Type here</textarea>
                        <div class="position-absolute bottom-0 p-2">
                            <button class=" border-0 rounded-pill px-2 new_Btn" style=' background-color:rgba(150, 150, 150, 0.2); padding:5px;'>
                                <i class="bi bi-paperclip px-1 fs-6"></i>Attach
                            </button>
                            <input id="html_btn" type='file' multiple /><br>
                        </div>
                    </div>
                    <div class="container text-center">

                        <p class='fs-6 mt-2 fw-bold'>Total Receivers : 321</p>
                        <div class='d-grid'>
                            <button class="btn btn-primary col-bt rounded-pill my-4" type="button">Send</button>
                        </div>
                    </div>
                </form>
            </div>
            <!-- END 5 COL  -->
        </div>
    </div>
</section>
<style>
    #html_btn {
        display: none;
    }
</style>
<script>
    $('.new_Btn').click(function() {
        $('#html_btn').click();
    });
</script>
@endsection