@extends('admin.layouts.app')
@section('content')
<section class="forms">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12 addlink">
                @if(checkAdminHasAccess(request()->segment(2),"Add"))
                <a href="{!! route('admin.'.request()->segment(2).'.add') !!}"  class="btn btn-primary mb-1">Add New</a>
                @endif
            </div>
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body pb-0">
                        <form id="frmMediaFilter">
                            <!-- <h5>Filter</h5> -->
                            <div class="row">
                                <div class="col-sm-3 mb-4">
                                    <label class="form-control-label">Filter By Keyword</label>
                                    <input type="text" class="form-control" name="kwd" id="kwd" value="{!! request()->get('kwd') !!}">
                                </div>
                                <div class="col-sm-3 mb-4">
                                    <label class="form-control-label">Filter By Type</label>
                                    <select class="form-control" name="type" id="type">
                                        <option value="">All</option>
                                        @foreach(['Image','Video','Document'] as $type)
                                        <option value="{!! $type !!}" @if(request()->get('type') == $type) selected @endif>{!! $type !!}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-sm-3 mb-4">
                                    <label class="form-control-label">Sort By</label>
                                    <select class="form-control" name="sb" id="sb">
                                        <option value="">All</option>
                                        <option value="title@asc" @if(request()->get('sb') == 'title@asc') selected @endif>Title : Ascending</option>
                                        <option value="title@desc" @if(request()->get('sb') == 'title@desc') selected @endif>Title : Descending</option>
                                        <option value="created_at@asc" @if(request()->get('sb') == 'created_at@asc') selected @endif>Created Date : Ascending</option>
                                        <option value="created_at@desc" @if(request()->get('sb') == 'created_at@desc') selected @endif>Created Date : Descending</option>
                                    </select>
                                </div>
                                <div class="col-sm-3 mb-4">
                                    <label class="form-control-label">&nbsp;</label>
                                    <button type="submit" class="btn btn-primary mb-1" style="display:block">Filter</button>
                                </div>
                            </div>
                        </form>
                        @if($medias->total() > 0)
                        <div class="row">
                            @foreach($medias as $media)
                            <div class="col-sm-3 mb-4">
                                <div class="media-card">
                                    <div class="media-img">
                                        @if($media->type == "Image")
                                        <img src="{!! $media->url !!}" class="img-fluid video_preview">
                                        @elseif($media->type == "Video")
                                            @if($media->upload_status == 'processing')
                                                <div class="video_preview video-processing d-flex align-items-center justify-content-center flex-column" style="background:#f8f9fa; border:1px solid #ddd; height:100%; width:100%;">
                                                    <i class="fa fa-spinner fa-spin fa-2x mb-2" style="color:#007bff;"></i>
                                                    <span style="font-size:12px; color:#666;">Compressing video...Please wait!</span>
                                                </div>
                                            @elseif($media->upload_status == 'failed')
                                                <div class="video_preview d-flex align-items-center justify-content-center flex-column" style="background:#fff5f5; border:1px solid #feb2b2; height:100%; width:100%;">
                                                    <i class="fa fa-exclamation-triangle fa-2x mb-2" style="color:#e53e3e;"></i>
                                                    <span style="font-size:12px; color:#c53030;">Failed to Process</span>
                                                </div>
                                            @else
                                                <video controls loop class="video_preview" playsinline>
                                                    <source src="{!! $media->url !!}" type="video/mp4">
                                                    <source src="{!! $media->url !!}" type="video/ogg">
                                                    Your browser does not support the video tag.
                                                </video>
                                            @endif
                                        @elseif($media->type == "Audio")
                                        <audio controls>
                                            <source src="{!! $media->url !!}" type="audio/ogg">
                                            <source src="{!! $media->url !!}" type="audio/mpeg">
                                            Your browser does not support the audio element.
                                        </audio>
                                        @elseif($media->type == "Document")
                                        <a href="{!! $media->url !!}" target="_blank" style="height: 100%"><img src="{!! asset('assets/backend/images/pdf.png') !!}" class="img-fluid video_preview"></a>
                                        @endif
                                    </div>
                                    <div class="content">
                                        <h4>{!! $media->title !!}</h4>
                                        <div class="futr-links">
                                            @php
                                            if($media->is_active) {
                                                $statusBtnCls = 'fa fa-check-circle blue';
                                            } else {
                                                $statusBtnCls = 'fa fa-times-circle red';
                                            }

                                            if(checkAdminHasAccess(request()->segment(2),"Update")) {
                                                $status = '<a href="javascript:void(0);" onclick="updateStatus('.$media->id.',\'\',\'\')" class="btn action-btn" role="button" aria-pressed="true">';
                                            } else {
                                                $status = '<a href="javascript:void(0);" class="btn action-btn" role="button" aria-pressed="true">';
                                            }
                                            $status .= '<i class="'.$statusBtnCls.'" aria-hidden="true"></i>';
                                            $status .= '</a>';
                                            echo $status;
                                            @endphp

                                            <a href="{!! route('admin.'.request()->segment(2).'.view',$media->id) !!}" class="btn action-btn" role="button" aria-pressed="true" title="View">
                                                <i class="fa fa-eye green" aria-hidden="true"></i>
                                            </a>
                                            <a href="{!! route('admin.'.request()->segment(2).'.edit',$media->id) !!}" class="btn action-btn" role="button" aria-pressed="true" title="Edit">
                                                <i class="fa fa-pen blue" aria-hidden="true"></i>
                                            </a>
                                            <a href="javascript:void(0);" onclick="deleteData('{!! $media->id !!}','','')" class="btn action-btn" title="Delete" role="button" aria-pressed="true">
                                                <i class="fa fa-trash red" aria-hidden="true"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                        <div class="row">
                            {!! $medias->withQueryString()->links() !!}
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@section('js')
<script src="{!! asset('assets/backend/js/pages/'.request()->segment(2).'.js') !!}?v={!! time() !!}"></script>
@stop
@endsection