@extends('layouts.contentLayoutMaster')
{{-- page title --}}
@section('title','File Manager')
@section('vendor-style')
<link rel="stylesheet" type="text/css" href="{{asset('fonts/font-awesome/css/font-awesome.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('vendors/css/extensions/jstree.min.css')}}">
<link rel="stylesheet" href="{{ asset(mix('vendors/css/extensions/toastr.min.css')) }}">
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="{{asset('vendors/css/pickers/flatpickr/flatpickr.min.css')}}">
<link rel="stylesheet" href="{{asset('vendors/css/forms/select/select2.min.css')}}">
@endsection
{{-- page styles --}}
@section('page-style')
<link rel="stylesheet" href="{{ asset(mix('css/base/plugins/extensions/ext-component-toastr.css')) }}">
<link rel="stylesheet" type="text/css" href="{{ asset(mix('css/base/plugins/extensions/ext-component-tree.css'))}}">
<link rel="stylesheet" type="text/css" href="{{ asset(mix('css/base/pages/app-file-manager.css'))}}">

<link rel="stylesheet" href="{{asset('css/base/plugins/forms/pickers/form-flat-pickr.css')}}">
<link rel="stylesheet" href="{{asset('css/base/pages/app-invoice.css')}}">
@endsection

{{-- sidebar included --}}
@section('content-sidebar')
@include('content/apps/egresos/proveedores/app-proveedores-sidebar')
@endsection

@section('content')
<!-- overlay container -->
<div class="body-content-overlay"></div>

