@extends('admin_html.layouts.main')

@section('content')

    <div class="container-fluid">
                <div class="row ">
                    <div class="col-lg-12">
                        <div class="card media-manager">
                            <div class="card-header">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="card-tools">
                                        <button type="button" class="btn btn-tool">
                                            <a class="btn btn-success btn-sm" data-bs-toggle="modal"
                                                data-bs-target="#uploadmodal">
                                                <i class="mdi mdi-plus"></i> <i class="fa fa-upload"></i> Upload
                                            </a>
                                        </button>
                                        <button type="button" class="btn btn-tool">
                                            <a class="btn btn-primary btn-sm" data-bs-toggle="modal"
                                                data-bs-target="#itemmodal">
                                                <i class="mdi mdi-plus"></i> <i class="fa fa-folder"></i> Create Folder
                                            </a>
                                        </button>
                                    </div>
                                    <div>
                                        <input type="text" class="form-control d-inline-block" placeholder="Search..."
                                            style="width: 200px;">
                                        <button class="btn btn-primary ms-2">Search</button>
                                        <button class="btn btn-outline-secondary ms-2">Reset</button>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body ">
                                <div class="col-12 breadcrump-mediamanager">
                                    <div class="breadcrumb">

                                        <ul class="list-unstyled d-flex flex-wrap">
                                            <li><a href="#"><span class="fa fa-home"> </span></a> </li>
                                            <li> → folder Name</li>
                                        </ul>


                                    </div>
                                </div>
                                <div class="row mediadata-container">
                                    <div class="col-md-12">
                                        <div class="mediadata">
                                            <div class="row g-2">
                                                <div class="col-sm-1">
                                                    <div class="card directory">
                                                        <a data-dir="company-img" href="#" class="text-center folder">
                                                            <i class="fa fa-folder"
                                                                style="font-size:50px; text-align:center; color:#009ad7; padding-top:8px;"></i>
                                                        </a>
                                                        <div class="card-body file-details">
                                                            <p class="card-text mb-0 text-center file-name">folder-1</p>
                                                        </div>
                                                        <div class="dropdown media-action">
                                                            <a class="btn btn-default dropdown-toggle" href="#"
                                                                role="button" id="dropdownMenuLinkFolder"
                                                                data-bs-toggle="dropdown" aria-expanded="false">
                                                            </a>
                                                            <div class="dropdown-menu"
                                                                aria-labelledby="dropdownMenuLinkFolder">
                                                                <a class="dropdown-item" data-name="company-img"
                                                                    data-bs-toggle="modal"
                                                                    data-bs-target="#renamemodal">Rename</a>
                                                                <a class="dropdown-item" data-name="company-img"
                                                                    data-bs-toggle="modal"
                                                                    data-bs-target="#deletemodal">Delete</a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-sm-1">
                                                    <div class="card directory">
                                                        <a data-dir="company-img" href="#" class="text-center folder">
                                                            <i class="fa fa-folder"
                                                                style="font-size:50px; text-align:center; color:#009ad7; padding-top:8px;"></i>
                                                        </a>
                                                        <div class="card-body file-details">
                                                            <p class="card-text mb-0 text-center file-name">folder-1</p>
                                                        </div>
                                                        <div class="dropdown media-action">
                                                            <a class="btn btn-default dropdown-toggle" href="#"
                                                                role="button" id="dropdownMenuLinkFolder"
                                                                data-bs-toggle="dropdown" aria-expanded="false">
                                                            </a>
                                                            <div class="dropdown-menu"
                                                                aria-labelledby="dropdownMenuLinkFolder">
                                                                <a class="dropdown-item" data-name="company-img"
                                                                    data-bs-toggle="modal"
                                                                    data-bs-target="#renamemodal">Rename</a>
                                                                <a class="dropdown-item" data-name="company-img"
                                                                    data-bs-toggle="modal"
                                                                    data-bs-target="#deletemodal">Delete</a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-sm-1">
                                                    <div class="card directory">
                                                        <a data-dir="company-img" href="#" class="text-center folder">
                                                            <i class="fa fa-folder"
                                                                style="font-size:50px; text-align:center; color:#009ad7; padding-top:8px;"></i>
                                                        </a>
                                                        <div class="card-body file-details">
                                                            <p class="card-text mb-0 text-center file-name">folder-1</p>
                                                        </div>
                                                        <div class="dropdown media-action">
                                                            <a class="btn btn-default dropdown-toggle" href="#"
                                                                role="button" id="dropdownMenuLinkFolder"
                                                                data-bs-toggle="dropdown" aria-expanded="false">
                                                            </a>
                                                            <div class="dropdown-menu"
                                                                aria-labelledby="dropdownMenuLinkFolder">
                                                                <a class="dropdown-item" data-name="company-img"
                                                                    data-bs-toggle="modal"
                                                                    data-bs-target="#renamemodal">Rename</a>
                                                                <a class="dropdown-item" data-name="company-img"
                                                                    data-bs-toggle="modal"
                                                                    data-bs-target="#deletemodal">Delete</a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-sm-1">
                                                    <div class="card directory">
                                                        <a data-dir="company-img" href="#" class="text-center folder">
                                                            <i class="fa fa-folder"
                                                                style="font-size:50px; text-align:center; color:#009ad7; padding-top:8px;"></i>
                                                        </a>
                                                        <div class="card-body file-details">
                                                            <p class="card-text mb-0 text-center file-name">folder-1</p>
                                                        </div>
                                                        <div class="dropdown media-action">
                                                            <a class="btn btn-default dropdown-toggle" href="#"
                                                                role="button" id="dropdownMenuLinkFolder"
                                                                data-bs-toggle="dropdown" aria-expanded="false">
                                                            </a>
                                                            <div class="dropdown-menu"
                                                                aria-labelledby="dropdownMenuLinkFolder">
                                                                <a class="dropdown-item" data-name="company-img"
                                                                    data-bs-toggle="modal"
                                                                    data-bs-target="#renamemodal">Rename</a>
                                                                <a class="dropdown-item" data-name="company-img"
                                                                    data-bs-toggle="modal"
                                                                    data-bs-target="#deletemodal">Delete</a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-sm-1">
                                                    <div class="card insertable files">
                                                        <img data-path="#" src="assets/img/logo.png" class="image"
                                                            title="b2b.jpg">
                                                        <div class="card-body file-details">
                                                            <p class="card-text mb-0 text-center file-name">image.jpg
                                                            </p>
                                                            <p class="card-text text-muted text-center file-size">40.08
                                                                KB</p>
                                                        </div>
                                                        <div class="dropdown media-action">
                                                            <a class="btn btn-default dropdown-toggle" href="#"
                                                                role="button" id="dropdownMenuLinkFile"
                                                                data-bs-toggle="dropdown" aria-expanded="false">

                                                            </a>
                                                            <ul class="dropdown-menu"
                                                                aria-labelledby="dropdownMenuLinkFile">
                                                                <li><a class="dropdown-item selectablelist"
                                                                        data-path="#">Select</a></li>
                                                                <li><a class="dropdown-item" data-name="b2b"
                                                                        data-ext="jpg" href="#">Refresh</a></li>
                                                                <li><a class="dropdown-item" data-name="b2b"
                                                                        data-ext="jpg" data-bs-toggle="modal"
                                                                        data-bs-target="#renamemodal">Rename</a></li>
                                                                <li><a class="dropdown-item viewimage"
                                                                        data-name="b2b.jpg" data-path=""
                                                                        data-bs-toggle="modal"
                                                                        data-bs-target="#viewmodal">View</a></li>
                                                                <li><a class="dropdown-item" data-name="b2b.jpg"
                                                                        data-bs-toggle="modal"
                                                                        data-bs-target="#deletemodal">Delete</a></li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-sm-1">
                                                    <div class="card insertable files">
                                                        <img data-path="#" src="assets/img/logo.png" class="image"
                                                            title="b2b.jpg">
                                                        <div class="card-body file-details">
                                                            <p class="card-text mb-0 text-center file-name">image.jpg
                                                            </p>
                                                            <p class="card-text text-muted text-center file-size">40.08
                                                                KB</p>
                                                        </div>
                                                        <div class="dropdown media-action">
                                                            <a class="btn btn-default dropdown-toggle" href="#"
                                                                role="button" id="dropdownMenuLinkFile"
                                                                data-bs-toggle="dropdown" aria-expanded="false">

                                                            </a>
                                                            <ul class="dropdown-menu"
                                                                aria-labelledby="dropdownMenuLinkFile">
                                                                <li><a class="dropdown-item selectablelist"
                                                                        data-path="#">Select</a></li>
                                                                <li><a class="dropdown-item" data-name="b2b"
                                                                        data-ext="jpg" href="#">Refresh</a></li>
                                                                <li><a class="dropdown-item" data-name="b2b"
                                                                        data-ext="jpg" data-bs-toggle="modal"
                                                                        data-bs-target="#renamemodal">Rename</a></li>
                                                                <li><a class="dropdown-item viewimage"
                                                                        data-name="b2b.jpg" data-path=""
                                                                        data-bs-toggle="modal"
                                                                        data-bs-target="#viewmodal">View</a></li>
                                                                <li><a class="dropdown-item" data-name="b2b.jpg"
                                                                        data-bs-toggle="modal"
                                                                        data-bs-target="#deletemodal">Delete</a></li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-sm-1">
                                                    <div class="card insertable files">
                                                        <img data-path="#" src="assets/img/logo.png" class="image"
                                                            title="b2b.jpg">
                                                        <div class="card-body file-details">
                                                            <p class="card-text mb-0 text-center file-name">image.jpg
                                                            </p>
                                                            <p class="card-text text-muted text-center file-size">40.08
                                                                KB</p>
                                                        </div>
                                                        <div class="dropdown media-action">
                                                            <a class="btn btn-default dropdown-toggle" href="#"
                                                                role="button" id="dropdownMenuLinkFile"
                                                                data-bs-toggle="dropdown" aria-expanded="false">

                                                            </a>
                                                            <ul class="dropdown-menu"
                                                                aria-labelledby="dropdownMenuLinkFile">
                                                                <li><a class="dropdown-item selectablelist"
                                                                        data-path="#">Select</a></li>
                                                                <li><a class="dropdown-item" data-name="b2b"
                                                                        data-ext="jpg" href="#">Refresh</a></li>
                                                                <li><a class="dropdown-item" data-name="b2b"
                                                                        data-ext="jpg" data-bs-toggle="modal"
                                                                        data-bs-target="#renamemodal">Rename</a></li>
                                                                <li><a class="dropdown-item viewimage"
                                                                        data-name="b2b.jpg" data-path=""
                                                                        data-bs-toggle="modal"
                                                                        data-bs-target="#viewmodal">View</a></li>
                                                                <li><a class="dropdown-item" data-name="b2b.jpg"
                                                                        data-bs-toggle="modal"
                                                                        data-bs-target="#deletemodal">Delete</a></li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-sm-1">
                                                    <div class="card insertable files">
                                                        <img data-path="#" src="assets/img/logo.png" class="image"
                                                            title="b2b.jpg">
                                                        <div class="card-body file-details">
                                                            <p class="card-text mb-0 text-center file-name">image.jpg
                                                            </p>
                                                            <p class="card-text text-muted text-center file-size">40.08
                                                                KB</p>
                                                        </div>
                                                        <div class="dropdown media-action">
                                                            <a class="btn btn-default dropdown-toggle" href="#"
                                                                role="button" id="dropdownMenuLinkFile"
                                                                data-bs-toggle="dropdown" aria-expanded="false">

                                                            </a>
                                                            <ul class="dropdown-menu"
                                                                aria-labelledby="dropdownMenuLinkFile">
                                                                <li><a class="dropdown-item selectablelist"
                                                                        data-path="#">Select</a></li>
                                                                <li><a class="dropdown-item" data-name="b2b"
                                                                        data-ext="jpg" href="#">Refresh</a></li>
                                                                <li><a class="dropdown-item" data-name="b2b"
                                                                        data-ext="jpg" data-bs-toggle="modal"
                                                                        data-bs-target="#renamemodal">Rename</a></li>
                                                                <li><a class="dropdown-item viewimage"
                                                                        data-name="b2b.jpg" data-path=""
                                                                        data-bs-toggle="modal"
                                                                        data-bs-target="#viewmodal">View</a></li>
                                                                <li><a class="dropdown-item" data-name="b2b.jpg"
                                                                        data-bs-toggle="modal"
                                                                        data-bs-target="#deletemodal">Delete</a></li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-sm-1">
                                                    <div class="card insertable files">
                                                        <img data-path="#" src="assets/img/logo.png" class="image"
                                                            title="b2b.jpg">
                                                        <div class="card-body file-details">
                                                            <p class="card-text mb-0 text-center file-name">image.jpg
                                                            </p>
                                                            <p class="card-text text-muted text-center file-size">40.08
                                                                KB</p>
                                                        </div>
                                                        <div class="dropdown media-action">
                                                            <a class="btn btn-default dropdown-toggle" href="#"
                                                                role="button" id="dropdownMenuLinkFile"
                                                                data-bs-toggle="dropdown" aria-expanded="false">

                                                            </a>
                                                            <ul class="dropdown-menu"
                                                                aria-labelledby="dropdownMenuLinkFile">
                                                                <li><a class="dropdown-item selectablelist"
                                                                        data-path="#">Select</a></li>
                                                                <li><a class="dropdown-item" data-name="b2b"
                                                                        data-ext="jpg" href="#">Refresh</a></li>
                                                                <li><a class="dropdown-item" data-name="b2b"
                                                                        data-ext="jpg" data-bs-toggle="modal"
                                                                        data-bs-target="#renamemodal">Rename</a></li>
                                                                <li><a class="dropdown-item viewimage"
                                                                        data-name="b2b.jpg" data-path=""
                                                                        data-bs-toggle="modal"
                                                                        data-bs-target="#viewmodal">View</a></li>
                                                                <li><a class="dropdown-item" data-name="b2b.jpg"
                                                                        data-bs-toggle="modal"
                                                                        data-bs-target="#deletemodal">Delete</a></li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-sm-1">
                                                    <div class="card insertable files">
                                                        <img data-path="#" src="assets/img/logo.png" class="image"
                                                            title="b2b.jpg">
                                                        <div class="card-body file-details">
                                                            <p class="card-text mb-0 text-center file-name">image.jpg
                                                            </p>
                                                            <p class="card-text text-muted text-center file-size">40.08
                                                                KB</p>
                                                        </div>
                                                        <div class="dropdown media-action">
                                                            <a class="btn btn-default dropdown-toggle" href="#"
                                                                role="button" id="dropdownMenuLinkFile"
                                                                data-bs-toggle="dropdown" aria-expanded="false">

                                                            </a>
                                                            <ul class="dropdown-menu"
                                                                aria-labelledby="dropdownMenuLinkFile">
                                                                <li><a class="dropdown-item selectablelist"
                                                                        data-path="#">Select</a></li>
                                                                <li><a class="dropdown-item" data-name="b2b"
                                                                        data-ext="jpg" href="#">Refresh</a></li>
                                                                <li><a class="dropdown-item" data-name="b2b"
                                                                        data-ext="jpg" data-bs-toggle="modal"
                                                                        data-bs-target="#renamemodal">Rename</a></li>
                                                                <li><a class="dropdown-item viewimage"
                                                                        data-name="b2b.jpg" data-path=""
                                                                        data-bs-toggle="modal"
                                                                        data-bs-target="#viewmodal">View</a></li>
                                                                <li><a class="dropdown-item" data-name="b2b.jpg"
                                                                        data-bs-toggle="modal"
                                                                        data-bs-target="#deletemodal">Delete</a></li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>


                                            </div><!-- /row -->
                                        </div><!-- /mediadata -->
                                    </div>
                                </div>

                            </div>
                            <div class="card-footer">
                                Media Manager
                            </div>
                        </div>

                    </div>
                </div>
            </div>


    <!-- Delete Item/Folder Modal -->
    <div class="modal fade" id="deletemodal" tabindex="-1" role="dialog" aria-labelledby="deletemodal"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header"> Are you sure you want to delete?</div>
                <div class="modal-body">
                    <form method="post" class="form" action="#" id="delete">
                        <input type="hidden" name="_token" value="">

                        <div class="fbody">
                            <div class="form-group row">
                                <input type="hidden" name="path" value="">
                                <input type="hidden" name="name" />
                                <label class="col-sm-8 control-label"> </label>
                                <div class='col-sm-4'>
                                    <input type="submit" value="Delete" class="btn btn-primary" id="submit" />
                                    <button type="button" data-reload="true" class="btn btn-secondary dismiss"
                                        data-bs-dismiss="modal">Close</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Rename Item/Folder Modal -->
    <div class="modal fade" id="renamemodal" tabindex="-1" role="dialog" aria-labelledby="renamemodal"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header"> Rename</div>
                <div class="modal-body">
                    <form method="post" class="form" action="#" id="rename">
                        <input type="hidden" name="" value="">

                        <div class="fbody">
                            <div class="form-group row">
                                <label class="col-sm-4 col-form-label mb-4"> Item Name </label>
                                <div class="col-sm-7">
                                    <input type="hidden" name="path" value="">
                                    <input type="input" name="name" class="form-control">
                                    <input type="hidden" name="oldname" class="form-control">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-4 control-label"> </label>
                                <div class='col-sm-5'>
                                    <button type="submit" class="btn btn-primary submit" id="submit">Rename</button>
                                    <button type="button" data-reload="true" class="btn btn-secondary dismiss"
                                        data-bs-dismiss="modal">Close</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Create Item/Folder Modal -->
    <div class="modal fade" id="itemmodal" tabindex="-1" role="dialog" aria-labelledby="itemmodal" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header"> Create New</div>
                <div class="modal-body">
                    <form method="post" class="form" action="#" id="create_new">
                        <input type="hidden" name="" value="">

                        <div class="fbody">
                            <div class="form-group row">
                                <label class="col-sm-4 col-form-label mb-4"> Item Name </label>
                                <div class="col-sm-7">
                                    <input type="hidden" name="path" value="">
                                    <input type="input" name="item" class="form-control">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-4 control-label"> </label>
                                <div class='col-sm-5'>
                                    <input type="submit" value="Create" class="btn btn-primary" id="submit" />
                                    <button type="button" data-reload="true" class="btn btn-secondary dismiss"
                                        data-bs-dismiss="modal">Close</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- View Item/Folder Modal -->
    <div class="modal fade" id="viewmodal" tabindex="-1" role="dialog" aria-labelledby="viewmodal" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">View</div>
                <div class="modal-body text-center">
                    <div class="loader-wrap"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Upload Item/Folder Modal -->
    <div class="modal fade" id="uploadmodal" tabindex="-1" role="dialog" aria-labelledby="uploadmodal"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header"> File Upload</div>
                <div class="modal-body">
                    <form method="post" action="#" id="add_file" enctype="multipart/form-data">
                        <input type="hidden" name="" value="">

                        <div class="fbody">
                            <div class="form-group text-center">
                                <div class="position-relative">
                                    <div class="col-sm-12 col-form-label drag_drop mb-4">
                                        <p>Drop a file here to upload</p>
                                        <input type="file" id="fileInput" style="display: none;" multiple>
                                    </div>
                                </div>
                                <div class="col-sm-12 m-auto">
                                    <input type="hidden" name="path" value="">
                                    <div class="custom-file">
                                        <input type="hidden" name="MAX_FILE_SIZE" />
                                        <input type="file" id="upload_file" name="file" class="custom-file-input">
                                        <label class="custom-file-label" for="upload_file">Choose
                                            file<code> *</code></label>
                                    </div>
                                </div>
                            </div>
                            <input type="checkbox" value="1" name="webp" /> Convert to WebP<br>
                            <small>Allowed file type jpeg, bmp, png, webp, txt, pdf, docx. Maximum file size 1MB.
                                Maximum resolution 1000x1000.</small>
                            <div class="form-group row">
                                <label class="col-sm-5 control-label"> </label>
                                <div class='col-sm-5'>
                                    <input type="submit" value="Upload" class="btn btn-primary" id="submit" />
                                    <button type="button" data-reload="true" class="btn btn-secondary dismiss"
                                        data-bs-dismiss="modal">Close</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>


@endsection('content')