@extends('layouts.backendTemplate')

@section('content')

    <style>
        .link-container {
            display: flex;
            /* Use flexbox for alignment */
            align-items: center;
            /* Center items vertically */
            justify-content: space-between;
            /* Space between the URL and button */
        }

        .file-url {
            flex: 1;
            /* Allow the URL to take up available space */
            color: #007bff;
            /* Link color */
            text-decoration: none;
            /* Remove underline */
            overflow: hidden;
            /* Hide overflow */
            white-space: nowrap;
            /* Prevent text wrapping */
            text-overflow: ellipsis;
            /* Add ellipsis for overflow */
            margin-right: 10px;
            /* Space between text and button */
        }
    </style>

    <!--begin::Main-->
    <div class="app-main flex-column flex-row-fluid" id="kt_app_main">

        <div class="d-flex flex-column flex-column-fluid">


            @include('uc.breadcrumbList', [
                'title' => 'Document Management Folder ' . $folderView->name,
                'pageName' => 'Document Management',
            ])


            <div id="kt_app_content" class="app-content flex-column-fluid">

                <div id="kt_app_content_container" class="app-container container-xxl">

                    <div class="card">

                        @if (Session::has('messageSuccess'))
                            <div class="card-body">
                                @include('uc/messageSuccess')
                            </div>
                        @endif

                        @if (Session::has('messageFail'))
                            <div class="card-body">
                                @include('uc/messageFail')
                            </div>
                        @endif


                        <div class="card-header border-0 pt-6">
                            <div class="d-flex align-items-center position-relative my-1">
                            </div>

                            @if (Auth::user()->role != 2)
                                <div class="card-toolbar">
                                    <div class="d-flex justify-content-end" data-kt-customer-table-toolbar="base">
                                        <a href="{{ url('document/add/' . $folderView->id) }}" class="btn btn-primary">Add
                                        </a>
                                    </div>
                                </div>
                            @endif

                        </div>


                        <div class="card-header border-0 pt-5">

                            <div class="card-title">
                                <div class="d-flex align-items-center position-relative my-1">
                                    <span class="svg-icon svg-icon-1 position-absolute ms-4">
                                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <rect opacity="0.5" x="17.0365" y="15.1223" width="8.15546" height="2"
                                                rx="1" transform="rotate(45 17.0365 15.1223)" fill="currentColor">
                                            </rect>
                                            <path
                                                d="M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z"
                                                fill="currentColor"></path>
                                        </svg>
                                    </span>

                                    <input type="text" table-filter="search"
                                        class="form-control form-control-solid w-250px ps-15" placeholder="Search" />

                                </div>
                            </div>

                        </div>

                        <div class="card-body py-4">
                            <!--begin::Table-->
                            <table class="table align-middle table-row-dashed fs-6 gy-5" id="data-table">
                                <!--begin::Table head-->
                                <thead>
                                    <!--begin::Table row-->
                                    <tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">
                                        <th class="min-w-125px">Name</th>
                                        <th class="min-w-125px">Created</th>
                                        <th class="text-end min-w-100px">Manage</th>
                                    </tr>
                                </thead>

                                <tbody class="text-gray-600 fw-semibold">

                                    @foreach ($itemView as $obj)
                                        <tr>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <a href="#" class="text-gray-800 text-hover-primary">
                                                        @if (isset($obj['name']) && Str::endsWith($obj['name'], ['.pdf']))
                                                            <img alt="PDF Icon" class="w-30px me-3"
                                                                src="{{ url('assets/media/svg/files/pdf.svg') }}">
                                                        @elseif (isset($obj['name']) && Str::endsWith($obj['name'], ['.doc', '.docx']))
                                                            <img alt="DOC Icon" class="w-30px me-3"
                                                                src="{{ url('assets/media/svg/files/doc.svg') }}">
                                                        @else
                                                            <span class="svg-icon svg-icon-2x svg-icon-primary me-4">
                                                                <svg width="24" height="24" viewBox="0 0 24 24"
                                                                    fill="none" xmlns="http://www.w3.org/2000/svg">
                                                                    <path opacity="0.3"
                                                                        d="M19 22H5C4.4 22 4 21.6 4 21V3C4 2.4 4.4 2 5 2H14L20 8V21C20 21.6 19.6 22 19 22Z"
                                                                        fill="currentColor"></path>
                                                                    <path d="M15 8H20L14 2V7C14 7.6 14.4 8 15 8Z"
                                                                        fill="currentColor"></path>
                                                                </svg>
                                                            </span>
                                                        @endif
                                                        {{ $obj['name'] }}
                                                    </a>

                                                </div>
                                            </td>


                                            <td>
                                                {{ Carbon\Carbon::parse($obj['created_at'])->format('d, M Y') }}
                                            </td>

                                            <td class="min-w-100px text-end">

                                                {{-- Download --}}
                                                <a href="{{ env('R2_SCHEMA_URL') . $obj['name'] }}" target="_blank"
                                                    class="btn btn-sm btn-icon btn-light btn-active-light-primary"
                                                    type="button" data-bs-toggle="tooltip" aria-label="Coming soon"
                                                    data-bs-original-title="Coming soon" data-kt-initialized="1">
                                                    <i class="bi bi-download fs-3"></i>
                                                </a>

                                                {{-- Copy --}}
                                                <button type="button" data-action="copy"
                                                    data-url="{{ env('R2_SCHEMA_URL') . $obj['name'] }}"
                                                    class="btn btn-sm btn-icon btn-light btn-active-light-primary copy-button">
                                                    <span class="svg-icon svg-icon-2">
                                                        <svg width="24" height="24" viewBox="0 0 24 24"
                                                            fill="none" xmlns="http://www.w3.org/2000/svg">
                                                            <path opacity="0.5"
                                                                d="M18 2H9C7.34315 2 6 3.34315 6 5H8C8 4.44772 8.44772 4 9 4H18C18.5523 4 19 4.44772 19 5V16C19 16.5523 18.5523 17 18 17V19C19.6569 19 21 17.6569 21 16V5C21 3.34315 19.6569 2 18 2Z"
                                                                fill="currentColor"></path>
                                                            <path fill-rule="evenodd" clip-rule="evenodd"
                                                                d="M14.7857 7.125H6.21429C5.62255 7.125 5.14286 7.6007 5.14286 8.1875V18.8125C5.14286 19.3993 5.62255 19.875 6.21429 19.875H14.7857C15.3774 19.875 15.8571 19.3993 15.8571 18.8125V8.1875C15.8571 7.6007 15.3774 7.125 14.7857 7.125ZM6.21429 5C4.43908 5 3 6.42709 3 8.1875V18.8125C3 20.5729 4.43909 22 6.21429 22H14.7857C16.5609 22 18 20.5729 18 18.8125V8.1875C18 6.42709 16.5609 5 14.7857 5H6.21429Z"
                                                                fill="currentColor"></path>
                                                        </svg>
                                                    </span>
                                                    <!--end::Svg Icon-->
                                                </button>


                                                {{-- Delete --}}
                                                @if (Auth::user()->role != 2)
                                                    <a href="#" data-id="{{ $obj['id'] }}"
                                                        class="btn btn-icon btn-bg-light btn-active-color-primary btn-sm delete-item">
                                                        <span class="svg-icon svg-icon-3">
                                                            <svg width="24" height="24" viewBox="0 0 24 24"
                                                                fill="none" xmlns="http://www.w3.org/2000/svg">
                                                                <path
                                                                    d="M5 9C5 8.44772 5.44772 8 6 8H18C18.5523 8 19 8.44772 19 9V18C19 19.6569 17.6569 21 16 21H8C6.34315 21 5 19.6569 5 18V9Z"
                                                                    fill="currentColor" />
                                                                <path opacity="0.5"
                                                                    d="M5 5C5 4.44772 5.44772 4 6 4H18C18.5523 4 19 4.44772 19 5V5C19 5.55228 18.5523 6 18 6H6C5.44772 6 5 5.55228 5 5V5Z"
                                                                    fill="currentColor" />
                                                                <path opacity="0.5"
                                                                    d="M9 4C9 3.44772 9.44772 3 10 3H14C14.5523 3 15 3.44772 15 4V4H9V4Z"
                                                                    fill="currentColor" />
                                                            </svg>
                                                        </span>
                                                    </a>
                                                @endif
                                            </td>


                                        </tr>
                                    @endforeach

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


