@extends('layouts.app')

@section('styles')

@endsection

@section('content')

                            <!-- PAGE-HEADER -->
                            <div class="page-header">
                                <div class="page-leftheader">
                                    <h4 class="page-title mb-0 text-primary">File Manager</h4>
                                </div>
                                <div class="page-rightheader">
                                    <button class="btn btn-outline-primary"><i class="fe fe-download me-2"></i>
                                        Import</button>
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-primary btn-pill dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                                            <i class="fa fa-calendar me-2"></i>Search By Date
                                        </button>
                                        <div class="dropdown-menu">
                                            <a class="dropdown-item" href="javascript:void(0);">Today</a>
                                            <a class="dropdown-item" href="javascript:void(0);">Yesterday</a>
                                            <a class="dropdown-item active" href="javascript:void(0);">Last 7 days</a>
                                            <a class="dropdown-item" href="javascript:void(0);">Last 30 days</a>
                                            <a class="dropdown-item" href="javascript:void(0);">Last Month</a>
                                            <a class="dropdown-item" href="javascript:void(0);">Last 6 months</a>
                                            <a class="dropdown-item" href="javascript:void(0);">Last year</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- PAGE-HEADER END -->
                            
                            <!-- ROW -->
                            <div class="row">
                                <div class="col-xl-3">
                                    <div class="card">
                                        <div class="card-body text-center">
                                            <button class="btn btn-primary w-100"><i class="fa fa-plus me-2"></i> Create
                                                Folder</button>
                                        </div>
                                        <div class="card-body py-3 px-0">
                                            <div class="list-group list-group-transparent mb-0 file-manger">
                                                <a href="javascript:void(0);"
                                                    class="list-group-item list-group-item-action d-flex align-items-center px-0">
                                                    <i class="fe fe-image fs-18 me-2"></i>Images
                                                </a>
                                                <a href="javascript:void(0);"
                                                    class="list-group-item list-group-item-action d-flex align-items-center px-0">
                                                    <i class="fe fe-video fs-18 me-2"></i>Videos
                                                </a>
                                                <a href="javascript:void(0);"
                                                    class="list-group-item list-group-item-action d-flex align-items-center px-0">
                                                    <i class="fe fe-file-text fs-18 me-2"></i> Docs
                                                </a>
                                                <a href="javascript:void(0);"
                                                    class="list-group-item list-group-item-action d-flex align-items-center px-0">
                                                    <i class="fe fe-music fs-18 me-2"></i> Music
                                                </a>
                                                <a href="javascript:void(0);"
                                                    class="list-group-item list-group-item-action d-flex align-items-center px-0">
                                                    <i class="fe fe-smartphone fs-18 me-2"></i> APKs
                                                </a>
                                                <a href="javascript:void(0);"
                                                    class="list-group-item list-group-item-action d-flex align-items-center px-0">
                                                    <i class="fe fe-download fs-18 me-2"></i> Downloads
                                                </a>
                                                <a href="javascript:void(0);"
                                                    class="list-group-item list-group-item-action d-flex align-items-center px-0">
                                                    <i class="fe fe-grid fs-18 me-2"></i> More
                                                </a>
                                                <a href="javascript:void(0);"
                                                    class="list-group-item list-group-item-action d-flex align-items-center px-0">
                                                    <i class="fe fe-lock fs-18 me-2"></i> Hiddent Files
                                                </a>
                                            </div>
                                        </div>
                                        <div class="card-body py-3 px-2">
                                            <div class="list-group list-group-transparent mb-0 mail-inbox">
                                                <a href="javascript:void(0);"
                                                    class="list-group-item list-group-item-action d-flex align-items-center px-0 py-2">
                                                    <span class="w-3 h-3 brround bg-primary me-2"></span>Remote Control
                                                </a>
                                                <a href="javascript:void(0);"
                                                    class="list-group-item list-group-item-action d-flex align-items-center px-0 py-2">
                                                    <span class="w-3 h-3 brround bg-secondary me-2"></span>Google Drive
                                                </a>
                                                <a href="javascript:void(0);"
                                                    class="list-group-item list-group-item-action d-flex align-items-center px-0 py-2">
                                                    <span class="w-3 h-3 brround bg-success me-2"></span>FTP Files
                                                </a>
                                                <a href="javascript:void(0);"
                                                    class="list-group-item list-group-item-action d-flex align-items-center px-0 py-2">
                                                    <span class="w-3 h-3 brround bg-info me-2"></span>Transfer files
                                                </a>
                                                <a href="javascript:void(0);"
                                                    class="list-group-item list-group-item-action d-flex align-items-center px-0 py-2">
                                                    <span class="w-3 h-3 brround bg-warning me-2"></span>Deep Clean
                                                </a>
                                                <a href="javascript:void(0);"
                                                    class="list-group-item list-group-item-action d-flex align-items-center px-0 py-2">
                                                    <span class="w-3 h-3 brround bg-danger me-2"></span>Favourities
                                                </a>
                                                <a href="javascript:void(0);"
                                                    class="list-group-item list-group-item-action d-flex align-items-center px-0 py-2">
                                                    <span class="w-3 h-3 brround bg-primary me-2"></span>Settings
                                                </a>
                                            </div>
                                        </div>
                                        <div class="card-body d-flex">
                                            <div class="row">
                                                <div class="col-auto">
                                                    <div class="chart-circle chart-circle-sm chart-circle ms-0 mt-1"
                                                            data-value="0.85" data-thickness="5" data-color="#38cb89">
                                                        <div class="mx-auto chart-circle-value text-center fs-14">85%</div>
                                                    </div>
                                                </div>
                                                <div class="col-auto">
                                                    <div class="mt-2">
                                                        <h5 class="mb-1 font-weight-bold">Storage</h5>
                                                        <p class="mb-0"><span class="text-muted">13.65gb</span> / <span
                                                                class="text-muted">16gb</span></p>
                                                        <button class="btn btn-xs btn-light mt-2">
                                                            Upgrade Storage
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xl-9">
                                    <div class="row">
                                        <div class="col-6">
                                            <div class="fs-20 mb-4">
                                                All Files
                                            </div>
                                        </div>
                                        <div class="col-6 col-auto">
                                            <div class="form-group">
                                                <div class="input-icon">
                                                    <span class="input-icon-addon">
                                                        <i class="fe fe-search"></i>
                                                    </span>
                                                    <input type="text" class="form-control" placeholder="Search Files">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="text-muted mb-2 fs-16">Recent Files</div>
                                    <div class="row">
                                        <div class="col-xxl-3 col-md-4">
                                            <div class="card">
                                                <div class="card-body">
                                                    <div class="fs-16 mb-1"><i class="fe fe-image fs-18 me-2"></i>Image
                                                        <div class="float-end fs-13 text-muted">14.2 mb</div>
                                                    </div>
                                                    <div class="text-muted fs-12">Last Opened 32 mins ago</div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-xxl-3 col-md-4">
                                            <div class="card">
                                                <div class="card-body">
                                                    <div class="fs-16 mb-1"><i
                                                            class="fe fe-file-text fs-18 me-2"></i>Document
                                                        <div class="float-end fs-13 text-muted">34 mb</div>
                                                    </div>
                                                    <div class="text-muted fs-12">Last Opened 2 hrs ago</div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-xxl-3 col-md-4">
                                            <div class="card">
                                                <div class="card-body">
                                                    <div class="fs-16 mb-1"><i class="fe fe-smartphone fs-18 me-2"></i>APK
                                                        <div class="float-end fs-13 text-muted">550 mb</div>
                                                    </div>
                                                    <div class="text-muted fs-12">Last Opened 22 mins ago ago</div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-xxl-3 col-md-4">
                                            <div class="card">
                                                <div class="card-body">
                                                    <div class="fs-16 mb-1"><i class="fe fe-image fs-18 me-2"></i>Image
                                                        <div class="float-end fs-13 text-muted">10.8 mb</div>
                                                    </div>
                                                    <div class="text-muted fs-12">Last Opened 12secs ago</div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-xxl-3 col-md-4">
                                            <div class="card">
                                                <div class="card-body">
                                                    <div class="fs-16 mb-1"><i class="fe fe-video fs-18 me-2"></i>Video
                                                        <div class="float-end fs-13 text-muted">212 mb</div>
                                                    </div>
                                                    <div class="text-muted fs-12">Last Opened 22 hrs ago</div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-xxl-3 col-md-4">
                                            <div class="card">
                                                <div class="card-body">
                                                    <div class="fs-16 mb-1"><i class="fe fe-smartphone fs-18 me-2"></i>Apk
                                                        <div class="float-end fs-13 text-muted">1.5 Gb</div>
                                                    </div>
                                                    <div class="text-muted fs-12">Last Opened 2 hrs ago</div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-xxl-3 col-md-4">
                                            <div class="card">
                                                <div class="card-body">
                                                    <div class="fs-16 mb-1"><i class="fe fe-music fs-18 me-2"></i>Music
                                                        <div class="float-end fs-13 text-muted">15 mb</div>
                                                    </div>
                                                    <div class="text-muted fs-12">Last Opened 25 mins ago</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="text-muted mb-2 fs-16">Folders</div>
                                    <div class="row">
                                        <div class="col-xl-3 col-md-4 col-sm-6">
                                            <div class="card border p-0 shadow-none">
                                                <div class="d-flex align-items-center px-4 pt-2">
                                                    <label class="custom-control custom-checkbox">
                                                        <input type="checkbox" class="custom-control-input"
                                                            name="example-checkbox2" value="option2">
                                                        <span class="custom-control-label"></span>
                                                    </label>
                                                    <div class="float-end ms-auto">
                                                        <a href="javascript:void(0);" class="option-dots"
                                                            data-bs-toggle="dropdown" aria-haspopup="true"
                                                            aria-expanded="false"><i class="fe fe-more-vertical"></i></a>
                                                        <div class="dropdown-menu dropdown-menu-start">
                                                            <a class="dropdown-item" href="javascript:void(0);"><i
                                                                    class="fe fe-edit me-2"></i> Edit</a>
                                                            <a class="dropdown-item" href="javascript:void(0);"><i
                                                                    class="fe fe-share me-2"></i> Share</a>
                                                            <a class="dropdown-item" href="javascript:void(0);"><i
                                                                    class="fe fe-download me-2"></i> Download</a>
                                                            <a class="dropdown-item" href="javascript:void(0);"><i
                                                                    class="fe fe-trash me-2"></i> Delete</a>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="card-body pt-0 text-center">
                                                    <div class="file-manger-icon">
                                                        <img src="{{asset('build/assets/images/pngs/2.png')}}" alt="img"
                                                            class="br-7">
                                                    </div>
                                                    <h6 class="mb-1 font-weight-semibold mt-4">document.pdf</h6>
                                                    <span class="text-muted">23kb</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-xl-3 col-md-4 col-sm-6">
                                            <div class="card border p-0 shadow-none">
                                                <div class="d-flex align-items-center px-4 pt-2">
                                                    <label class="custom-control custom-checkbox">
                                                        <input type="checkbox" class="custom-control-input"
                                                            name="example-checkbox2" value="option2">
                                                        <span class="custom-control-label"></span>
                                                    </label>
                                                    <div class="float-end ms-auto">
                                                        <a href="javascript:void(0);" class="option-dots"
                                                            data-bs-toggle="dropdown" aria-haspopup="true"
                                                            aria-expanded="false"><i class="fe fe-more-vertical"></i></a>
                                                        <div class="dropdown-menu dropdown-menu-start">
                                                            <a class="dropdown-item" href="javascript:void(0);"><i
                                                                    class="fe fe-edit me-2"></i> Edit</a>
                                                            <a class="dropdown-item" href="javascript:void(0);"><i
                                                                    class="fe fe-share me-2"></i> Share</a>
                                                            <a class="dropdown-item" href="javascript:void(0);"><i
                                                                    class="fe fe-download me-2"></i> Download</a>
                                                            <a class="dropdown-item" href="javascript:void(0);"><i
                                                                    class="fe fe-trash me-2"></i> Delete</a>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="card-body pt-0 text-center">
                                                    <div class="file-manger-icon">
                                                        <img src="{{asset('build/assets/images/pngs/4.png')}}" alt="img"
                                                            class="br-7">
                                                    </div>
                                                    <h6 class="mb-1 font-weight-semibold mt-4">Images</h6>
                                                    <span class="text-muted">1.23gb</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-xl-3 col-md-4 col-sm-6">
                                            <div class="card border p-0 shadow-none">
                                                <div class="d-flex align-items-center px-4 pt-2">
                                                    <label class="custom-control custom-checkbox">
                                                        <input type="checkbox" class="custom-control-input"
                                                            name="example-checkbox2" value="option2">
                                                        <span class="custom-control-label"></span>
                                                    </label>
                                                    <div class="float-end ms-auto">
                                                        <a href="javascript:void(0);" class="option-dots"
                                                            data-bs-toggle="dropdown" aria-haspopup="true"
                                                            aria-expanded="false"><i class="fe fe-more-vertical"></i></a>
                                                        <div class="dropdown-menu dropdown-menu-start">
                                                            <a class="dropdown-item" href="javascript:void(0);"><i
                                                                    class="fe fe-edit me-2"></i> Edit</a>
                                                            <a class="dropdown-item" href="javascript:void(0);"><i
                                                                    class="fe fe-share me-2"></i> Share</a>
                                                            <a class="dropdown-item" href="javascript:void(0);"><i
                                                                    class="fe fe-download me-2"></i> Download</a>
                                                            <a class="dropdown-item" href="javascript:void(0);"><i
                                                                    class="fe fe-trash me-2"></i> Delete</a>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="card-body pt-0 text-center">
                                                    <div class="file-manger-icon">
                                                        <img src="{{asset('build/assets/images/pngs/4.png')}}" alt="img"
                                                            class="br-7">
                                                    </div>
                                                    <h6 class="mb-1 font-weight-semibold mt-4">Music</h6>
                                                    <span class="text-muted">897mb</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-xl-3 col-md-4 col-sm-6">
                                            <div class="card border p-0 shadow-none">
                                                <div class="d-flex align-items-center px-4 pt-2">
                                                    <label class="custom-control custom-checkbox">
                                                        <input type="checkbox" class="custom-control-input"
                                                            name="example-checkbox2" value="option2">
                                                        <span class="custom-control-label"></span>
                                                    </label>
                                                    <div class="float-end ms-auto">
                                                        <a href="javascript:void(0);" class="option-dots"
                                                            data-bs-toggle="dropdown" aria-haspopup="true"
                                                            aria-expanded="false"><i class="fe fe-more-vertical"></i></a>
                                                        <div class="dropdown-menu dropdown-menu-start">
                                                            <a class="dropdown-item" href="javascript:void(0);"><i
                                                                    class="fe fe-edit me-2"></i> Edit</a>
                                                            <a class="dropdown-item" href="javascript:void(0);"><i
                                                                    class="fe fe-share me-2"></i> Share</a>
                                                            <a class="dropdown-item" href="javascript:void(0);"><i
                                                                    class="fe fe-download me-2"></i> Download</a>
                                                            <a class="dropdown-item" href="javascript:void(0);"><i
                                                                    class="fe fe-trash me-2"></i> Delete</a>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="card-body pt-0 text-center">
                                                    <div class="file-manger-icon">
                                                        <img src="{{asset('build/assets/images/pngs/4.png')}}" alt="img"
                                                            class="br-7">
                                                    </div>
                                                    <h6 class="mb-1 font-weight-semibold mt-4">Downloads</h6>
                                                    <span class="text-muted">453kb</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-xl-3 col-md-4 col-sm-6">
                                            <div class="card border p-0 shadow-none">
                                                <div class="d-flex align-items-center px-4 pt-2">
                                                    <label class="custom-control custom-checkbox">
                                                        <input type="checkbox" class="custom-control-input"
                                                            name="example-checkbox2" value="option2">
                                                        <span class="custom-control-label"></span>
                                                    </label>
                                                    <div class="float-end ms-auto">
                                                        <a href="javascript:void(0);" class="option-dots"
                                                            data-bs-toggle="dropdown" aria-haspopup="true"
                                                            aria-expanded="false"><i class="fe fe-more-vertical"></i></a>
                                                        <div class="dropdown-menu dropdown-menu-start">
                                                            <a class="dropdown-item" href="javascript:void(0);"><i
                                                                    class="fe fe-edit me-2"></i> Edit</a>
                                                            <a class="dropdown-item" href="javascript:void(0);"><i
                                                                    class="fe fe-share me-2"></i> Share</a>
                                                            <a class="dropdown-item" href="javascript:void(0);"><i
                                                                    class="fe fe-download me-2"></i> Download</a>
                                                            <a class="dropdown-item" href="javascript:void(0);"><i
                                                                    class="fe fe-trash me-2"></i> Delete</a>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="card-body pt-0 text-center">
                                                    <div class="file-manger-icon">
                                                        <img src="{{asset('build/assets/images/pngs/4.png')}}" alt="img"
                                                            class="br-7">
                                                    </div>
                                                    <h6 class="mb-1 font-weight-semibold mt-4">Vidoes</h6>
                                                    <span class="text-muted">1.5gb</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-xl-3 col-md-4 col-sm-6">
                                            <div class="card border p-0 shadow-none">
                                                <div class="d-flex align-items-center px-4 pt-2">
                                                    <label class="custom-control custom-checkbox">
                                                        <input type="checkbox" class="custom-control-input"
                                                            name="example-checkbox2" value="option2">
                                                        <span class="custom-control-label"></span>
                                                    </label>
                                                    <div class="float-end ms-auto">
                                                        <a href="javascript:void(0);" class="option-dots"
                                                            data-bs-toggle="dropdown" aria-haspopup="true"
                                                            aria-expanded="false"><i class="fe fe-more-vertical"></i></a>
                                                        <div class="dropdown-menu dropdown-menu-start">
                                                            <a class="dropdown-item" href="javascript:void(0);"><i
                                                                    class="fe fe-edit me-2"></i> Edit</a>
                                                            <a class="dropdown-item" href="javascript:void(0);"><i
                                                                    class="fe fe-share me-2"></i> Share</a>
                                                            <a class="dropdown-item" href="javascript:void(0);"><i
                                                                    class="fe fe-download me-2"></i> Download</a>
                                                            <a class="dropdown-item" href="javascript:void(0);"><i
                                                                    class="fe fe-trash me-2"></i> Delete</a>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="card-body pt-0 text-center">
                                                    <div class="file-manger-icon">
                                                        <img src="{{asset('build/assets/images/pngs/4.png')}}" alt="img"
                                                            class="br-7">
                                                    </div>
                                                    <h6 class="mb-1 font-weight-semibold mt-4">Documents</h6>
                                                    <span class="text-muted">234mb</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-xl-3 col-md-4 col-sm-6">
                                            <div class="card border p-0 shadow-none">
                                                <div class="d-flex align-items-center px-4 pt-2">
                                                    <label class="custom-control custom-checkbox">
                                                        <input type="checkbox" class="custom-control-input"
                                                            name="example-checkbox2" value="option2">
                                                        <span class="custom-control-label"></span>
                                                    </label>
                                                    <div class="float-end ms-auto">
                                                        <a href="javascript:void(0);" class="option-dots"
                                                            data-bs-toggle="dropdown" aria-haspopup="true"
                                                            aria-expanded="false"><i class="fe fe-more-vertical"></i></a>
                                                        <div class="dropdown-menu dropdown-menu-start">
                                                            <a class="dropdown-item" href="javascript:void(0);"><i
                                                                    class="fe fe-edit me-2"></i> Edit</a>
                                                            <a class="dropdown-item" href="javascript:void(0);"><i
                                                                    class="fe fe-share me-2"></i> Share</a>
                                                            <a class="dropdown-item" href="javascript:void(0);"><i
                                                                    class="fe fe-download me-2"></i> Download</a>
                                                            <a class="dropdown-item" href="javascript:void(0);"><i
                                                                    class="fe fe-trash me-2"></i> Delete</a>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="card-body pt-0 text-center">
                                                    <div class="file-manger-icon">
                                                        <i class="fa fa-music text-secondary"></i>
                                                    </div>
                                                    <h6 class="mb-1 font-weight-semibold mt-4">topmp4song.mp4</h6>
                                                    <span class="text-muted">4kb</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-xl-3 col-md-4 col-sm-6">
                                            <div class="card border p-0 shadow-none">
                                                <div class="d-flex align-items-center px-4 pt-2">
                                                    <label class="custom-control custom-checkbox">
                                                        <input type="checkbox" class="custom-control-input"
                                                            name="example-checkbox2" value="option2">
                                                        <span class="custom-control-label"></span>
                                                    </label>
                                                    <div class="float-end ms-auto">
                                                        <a href="javascript:void(0);" class="option-dots"
                                                            data-bs-toggle="dropdown" aria-haspopup="true"
                                                            aria-expanded="false"><i class="fe fe-more-vertical"></i></a>
                                                        <div class="dropdown-menu dropdown-menu-start">
                                                            <a class="dropdown-item" href="javascript:void(0);"><i
                                                                    class="fe fe-edit me-2"></i> Edit</a>
                                                            <a class="dropdown-item" href="javascript:void(0);"><i
                                                                    class="fe fe-share me-2"></i> Share</a>
                                                            <a class="dropdown-item" href="javascript:void(0);"><i
                                                                    class="fe fe-download me-2"></i> Download</a>
                                                            <a class="dropdown-item" href="javascript:void(0);"><i
                                                                    class="fe fe-trash me-2"></i> Delete</a>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="card-body pt-0 text-center">
                                                    <div class="file-manger-icon">
                                                        <img src="{{asset('build/assets/images/media/1.jpg')}}" alt="img" class="br-7">
                                                    </div>
                                                    <h6 class="mb-1 font-weight-semibold mt-4">image.jpg</h6>
                                                    <span class="text-muted">65kb</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-xl-3 col-md-4 col-sm-6">
                                            <div class="card border p-0 shadow-none">
                                                <div class="d-flex align-items-center px-4 pt-2">
                                                    <label class="custom-control custom-checkbox">
                                                        <input type="checkbox" class="custom-control-input"
                                                            name="example-checkbox2" value="option2">
                                                        <span class="custom-control-label"></span>
                                                    </label>
                                                    <div class="float-end ms-auto">
                                                        <a href="javascript:void(0);" class="option-dots"
                                                            data-bs-toggle="dropdown" aria-haspopup="true"
                                                            aria-expanded="false"><i class="fe fe-more-vertical"></i></a>
                                                        <div class="dropdown-menu dropdown-menu-start">
                                                            <a class="dropdown-item" href="javascript:void(0);"><i
                                                                    class="fe fe-edit me-2"></i> Edit</a>
                                                            <a class="dropdown-item" href="javascript:void(0);"><i
                                                                    class="fe fe-share me-2"></i> Share</a>
                                                            <a class="dropdown-item" href="javascript:void(0);"><i
                                                                    class="fe fe-download me-2"></i> Download</a>
                                                            <a class="dropdown-item" href="javascript:void(0);"><i
                                                                    class="fe fe-trash me-2"></i> Delete</a>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="card-body pt-0 text-center">
                                                    <div class="file-manger-icon">
                                                        <img src="{{asset('build/assets/images/pngs/4.png')}}" alt="img"
                                                            class="br-7">
                                                    </div>
                                                    <h6 class="mb-1 font-weight-semibold mt-4">File documents</h6>
                                                    <span class="text-muted">1.23gb</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-xl-3 col-md-4 col-sm-6">
                                            <div class="card border p-0 shadow-none">
                                                <div class="d-flex align-items-center px-4 pt-2">
                                                    <label class="custom-control custom-checkbox">
                                                        <input type="checkbox" class="custom-control-input"
                                                            name="example-checkbox2" value="option2">
                                                        <span class="custom-control-label"></span>
                                                    </label>
                                                    <div class="float-end ms-auto">
                                                        <a href="javascript:void(0);" class="option-dots"
                                                            data-bs-toggle="dropdown" aria-haspopup="true"
                                                            aria-expanded="false"><i class="fe fe-more-vertical"></i></a>
                                                        <div class="dropdown-menu dropdown-menu-start">
                                                            <a class="dropdown-item" href="javascript:void(0);"><i
                                                                    class="fe fe-edit me-2"></i> Edit</a>
                                                            <a class="dropdown-item" href="javascript:void(0);"><i
                                                                    class="fe fe-share me-2"></i> Share</a>
                                                            <a class="dropdown-item" href="javascript:void(0);"><i
                                                                    class="fe fe-download me-2"></i> Download</a>
                                                            <a class="dropdown-item" href="javascript:void(0);"><i
                                                                    class="fe fe-trash me-2"></i> Delete</a>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="card-body pt-0 text-center">
                                                    <div class="file-manger-icon">
                                                        <img src="{{asset('build/assets/images/pngs/4.png')}}" alt="img"
                                                            class="br-7">
                                                    </div>
                                                    <h6 class="mb-1 font-weight-semibold mt-4"> New Folder</h6>
                                                    <span class="text-muted">897mb</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-xl-3 col-md-4 col-sm-6">
                                            <div class="card border p-0 shadow-none">
                                                <div class="d-flex align-items-center px-4 pt-2">
                                                    <label class="custom-control custom-checkbox">
                                                        <input type="checkbox" class="custom-control-input"
                                                            name="example-checkbox2" value="option2">
                                                        <span class="custom-control-label"></span>
                                                    </label>
                                                    <div class="float-end ms-auto">
                                                        <a href="javascript:void(0);" class="option-dots"
                                                            data-bs-toggle="dropdown" aria-haspopup="true"
                                                            aria-expanded="false"><i class="fe fe-more-vertical"></i></a>
                                                        <div class="dropdown-menu dropdown-menu-start">
                                                            <a class="dropdown-item" href="javascript:void(0);"><i
                                                                    class="fe fe-edit me-2"></i> Edit</a>
                                                            <a class="dropdown-item" href="javascript:void(0);"><i
                                                                    class="fe fe-share me-2"></i> Share</a>
                                                            <a class="dropdown-item" href="javascript:void(0);"><i
                                                                    class="fe fe-download me-2"></i> Download</a>
                                                            <a class="dropdown-item" href="javascript:void(0);"><i
                                                                    class="fe fe-trash me-2"></i> Delete</a>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="card-body pt-0 text-center">
                                                    <div class="file-manger-icon">
                                                        <img src="{{asset('build/assets/images/pngs/6.png')}}" alt="img"
                                                            class="br-7">
                                                    </div>
                                                    <h6 class="mb-1 font-weight-semibold mt-4">Word document</h6>
                                                    <span class="text-muted">23kb</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-xl-3 col-md-4 col-sm-6">
                                            <div class="card border p-0 shadow-none">
                                                <div class="d-flex align-items-center px-4 pt-2">
                                                    <label class="custom-control custom-checkbox">
                                                        <input type="checkbox" class="custom-control-input"
                                                            name="example-checkbox2" value="option2">
                                                        <span class="custom-control-label"></span>
                                                    </label>
                                                    <div class="float-end ms-auto">
                                                        <a href="javascript:void(0);" class="option-dots"
                                                            data-bs-toggle="dropdown" aria-haspopup="true"
                                                            aria-expanded="false"><i class="fe fe-more-vertical"></i></a>
                                                        <div class="dropdown-menu dropdown-menu-start">
                                                            <a class="dropdown-item" href="javascript:void(0);"><i
                                                                    class="fe fe-edit me-2"></i> Edit</a>
                                                            <a class="dropdown-item" href="javascript:void(0);"><i
                                                                    class="fe fe-share me-2"></i> Share</a>
                                                            <a class="dropdown-item" href="javascript:void(0);"><i
                                                                    class="fe fe-download me-2"></i> Download</a>
                                                            <a class="dropdown-item" href="javascript:void(0);"><i
                                                                    class="fe fe-trash me-2"></i> Delete</a>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="card-body pt-0 text-center">
                                                    <div class="file-manger-icon">
                                                        <img src="{{asset('build/assets/images/pngs/2.png')}}" alt="img"
                                                            class="br-7">
                                                    </div>
                                                    <h6 class="mb-1 font-weight-semibold mt-4">document.pdf</h6>
                                                    <span class="text-muted">23kb</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <ul class="pagination float-end mb-4">
                                        <li class="page-item page-prev disabled">
                                            <a class="page-link" href="javascript:void(0);" tabindex="-1">Prev</a>
                                        </li>
                                        <li class="page-item active"><a class="page-link" href="javascript:void(0);">1</a>
                                        </li>
                                        <li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
                                        <li class="page-item"><a class="page-link" href="javascript:void(0);">3</a></li>
                                        <li class="page-item"><a class="page-link" href="javascript:void(0);">4</a></li>
                                        <li class="page-item"><a class="page-link" href="javascript:void(0);">5</a></li>
                                        <li class="page-item page-next">
                                            <a class="page-link" href="javascript:void(0);">Next</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <!-- END ROW -->

@endsection

@section('scripts')

        <!-- CIRCLE-PROGRESS JS -->
        <script src="{{asset('build/assets/plugins/circle-progress/circle-progress.min.js')}}"></script>

@endsection