@extends('index')
@section('title', Helper::getSiteTitle($title))

@section('content')
<div class="row">
    <div class="col-12">
        <div class="page-title-box">
            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">{{ __('Dashboard') }}</a></li>
                    <li class="breadcrumb-item active">{{ __($title) }}</li>
                </ol>
            </div>
            <h4 class="page-title">{{ __($title) }}</h4>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-12">
        <div class="card-box">
            <div class="row">
                <div class="col-lg-12">
                    <div class="mt-3 mt-lg-0">
                        <a href="javascript:void(0)" class="btn btn-info waves-effect waves-light" data-toggle="modal" data-target="#filter-modal"><i class="mdi mdi-plus-circle mr-1"></i> Add New</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    @if(!$files->isEmpty())
        @foreach($files as $file)
            <div class="col-md-3 col-md-3 col-xl-2">
                <div class="card-box product-box">

                    <input type="hidden" name="url" value="{{ $file->url }}" class="copy-to-clipboard">

                    <div class="product-action">
                        <a href="javascript: void(0);" class="btn btn-success btn-xs waves-effect waves-light click-to-copy-to-clipboard"><i class="mdi mdi-content-copy"></i></a>
                        <a href="javascript: void(0);" class="btn btn-danger btn-xs waves-effect waves-light remove-item-button-redirect ml-1" data-id="{{ $file->id }}"><i class="mdi mdi-close"></i></a>
                    </div>

                    <div class="bg-light">
                        <img src="{{ $file->url }}" alt="product-pic" class="img-fluid" />
                    </div>

                    <div class="product-info">
                        <div class="row align-items-center">
                            <div class="col">
                                <h5 class="font-16 mt-0 sp-line-1"><a href="ecommerce-product-detail.html" class="text-dark">{{ $file->original_name }}</a> </h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    @else
        <div class="col-md-12 col-xl-12">
            <div class="card-box product-box">
                <p>No file found</p>
            </div>
        </div>
    @endif
</div>

<div class="row">
    <div class="col-12">
        {!! $files->links('vendor.pagination.bootstrap-4') !!}
    </div>
</div>

<div id="filter-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Add New File</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <form class="submit-form-ajax" action="{{ route('file-manager-create') }}" method="post" enctype="multipart/form-data">
                <div class="modal-body p-4">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="field-3" class="control-label">File</label>
                                <input type="file" class="form-control" id="field-3" placeholder="File" name="files[]" multiple="" required="">
                            </div>
                        </div>
                        <div class="col-12 file-uploader d-none">
                            <label for="username">File Upload</label>
                            <div class="progress incr-height">
                                <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-info waves-effect waves-light form-submit-button">
                        <span class="btn-label"><i class="mdi mdi-plus"></i><span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span></span>
                        {{ __('Add') }}
                    </button>
                    <button class="btn btn-info waves-effect waves-light m-1 processing-button" type="button" disabled="">
                        <span class="spinner-border spinner-border-sm mr-1" role="status" aria-hidden="true"></span> {{ __('Processing') }}...
                    </button>
                    <button type="button" class="btn btn-secondary waves-effect" data-dismiss="modal">Close</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('css-lib')
<meta name="remove-url" content="{{ route('file-manager-remove') }}">
<link href="{{ asset('libs/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" type="text/css" />
@endsection

@section('js-lib')
<script src="{{ asset('libs/sweetalert2/sweetalert2.min.js') }}"></script>
@endsection