@extends('layouts.admin.admin')

@section('script')
     <!-- BEGIN PAGE LEVEL CUSTOM SCRIPTS -->
     <script src="{{ url('assets/js/scrollspyNav.js') }}"></script>
     <script>
        checkall('todoAll', 'todochkbox');
        $('[data-toggle="tooltip"]').tooltip()
     </script>
     <!-- END PAGE LEVEL CUSTOM SCRIPTS -->
@endsection


@section('head')
       <!-- BEGIN PAGE LEVEL CUSTOM STYLES -->
       <link href="{{ url('assets/css/scrollspyNav.css') }}" rel="stylesheet" type="text/css" />
       <link rel="stylesheet" type="text/css" href="{{ url('assets/css/forms/theme-checkbox-radio.css') }}">
       <link href="{{ url('assets/css/tables/table-basic.css') }}" rel="stylesheet" type="text/css" />
       <!-- END PAGE LEVEL CUSTOM STYLES -->
@endsection

@section('content')
    <!--  BEGIN CONTENT AREA  -->
        <div class="container-fluid">
           <input type="hidden" name="_token" id="_token" value="{{csrf_token()}}">

             
              <div class="row layout-top-spacing">
                 
                 <div id="tableHover" class="col-lg-12 col-12 layout-spacing">
                    <div class="statbox widget box box-shadow">
                       <div class="widget-header">
                       

                            <div class="row">
                                <div class="col-sm-10 col-lg-10 ">
                                    <div class=" p-3 ">
                                        <div class="d-flex justify-content-center">
                                        <h5><i class="fa fa-image fa-fw" ></i> All Album</h5>
                                        </div>
                                    </div>
                                </div>
                            
                                <div class="col-sm-2 col-lg-2">
                                    <div class=" p-3">
                                    <a href="/album-create" class="btn btn-primary btn-sm float-right"><i class="fa fa-plus fa-fw fa-lg"></i>  New</a>
                                    </div>
                                </div>
                            </div>

                       </div>
                       <div class="widget-content widget-content-area">
                          <div class="table-responsive mt-2"  >
                            @include('layouts.admin.alerts')

                            @if (count($albums)>0)
                                <table class="table table-bordered table-hover mb-4">
                                   <thead>
                                      <tr>
                                          <th>#</th>
                                           <th>Album Name</th>
                                          <th>Cover Image</th>
                                          <!-- <th>Date And Time</th> -->
                                          <th colspan="2" style="text-align:center">Action</th>
                                      </tr>
                                   </thead>
                                   <tbody>
                                      @foreach ($albums as $key => $item)
                                      
                                      <tr>
                                       <td>{{ $key+1 }}</td>
                                        <td class="card-user_occupation text-muted">{{ $item->name }}</td>
                                       <td><a href="{{ $item->cover_image }}" target="_blank"><img style="max-width: 200px" src="{{ $item->cover_image }}"></a></td>
                                       <!-- <td class="card-user_occupation text-muted">{{ date('d-m-Y h:i:s A', strtotime($item->timestamp)) }}</td> -->
                                       <td>
                                             <a href="{{route('show_album', ['id'=>$item->id])}}"
                                                
                                                class="btn btn-outline-warning btn-sm"><b><i
                                                    class="fa fa-edit fa-lg fa-fw"></i> </b>Edit </a>
                                       </td>
                                       <td>
                                       <form action="{{ route('album.delete',$item->id) }}" method="post" style="" id="delete-entry_{{$item->id}}">
                                              @csrf

                                               <button type="submit" id="delete-entry_{{$item->id}}"  style=""
                                                class="btn btn-outline-danger btn-sm"
                                                onclick="deleteEntry(event,'delete-entry_{{$item->id}}');"> <b><i class="fa fa-trash fa-lg fa-fw"
                                                    aria-hidden="true"></i></b> Delete</button>

                                        </form>
                                         
                                       </td>
                                   </tr> 
                                      @endforeach
                                   </tbody>
                                </table>
                            @else
                            <table class="table table-bordered table-hover mb-4">
                                <tbody>
                                    <tr>                                 
                                        <td colspan="5"> No Album Added Yet</td>
                                    </tr>
                                </tbody>
                            </table>   
                            @endif
                         </div>
                       </div>
                    </div>
                 </div>
              </div>
           </div>
       
     <!--  END CONTENT AREA  -->
@endsection
<script>
    function resetVideoModalData() {

        $("#image_preview").empty();
        $("#file_name").empty();
        //    $("#progress_div").hide();
        $('.operation').show();
        $('.done').hide();
    }

    // ----------- DELETE ALBUM FUNCTION -------

   
    // ----------- DELETE ALBUM FUNCTION END-------
</script>