@extends('layouts.view')
@section('title','Files Management')
@section('content')
<link href="{{ asset('assets/js/simplebar.min.css') }}" rel="stylesheet" type="text/css" />
<style>
    .file-box{
        display: inline-block;
        vertical-align: middle;
        -webkit-transform: perspective(1px) translateZ(0);
        transform: perspective(1px) translateZ(0);
        box-shadow: 0 0 1px rgba(0, 0, 0, 0);
        -webkit-transition-duration: 0.5s;
        transition-duration: 0.5s;
    }
    .file-box:hover{
        -webkit-transform: translatey(-8px);
        transform: translatey(-8px);
    }

</style>

    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12">
                <div class="page-title-box">
                    <div class="float-right">

                    </div>
                    <h4 class="page-title"></h4>
                </div><!--end page-title-box-->
            </div><!--end col-->
        </div><!--end row-->
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <form  class="form-horizontal row-fluid" id="sample_form" method="post" action="#"  enctype="multipart/form-data">
                        @csrf
                    <div class="row">

                        <div class="col-lg-3">
                            <div class="card">
                                <div class="card-header">
                                    <div class="row align-items-center">
                                        <div class="col">
                                            <h4 class="card-title">Years</h4>
                                        </div><!--end col-->
                                    </div>  <!--end row-->
                                </div><!--end card-header-->
                                <div class="card-body">
                                    <div class="files-nav">
                                        <div class="nav flex-column nav-pills" id="files-tab" aria-orientation="vertical">
                                            @foreach ($yearss as $year)
                                                                                                <a class="nav-link @if($year==$this_year) active @endif align-items-center" id="files-test-tab" data-bs-toggle="pill" href="#files-{{$year}}" aria-selected="false">
                                                    <i data-feather="folder" class="align-self-center icon-dual-file icon-sm me-2"></i>
                                                    <div class="d-inline-block align-self-center">
                                                        <h5 class="m-0">&nbsp; {{$year}}</h5>
                                                    </div>
                                                </a>
                                            @endforeach
                                        </div>
                                    </div>
                                </div><!--end card-body-->
                            </div><!--end card-->
                        </div><!--end col-->
                        <div class="col-lg-9">

                            <div class="">
                                <div class="tab-content" id="files-tabContent">
                                    @foreach ($yearss as $year)
                                                                            <div class="tab-pane fade @if($year==$this_year) show active @endif" id="files-{{$year}}">
                                        <h4 class="card-title mt-0 mb-3">{{$year}}</h4>
                                        <div class="file-box-content">
                                        @foreach ($months as $month)
                                                                                        <a href="#" class="link-click" data-date="{{$year}}-{{$month_name}}">
                                                <div class="file-box">
                                                    <div class="text-center">
                                                        <i class="lar {{$class}}"></i>
                                                        <h6 class="text-truncate">{{$month}}</h6>
                                                    </div>
                                                </div></a>

                                            @endforeach
                                        </div>
                                    </div>
                                    @endforeach
                                    </div><!--end tab-pen-->
                        </div>
                                <!--end tab-content-->
                </div></div>

        <div id="viewtable">
                        <h4 class="mt-0 header-title">Files Table </h4>
                         <p >

                                   <div id="loader" style='text-align:center;'> <img src="{{ asset('assets/images/unnamed-2.gif') }}"></div>
                            </p>

                            <table id="datatable-buttons-ahmed" class="table table-striped table-bordered dt-responsive nowrap" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                                <thead>
                                <tr>
                                    <th>Upload Date</th>
                                    <th>Browse File</th>

                                </tr>
                                </thead>
                            </table>
                    </div><!-- end col -->
                    </form>
                </div>

            </div>
        </div> <!-- end col -->
    </div>
<script src="{{ asset('assets/libs/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
<script src="{{ asset('assets/libs/simplebar/simplebar.min.js') }}"></script>
<script src="{{ asset('assets/libs/feather.min.js') }}"></script>
<script src="{{ asset('assets/js/app2.js') }}"></script>
    <script>
    $(document).ready(function(){
        $.fn.dataTableExt.sErrMode = 'none';
        var arraydata=['upload date','Browse File'];
        $("#datatable-buttons-ahmed").hide();
        $("#loader").hide();
        $('.link-click').click(function(){
           // alert($(this).data('date'));
            $("#datatable-buttons-ahmed").dataTable().fnDestroy();
            $.ajax({
                url: "{{route('filestable_table')}}",
                type: 'POST',
                data: {
                    'date':$(this).data('date'),
                    "_token": "{{ csrf_token() }}",
                },
                beforeSend: function(){
                    // Show image container
                    $("#datatable-buttons-ahmed").hide();
                    $("#loader").show();
                }
            }).done( function(data) {
                $("#loader").hide();
                //    $('.progress-bar').text('Search Results :');
                $('.progress-bar').css('width', '100%');
                $(".progress-bar").hide('slow');
                $("#datatable-buttons-ahmed").css('width', '100%');
                $("#datatable-buttons-ahmed").show('slow');
                var table =   $('#datatable-buttons-ahmed').DataTable( {
                    lengthChange: false,
                    buttons: ['copy', 'excel', 'pdf', 'colvis'],
                    aaData: data.data,
                    columns:[
                        {
                            data: 'upload_date',
                            // name: 'upload_date'
                        },
                        {
                            data: 'file_url',
                            // name: 'file_path',
                            //orderable: false
                        }
                    ],
                    "aoColumns": [
                        { sWidth: '10%' },
                        { sWidth: '40%' },
                        { sWidth: '40%' },
                    ],
                    "ordering": false

                });
                table.buttons().container()
                    .appendTo('#datatable-buttons-ahmed_wrapper .col-md-6:eq(0)');

                $('#row_callback').DataTable( {
                    "createdRow": function ( row, data, index ) {
                        if ( data[5].replace(/[\$,]/g, '') * 1 > 150000 ) {
                            $('td', row).eq(5).addClass('highlight');
                        }
                    }
                } );

            })
        });


    });
</script>
@endsection