@extends('../layout/' . $layout)

@section('subhead')
    <title>Atarud MIS - Book Store</title>
    <link href="{{ asset('dist/css/dataTables.min.css') }}" rel="stylesheet">
@endsection

@section('subcontent')
<div class="flex items-center mt-8">

    {{-- <a href="javascript:;" data-tw-toggle="modal" data-tw-target="#new-notice" class="btn btn-primary w-24 ml-auto">
        <i data-lucide="plus-circle" class="w-4 h-4 mr-1"></i> Add
    </a> --}}
</div>

    <div class="flex items-center mt-8">
        <h2 class="intro-y text-lg font-medium mr-auto">Book Store</h2>
    </div>
    @if(session()->get('msg'))
    <div class="alert alert-danger-soft show flex items-center mb-2" role="alert">
        <i data-lucide="alert-octagon" class="w-6 h-6 mr-2"></i> {{ session()->get('msg') }}
    </div>
    @endif

    <div class="container">
        <div class="row">
            <div class="col-12 table-responsive">
               

                 <div class="intro-y grid grid-cols-12 gap-3 sm:gap-6 mt-5">
                @foreach ($data as $book)
                    <div class="intro-y col-span-6 sm:col-span-4 md:col-span-3 2xl:col-span-2">
                        <div class="file box rounded-md px-5 pt-8 pb-5 px-3 sm:px-5 relative zoom-in">
                            <div class="absolute left-0 top-0 mt-3 ml-3">
                                {{-- <input class="form-check-input border border-slate-500" type="checkbox" {{ $faker['true_false'][0] ? '' : 'checked' }}> --}}
                                <input class="form-check-input border border-slate-500" type="checkbox" >
                            </div>
                       
                                <a href="" class="w-3/5 file__icon file__icon--empty-directory mx-auto"></a>
                           
                            <a href="" class="block font-medium mt-4 text-center truncate">{{ $book->name }}</a>
                            <div class="absolute top-0 right-0 mr-2 mt-3 dropdown ml-auto">
                                <a class="dropdown-toggle w-5 h-5 block" href="javascript:;" aria-expanded="false" data-tw-toggle="dropdown">
                                    <i data-lucide="more-vertical" class="w-5 h-5 text-slate-500"></i>
                                </a>
                                <div class="dropdown-menu w-40">
                                    <ul class="dropdown-content">
                                        <li>
                                        <form action="{{ route('downloadbook') }}" method="get">
                                            @csrf
                                            <input type="hidden" value="{{ $book->document }}" name="book">
                                            <button href="" class="dropdown-item">
                                                <i data-lucide="download" class="w-5 h-5"></i> Download
                                            </button>
                                        </form>
                                        </li>
                                        
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
            </div>
        </div>
    </div>
   
@endsection


@section('script')
    <script src="{{ asset('dist/js/jquery.js') }}"></script>
    <script src="{{ asset('dist/js/dataTables.min.js') }}"></script>

    <script type="text/javascript">
      
    </script>


@endsection