@extends('library.admin.layouts.admin_design')

@section('title')
    <title>Add Book - School Library</title>
@endsection

@section('content')
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                Book
            </h1>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{route('library.dashboard')}}"><i class="iconsmind-Library"></i></a></li>
                <li class="breadcrumb-item"><a href="javascript:">Book</a></li>
                <li class="breadcrumb-item active">Add Book</li>
            </ol>
        </section>

        <!-- Main content -->
        <section class="content">

            <!-- Basic Forms -->
            <div class="box box-solid box-info">
                <div class="box-header with-border">
                    <h6 class="box-subtitle text-white">Add Book Details</h6>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                    <div class="row">
                        <div class="col">
                            <form action="{{route('library.book.store')}}" method="post" enctype="multipart/form-data">
                                @csrf

                                <div class="form-group">
                                    <h5>Book Title<span class="text-danger">*</span></h5>
                                    <div class="controls">
                                        <input type="text" name="title" id="name" class="form-control" data-validation-required-message="Book Title is required" >
                                    </div>
                                </div>
                                <div class="form-group">
                                    <h5>Quantity<span class="text-danger">*</span></h5>
                                    <div class="controls">
                                        <input type="number" name="quantity" id="quantity" class="form-control" min="0" data-validation-required-message="Quantity is required" >
                                    </div>
                                </div>

                                <div class="form-group">
                                    <h5>Image<span class="text-danger"></span></h5>
                                    <div class="controls">
                                        <input type="file" id="image" name="image" class="form-control" > </div><br>
                                        <img src="" id="current_image" width="100px">

                                </div>

                                <div class="form-group">
                                <label>Select Author</label>
                                <select class="form-control select2" style="width: 100%;" name="author_id">
                                  <option aria-readonly="true" disabled selected>Select Author</option>
                                        @foreach($author as $cr)
                                  <option value="{{$cr->id}}">{{$cr->name}}</option>
                                        @endforeach
                                </select>
                              </div>

                              <div class="form-group">
                                    <h5>Publisher Name<span class="text-danger">*</span></h5>
                                    <div class="controls">
                                        <input type="text" name="publisher" id="name" class="form-control" data-validation-required-message="Publisher Name is required" >
                                    </div>
                                </div>

                                <div class="form-group">
                                    <h5>Published Date<span class="text-danger">*</span></h5>
                                    <div class="controls">
                                        <input type="date" name="published_date" id="name" placeholder="Date of Birth" class="form-control">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <h5>Price<span class="text-danger">*</span></h5>
                                    <div class="controls">
                                        <input type="text" name="price" id="name" placeholder="Price" class="form-control">
                                    </div>
                                </div>


                                <div class="form-group">
                                    <h5>Description<span class="text-danger"></span></h5>
                                    <div class="controls">
                                        <textarea name="description" id="" cols="30" rows="10" class="form-control my-editor">
                                        </textarea>
                                    </div>
                                </div>

                                 <div class="form-group">
                                    <h5>Remarks<span class="text-danger"></span></h5>
                                    <div class="controls">
                                        <textarea name="remarks" id="" cols="30" rows="10" class="form-control my-editor">
                                        </textarea>
                                    </div>
                                </div>



                                <div class="text-xs-right">
                                    <button type="submit" class="btn btn-info">Add Book</button>

                                    <a href="{{route('library.book.index')}}" class="btn btn-purple">View All Books</a>

                                </div>
                            </form>

                        </div>

                        <!-- /.col -->

                    </div>


                    <!-- /.row -->
                </div>
                <!-- /.box-body -->
            </div>
            <!-- /.box -->

        </section>
        <section class="content">
            <div class="row">
                <div class="col-12">
                    <div class="box box-solid box-primary">
                        <div class="box-header with-border">
                            <h4 class="box-title">View All ISBNs</h4>

                        </div>

                        <!-- /.box-header -->
                        <div class="box-body">
                            <div class="table-responsive">
                                <table id="pdftable" class="table tablefonts">
                                    <thead>
                                        <th><input type="checkbox" id="check_all"></th>

                                        <th>Name</th>
                                        <th>Date</th>
                                        <th>Action</th>
                                    </thead>
                                    <tbody>
                                        @foreach($barcode as $key)
                                        <tr>
                                            {{-- <td><input type="checkbox" name="delid[]" value="{{$key->id}}"></td> --}}
                                           <td> <input type="checkbox" class="checkbox" data-id="{{$key->id}}"></td>

                                            <td>{{$key->name}}</td>
                                            <td>{{$key->created_at}}</td>

                                            <td><a href="{{route('library.showpdf',['id'=>$key->name])}}{{-- storage_path()/image/{{$key->name}} --}}" target="_blank" class="btn btn-success" title="View"><i class="fa iconsmind-Preview"></i></a>
                                                <a class="btn btn-info" href="{{route('library.downloadpdf',['id'=>$key->name])}}" title="Download" ><i class="fa iconsmind-Download"></i></a>
                                                <a class="btn btn-danger" href="{{route('library.deletepdf',['id'=>$key->id,
                                                'name'=>$key->name])}}"  {{-- data-tr="tr_{{$key->id}}"
                                                    data-toggle="confirmation"
                                                    data-btn-ok-label="Delete" data-btn-ok-icon="fa fa-remove"
                                                    data-btn-ok-class="btn btn-sm btn-danger"
                                                    data-btn-cancel-label="Cancel"
                                                    data-btn-cancel-icon="fa fa-chevron-circle-left"
                                                    data-btn-cancel-class="btn btn-sm btn-default"
                                                    data-title="Are you sure you want to delete ?"
                                                    data-placement="left" data-singleton="true" --}}><i class="fa fa-trash"></i> </a>
                                            </td>
                                        </tr>
                                        @endforeach

                                    </tbody>

                                </table>
                            </div>
                        </div>
                        <!-- /.box-body -->
                    </div>
                    <!-- /.box -->
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
@endsection