@stop


@section('script')

    <script type="text/javascript">
        const baseUrl = "{{ url('document') }}";
        var datatable;
        datatable = $("#data-table").DataTable({
            "info": false,
            "order": [],
            "pageLength": 25,
            lengthMenu: [
                [10, 25, 50, 100, 500, 1000],
                [10, 25, 50, 100, 500, 1000]
            ]
        });

        // Filter by search
        const filterSearch = document.querySelector('[table-filter="search"]');
        filterSearch.addEventListener('keyup', function(e) {
            datatable.search(e.target.value).draw();
        });

        // filter by status
        const filterStatus = document.querySelector('[table-filter="status"]');
        $(filterStatus).on('change', e => {
            let value = e.target.value;
            if (value === 'all') {
                value = '';
            }
            datatable.column(4).search(value).draw();
        });


        // Remove
        $(document).on('click', '.delete-item', function() {
            swal.fire({
                allowOutsideClick: false,
                text: "Are you sure you would like to Delete?",
                icon: "warning",
                buttonsStyling: false,
                showDenyButton: true,
                confirmButtonText: "Yes",
                denyButtonText: 'No',
                customClass: {
                    confirmButton: "btn btn-primary",
                    denyButton: "btn btn-light-danger"
                }
            }).then((result) => {
                if (result.isConfirmed) {

                    alertLoading("Loading")

                    // set up ajax
                    initAjaxSetupToken();

                    const ajaxProp = {
                        url: "{{ url('document/delete') }}",
                        type: 'POST',
                        data: {
                            item_id: $(this).data('id')
                        },
                    };

                    // const id = $(this).data('id');
                    const id = "{{ $folderView->id }}";

                    $.ajax(ajaxProp).done(function(res) {
                        if (res.status) {
                            const url = "{{ url('document/folder') }}/" + id;
                            alertSuccessWithUrl('Notice', "Delete success", url);
                            hideLoading();
                        } else {
                            alertFail('Notice', res.message ?? "Unsuccessfully");
                            hideLoading();
                        }
                    }).fail(function(xhr, status, error) {
                        logAjaxError(xhr, status, error);
                        alertFail('Notice', error.message ?? "Unsuccessfully");
                        hideLoading();
                    });
                }
            });
        });

        document.addEventListener('DOMContentLoaded', function() {
            const copyButtons = document.querySelectorAll('.copy-button');

            copyButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const urlToCopy = button.getAttribute('data-url');

                    // Copy the URL to the clipboard
                    navigator.clipboard.writeText(urlToCopy).then(() => {
                        alert(
                            'Link copied to clipboard!'
                        ); // You can change this to a toast notification
                    }).catch(err => {
                        console.error('Could not copy text: ', err);
                    });
                });
            });
        });
    </script>

@endsection