@extends('layouts.app')
@push('css')
@endpush
@section('content')
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-12">
                    <div class="card">
                        <div class="card-header">
                            <div class="row">
                                <div class="col-sm-12 col-md-6">
                                    <h3>Repository File Management</h3>
                                </div>
                                <div class="col-sm-12 col-md-6">
                                    <ol class="breadcrumb float-sm-right">
                                        <div class="d-inline p-2 text-white text-right">
                                            <a href="{{ route('home') }}" class="btn btn-sm btn-info"><i
                                                    class="fas fa-home"></i>
                                                Home
                                            </a>
                                        </div>
                                        <div class="d-inline p-2 text-white text-right">
                                            <a href="{{ route('repository.index') }}"
                                                class="btn btn-sm btn-primary text-right"><i
                                                    class="fas fa-arrow-circle-left"></i> Back</a>
                                        </div>
                                    </ol>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12">
                    <div class="card">
                        <div class="card-header">
                            <div class="row">
                                <div class="col-sm-12 col-md-6">
                                    <div class="card-body">
                                        <div class="info-box">
                                            <span class="info-box-icon bg-info"><i
                                                    class="fa-solid fa-book-open-reader"></i></span>

                                            <div class="info-box-content">
                                                <span class="info-box-text">Course Name</span>
                                                <span class="info-box-number">
                                                    @if (isset($repositoryDetails[0]->course_title))
                                                        {{ $repositoryDetails[0]->course_title }}
                                                    @else
                                                        Course Title not set
                                                    @endif
                                                </span>
                                            </div>
                                        </div>
                                        <div class="info-box">
                                            <span class="info-box-icon bg-success"><i
                                                    class="fa fa-file-archive-o"></i></span>
                                            <div class="info-box-content">
                                                <span class="info-box-text">Repository Name</span>
                                                <span class="info-box-number">
                                                    @if (isset($repositoryDetails[0]->title))
                                                        {{ $repositoryDetails[0]->title }}
                                                    @else
                                                        Repository Title not set
                                                    @endif
                                                </span>
                                            </div>
                                        </div>
                                        <div class="info-box">
                                            <span class="info-box-icon bg-info"><i class="fa fa-address-card"></i></span>
                                            <div class="info-box-content">
                                                <span class="info-box-text">Created By</span>
                                                <span class="info-box-number">
                                                    @if (isset($repositoryDetails[0]->full_name))
                                                        {{ $repositoryDetails[0]->full_name }}
                                                    @else
                                                        User not found
                                                    @endif
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-12 col-md-6">
                                    <div class="card-body">
                                        <center>Space Availability</center>
                                        <canvas id="pieChart"
                                            style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="card-header">
                            <div class="row">
                                <div class="col-sm-12 col-md-8">
                                    <h5>Search</h5>
                                    <input name="search" id="search" type="search" class="form-control"
                                        placeholder="Search by File Name or Tags">
                                    <form action="{{ route('file.search') }}">
                                    </form>
                                </div>
                                <div class="col-sm-12 col-md-4 text-center">
                                    <h5>Add New Files</h5>
                                    @can('repositoryfile.create')
                                        <div class="d-inline p-2 text-white">
                                            <a href="{{ route('repositoryfile.create', $id) }}"
                                                class="btn btn-md btn-outline-primary"><i class="fas fa-plus-square"></i> Add
                                                file</a>
                                        </div>
                                    @endcan
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <center>
                                <h5>Files</h5>
                            </center>
                            <hr color="black" size="2" width="50%">
                            <div class="view" id="view">
                                <div class="row">

                                    <input name="repo_id" type="hidden" value="{{ $id }}">
                                    @foreach ($repositoryfiles as $key => $file)
                                        <div class="col-md-6 col-lg-4 col-xl-3">
                                            <div class="card mb-2 bg-gradient-dark">
                                                <a href="{{ route('repositoryfile.path', $file->id) }}" target="_blank">
                                                    <img class="card-img-top img-thumbnail" src="../dist/img/boxed-bg.jpg"
                                                        alt="Dist Photo 1">
                                                    <div class="card-img-overlay d-flex flex-column justify-content-end">
                                                        @if ($file->extension == 'pdf')
                                                            <center>
                                                                <div><img src="{{ asset('public/dist/img/download.png') }}"
                                                                        alt="Dist Photo 1" width="60px" height="45px">
                                                                </div>
                                                            </center><br>
                                                        @elseif ($file->extension == 'csv' || $file->extension == 'xlsx' || $file->extension == 'xls')
                                                            <center>
                                                                <div><img
                                                                        src="{{ asset('public/dist/img/excel-icon.png') }}"
                                                                        alt="Dist Photo 1" width="60px" height="45px">
                                                                </div>
                                                            </center><br>
                                                        @elseif($file->extension == 'doc' || $file->extension == 'docx')
                                                            <center>
                                                                <div><img
                                                                        src="{{ asset('public/dist/img/word-icon.png') }}"
                                                                        alt="Dist Photo 1" width="50px" height="45px">
                                                                </div>
                                                            </center><br>
                                                        @else
                                                            <center>
                                                                <div><img src="{{ asset('public/dist/img/icon.png') }}"
                                                                        alt="Dist Photo 1" width="60px" height="45px">
                                                                </div>
                                                            </center><br>
                                                        @endif


                                                        <h5 class="card-title text-primary text-center text-dark">
                                                            {{ $file->file_name }}
                                                        </h5>
                                                        <p class="card-text text-dark pb-2 pt-1" style="font-size: small">
                                                            Uploaded by
                                                            @if (isset($file->users->full_name))
                                                                {{ $file->users->full_name }}
                                                            @else
                                                                User Not available!
                                                            @endif

                                                            <br>Uploaded {{ $file->created_at->diffForHumans() }}
                                                        </p>
                                                        <div class="align-bottom">
                                                            @can('repositoryfile.edit')
                                                                @if (Auth::user()->id == $file->user_id || Auth::user()->role_id == 1 || Auth::user()->role_id == 2)
                                                                    <a href="{{ route('repositoryfile.edit', $file->id) }}"
                                                                        class="btn btn-sm btn-success m-1"><i
                                                                            class="fas fa-edit"></i> Edit</a>
                                                                @endif
                                                            @endcan
                                                            @can('repositoryfile.destroy')
                                                                @if (Auth::user()->id == $file->user_id || Auth::user()->role_id == 1 || Auth::user()->role_id == 2)
                                                                    <button type="submit" class="btn btn-danger btn-sm"
                                                                        onclick="deleteCategory({{ $file->id }})"><i
                                                                            class="fas fa-trash"></i> Delete</button>
                                                                    <form id="delete-form-{{ $file->id }}"
                                                                        action="{{ route('repositoryfile.destroy', $file->id) }}"
                                                                        method="POST" style="display: none;">
                                                                        @csrf
                                                                        @method('DELETE')
                                                                    </form>
                                                                @endif
                                                            @endcan
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container-fluid -->
    </div>
