@extends('layouts.app')
@section('css')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

    <link rel="stylesheet" href="{{ asset('css/select2-bootstrap-5-theme.min.css') }}" />
@endsection
@section('content')
    <div class="wrapper wrapper-content">
        <div class="row">
            <div class="col-lg-3">
                <div class="ibox ">
                    <div class="ibox-content">
                        <div class="file-manager">
                            <h5>Gestión de carpetas</h5>
                            <div class="hr-line-dashed"></div>
                            <button type="button" class="btn btn-primary" data-toggle="modal"
                                data-target="#modal_registrar">
                                <i class="fa fa-plus-circle"></i>&nbsp;&nbsp; Crear nueva carpeta
                            </button>
                            <div class="hr-line-dashed"></div>
                            <h5>Carpetas</h5>
                            <ul class="folder-list" style="padding: 0" id="folders">

                            </ul>

                            <div class="clearfix"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-9 animated fadeInRight">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="ibox">
                            <div class="ibox-content">
                                @if (isset($data_folder))
                                    <h2 class="text-center text-danger">{{ $data_folder['nombre'] }}
                                        {{ $data_folder['anio'] }}</h2>
                                @else
                                    <h2 class="text-center text-danger"> </h2>
                                @endif

                            </div>
                            <a class="btn btn-white btn-bitbucket w-100 text-center" data-toggle="modal"
                                data-target="#modal_añadir">
                                <i class="fa fa-plus"></i> Añadir archivador
                            </a>
                        </div>

                    </div>


                </div>

                <div class="row">

                    <div class="col-lg-12" id="list_archivadores">



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

    <div class="modal inmodal" id="modal_registrar" tabindex="-1" role="dialog" style="display: none;" aria-hidden="true">
        <div class="modal-dialog ">
            <div class="modal-content animated bounceInRight">
                <div class="modal-header py-2 px-3">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span
                            class="sr-only">Close</span></button>
                    <h4 class=" text-left">Crear nueva carpeta</h4>

                </div>

                <div class="modal-body bg-white">
                    <div class="row">
                        <div class="col-lg-6 mb-3">
                            <label>Nombre de la carpeta <span class=" text-danger">*</span> </label>
                            <input id="nombre" type="text" placeholder="Escriba un nombre" class="form-control ">
                        </div>
                        <div class="col-lg-6 mb-3">
                            <label>Año de la carpeta <span class=" text-danger">*</span> </label>
                            <select class="form-select" id="anio">
                                <option value=""></option>
                                @for ($i = date('Y'); $i >= 2020; $i--)
                                    <option value="{{ $i }}">{{ $i }}</option>
                                @endfor
                            </select>
                        </div>
                        <div class="col-lg-12 mb-3">
                            <label>La carpeta pertenece a: <span class=" text-danger">*</span> </label>
                            <select class="form-select" id="oficina">

                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-white" data-dismiss="modal">Cerrar</button>
                    <button id="registrar" type="button" class="btn btn-primary">Crear carpeta</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal inmodal" id="modal_editar_carpeta" tabindex="-1" role="dialog" style="display: none;"
        aria-hidden="true">
        <div class="modal-dialog ">
            <div class="modal-content animated bounceInRight">
                <div class="modal-header py-2 px-3">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span
                            class="sr-only">Close</span></button>
                    <h4 class=" text-left">Editar carpeta</h4>

                </div>

                <div class="modal-body bg-white">
                    <div class="row">
                        <div class="col-lg-6 mb-3">
                            <label>Nombre de la carpeta <span class=" text-danger">*</span> </label>
                            <input id="nombre_edit" type="text" placeholder="Escriba un nombre" class="form-control ">
                        </div>
                        <div class="col-lg-6 mb-3">
                            <label>Año de la carpeta <span class=" text-danger">*</span> </label>
                            <select class="form-select" id="anio_edit">
                                <option value=""></option>
                                @for ($i = date('Y'); $i >= 2020; $i--)
                                    <option value="{{ $i }}">{{ $i }}</option>
                                @endfor
                            </select>
                        </div>
                        <input type="text" id="id_edit" hidden>

                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-white" data-dismiss="modal">Cerrar</button>
                    <button id="editar" type="button" class="btn btn-primary">Actualizar carpeta</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal inmodal" id="modal_añadir" tabindex="-1" role="dialog" style="display: none;"
        aria-hidden="true">
        <div class="modal-dialog ">
            <div class="modal-content animated bounceInRight">
                <div class="modal-header py-2 px-3">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span
                            class="sr-only">Close</span></button>
                    <h4 class=" text-left">Añadir nuevo archivador</h4>

                </div>

                <div class="modal-body bg-white">
                    <div class="row">
                        <div class="col-lg-12 mb-3">
                            <label>Nombre del archivador <span class=" text-danger">*</span> </label>
                            <input id="nombre_archivador" type="text" placeholder="Escriba un nombre"
                                class="form-control ">
                        </div>
                       
                            <input type="text" id="id_folder" hidden>
                        


                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-white" data-dismiss="modal">Cerrar</button>
                    <button id="añadir" type="button" class="btn btn-primary">Añadir archivador</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal inmodal" id="modal_editar_archivador" tabindex="-1" role="dialog" style="display: none;"
        aria-hidden="true">
        <div class="modal-dialog ">
            <div class="modal-content animated bounceInRight">
                <div class="modal-header py-2 px-3">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span
                            class="sr-only">Close</span></button>
                    <h4 class=" text-left">Editar archivador</h4>

                </div>

                <div class="modal-body bg-white">
                    <div class="row">
                        <div class="col-lg-12 mb-3">
                            <label>Nombre del archivador <span class=" text-danger">*</span> </label>
                            <input id="nombre_archivador_edit" type="text" placeholder="Escriba un nombre"
                                class="form-control ">
                        </div>
                        <input type="text" id="id_edit_archivador" hidden>


                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-white" data-dismiss="modal">Cerrar</button>
                    <button id="editar_archivador" type="button" class="btn btn-primary">Actualizar archivador</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal inmodal fade show" id="myModal5" tabindex="-1" role="dialog" style="display:none;">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">Modal title</h4>
                    <small class="font-bold">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</small>
                </div>
                <div class="modal-body">
                    <p><strong>Lorem Ipsum is simply dummy</strong> text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
                        printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
                        remaining essentially unchanged.</p>
                    <p><strong>Lorem Ipsum is simply dummy</strong> text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
                        printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
                        remaining essentially unchanged.</p>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('js')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="{{ asset('js/carpetas.js') }}"></script>
    <script>
        $('#anio').select2({
            dropdownParent: '#modal_registrar',
            theme: "bootstrap-5",
            width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style',
            placeholder: $(this).data('placeholder'),
            placeholder: 'Seleccionar',
            language: {
                noResults: function() {
                    return 'No se encontraron resultados';
                }
            }
        });
        $('#oficina').select2({
            dropdownParent: '#modal_registrar',
            theme: "bootstrap-5",
            width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style',
            placeholder: $(this).data('placeholder'),
            placeholder: 'Seleccionar',
            language: {
                noResults: function() {
                    return 'No se encontraron resultados';
                }
            }
        });
        $('#anio_edit').select2({
            dropdownParent: '#modal_editar_carpeta',
            theme: "bootstrap-5",
            width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style',
        });
    </script>
@endsection