@extends('admin.layouts.app')

@section('content')
    <!--begin::Content container-->
    <div id="kt_app_content_containe pt-5" class="app-container container-xxl" data-bs-backdrop='static'>
        <!--begin::Card-->
        @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show mt-2">
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif
        <div class="card my-5 m-xl-10">
            <!--begin::Card header-->
            <div class="card-header border-bottom-0 pt-6">
                <!--begin::Card title-->
                <div class="card-title">
                    <form id="files_form" name="files_form" action="{{ route('admin.' . $route . '.store') }}"
                        method="POST" enctype="multipart/form-data">
                        @csrf
                        @method('POST')
                        <label class="btn btn-dark m-b border border-secondary" for="upload">
                            <input type="file" id="upload" name="fileToUpload" multiple="" hidden="hidden"
                                accept=".png, .jpg, .jpeg, .svg">
                            Upload Files
                        </label>
                        @error('fileToUpload')
                            <span class="error text-danger" aria-hidden="true">{{ $message }}</span>
                        @enderror
                    </form>
                </div>
                <!--begin::Card title-->
            </div>
            <!--end::Card header-->
            <!--begin::Card body-->
            <div class="card-body py-4">
                <div class="table-responsive mt-5">
                    <!--begin::Table-->
                    <table class="table table-rounded table-striped table-row-bordered table-row-gray-400 gy-7 gs-7" id="kt_table_files">
                        <!--begin::Table head-->
                        <thead>
                            <!--begin::Table row-->
                            <tr class="fw-semibold fs-6 text-gray-800 border-bottom border-gray-700">
                                <th class="min-w-100px text-dark fw-bold">File</th>
                                <th class="min-w-200px text-dark fw-bold">URL</th>
                                <th class="min-w-100px text-dark fw-bold">Size</th>
                                <th class="min-w-100px text-dark fw-bold">Action</th>
                            </tr>
                            <!--end::Table row-->
                        </thead>
                        <!--end::Table head-->
                        <!--begin::Table body-->
                        <tbody class="text-dark fw-semibold">
                        </tbody>
                        <!--end::Table body-->
                    </table>
                </div>
                <!--end::Table-->
            </div>
            <!--end::Card body-->
        </div>
        <!--end::Card-->
    </div>
    <!--end::Content container-->
@endsection

@section('script')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>

    <script>
        $(document).ready(function() {
            const table = $('#kt_table_files').DataTable({
                "lengthMenu": [ 200, 500, 1000],
                order: false,
                ajax: {
                    url: "{{ route('admin.' . $route . '.index') }}",
                    data: function(d) {}
                },
                columns: [{
                        data: 'file_name',
                        name: 'file_name',
                        className: 'kt_table_files_col',
                        orderable: false,
                    },
                    {
                        data: 'url',
                        name: 'url',
                        className: 'kt_table_files_col',
                        orderable: true,
                    },
                    {
                        data: 'file_size',
                        name: 'file_size',
                        className: 'kt_table_files_col',
                        orderable: true,
                    },
                    {
                        data: 'action',
                        name: 'action',
                        className: 'kt_table_files_col',
                        orderable: false
                    },
                ]
            });

            $('#upload').on('change', function() {
                $('#files_form').submit();
            });

            const clipboard = new ClipboardJS('#copy_pre');

            clipboard.on('success', function(e) {
                console.log('Text copied:', e.text);
            });

            clipboard.on('error', function(e) {
                console.error('Unable to copy text');
            });
        });
    </script>
@endsection