@section('scripts')

    <script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
    <script>
        var editor_config = {
            path_absolute : "localhost:8888/library/",
            selector: "textarea.my-editor",
            plugins: [
                "advlist autolink lists link image charmap print preview hr anchor pagebreak",
                "searchreplace wordcount visualblocks visualchars code fullscreen",
                "insertdatetime media nonbreaking save table contextmenu directionality",
                "emoticons template paste textcolor colorpicker textpattern"
            ],
            toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media",
            relative_urls: false,
            file_browser_callback : function(field_name, url, type, win) {
                var x = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;
                var y = window.innerHeight|| document.documentElement.clientHeight|| document.getElementsByTagName('body')[0].clientHeight;

                var cmsURL = editor_config.path_absolute + 'laravel-filemanager?field_name=' + field_name;
                if (type == 'image') {
                    cmsURL = cmsURL + "&type=Images";
                } else {
                    cmsURL = cmsURL + "&type=Files";
                }

                tinyMCE.activeEditor.windowManager.open({
                    file : cmsURL,
                    title : 'Filemanager',
                    width : x * 0.8,
                    height : y * 0.8,
                    resizable : "yes",
                    close_previous : "no"
                });
            }
        };

        tinymce.init(editor_config);
    </script>
    <!-- Form validator JavaScript -->
    <script src="{{asset('adminpanel/js/pages/validation.js')}}"></script>
    <script>
        ! function(window, document, $) {
            "use strict";
            $("input,select,textarea").not("[type=submit]").jqBootstrapValidation();
        }(window, document, jQuery);
    </script>
    <script type="text/javascript">
        @if(session('flash_message'))
        swal("Success!", "{!! session('flash_message') !!}", "success")
        @endif
    </script>

<script>

    $(document).ready(function () {
          $('#categories').select2();
          $('#pdftable').DataTable();
        $('#check_all').on('click', function(e) {

     if($(this).is(':checked',true))

     {

        $(".checkbox").prop('checked', true);

     } else {

        $(".checkbox").prop('checked',false);

     }

    });



     $('.checkbox').on('click',function(){

        if($('.checkbox:checked').length == $('.checkbox').length){

            $('#check_all').prop('checked',true);

        }else{

            $('#check_all').prop('checked',false);

        }

     });



    $('.delete-all').on('click', function(e) {



        var idsArr = [];

        $(".checkbox:checked").each(function() {

            idsArr.push($(this).attr('data-id'));

        });



        if(idsArr.length <=0)

        {

            alert("Please select atleast one record to delete.");

        }  else {



            if(confirm("Are you sure, you want to delete the selected categories?")){



                var strIds = idsArr.join(",");



                $.ajax({

                    url: "{{ route('library.category.multiple-delete') }}",

                    type: 'DELETE',

                    headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},

                    data: 'ids='+strIds,

                    success: function (data) {

                        if (data['status']==true) {

                            $(".checkbox:checked").each(function() {

                                $(this).parents("tr").remove();

                            });

                            alert(data['message']);

                        } else {

                            alert('Whoops Something went wrong!!');

                        }

                    },

                    error: function (data) {

                        alert(data.responseText);

                    }

                });



            }

        }

    });



    $('[data-toggle=confirmation]').confirmation({

        rootSelector: '[data-toggle=confirmation]',

        onConfirm: function (event, element) {

            element.closest('form').submit();

        }

    });





         })


</script>



<script type="text/javascript">
    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#current_image').attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
    $("#image").change(function(){
        readURL(this);
    });
</script>
@endsection