@extends('layouts.app')

@section('content')
        <div class="page_wrapper">
        <div class="main_section">
            <div class="breadcrum">
                <ul>
                    <li><a href="{{ url('/booklist') }}">Book Dashboard</a></li>
                    <!-- <li class="active"><a href="javascript:;">Add Contributor</a></li> -->
                </ul>
                <div class="right_csvs">
                    
                    <!--filter-->
                    <button type="button" data-toggle="tooltip" data-placement="top" data-title='List books with no contributors' data-html="true" class="add_button_2 add_expenses" id="filter_books" ><i class="fa fa-filter" aria-hidden="true"></i> Filter books</button>


                    <!--add csv -->
                    <div class="dropdown add_button_2">
                        <button type="button" data-toggle="dropdown" aria-expanded="true" class="buttn"><i class="fa fa-plus" aria-hidden="true"></i> Add<span class="caret"></span></button>
                        <ul class="dropdown-menu">
                            <li>
                                <a href="{{ url('/add_book') }}"><i class="fa fa-plus" aria-hidden="true"></i>Add Book
                                </a>
                            </li>

                            <li>
                                <a href="javascript:void;" data-toggle="modal" data-target="#addcsvbook"><i class="fa fa-plus" aria-hidden="true"></i>Add CSV</a>
                            </li>
                            <li>
                                <a href="javascript:void;" data-toggle="modal" data-target="#addexpenses_csv"  class="add_expenses"><i class="fa fa-plus" aria-hidden="true"></i>Add Expense</a>
                            </li>
                            <li>
                                <a href="javascript:void;" data-toggle="modal" data-target="#addcsvweekly" class="add_weekly"><i class="fa fa-plus" aria-hidden="true"></i>Add Sales CSV</a>
                            </li>
                        </ul>
                    </div>

                    <!--others-->
                    <div class="dropdown add_button">
                        <button type="button" data-toggle="dropdown" aria-expanded="true" class="buttn">More<span class="caret"></span></button>
                        <ul class="dropdown-menu">
                            <li>
                                <a href="javascript:void;" data-toggle="modal" data-target="#samplecsv"><i class="fa fa-download" aria-hidden="true"></i>Sample CSV</a>
                            </li>
                            <li>
                                <a href="{{action('BookController@repeating_codes')}}" target="_blank">
                                <i class="fa fa-key" aria-hidden="true"></i>Repeating Codes</a>
                            </li>
                            <li>
                                <a href="{{action('BookController@merged_data')}}" target="_blank">
                                <i class="fa fa-compress" aria-hidden="true"></i>Merged Books</a>
                            </li>
                        </ul>
                    </div>


                </div>
                <!-- <a href="javascript:void;" data-toggle="modal" data-target="#addcsvweekly">
                 
                Add Weekly Report
                </a> -->
            </div>
            <div class="col-md-12 col-sm-12 col-xs-12">
                @if(session()->has('message'))
                <div class="alert alert-success">
                    {{ session()->get('message') }}
                </div>
                @endif

                @if(session()->has('error'))
                <div class="alert alert-danger">
                    {{ session()->get('error') }}
                </div>
                @endif

                 <div class="alert merge_answer" style="display:none">
                    {{ session()->get('error') }}
                </div>
                
               
            </div>
            <div class="inner_section">
                <div class="heading_area">
                    <div class="heading_left">
                        <h1>Contained Book List</h1>
                    </div>
                    <div class="heading_right">

                        <!-- filter  button -->
                        <!-- <div id="order_form">
                            <button type="button" data-toggle="tooltip" data-placement="top" data-title='List books with no contributors' data-html="true" class="add_button" id="filter_books" >Filter books</button>
                        </div>   -->


                        <!--sorter-->
                        <div id="order_form">
                            <div class="input_container select_box custom_filters" data-toggle="tooltip" data-placement="top" data-title='Sort Books' data-html="true" aria-hidden="true">  
                                <select name="book_list_page_order"  class="selectpicker" id="page_order">
                                 <option value="1" disabled>Order By</option>
                                <option value="asc">A-Z</option>
                                <option value="desc">Z-A</option>
                                <option value="recent">Recently Added</option>
                                </select>
                            </div>
                        </div>


                        <div id="order_form">
                            <div class="input_container select_box custom_filters" data-toggle="tooltip" data-placement="top" data-title='Books per page' data-html="true" aria-hidden="true">  
                                <select name="book_list_page_items"  class="selectpicker" id="page_item">
                                <option value="1" disabled>List Per Page</option>
                                <!-- <option value="15">15</option> -->
                                <option value="25">25</option>
                                <option value="35">35</option>
                                <option value="45">45</option>
                                <option value="55">55</option>
                                </select>
                            </div>
                        </div>

                        <!--sorter ends-->

                        <!-- search options starts booklist_ajax jquery file used to submit-->
                        <form id="order_form">
                            {{csrf_field()}} 
                            <div class="input_container select_box custom_filters" data-toggle="tooltip" data-placement="top" data-title='Search Particular' data-html="true" aria-hidden="true">  
                                <select name="book_search_option"  class="selectpicker" id="book_search_option">
                                <option value="1" disabled>Search in</option>
                                <option value="all">All</option>
                                <option value="asin_code">Asin Code</option>
                                <option value="book_title">Book Title</option>
                                <option value="comixology_code">Comixology Code</option>
                                <option value="diamond_item_code">Diamond Item Code</option>
                                <option value="google_gg_key">Google GG Key</option>
                                <option value="isbn_code">ISBN Physical 13</option>
                                <option value="isbn_code3">ISBN Digital 13</option>
                                <option value="isbn_code2">ISBN 10</option>
                                <option value="itune_code">Itune Code</option>
                                <option value="qb_classes">QB Classes</option>
                                <option value="upc">UPC</option>
                                </select>
                            </div>
                        </form>


                        <!--search-->
                        <div class="search_section custom_search">
                            <!--reset button-->
                            <div class="resetbutton resetbtn_class"><span  data-toggle="tooltip" data-placement="top" data-title='Reset Search' data-html="true" aria-hidden="true"><i class="fa fa-refresh" aria-hidden="true"></i></span></div>

                            <div class="resetbutton_empty resetbtn_class" style="display:none"><a href=""><span  data-toggle="tooltip" data-placement="top" data-title='Reset Search' data-html="true" aria-hidden="true"><i class="fa fa-refresh" aria-hidden="true"></i></span></a></div>

                            <input placeholder="Press Enter to Search.." type="search" name="search" id="search"  value="