<!-- file manager app content starts -->
<div class="file-manager-main-content">
    <!-- search area start -->

    <div class="file-manager-content-header d-flex justify-content-between align-items-center">

        <div class="d-flex align-items-center">
            <h4 class="">Proveedores</h4>
        </div>
        <div class="d-flex align-items-center">

            <div class="sidebar-toggle d-block d-xl-none float-start align-middle ms-1">
                <i data-feather="menu" class="font-medium-5"></i>
            </div>
            <div class="input-group input-group-merge shadow-none m-0 flex-grow-1">
                <span class="input-group-text border-0">
                    <i data-feather="search"></i>
                </span>
                <input type="text" class="form-control files-filter border-0 bg-transparent" placeholder="Buscar..." />
            </div>
        </div>
        <div class="d-flex align-items-center">
            <div class="file-actions">
                <i data-feather="arrow-down-circle" class="font-medium-2 cursor-pointer d-sm-inline-block d-none me-50"></i>
                <i data-feather="trash" class="font-medium-2 cursor-pointer d-sm-inline-block d-none me-50"></i>
                <i data-feather="alert-circle" class="font-medium-2 cursor-pointer d-sm-inline-block d-none" data-bs-toggle="modal" data-bs-target="#app-file-manager-info-sidebar"></i>
                <div class="dropdown d-inline-block">
                    <i class="font-medium-2 cursor-pointer" data-feather="more-vertical" role="button" id="fileActions" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    </i>
                    <div class="dropdown-menu dropdown-menu-end" aria-labelledby="fileActions">
                        <a class="dropdown-item" href="#">
                            <i data-feather="move" class="cursor-pointer me-50"></i>
                            <span class="align-middle">Open with</span>
                        </a>
                        <a class="dropdown-item d-sm-none d-block" href="#" data-bs-toggle="modal" data-bs-target="#app-file-manager-info-sidebar">
                            <i data-feather="alert-circle" class="cursor-pointer me-50"></i>
                            <span class="align-middle">More Options</span>
                        </a>
                        <a class="dropdown-item d-sm-none d-block" href="#">
                            <i data-feather="trash" class="cursor-pointer me-50"></i>
                            <span class="align-middle">Delete</span>
                        </a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">
                            <i data-feather="plus" class="cursor-pointer me-50"></i>
                            <span class="align-middle">Add shortcut</span>
                        </a>
                        <a class="dropdown-item" href="#">
                            <i data-feather="folder-plus" class="cursor-pointer me-50"></i>
                            <span class="align-middle">Move to</span>
                        </a>
                        <a class="dropdown-item" href="#">
                            <i data-feather="star" class="cursor-pointer me-50"></i>
                            <span class="align-middle">Add to starred</span>
                        </a>
                        <a class="dropdown-item" href="#">
                            <i data-feather="droplet" class="cursor-pointer me-50"></i>
                            <span class="align-middle">Change color</span>
                        </a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">
                            <i data-feather="download" class="cursor-pointer me-50"></i>
                            <span class="align-middle">Download</span>
                        </a>
                    </div>
                </div>
            </div>
            <div class="btn-group view-toggle ms-50" role="group">
                <input type="radio" class="btn-check" name="view-btn-radio" data-view="grid" id="gridView" checked autocomplete="off" />
                <label class="btn btn-outline-primary p-50 btn-sm" for="gridView">
                    <i data-feather="grid"></i>
                </label>
                <input type="radio" class="btn-check" name="view-btn-radio" data-view="list" id="listView" autocomplete="off" />
                <label class="btn btn-outline-primary p-50 btn-sm" for="listView">
                    <i data-feather="list"></i>
                </label>
            </div>
        </div>
    </div>
    <!-- search area ends here -->

    <div class="file-manager-content-body">
        <!-- drives area starts-->
        <div class="drives">
            <div class="row">

                <div class="col-lg-3 col-md-6 col-12">
                    <div class="card shadow-none border cursor-pointer">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <img src="{{asset('images/icons/drive.png')}}" alt="google drive" height="38" />
                                <div class="dropdown-items-wrapper">
                                </div>
                            </div>
                            <div class="my-1">
                                <h5>Cantidad de Proveedores</h5>
                            </div>
                            <div class="d-flex justify-content-between mb-50">
                                <span class="text-truncate">32 Empresas</span>
                                <!-- <small class="text-muted">50GB</small> -->
                            </div>
                            <!-- <div class="progress progress-bar-warning progress-md mb-0" style="height: 10px">
                                <div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="70" aria-valuemax="100" style="width: 70%"></div>
                            </div> -->
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-12">
                    <div class="card shadow-none border cursor-pointer">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <img src="{{asset('images/icons/dropbox.png')}}" alt="dropbox" height="38" />
                                <div class="dropdown-items-wrapper">
                                </div>
                            </div>
                            <div class="my-1">
                                <h5>Compras</h5>
                            </div>
                            <div class="d-flex justify-content-between mb-50">
                                <span class="text-truncate">13100 Compras</span>
                                <!-- <small class="text-muted">2GB</small> -->
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-12">
                    <div class="card shadow-none border cursor-pointer">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <img src="{{asset('images/icons/onedrivenew.png')}}" alt="icloud" height="38" class="p-25" />
                                <div class="dropdown-items-wrapper">
                                </div>
                            </div>
                            <div class="my-1">
                                <h5>Pagos</h5>
                            </div>
                            <div class="d-flex justify-content-between mb-50">
                                <span class="text-truncate">5021 Facturas</span>
                                <!-- <small class="text-muted">2GB</small> -->
                            </div>

                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-12">
                    <div class="card shadow-none border cursor-pointer">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <img src="{{asset('images/icons/icloud-1.png')}}" alt="icloud" height="38" class="p-25" />
                                <div class="dropdown-items-wrapper">
                                </div>
                            </div>
                            <div class="my-1">
                                <h5>Balance</h5>
                            </div>
                            <div class="d-flex justify-content-between mb-50">
                                <span class="text-truncate">$ 1.550.445</span>
                                <!-- <small class="text-muted">3GB</small> -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- drives area ends-->

        <!-- Folders Container Starts -->
        <div class="view-container" id="appProveedores_listProveedores">
        </div>
    </div>
</div>
<!-- file manager app content ends -->

