@extends('layouts.contentLayoutMaster')
{{-- page title --}}
@section('title','Cajas')
@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')}}">
@endsection
{{-- page styles --}}
@section('page-style')
<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(mix('vendors/css/extensions/toastr.min.css')) }}">
<link rel="stylesheet" href="{{ asset(mix('css/base/plugins/extensions/ext-component-toastr.css')) }}">
@endsection

{{-- sidebar included --}}
@section('content-sidebar')
@include('content/apps/cajas/app-cajas-control-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">
            <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="Search" />
            </div>
        </div>
        <div class="d-flex align-items-center">

            <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/logoError.png')}}" alt="google drive" height="30" />
                            </div>
                            <div class="my-1">
                                <h5>Saldo en Cajas</h5>
                            </div>
                            <div class="d-flex justify-content-between mb-50">
                                <h4> <span class="text-truncate">$ 3.500</span></h4>
                            </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/logoSaldos.png')}}" alt="dropbox" height="30" />
                                <div class="dropdown-items-wrapper">
                                    <i data-feather="more-vertical" id="dropdownMenuLink2" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
                                    <div class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuLink2">
                                    </div>
                                </div>
                            </div>
                            <div class="my-1">
                                <h5>Error de Cajas</h5>
                            </div>
                            <div class="d-flex justify-content-between mb-50">
                                <h4> <span class="text-truncate">$ 5.500</span></h4>
                            </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/logoCandadoAbierto.png')}}" alt="icloud" height="30" class="p-25" />
                                <div class="dropdown-items-wrapper">
                                    <i data-feather="more-vertical" id="dropdownMenuLink3" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
                                    <div class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuLink3">
                                    </div>
                                </div>
                            </div>
                            <div class="my-1">
                                <h5>Cajas Abiertas</h5>
                            </div>
                            <div class="d-flex justify-content-between mb-50">
                                <h4> <span class="text-truncate">10</span></h4>
                            </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/logoCandadoCerrado.png')}}" alt="icloud" height="30" class="p-25" />
                                <div class="dropdown-items-wrapper">
                                    <span data-feather="more-vertical" id="dropdownMenuLink4" role="button" data-bs-toggle="dropdown" aria-expanded="false"></span>
                                    <div class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuLink4">

                                    </div>
                                </div>
                            </div>
                            <div class="my-1">
                                <h5>Cajas Cerradas</h5>
                            </div>
                            <div class="d-flex justify-content-between mb-50">
                                <h4> <span class="text-truncate">20</span></h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div> --}}
        <!-- drives area ends-->

        <!-- Seccion de cajas por sucursales-->
        <div id="controlCajasListadoSucursales2">

            <div class="view-container">
                <h6 class="files-section-title mt-2 mb-75">Sucursales</h6>
                <div id="cajasXsucursalesBTN" class="cajasXsucursales">
                </div>
                <h6 class="files-section-title mt-2 mb-75">Cajas</h6>
                <div id="cajasXCajasBTN" class="cajasXsucursales">
                </div>

                <h6 class="files-section-title mt-2 mb-75">Cierres</h6>
                <div id="cajasXsucursales" class="cajasXsucursales">
                    {{-- <div class="card file-manager-item file ">
                        <div class="card-body">
                            <div class="content-wrapper">
                            <p class="card-text file-name mb-0">Caja N° 1</p>
                                <p class="card-text file-size mb-0">Cerrada</p>
                                <p class="card-text file-date control-cajas-ancho-dentro-card ">Cajero: Juan</p>
                                <p class="card-text file-date control-cajas-ancho-dentro-card">Periodo desde: 23/08/2022 15:30 a 23/08/2022 19:45</p>
                            </div>
                            <small class="file-accessed ">Cajero Juam</small><br>
                            <small class="file-accessed ">Periodo desde: 23/08/2022 15:30 a 23/08/2022 19:45</small>
                        </div>
                    </div> --}}

                </div>
            </div>

        </div>
        <!-- FIN - Seccion de cajas por sucursales -->
    </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"   data-bs-target="#editCajas" href="#" data-bs-toggle="modal">
        <i data-feather="eye" class="align-middle me-50"></i>
        <span class="align-middle">Editar</span>
    </a>

    <a class="dropdown-item" href="#">
    <div class="dropdown-divider"></div>
        <i data-feather="user-plus" class="align-middle me-50"></i>
        <span class="align-middle">Habilitar</span>
    </a>
    <a class="dropdown-item" href="#">
        <i data-feather="copy" class="align-middle me-50"></i>
        <span class="align-middle">Deshabilitar</span>
    </a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item"   data-bs-target="#appControlAbrirCajas" href="#" data-bs-toggle="modal">
        <i data-feather="edit" class="align-middle me-50"></i>
        <span class="align-middle">Abrir</span>
    </a>
    <a class="dropdown-item"   data-bs-target="#appControlCerrarCajas" href="#" data-bs-toggle="modal">
        <i data-feather="info" class="align-middle me-50"></i>
        <span class="align-middle">Cerrar</span>
    </a>
    <a class="dropdown-item" href="#">
        <div class="dropdown-divider"></div>
        <i data-feather="alert-circle" class="align-middle me-50"></i>
        <span class="align-middle">Asignar Usuario</span>
    </a>
    <a class="dropdown-item" href="#">
        <i data-feather="trash" class="align-middle me-50"></i>
        <span class="align-middle">Asignar Sucursal</span>
    </a>
    <a class="dropdown-item" href="#">
        <i data-feather="trash" class="align-middle me-50"></i>
        <span class="align-middle">Asignar Forma de Pago</span>
    </a>
    <a class="dropdown-item" href="#">
    <div class="dropdown-divider"></div>
        <i data-feather="trash" class="align-middle me-50"></i>
        <span class="align-middle">Borrar</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('cajas/modals/modal-add-new-cajas')
@include('cajas/modals/modal-edit-cajas')
@include('content/apps/cajas/app-cajas-abrirCajas')
@include('content/apps/cajas/app-cajas-cerrarCajas')
@include('content/apps/cajas/app-cajas-control-cierres')
@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('js/scripts/usuarios/usuarios.js')) }}"></script>
<script src="{{ asset(mix('js/scripts/formaPagos/formaPagos.js')) }}"></script>
<script src="{{ asset(mix('js/scripts/cajas/modal-edit-cajas.js')) }}"></script>
<script src="{{ asset(mix('js/scripts/cajas/cajas.js')) }}"></script>
<script src="{{ asset(mix('js/scripts/listaPrecios/listaPrecios.js')) }}"></script>

@endsection
{{-- page styles --}}
@section('page-script')
<script src="{{asset('js/scripts/pages/app-file-manager.js')}}"></script>
<script src="{{ asset(mix('js/scripts/cajas/modal-edit-cajas.js')) }}"></script>
<script src="{{ asset(mix('js/scripts/sucursales/sucursales.js')) }}"></script>
<script src="{{ asset(mix('js/scripts/cajas/app-control-caja.js')) }}"></script>
@endsection