@extends('layouts.app')
@section('content')

<section class="pages_content">
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <h1 class="page_title"> <i class="fa fa-search fa-flip-horizontal"></i></h1>
            </div><!--end col-xs-12-->
            <div class="clearfix"></div>
            <div class="col-sm-6 col-sm-offset-3 col-xs-12">
                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li class="nav-item change_search">
                        <a class="nav-link active" data-toggle="tab" href="#t1" role="tab" aria-expanded="true">الموضوعات</a>
                    </li>
                    <li class="nav-item change_search">
                        <a class="nav-link" data-toggle="tab" href="#t2" role="tab" aria-expanded="false">السور</a>
                    </li>
                </ul>

                <!-- Tab panes -->
                <div class="tab-content">
                    <div class="tab-pane fade active in" id="t1" role="tabpanel" aria-expanded="true">
                       <br>
                       <div class="form-group">
                        <select id="search-option" class="form-control adv_search_op">
                            <option value="1">موضوعات الموسوعة</option>
                            <option value="2">فهرس المصادر والمراجع</option>
                        </select>
                    </div><!--end form-group-->
                    <div class="col-xs-12">
                    </div>
                </div>
                <div class="tab-pane fade" id="t2" role="tabpanel" aria-expanded="false">
                    <br> 
                    <form>
                        <div class="col-sm-6 col-xs-12">
                            <div class="form-group">
                                <label>اسم السورة :</label>
                                <select id="soura" name="soura" class="form-control">
                                    <option value="الفاتحة">الفاتحة</option>
                                    <option value="البقرة">البقرة</option>
                                    <option value="آل عمران">آل عمران</option>
                                    <option value="النساء">النساء</option>
                                    <option value="المائدة">المائدة</option>
                                    <option value="الأنعام">الأنعام</option>
                                    <option value="الأعراف">الأعراف</option>
                                    <option value="الأنفال">الأنفال</option>
                                    <option value="التوبة">التوبة</option>
                                    <option value="يونس">يونس</option>
                                    <option value="هود">هود</option>
                                    <option value="يوسف">يوسف</option>
                                    <option value="الرعد">الرعد</option>
                                    <option value="إبراهيم">إبراهيم</option>
                                    <option value="الحجر">الحجر</option>
                                    <option value="النحل">النحل</option>
                                    <option value="الإسراء">الإسراء</option>
                                    <option value="الكهف">الكهف</option>
                                    <option value="مريم">مريم</option>
                                    <option value="طه">طه</option>
                                    <option value="الأنبياء">الأنبياء</option>
                                    <option value="الحج">الحج</option>
                                    <option value="المؤمنون">المؤمنون</option>
                                    <option value="النور">النور</option>
                                    <option value="الفرقان">الفرقان</option>
                                    <option value="الشعراء">الشعراء</option>
                                    <option value="النمل">النمل</option>
                                    <option value="القصص">القصص</option>
                                    <option value="العنكبوت">العنكبوت</option>
                                    <option value="الروم">الروم</option>
                                    <option value="لقمان">لقمان</option>
                                    <option value="السجدة">السجدة</option>
                                    <option value="الأحزاب">الأحزاب</option>
                                    <option value="سبأ">سبأ</option>
                                    <option value="فاطر">فاطر</option>
                                    <option value="يس">يس</option>
                                    <option value="الصافات">الصافات</option>
                                    <option value="ص">ص</option>
                                    <option value="الزمر">الزمر</option>
                                    <option value="غافر">غافر</option>
                                    <option value="فصلت">فصلت</option>
                                    <option value="الشورى">الشورى</option>
                                    <option value="الزخرف">الزخرف</option>
                                    <option value="الدخان">الدخان</option>
                                    <option value="الجاثية">الجاثية</option>
                                    <option value="الأحقاف">الأحقاف</option>
                                    <option value="محمد">محمد</option>
                                    <option value="الفتح">الفتح</option>
                                    <option value="الحجرات">الحجرات</option>
                                    <option value="ق">ق</option>
                                    <option value="الذاريات">الذاريات</option>
                                    <option value="الطور">الطور</option>
                                    <option value="النجم">النجم</option>
                                    <option value="القمر">القمر</option>
                                    <option value="الرحمن">الرحمن</option>
                                    <option value="الواقعة">الواقعة</option>
                                    <option value="الحديد">الحديد</option>
                                    <option value="المجادلة">المجادلة</option>
                                    <option value="الحشر">الحشر</option>
                                    <option value="الممتحنة">الممتحنة</option>
                                    <option value="الصف">الصف</option>
                                    <option value="الجمعة">الجمعة</option>
                                    <option value="المنافقون">المنافقون</option>
                                    <option value="التغابن">التغابن</option>
                                    <option value="الطلاق">الطلاق</option>
                                    <option value="التحريم">التحريم</option>
                                    <option value="الملك">الملك</option>
                                    <option value="القلم">القلم</option>
                                    <option value="الحاقة">الحاقة</option>
                                    <option value="المعارج">المعارج</option>
                                    <option value="نوح">نوح</option>
                                    <option value="الجن">الجن</option>
                                    <option value="المزمل">المزمل</option>
                                    <option value="المدثر">المدثر</option>
                                    <option value="القيامة">القيامة</option>
                                    <option value="الإنسان">الإنسان</option>
                                    <option value="المرسلات">المرسلات</option>
                                    <option value="النبأ">النبأ</option>
                                    <option value="النازعات">النازعات</option>
                                    <option value="عبس">عبس</option>
                                    <option value="التكوير">التكوير</option>
                                    <option value="لإنفطار">لإنفطار</option>
                                    <option value="المطففين">المطففين</option>
                                    <option value="الإنشقاق">الإنشقاق</option>
                                    <option value="البروج">البروج</option>
                                    <option value="الطارق">الطارق</option>
                                    <option value="الأعلى">الأعلى</option>
                                    <option value="الغاشية">الغاشية</option>
                                    <option value="الفجر">الفجر</option>
                                    <option value="البلد">البلد</option>
                                    <option value="الشمس">الشمس</option>
                                    <option value="الليل">الليل</option>
                                    <option value="الضحى">الضحى</option>
                                    <option value="الشرح">الشرح</option>
                                    <option value="التين">التين</option>
                                    <option value="العلق">العلق</option>
                                    <option value="القدر">القدر</option>
                                    <option value="البينة">البينة</option>
                                    <option value="الزلزلة">الزلزلة</option>
                                    <option value="العاديات">العاديات</option>
                                    <option value="القارعة">القارعة</option>
                                    <option value="التكاثر">التكاثر</option>
                                    <option value="العصر">العصر</option>
                                    <option value="الهمزة">الهمزة</option>
                                    <option value="الفيل">الفيل</option>
                                    <option value="قريش">قريش</option>
                                    <option value="الماعون">الماعون</option>
                                    <option value="الكوثر">الكوثر</option>
                                    <option value="الكافرون">الكافرون</option>
                                    <option value="النصر">النصر</option>
                                    <option value="المسد">المسد</option>
                                    <option value="الإخلاص">الإخلاص</option>
                                    <option value="الفلق">الفلق</option>
                                    <option value="الناس">الناس</option>
                                </select>
                            </div><!--end form-group-->
                        </div><!--end  col-xs-12-->
                        <div class="col-sm-6 col-xs-12">
                            <div class="form-group">
                                <label>رقم الآية من :</label>
                                <input id="word-num" type="text" autofocus="" required="" class="form-control">
                            </div><!--end form-group-->
                            <div class="form-group">
                                <label>إلى :</label>
                                <input id="word-num2" type="text" autofocus="" required="" class="form-control">
                            </div><!--end form-group-->
                        </div><!--end  col-xs-12-->
                        <div class="col-xs-12">
                            <div class="form-group text-xs-center">
                                <button id="word-search" type="button" class="btn btn-success-outline">بحث</button>
                            </div>
                        </div>
                    </form>                    
                </div>
            </div>
        </div>
        <div class="clearfix"></div>
        <br/><br/>

        <div class="col-xs-12 text-xs-center" id="search_loading" style="display:none;">
            <img src="{{url('images/home_loading.svg')}}" alt="tafsir"/>
            <div>
                <h5>جاري البحث ....</h5>
            </div>
        </div>
        <br/><br/>

    <div class=" col-xs-12" id="search-results">
        <div class="card">
            <div class="card-header"><h4 class=" text-muted"> <i class="fa fa-file-text"></i> نتائج البحث</h4></div>
            <div id="pages-search-results">
                @if($books)
                    @foreach($books as $book)
                        <div>
                            <div id="search-book" class="list-group list-group-flush">
                                <a href="/show-book-scroll/{{$book->id}}/?q={{$key}}" class="list-group-item h6 text-success"><i class="fa fa-angle-double-left"></i> {{$book->title}}</a>
                            </div>
                        </div>
                    @endforeach
                @elseif($books === '')
                    <div class="alert alert-danger no-margin" id="search-danger">أدخل كلمة بحث أولاً</div>
                @else
                    <div class="alert alert-danger no-margin" id="search-none">لا توجد نتائج للبحث</div>
                @endif
            </div>
        </div><!--end card-->
    </div><!--end  col-xs-12-->
    <div class=" col-xs-12">
    </div><!--end  col-xs-12-->
</div><!--end row-->
</div><!--end container-->
</section><!--end pages_content -->
@endsection