@extends('template.layout')


@section('styles')
    <style>
        .portlet-title{
        }
        .fa-columns{
            color: #FFF;
            font-size: 100%;
        }
        .btn-success,.btn-success.active, .btn-success:active, .btn-success:hover, .open>.btn-success.dropdown-toggle{
            background-color: #0070BB !important;
            border-color: #0070BB !important;
        }
        .col-button{
            margin-top: 2.5%;
            margin-left: 2%;
        }
        .btn.green{
            background-color: #454142 !important;
            border-color: #454142 !important;
        }
        .dataTables_filter{
            display: none !important;
        }

        h4{
            line-height: 35px !important;
        }
        th,td{
            text-align: center !important;
        }
        .caption{
            padding: 0 !important;
        }
        .portlet.light.portlet-fit>.portlet-title{
            padding: 5px 20px 5px !important;
        }

        .icon-notebook ,fa-dot-circle-o ,fa-list-ul{
            color: black;
            font-size: 100%;
            margin-right: 1% !important;
        }
    </style>
@endsection


@section('content')
    <div class="portlet light portlet-fit portlet-datatable bordered">
        {{ csrf_field() }}
        <input type="hidden" id="date" value="{{$dias_pretamo }}"/>
        <input type="hidden" id="Nbibliog" value="{{$ejemplares[0]->Bibliografia }}"/>
        <input type="hidden" id="IDbibliog" value="{{$ejemplares[0]->id }}"/>
        <div class="portlet-title">
            <div class="row" style="margin-right: 0.5%; margin-left: 0.5%;">
                <h4>
                    <i class="fa fa-columns" aria-hidden="true" style="color: black !important;"></i>
                    <span class="caption-subject font-white sbold " style="color: black !important;"> Detalle de la bibliografia {{$ejemplares[0]->Bibliografia}}</span>
                    <a href="{{ url('/reservar') }}" style="margin-top: 0px; !important; float: right" type="button" class="vmas btn  btn-success  waves-effect waves-light m-t-10" >Regresar</a>
                </h4>

            </div>
        </div>
        <div class="portlet-body">
            <div class="row">


                <div class="col-xs-12">
                    <div class="col-xs-6">
                        <div class="portlet light bordered">
                        <div class="portlet">
                            <h4><i class="fa fa-dot-circle-o" aria-hidden="true" style="margin-right: 0.5%"></i><span style="font-weight: bold;">Bibliografia:</span>  {{$ejemplares[0]->Bibliografia}}</h4>
                            <h4><i class="fa fa-dot-circle-o" aria-hidden="true" style="margin-right: 0.5%"></i><span style="font-weight: bold;">Autor:</span>  {{$ejemplares[0]->Autor}}</h4>
                            <h4><i class="fa fa-dot-circle-o" aria-hidden="true" style="margin-right: 0.5%"></i><span style="font-weight: bold;">Tipo de Bibliografia:</span>  {{$ejemplares[0]->type}}</h4>
                            <h4><i class="fa fa-dot-circle-o" aria-hidden="true" style="margin-right: 0.5%"></i><span style="font-weight: bold;">Materia:</span>  {{$ejemplares[0]->Materia}}</h4>
                            <h4><i class="fa fa-dot-circle-o" aria-hidden="true" style="margin-right: 0.5%"></i><span style="font-weight: bold;">Editorial:</span>  {{$ejemplares[0]->Editorial}}</h4>
                        </div>
                    </div>
                    </div>
                    <div class="col-xs-6">
                        <div class="row" style="padding-left: 25px;">
                            <img src="{{ $ejemplares[0]->Image }}" width="300px" height="auto">
                        </div>
                    </div>
                </div>


            </div>
            <h3><i class="fa fa-list-ul" aria-hidden="true"></i> Ejemplares existentes</h3>
            <div class="Forum-ForumTopicList row" style="margin:20px">
                <table class="table table-striped table-hover tbEncuestas" id="tbEncuestas"
                       width="100%" role="grid" aria-describedby="tbEncuestas_info">
                    <thead class="thead-default">
                    <tr>
                        <th style="width: 1px !important;"></th>
                        <th>Bibliografia</th>
                        <th>Código</th>
                        <th>Año</th>
                        <th>Edición</th>
                        <th>Solicitud</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach($ejemplares as $item )
                        <tr>
                            <td><i class="icon-notebook"></i></td>
                            <td>{{$item->Bibliografia}}</td>
                            <td>{{$item->code}}</td>
                            <td>{{$item->Anio}}</td>
                            <td>{{$item->Edicion}}</td>
                            <td style="text-align:center !important;">
                                <button  style="margin-top: 0px; !important;" @if($item->Estado == 1) @else disabled @endif  DT="{{$item->Estado}}" type="button" class="vmas btn @if($item->Estado > 0) btn-success @endif waves-effect waves-light m-t-10"  data-ejemplar="{{$item->IDejemplar}}" data-toggle="modal" data-target="#con-close-modal" id="reserva_text">
                                    @if($item->Estado == 1) Reservar @else No Disponible @endif
                                </button>
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>