<!-- File Info Sidebar Starts-->
<div class="modal modal-slide-in fade show" id="app-file-manager-info-sidebar">
    <div class="modal-dialog sidebar-lg">
        <div class="modal-content p-0">
            <div class="modal-header d-flex align-items-center justify-content-between mb-1 p-2">
                <h5 class="modal-title">menu.js</h5>
                <div>
                    <i data-feather="trash" class="cursor-pointer me-50" data-bs-dismiss="modal"></i>
                    <i data-feather="x" class="cursor-pointer" data-bs-dismiss="modal"></i>
                </div>
            </div>
            <div class="modal-body flex-grow-1 pb-sm-0 pb-1">
                <ul class="nav nav-tabs tabs-line" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" data-bs-toggle="tab" href="#details-tab" role="tab" aria-controls="details-tab" aria-selected="true">
                            <i data-feather="file"></i>
                            <span class="align-middle ms-25">Details</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-bs-toggle="tab" href="#activity-tab" role="tab" aria-controls="activity-tab" aria-selected="true">
                            <i data-feather="activity"></i>
                            <span class="align-middle ms-25">Activity</span>
                        </a>
                    </li>
                </ul>
                <div class="tab-content" id="myTabContent">
                    <div class="tab-pane fade show active" id="details-tab" role="tabpanel" aria-labelledby="details-tab">
                        <div class="d-flex flex-column justify-content-center align-items-center py-5">
                            <img src="{{asset('images/icons/js.png')}}" alt="file-icon" height="64" />
                            <p class="mb-0 mt-1">54kb</p>
                        </div>
                        <h6 class="file-manager-title my-2">Settings</h6>
                        <ul class="list-unstyled">
                            <li class="d-flex justify-content-between align-items-center mb-1">
                                <span>File Sharing</span>
                                <div class="form-check form-switch">
                                    <input type="checkbox" class="form-check-input" id="sharing" />
                                    <label class="form-check-label" for="sharing"></label>
                                </div>
                            </li>
                            <li class="d-flex justify-content-between align-items-center mb-1">
                                <span>Synchronization</span>
                                <div class="form-check form-switch">
                                    <input type="checkbox" class="form-check-input" checked id="sync" />
                                    <label class="form-check-label" for="sync"></label>
                                </div>
                            </li>
                            <li class="d-flex justify-content-between align-items-center mb-1">
                                <span>Backup</span>
                                <div class="form-check form-switch">
                                    <input type="checkbox" class="form-check-input" id="backup" />
                                    <label class="form-check-label" for="backup"></label>
                                </div>
                            </li>
                        </ul>
                        <hr class="my-2" />
                        <h6 class="file-manager-title my-2">Info</h6>
                        <ul class="list-unstyled">
                            <li class="d-flex justify-content-between align-items-center">
                                <p>Type</p>
                                <p class="fw-bold">JS</p>
                            </li>
                            <li class="d-flex justify-content-between align-items-center">
                                <p>Size</p>
                                <p class="fw-bold">54kb</p>
                            </li>
                            <li class="d-flex justify-content-between align-items-center">
                                <p>Location</p>
                                <p class="fw-bold">Files > Documents</p>
                            </li>
                            <li class="d-flex justify-content-between align-items-center">
                                <p>Owner</p>
                                <p class="fw-bold">Sheldon Cooper</p>
                            </li>
                            <li class="d-flex justify-content-between align-items-center">
                                <p>Modified</p>
                                <p class="fw-bold">12th Aug, 2020</p>
                            </li>

                            <li class="d-flex justify-content-between align-items-center">
                                <p>Created</p>
                                <p class="fw-bold">01 Oct, 2019</p>
                            </li>
                        </ul>
                    </div>
                    <div class="tab-pane fade" id="activity-tab" role="tabpanel" aria-labelledby="activity-tab">
                        <h6 class="file-manager-title my-2">Today</h6>
                        <div class="d-flex align-items-center mb-2">
                            <div class="avatar avatar-sm me-50">
                                <img src="{{asset('images/avatars/5-small.png')}}" alt="avatar" width="28" />
                            </div>
                            <div class="more-info">
                                <p class="mb-0">
                                    <span class="fw-bold">Mae</span>
                                    shared the file with
                                    <span class="fw-bold">Howard</span>
                                </p>
                            </div>
                        </div>
                        <div class="d-flex align-items-center">
                            <div class="avatar avatar-sm bg-light-primary me-50">
                                <span class="avatar-content">SC</span>
                            </div>
                            <div class="more-info">
                                <p class="mb-0">
                                    <span class="fw-bold">Sheldon</span>
                                    updated the file
                                </p>
                            </div>
                        </div>
                        <h6 class="file-manager-title mt-3 mb-2">Yesterday</h6>
                        <div class="d-flex align-items-center mb-2">
                            <div class="avatar avatar-sm bg-light-success me-50">
                                <span class="avatar-content">LH</span>
                            </div>
                            <div class="more-info">
                                <p class="mb-0">
                                    <span class="fw-bold">Leonard</span>
                                    renamed this file to
                                    <span class="fw-bold">menu.js</span>
                                </p>
                            </div>
                        </div>
                        <div class="d-flex align-items-center">
                            <div class="avatar avatar-sm me-50">
                                <img src="{{asset('images/portrait/small/avatar-s-1.jpg')}}" alt="Avatar" width="28" />
                            </div>
                            <div class="more-info">
                                <p class="mb-0">
                                    <span class="fw-bold">You</span>
                                    shared this file with Leonard
                                </p>
                            </div>
                        </div>
                        <h6 class="file-manager-title mt-3 mb-2">3 days ago</h6>
                        <div class="d-flex align-items-start">
                            <div class="avatar avatar-sm me-50">
                                <img src="{{asset('images/portrait/small/avatar-s-1.jpg')}}" alt="Avatar" width="28" />
                            </div>
                            <div class="more-info">
                                <p class="mb-50">
                                    <span class="fw-bold">You</span>
                                    uploaded this file
                                </p>
                                <img src="{{asset('images/icons/js.png')}}" alt="Avatar" class="me-50" height="24" />
                                <span class="fw-bold">app.js</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- File Info Sidebar Ends -->