@endsection

@push('js')
    <script src="https://code.iconify.design/2/2.0.3/iconify.min.js"></script>
    <script type="text/javascript">
        $('#search').on('keyup', function() {
            let value = $(this).val();
            let id = $('input[name="repo_id"]').val();
            $.ajax({
                type: 'get',
                url: '{{ route('file.search') }}',
                data: {
                    'search': value,
                    'id': id
                },
                success: function(data) {
                    var data = $(data);
                    $('#view').hide().html(data).fadeIn();
                }
            });
        })
    </script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        var used = {{ $total_size / 1024 }};
        used = used.toFixed(2);
        var free = {{ 1024 - $total_size / 1024, 3 }};
        free = free.toFixed(2);
        var pieData = {
            labels: [
                'Used ' + used + ' MB',
                'Free ' + free + ' MB'
            ],
            datasets: [{
                data: [used, free],
                backgroundColor: ['#f56954', '#00a65a'],
            }]
        }
        //-------------
        //- PIE CHART -
        //-------------
        // Get context with jQuery - using jQuery's .get() method.
        var pieChartCanvas = $('#pieChart').get(0).getContext('2d')
        var pieOptions = {
            maintainAspectRatio: false,
            responsive: true,
        }
        //Create pie or douhnut chart
        // You can switch between pie and douhnut using the method below.
        new Chart(pieChartCanvas, {
            type: 'pie',
            data: pieData,
            options: pieOptions
        })
    </script>
@endpush