@extends('layouts.admin')

@section('content')
<section>
    <div class="container-fluid">
        <!-- Start: Breadcrumb -->
        <nav class="breadcrumb-nav" aria-label="breadcrumb">
            <h4 class="breadcrumb-heading">Manage Files</h4>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                <li class="breadcrumb-item"><a href="{{ route('settings') }}">Settings</a></li>
                <li class="breadcrumb-item active" aria-current="page">Files</li>
            </ol>
        </nav>
        <!-- End: Breadcrumb -->
        
        @if(count($files) > 0)
            <div class="row row-cols-1 g-3">
                <div class="col">
                    <x-alert></x-alert>
                    <x-alert-danger></x-alert-danger>
                </div>
                <div class="col">
                    <div class="row justify-content-between align-items-center">
                        <div class="col-xl-6">
                            <form action="{{ route('files.search') }}" method="GET" role="search">
                                <div class="input-group">
                                    <span class="input-group-text" id="Search"><i class="bi bi-search"></i></span>
                                    <input type="search" name="searchTerm" class="form-control white @error('searchTerm') is-invalid @enderror" placeholder="Search..." aria-label="Search input" aria-describedby="Search" value="{{ isset($searchTerm) ? $searchTerm : '' }}">
                                    @if (isset($searchTerm))
                                        <a href="{{ route('files') }}" class="input-group-text" id="Search">{{ __('All Files') }}</a>
                                    @endif
                                    @error('searchTerm')
                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                    @enderror
                                </div>
                            </form>
                        </div>
                        <div class="col-xl-6">
                            <div class="float-end">
                                <button type="button" class="button dark delete_all gap-2"><i class="bi bi-trash"></i> Delete All Selected</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th width="2%" class="text-center">
                                        <input class="form-check-input" type="checkbox" id="check_all">
                                    </th>
                                    <th width="5%" class="text-center">Image</th>
                                    <th width="40%">File Name</th>
                                    <th width="7%" class="text-center">Size</th>
                                    <th width="7%" class="text-center">Type</th>
                                    <th width="8%" class="text-center">Dimension</th>
                                    <th class="text-center">Date Modified</th>
                                    <th width="6%" class="text-center">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($files as $key => $value)
                                    <tr>
                                        <td class="text-center">
                                            <input class="form-check-input sub_check" type="checkbox" data-id="{{ encrypt($value->id) }}" data-file_name="{{ $value->file_name }}">
                                        </td>
                                        <td class="text-center">
                                            @if (Storage::exists('public/files/'.$value->file_name))
                                                <img class="thumbnail-sm lozad" data-src="{{ $value->image_file }}" alt="{{ $value->original_file_name }}">
                                            @else
                                                NULL
                                            @endif
                                        </td>
                                        <td>{{ $value->original_file_name }}</td>
                                        <td class="text-center">
                                            @if (Storage::exists('public/files/'.$value->file_name))
                                                {{ Helper::bytesToHuman(Storage::size('public/files/'. $value->file_name)) }}
                                            @else
                                                NULL
                                            @endif
                                        </td>
                                        <td class="text-center">{{ $value->type }}</td>
                                        <td class="text-center">{{ $value->dimension ?? 'Not Supported'}}</td>
                                        <td class="text-center">{{ Helper::dateFormatter($value->updated_at) }}</td>
                                        <td>
                                            <div class="dropdown d-flex justify-content-center dropend">
                                                <button class="button sm text-dark" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                                                    <i class="bi bi-three-dots text-muted"></i>
                                                </button>
                                                <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                                                    <li><a class="dropdown-item rename" href="javascript:void(0);" data-id="{{ encrypt($value->id) }}" data-original_file_name="{{ $value->original_file_name }}">Rename</a></li>
                                                    <li><a class="dropdown-item" href="{{ asset('storage/files/'. $value->file_name) }}" download>Download</a></li>
                                                    <li><a class="dropdown-item delete" href="javascript:void(0);" data-id="{{ encrypt($value->id) }}" data-file_name="{{ $value->file_name }}">Delete</a></li>
                                                </ul>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="col">
                    <div class="pagination-wrapper">
                        <span>Showing {{ $files->firstItem() }} to {{ $files->lastItem() }} of total {{$files->total() }} entries</span>
                        {{ $files->withQueryString()->links() }}
                    </div>
                </div>
            </div>
        @else
            <div class="row">
                <div class="col-xl-12">
                    <div class="empty-state-relative">
                        <div class="empty-state-relative-icon-wrapper">
                            <i class="bi bi-images empty-state-relative-icon"></i>
                        </div>
                        <h4 class="empty-state-relative-text">There are no files yet.</h4>
                        <span>All uploaded files will show up here.</span>
                    </div>
                </div>
            </div>
        @endif
    </div>
