@extends('layout.master')

@section('main_content')
    <div class="container-fluid">
        <div class="page-title">
            <div class="row">
                <div class="col-sm-6">
                    <h3>Modal</h3>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('dashboard') }}"> <i data-feather="home"></i></a></li>
                        <li class="breadcrumb-item">Ui Kits</li>
                        <li class="breadcrumb-item active">Modal</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <!-- Container-fluid starts-->
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-header pb-0">
                        <h4>Static Example</h4>
                    </div>
                    <div class="card-body">
                        <div class="modal-dialog modal-lg mt-0 mb-0" id="example" tabindex="-1" role="dialog"
                            aria-labelledby="exampleModalLabel" aria-hidden="true">
                            <div class="modal-dialog mt-0 mb-0" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title">New message</h5>
                                        <button class="btn-close" type="button" data-bs-dismiss="modal"
                                            aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">
                                        <p class="mb-0">Lorem Ipsum is simply dummy text of the printing and typesetting
                                            industry. Lorem Ipsum has been the industry's standard dummy text ever since the
                                            1500s, when an unknown printer took a galley of type and scrambled it to make a
                                            type specimen book. It has survived not only five centuries, but also the leap
                                            into electronic typesetting, remaining essentially unchanged. It was popularised
                                            in the 1960s with the release of Letraset sheets containing Lorem Ipsum
                                            passages, and more recently with desktop publishing software like Aldus
                                            PageMaker including versions of Lorem Ipsum.</p>
                                    </div>
                                    <div class="modal-footer">
                                        <button class="btn btn-secondary" type="button"
                                            data-bs-dismiss="modal">Close</button>
                                        <button class="btn btn-primary" type="button">Send message</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-header pb-0">
                        <h4>Basic Modal</h4>
                    </div>
                    <div class="card-body">
                        <div class="btn-showcase">
                            <!-- Simple demo-->
                            <button class="btn btn-primary" type="button" data-bs-toggle="modal" data-original-title="test"
                                data-bs-target="#exampleModal">Simple</button>
                            <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
                                aria-labelledby="exampleModalLabel" aria-hidden="true">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                                            <button class="btn-close" type="button" data-bs-dismiss="modal"
                                                aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">...</div>
                                        <div class="modal-footer">
                                            <button class="btn btn-primary" type="button"
                                                data-bs-dismiss="modal">Close</button>
                                            <button class="btn btn-secondary" type="button">Save changes</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- Scrolling long content-->
                            <button class="btn btn-primary" type="button" data-bs-toggle="modal"
                                data-bs-target="#exampleModalLong">Scrolling long content</button>
                            <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog"
                                aria-labelledby="exampleModalLongTitle" aria-hidden="true">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
                                            <button class="btn-close" type="button" data-bs-dismiss="modal"
                                                aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
                                                facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
                                                vestibulum at eros.</p>
                                            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
                                                sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                                            <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna,
                                                vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper
                                                nulla non metus auctor fringilla.</p>
                                            <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
                                                facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
                                                vestibulum at eros.</p>
                                            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
                                                sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                                            <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna,
                                                vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper
                                                nulla non metus auctor fringilla.</p>
                                            <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
                                                facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
                                                vestibulum at eros.</p>
                                            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
                                                sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                                            <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna,
                                                vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper
                                                nulla non metus auctor fringilla.</p>
                                            <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
                                                facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
                                                vestibulum at eros.</p>
                                            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
                                                sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                                            <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna,
                                                vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper
                                                nulla non metus auctor fringilla.</p>
                                            <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
                                                facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
                                                vestibulum at eros.</p>
                                            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
                                                sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                                            <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna,
                                                vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper
                                                nulla non metus auctor fringilla.</p>
                                            <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
                                                facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
                                                vestibulum at eros.</p>
                                            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
                                                sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                                            <p class="mb-0">Aenean lacinia bibendum nulla sed consectetur. Praesent
                                                commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio
                                                dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                                        </div>
                                        <div class="modal-footer">
                                            <button class="btn btn-secondary" type="button"
                                                data-bs-dismiss="modal">Close</button>
                                            <button class="btn btn-primary" type="button">Save changes</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- Vertically centered modal-->
                            <button class="btn btn-primary" type="button" data-bs-toggle="modal"
                                data-bs-target="#exampleModalCenter">Vertically centered</button>
                            <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog"
                                aria-labelledby="exampleModalCenter" aria-hidden="true">
                                <div class="modal-dialog modal-dialog-centered" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title">Modal title</h5>
                                            <button class="btn-close" type="button" data-bs-dismiss="modal"
                                                aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <p class="mb-0">Cras mattis consectetur purus sit amet fermentum. Cras justo
                                                odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac
                                                consectetur ac, vestibulum at eros.</p>
                                        </div>
                                        <div class="modal-footer">
                                            <button class="btn btn-secondary" type="button"
                                                data-bs-dismiss="modal">Close</button>
                                            <button class="btn btn-primary" type="button">Save changes</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- Tooltips and popovers modal-->
                            <button class="btn btn-primary" type="button" data-bs-toggle="modal"
                                data-bs-target="#tooltipmodal">Tooltips and popovers</button>
                            <div class="modal fade" id="tooltipmodal" tabindex="-1" role="dialog"
                                aria-labelledby="tooltipmodal" aria-hidden="true">
                                <div class="modal-dialog modal-dialog-centered" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title">Modal title</h5>
                                            <button class="btn-close" type="button" data-bs-dismiss="modal"
                                                aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <h5>Popover in a modal</h5>
                                            <p class="mb-0">This <a class="btn btn-primary popover-test" href="#"
                                                    role="button" title=""
                                                    data-content="Popover body content is set in this attribute."
                                                    data-container="#exampleModalPopovers"
                                                    data-original-title="Popover title">button</a> triggers a popover on
                                                click.</p>
                                            <hr>
                                            <h5>Tooltips in a modal</h5>
                                            <p class="mb-0"><a class="tooltip-test" href="#" title=""
                                                    data-container="#exampleModalPopovers"
                                                    data-original-title="Tooltip">This link</a> and <a
                                                    class="tooltip-test" href="#" title=""
                                                    data-container="#exampleModalPopovers"
                                                    data-original-title="Tooltip">that link</a> have tooltips on hover.</p>
                                        </div>
                                        <div class="modal-footer">
                                            <button class="btn btn-secondary" type="button"
                                                data-bs-dismiss="modal">Close</button>
                                            <button class="btn btn-primary" type="button">Save changes</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- Using the grid modal-->
                            <button class="btn btn-primary" type="button" data-bs-toggle="modal"
                                data-bs-target="#grid-modal">Using the grid</button>
                            <div class="modal fade" id="grid-modal" tabindex="-1" role="dialog"
                                aria-labelledby="grid-modal" aria-hidden="true">
                                <div class="modal-dialog modal-dialog-centered" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title">Modal title</h5>
                                            <button class="btn-close" type="button" data-bs-dismiss="modal"
                                                aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body grid-showcase">
                                            <div class="container-fluid bd-example-row">
                                                <div class="row">
                                                    <div class="col-md-4"><span>.col-md-4</span></div>
                                                    <div class="col-md-4 ms-auto"><span>.col-md-4 .ms-auto</span></div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-3 ms-auto"><span>.col-md-3 .ms-auto</span></div>
                                                    <div class="col-md-2 ms-auto"><span>.col-md-2 .ms-auto</span></div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-6 ms-auto"><span>.col-md-6 .ms-auto</span></div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-sm-9"><span>Level 1: .col-sm-9</span>
                                                        <div class="row">
                                                            <div class="col-8 col-sm-6"><span>Level 2: .col-8
                                                                    .col-sm-6</span></div>
                                                            <div class="col-4 col-sm-6"><span>Level 2: .col-4
                                                                    .col-sm-6</span></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                            <button class="btn btn-secondary" type="button"
                                                data-bs-dismiss="modal">Close</button>
                                            <button class="btn btn-primary" type="button">Save changes</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-header pb-0">
                        <h4>Varying modal content</h4>
                    </div>
                    <div class="card-body">
                        <div class="btn-showcase">
                            <button class="btn btn-primary" type="button" data-bs-toggle="modal"
                                data-bs-target="#exampleModalfat" data-whatever="@mdo">Open modal for @mdo</button>
                            <button class="btn btn-primary" type="button" data-bs-toggle="modal"
                                data-bs-target="#exampleModalmdo" data-whatever="@fat">Open modal for @fat</button>
                            <button class="btn btn-primary" type="button" data-bs-toggle="modal"
                                data-bs-target="#exampleModalgetbootstrap" data-whatever="@getbootstrap">Open modal for
                                @getbootstrap</button>
                            <div class="modal fade" id="exampleModalfat" tabindex="-1" role="dialog"
                                aria-labelledby="exampleModalLabel" aria-hidden="true">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="exampleModalLabel2">New message</h5>
                                            <button class="btn-close" type="button" data-bs-dismiss="modal"
                                                aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <form>
                                                <div class="mb-3">
                                                    <label class="col-form-label" for="recipient-name">Recipient:</label>
                                                    <input class="form-control" type="text" value="@fat">
                                                </div>
                                                <div class="mb-3">
                                                    <label class="col-form-label" for="message-text">Message:</label>
                                                    <textarea class="form-control" id="message-text"></textarea>
                                                </div>
                                            </form>
                                        </div>
                                        <div class="modal-footer">
                                            <button class="btn btn-secondary" type="button"
                                                data-bs-dismiss="modal">Close</button>
                                            <button class="btn btn-primary" type="button">Send message</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="modal fade" id="exampleModalmdo" tabindex="-1" role="dialog"
                                aria-labelledby="exampleModalLabel" aria-hidden="true">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title">New message</h5>
                                            <button class="btn-close" type="button" data-bs-dismiss="modal"
                                                aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <form>
                                                <div class="mb-3">
                                                    <label class="col-form-label" for="recipient-name">Recipient:</label>
                                                    <input class="form-control" id="recipient-name" type="text"
                                                        value="@Mat">
                                                </div>
                                                <div class="mb-3">
                                                    <label class="col-form-label" for="message-text">Message:</label>
                                                    <textarea class="form-control"></textarea>
                                                </div>
                                            </form>
                                        </div>
                                        <div class="modal-footer">
                                            <button class="btn btn-secondary" type="button"
                                                data-bs-dismiss="modal">Close</button>
                                            <button class="btn btn-primary" type="button">Send message</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="modal fade" id="exampleModalgetbootstrap" tabindex="-1" role="dialog"
                                aria-labelledby="exampleModalLabel" aria-hidden="true">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title">New message</h5>
                                            <button class="btn-close" type="button" data-bs-dismiss="modal"
                                                aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <form>
                                                <div class="mb-3">
                                                    <label class="col-form-label" for="recipient-name">Recipient:</label>
                                                    <input class="form-control" type="text" value="@getbootstrap">
                                                </div>
                                                <div class="mb-3">
                                                    <label class="col-form-label" for="message-text">Message:</label>
                                                    <textarea class="form-control"></textarea>
                                                </div>
                                            </form>
                                        </div>
                                        <div class="modal-footer">
                                            <button class="btn btn-secondary" type="button"
                                                data-bs-dismiss="modal">Close</button>
                                            <button class="btn btn-primary" type="button">Send message</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-header pb-0">
                        <h4>Sizes modal</h4>
                    </div>
                    <div class="card-body">
                        <div class="btn-showcase">
                            <!-- Large modal-->
                            <button class="btn btn-primary" type="button" data-bs-toggle="modal"
                                data-bs-target=".bd-example-modal-lg">Large modal</button>
                            <div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog"
                                aria-labelledby="myLargeModalLabel" aria-hidden="true">
                                <div class="modal-dialog modal-lg">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h4 class="modal-title" id="myLargeModalLabel">Large modal</h4>
                                            <button class="btn-close" type="button" data-bs-dismiss="modal"
                                                aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">...</div>
                                    </div>
                                </div>
                            </div>
                            <!-- Small modal-->
                            <button class="btn btn-primary" type="button" data-bs-toggle="modal"
                                data-bs-target=".bd-example-modal-sm">Small modal</button>
                            <div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog"
                                aria-labelledby="mySmallModalLabel" aria-hidden="true">
                                <div class="modal-dialog modal-sm">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h4 class="modal-title" id="mySmallModalLabel">Small modal</h4>
                                            <button class="btn-close" type="button" data-bs-dismiss="modal"
                                                aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">...</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="{{ asset('assets/js/tooltip-init.js') }}"></script>
@endsection