@endsection

@section('scripts')
    <script>

        $(document).ready(function () {

            var tableejemplares= $('#tbEncuestas').DataTable({
                "iDisplayLength": 5,
                "bLengthChange": false,
                "responsive": true,
                "searching": false,
                "language": {
                    "sProcessing": "Procesando...",
                    "sLengthMenu": "Mostrar _MENU_ datos por página",
                    "sZeroRecords": "No hubo resultados",
                    "sInfo": "Mostrando página _PAGE_ de _PAGES_",
                    "sInfoFiltered":"(filtrado de un total de _MAX_ registros)",
                    "sInfoPostFix": "",
                    "sSearch": "Buscar: ",
                    "emptyTable": "El contribuyente no posee deudas",
                    "infoEmpty": "No hay informacion",
                    "sUrl": "",
                    "sInfoThousands": ",",
                    "sLoadingRecords": "Cargando...",
                    "oPaginate":{
                        "sFirst": "Primero",
                        "sLast": "Último",
                        "sNext": "Siguiente",
                        "sPrevious": "Anterior"
                    },
                    "oAria": {
                        "sSortAscending": ": Activar para ordenar la columna de manera ascendente",
                        "sSortDescending": ": Activar para ordenar la columna de manera descendente"
                    }
                }
            });

            $("#tablebibliografias_filter").hide();


        });



        $("#tbEncuestas").on('click','#reserva_text',function (e) {

            if ( $(this).data('bibliografia') !== "undefined"){

                var dates = $('#date').val();
                var nameB = $('#Nbibliog').val();

                var IDejemplar = $(this).data('ejemplar');

                var myDate = new Date();
                var myDateIni = new Date();

                myDate.setDate(myDate.getDate()+parseInt(dates));

                var displayDate = (myDate.getDate()) + '/' + (myDate.getMonth()+1) + '/' + myDate.getFullYear();
                var horus = (myDateIni.getHours()+':'+myDateIni.getMinutes()+':'+myDateIni.getSeconds());
                var GetDate = (myDateIni.getDate()) + '/' + (myDateIni.getMonth()+1) + '/' + myDateIni.getFullYear();


                swal({
                    title: "Usted está reservando '"+nameB+"' el día "+GetDate+"",
                    text: "Desea confirmar la reserva.",
                    type: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Aceptar',
                    cancelButtonText: 'Cancelar',
                    closeOnConfirm: false
                }, function () {
                    var FI = (myDateIni.getFullYear()) + '-' + (myDateIni.getMonth()+1) + '-' + myDateIni.getDate();
                    var FF = (myDate.getFullYear()) + '-' + (myDate.getMonth()+1) + '-' + myDate.getDate();

                    var datos ={
                        'FI' : FI,
                        'FF' : FF,
                        'IDE' : IDejemplar,
                        'IdBibliografia' : $('#IDbibliog').val()
                    };

                    console.log(datos);

                    $.ajax({
                        type: 'post',
                        url: "{{url('detalle/post/reserva')}}",
                        data: datos,
                        success: function (data) {

                            if(data == 500 ){
                                swal("Advertencia",'Tiene una reserva de la biliografia escogida','warning');
                            }else {

                                swal({
                                        title: 'Usted tiene hasta el ' + displayDate + ' para realizar el préstamo del libro.',
                                        text: 'Reserva exitosa',
                                        type: "success",
                                        showCancelButton: false,
                                        showConfirmButton: true,
                                        confirmButtonColor: "#DD6B55",
                                        confirmButtonText: "Ok",
                                        closeOnConfirm: true,
                                        closeOnCancel: false
                                    },
                                    function (isConfirm) {
                                        if (isConfirm) {
                                            setTimeout(function () {
                                                location.reload();
                                            }, 350);
                                        }
                                    });
                            }


                        },
                        error: function (data) {
                            console.log(data);
                            swal('error',data,'warning');
                        }
                    });
                });

            }
        });




    </script>
@endsection