</section>
@endsection

@if (count($files) > 0)
    @section('modals')
        <!-- Modal -->
        <div class="modal fade" id="renameModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Rename</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form method="POST" action="{{ route('file_rename') }}">
                        @method('PUT')
                        @csrf
                        <input type="hidden" class="form-control" name="id" id="file_ren_id">
                        <div class="modal-body">
                            <div class="row row-cols-1">
                                <div class="col">
                                    <div class="form-group">
                                        <label for="file-name" class="form-label">File Name</label>
                                        <input type="text" name="original_file_name" id="file_ren_name" class="form-control" required>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="button dark" data-bs-dismiss="modal">Close</button>
                            <button type="submit" class="button primary">Save</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Confirmation</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form method="POST" action="{{ route('file_delete') }}">
                        @method('DELETE')
                        @csrf
                        <input type="hidden" class="form-control" name="id" id="file_id">
                        <input type="hidden" class="form-control" name="file_name" id="file_name">
                        <div class="modal-body">
                            <p>This will remove this post from your blog. You will no longer be able to view or edit it once deleted.</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="button dark" data-bs-dismiss="modal">Close</button>
                            <button type="submit" class="button danger">Delete</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Modal -->
        <div class="modal fade" id="bulkDeleteModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Confirmation</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form method="POST" action="{{ route('file_bulk_delete') }}">
                        @method('DELETE')
                        @csrf
                        <input type="hidden" class="form-control" name="id" id="array_id">
                        <input type="hidden" class="form-control" name="file_name" id="array_file_name">

                        <div class="modal-body">
                            <p>Are you sure you want to delete this row?</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="button dark" data-bs-dismiss="modal">Close</button>
                            <button type="submit" class="button danger">Delete</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    @endsection

    @push('scripts')
        <script type="text/javascript">
            $(document).on('click', '.rename', function() {
                $('#file_ren_id').val($(this).data('id'));
                $('#file_ren_name').val($(this).data('original_file_name'));
                $('#renameModal').modal('show');
            });

            $(document).on('click', '.delete', function() {
                $('#file_id').val($(this).data('id'));
                $('#file_name').val($(this).data('file_name'));
                $('#deleteModal').modal('show');
            });
        </script>
        <script>
            $(document).ready(function() {     
                
                $('#check_all').on('click', function(e) {
                    if($(this).is(':checked',true)) {
                        $(".sub_check").prop('checked', true);
                        $("tr").addClass('table-highlighted');  
                    } else {  
                        $(".sub_check").prop('checked',false);  
                        $("tr").removeClass('table-highlighted');  
                    }
                });
    
                $('.sub_check').on('click', function(e) {
                    $(this).closest('tr').toggleClass("table-highlighted", this.checked);
                });
                
                $('.delete_all').on('click', function(e) {
    
                    let array_id_values = [];
                    let array_file_values = [];  
    
                    $(".sub_check:checked").each(function() {  
                        array_id_values.push($(this).attr('data-id'));
                        array_file_values.push($(this).attr('data-file_name'));
                    });  
    
                    if(array_id_values.length <=0) {  
                        alert("Please select row.");  
                    }  else {  
                        $('#array_id').val(array_id_values);
                        $('#array_file_name').val(array_file_values);
                        $('#bulkDeleteModal').modal('show');
                    }  
                });
            });
        </script>
    @endpush
@endif