<!-- File Dropdown Starts-->
<div class="dropdown-menu dropdown-menu-end file-dropdown">
    <a class="dropdown-item" href="#">
        <i data-feather="eye" class="align-middle me-50"></i>
        <span class="align-middle">Ver...</span>
    </a>
    <a class="dropdown-item" href="#">
        <i data-feather="user-plus" class="align-middle me-50"></i>
        <span class="align-middle">Balance</span>
    </a>
    <a class="dropdown-item" href="#">
        <i data-feather="copy" class="align-middle me-50"></i>
        <span class="align-middle">Nueva Factura</span>
    </a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">
        <i data-feather="edit" class="align-middle me-50"></i>
        <span class="align-middle">Editar</span>
    </a>
    <a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#app-file-manager-info-sidebar">
        <i data-feather="info" class="align-middle me-50"></i>
        <span class="align-middle">Registrar Pago</span>
    </a>
    <!-- <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">
        <i data-feather="trash" class="align-middle me-50"></i>
        <span class="align-middle">Delete</span>
    </a>
    <a class="dropdown-item" href="#">
        <i data-feather="alert-circle" class="align-middle me-50"></i>
        <span class="align-middle">Report</span>
    </a> -->
</div>
<!-- /File Dropdown Ends -->

<!-- Create New Folder Modal Starts-->
<div class="modal fade" id="new-folder-modal">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">New Folder</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <input type="text" class="form-control" value="New folder" placeholder="Untitled folder" />
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary me-1" data-bs-dismiss="modal">Create</button>
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>
<!-- /Create New Folder Modal Ends -->
@include('empresas/modals/modal-add-new-empresas')
@include('empresas/modals/modal-edit-empresas')
@include('content/apps/egresos/proveedores/modal/modal-edit-proveedores')
@include('content/apps/egresos/proveedores/modal/modal-add-new-proveedores')
@include('content/apps/egresos/facturas/modal/modal-add-new-factura')
@include('content/apps/egresos/proveedores/app-proveedores-sidebar')

@endsection

@section('vendor-script')
<script src="{{asset('vendors/js/extensions/jstree.min.js')}}"></script>
<script src="{{ asset(mix('vendors/js/extensions/toastr.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/extensions/jquery-ui.min.js'))}}"></script>
<script src="{{ asset(mix('vendors/js/forms/validation/jquery.validate.min.js'))}}"></script>

<script src="{{asset('vendors/js/forms/repeater/jquery.repeater.min.js')}}"></script>
<script src="{{asset('vendors/js/forms/select/select2.full.min.js')}}"></script>
<script src="{{asset('vendors/js/pickers/flatpickr/flatpickr.min.js')}}"></script>

@endsection
{{-- page styles --}}
@section('page-script')
<script src="{{asset('js/scripts/proveedores/proveedores.js'),true}}"></script>
<script src="{{asset('js/scripts/proveedores/editProveedores.js'),true}}"></script>
<script src="{{asset('js/scripts/pages/app-proveedores.js'),true}}"></script>
<script src="{{asset('js/scripts/facturas/facturaslist.js'),true}}"></script>
<script src="{{asset('js/scripts/clientes/clientes.js'),true}}"></script>
<script src="{{asset('js/scripts/documentos/editDocumentos.js'),true}}"></script>
<script src="{{asset('js/scripts/tipoDocumentos/tipoDeDocumentos.js'),true}}"></script>
<script src="{{asset('js/scripts/pagos/pagos.js'),true}}"></script>
<script src="{{asset('js/scripts/centroCostos/centroCostos.js'),true}}"></script>
<script src="{{asset('js/scripts/documentos/documentos.js'),true}}"></script>
<script src="{{asset('js/scripts/centroCostos/centroCostos.js'),true}}"></script>
<!-- <script src="{{asset('js/scripts/pages/proveedoresList.js')}}"></script> -->
<!-- <script src="{{ asset(mix('js/scripts/empresas/empresasList.js')) }}"></script> -->
<!-- <script src="{{ asset(mix('js/scripts/empresas/modal-edit-empresas.js')) }}"></script> -->
@endsection