@extends('layouts.master')
@section('page-css')
    <link rel="stylesheet" href="{{asset('assets/styles/vendor/toastr.css')}}">
@endsection

@section('main-content')
    <div class="breadcrumb">
        <h1>توستر</h1>
        <ul>
            <li><a href="">اجزاء</a></li>
            <li>توستر</li>
        </ul>
    </div>

    <div class="separator-breadcrumb border-top"></div>

    <div class="row mb-3">
        <div class="col-md-12">
            <h2>توستر</h2>
            <p>Toastr is a Javascript library for non-blocking notifications. jQuery is required. The goal is to create
                a simple core library that can be customized and extended.</p>
        </div>
    </div>
    <div class="row mb-4">
        <div class="col-md-12 mb-4">
            <h3>انواع</h3>
        </div>

        <div class="col-md-6 mb-4">
            <div class="card">

                <div class="card-body">
                    <button id="toast-success" class="btn btn-block btn-outline-success btn-success">توستر موفق</button>
                    <button id="toast-info" class="btn btn-block btn-outline-info btn-info">اطلاعات توستر</button>
                </div>
            </div>
        </div>
        <!-- end of col -->

        <div class="col-md-6">
            <div class="card">

                <div class="card-body">
                    <button id="toast-warning" class="btn btn-block btn-outline-warning btn-warning">خطا توستر</button>
                    <button id="toast-error" class="btn btn-block btn-outline-danger btn-danger">خطر توستر</button>
                </div>
            </div>
        </div>
        <!-- end of col -->


    </div>
    <!-- end of row -->

    <div class="row mb-4">
        <div class="col-md-12 mb-4">
            <h3>موقعیت ها</h3>
        </div>

        <div class="col-md-6 mb-4">
            <div class="card">

                <div class="card-body">
                    <h3 class="card-title">موقعیتهای بالا</h3>
                    <button id="toast-position-top-left" class="btn btn-block btn-outline-info btn-info">بالا چپ
                    </button>
                    <button id="toast-position-top-center" class="btn btn-block btn-outline-info btn-info">بالا وسط
                    </button>
                    <button id="toast-position-top-right" class="btn btn-block btn-outline-info btn-info">بالا راست
                    </button>
                    <button id="toast-position-top-full" class="btn btn-block btn-outline-info btn-info">بالا کامل
                    </button>

                </div>
            </div>
        </div>
        <!-- end of col -->

        <div class="col-md-6">
            <div class="card">

                <div class="card-body">
                    <h3 class="card-title">موقعیتهای پایین</h3>
                    <button id="toast-position-bottom-left" class="btn btn-block btn-outline-info btn-info">پایین چپ
                    </button>
                    <button id="toast-position-bottom-center" class="btn btn-block btn-outline-info btn-info">پایین
                        وسط
                    </button>
                    <button id="toast-position-bottom-right" class="btn btn-block btn-outline-info btn-info">پایین
                        راست
                    </button>
                    <button id="toast-position-bottom-full" class="btn btn-block btn-outline-info btn-info">پایین کامل
                    </button>

                </div>
            </div>
        </div>
        <!-- end of col -->


    </div>
    <!-- end of row -->
    <div class="row mb-4">

        <div class="col-md-6 mb-4">
            <div class="card">

                <div class="card-body">
                    <h3 class="card-title ">اعلان های متنی</h3>
                    <button id="toast-text-notification" class="btn btn-block btn-outline-info btn-info">نشان دادن
                        توست
                    </button>


                </div>
            </div>
        </div>
        <!-- end of col -->

        <div class="col-md-6 mb-4">
            <div class="card">

                <div class="card-body">
                    <h3 class="card-title">بستن دکمه</h3>
                    <button id="toast-close-button" class="btn btn-block btn-outline-success btn-success">نشان دادن
                        توست
                    </button>

                </div>
            </div>
        </div>
        <!-- end of col -->
        <div class="col-md-6 mb-4">
            <div class="card">

                <div class="card-body">
                    <h3 class="card-title">نوار پیشرفت</h3>
                    <button id="toast-progress-bar" class="btn btn-block btn-outline-warning btn-warning">نسان دادن
                        توست
                    </button>

                </div>
            </div>
        </div>
        <!-- end of col -->
        <div class="col-md-6 mb-4">
            <div class="card">

                <div class="card-body">
                    <h3 class="card-title">پاک کردن توست</h3>
                    <button id="toast-clear-btn" class="btn btn-block btn-outline-danger btn-danger">نشان دادن توست
                    </button>

                </div>
            </div>
        </div>
        <!-- end of col -->


    </div>
    <!-- end of row -->

    <div class="row mb-4">
        <div class="col-md-12">
            <h2>حذف/پاک کردن توست</h2>
        </div>

        <div class="col-md-6 mb-4">
            <div class="card">

                <div class="card-body">
                    <h3 class="card-title">حذف توست</h3>
                    <p>حذف توست بدون انیمیشن</p>
                    <button id="toast-show-remove" class="btn btn-block btn-outline-info btn-info">نشان دادن توست
                    </button>
                    <button id="toast-remove" class="btn btn-block btn-outline-info btn-info">حذف توست</button>


                </div>
            </div>
        </div>
        <!-- end of col -->

        <div class="col-md-6 mb-4">
            <div class="card">

                <div class="card-body">
                    <h3 class="card-title">پاک کردن توست</h3>
                    <p>پاک کردن توست بدون انیمیشن</p>
                    <button id="toast-show-clear" class="btn btn-block btn-outline-info btn-info">نشان دادن توست
                    </button>
                    <button id="toast-clear" class="btn btn-block btn-outline-info btn-info">پاک کردن توست</button>


                </div>
            </div>
        </div>
        <!-- end of col -->


    </div>
    <!-- end of row -->
    <div class="row mb-4">
        <div class="col-md-12">
            <h2>مدت زمان و زمانهای طولانی</h2>
        </div>

        <div class="col-md-6 mb-4">
            <div class="card">

                <div class="card-body">
                    <h3 class="card-title mb-1">Show .6s</h3>
                    <p>the show time can be define by using <code>مدت زمان نمایش</code></p>
                    <button id="toast-fast-duration" class="btn btn-block btn-outline-info btn-info mb-3">نشان دادن سرعت
                        توست
                    </button>
                    <h3 class="card-title mb-1">Timeout 6s</h3>
                    <p>Time Out can be define by <code>زمان پایان</code> برای تعیین مدت زمان باقی می ماند</p>
                    <button id="toast-timeout" class="btn btn-block btn-outline-info btn-info">زمان پایان توست</button>


                </div>
            </div>
        </div>
        <!-- end of col -->

        <div class="col-md-6 mb-4">
            <div class="card">

                <div class="card-body">
                    <h3 class="card-title mb-1">Hide 3s</h3>
                    <p>Hide can be define by <code>hideDuration</code> to set what amount of time will take to hide
                        message</p>

                    <button id="toast-slow-duration" class="btn btn-block btn-outline-info btn-info mb-3">توست مخفی
                    </button>
                    <h3 class="card-title mb-1">Sticky</h3>
                    <p>Sticky Message can be create by set the <code>زبان پایان</code> to <code>0</code></p>
                    <button id="toast-sticky" class="btn btn-block btn-outline-info btn-info">Sticky Toast</button>


                </div>
            </div>
        </div>
        <!-- end of col -->


    </div>
    <!-- end of row -->
    <div class="row mb-4">
        <div class="col-md-12">
            <h2>مخفی/نمایش دادن انیمیشن</h2>
        </div>

        <div class="col-md-6 mb-4">
            <div class="card">

                <div class="card-body">
                    <h3 class="card-title">محو شدن</h3>

                    <button id="toast-fade" class="btn btn-block btn-outline-info btn-info">محو توست</button>


                </div>
            </div>
        </div>
        <!-- end of col -->

        <div class="col-md-6 mb-4">
            <div class="card">

                <div class="card-body">
                    <h3 class="card-title">اسلاید به پایین /اسلاید به بالا</h3>


                    <button id="toast-slide" class="btn btn-block btn-outline-info btn-info">اسلاید توست</button>


                </div>
            </div>
        </div>
        <!-- end of col -->


    </div>
    <!-- end of row -->

@endsection

@section('page-js')

    <script src="{{asset('assets/js/vendor/toastr.min.js')}}"></script>
    <script src="{{asset('assets/js/toastr.script.js')}}"></script>

@endsection
