@extends('borrower.partial.master')
@section('uploadFile', 'active')
@section('content')
    @push('style')
        <link rel="stylesheet" type="text/css" href="{{ asset('portal/drive.css') }}">
        <style>
            html body .content.app-content {
                overflow: inherit !important;
            }

            select {
                -webkit-appearance: listbox !important
            }

        </style>
    @endpush
    <section id="configuration">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <!--begin::Card header-->
                    <div class="card-body bg-success2 text-white">
                        <div class="d-flex align-items-center">
                            <!--begin::Icon-->
                            <div class="symbol symbol-circle me-5">
                                <div class="symbol-label bg-transparent text-primary border border-white border-dashed">
                                    <!--begin::Svg Icon | path: icons/duotune/abstract/abs020.svg-->
                                    <span class="svg-icon svg-icon-2x svg-icon-success">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                            fill="none">
                                            <path
                                                d="M17.302 11.35L12.002 20.55H21.202C21.802 20.55 22.202 19.85 21.902 19.35L17.302 11.35Z"
                                                fill="black"></path>
                                            <path opacity="0.3"
                                                d="M12.002 20.55H2.802C2.202 20.55 1.80202 19.85 2.10202 19.35L6.70203 11.45L12.002 20.55ZM11.302 3.45L6.70203 11.35H17.302L12.702 3.45C12.402 2.85 11.602 2.85 11.302 3.45Z"
                                                fill="black"></path>
                                        </svg>
                                    </span>
                                    <!--end::Svg Icon-->
                                </div>
                            </div>
                            <!--end::Icon-->
                            <!--begin::Title-->
                            <div class="d-flex flex-column text-white">
                                <h2 class="mb-1 text-white">File Manager</h2>
                                <div class="text-muted fw-bolder">
                                    <a href="#" class="text-success">File Manager</a>
                                    {{-- <span class="text-white mx-3">|</span><span class="text-white">2.6 GB</span> --}}
                                    @php
                                        $itemCount = $folders->count() + $files->count();
                                    @endphp
                                    <span class="mx-3 text-white">|</span>
                                    <span class="text-white">{{ $itemCount }} items</span>
                                </div>
                            </div>
                            <!--end::Title-->
                        </div>
                        <div class="card-title">
                            <!--begin::Search-->
                            <div class="d-flex align-items-center position-relative my-1">
                                <!--begin::Svg Icon | path: icons/duotune/general/gen021.svg-->
                                <span class="svg-icon svg-icon-1 position-absolute ms-6">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                        fill="none">
                                        <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="black"></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="grey"></path>
                                    </svg>
                                </span>
                                <!--end::Svg Icon-->
                                <input type="text" class="form-control form-control-solid w-250px ps-15"
                                    placeholder="Search Files &amp; Folders">
                            </div>
                            <!--end::Search-->
                        </div>
                        <!--begin::Card toolbar-->
                        <div class="card-toolbar">
                            <!--begin::Toolbar-->
                            <div class="d-flex justify-content-end">
                                <!--begin::Export-->
                                <button type="button" class="btn btn-success mx-1" id="kt_file_manager_new_folder"
                                    data-toggle="modal" data-target="#exampleModal">
                                    <!--begin::Svg Icon | path: icons/duotune/files/fil013.svg-->
                                    {{-- <span class="svg-icon svg-icon-2">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                            fill="none">
                                            <path opacity="0.3" d="M10 4H21C21.6 4 22 4.4 22 5V7H10V4Z" fill="black">
                                            </path>
                                            <path
                                                d="M10.4 3.60001L12 6H21C21.6 6 22 6.4 22 7V19C22 19.6 21.6 20 21 20H3C2.4 20 2 19.6 2 19V4C2 3.4 2.4 3 3 3H9.2C9.7 3 10.2 3.20001 10.4 3.60001ZM16 12H13V9C13 8.4 12.6 8 12 8C11.4 8 11 8.4 11 9V12H8C7.4 12 7 12.4 7 13C7 13.6 7.4 14 8 14H11V17C11 17.6 11.4 18 12 18C12.6 18 13 17.6 13 17V14H16C16.6 14 17 13.6 17 13C17 12.4 16.6 12 16 12Z"
                                                fill="black"></path>
                                            <path opacity="0.3"
                                                d="M11 14H8C7.4 14 7 13.6 7 13C7 12.4 7.4 12 8 12H11V14ZM16 12H13V14H16C16.6 14 17 13.6 17 13C17 12.4 16.6 12 16 12Z"
                                                fill="black"></path>
                                        </svg>
                                    </span> --}}
                                    <i class="fa fa-folder" aria-hidden="true"></i>
                                    <!--end::Svg Icon-->
                                    New Folder
                                </button>
                                <!--end::Export-->
                                <!--begin::Add customer-->
                                <button type="button" class="btn btn-success" data-toggle="modal"
                                    data-target="#exampleModal2">
                                    <!--begin::Svg Icon | path: icons/duotune/files/fil018.svg-->
                                    {{-- <span class="svg-icon svg-icon-2">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                            fill="none">
                                            <path opacity="0.3" d="M10 4H21C21.6 4 22 4.4 22 5V7H10V4Z" fill="black">
                                            </path>
                                            <path
                                                d="M10.4 3.60001L12 6H21C21.6 6 22 6.4 22 7V19C22 19.6 21.6 20 21 20H3C2.4 20 2 19.6 2 19V4C2 3.4 2.4 3 3 3H9.20001C9.70001 3 10.2 3.20001 10.4 3.60001ZM16 11.6L12.7 8.29999C12.3 7.89999 11.7 7.89999 11.3 8.29999L8 11.6H11V17C11 17.6 11.4 18 12 18C12.6 18 13 17.6 13 17V11.6H16Z"
                                                fill="black"></path>
                                            <path opacity="0.3"
                                                d="M11 11.6V17C11 17.6 11.4 18 12 18C12.6 18 13 17.6 13 17V11.6H11Z"
                                                fill="black"></path>
                                        </svg>
                                    </span> --}}
                                    <i class="fa fa-folder" aria-hidden="true"></i>
                                    <!--end::Svg Icon-->
                                    Upload Files
                                </button>
                                <!--end::Add customer-->
                            </div>
                            <!--end::Toolbar-->
                        </div>
                        <!--end::Card toolbar-->
                        <div class="card-content collapse show my-1">
                            <!--begin::Table header-->
                            <!--begin::Folder path-->
                            <div class="row my-1">
                                <div class="col-md-6">
                                    <div class="badge badge-lg badge">
                                        <div class="d-flex align-items-center flex-wrap">
                                            <!--begin::Svg Icon | path: icons/duotune/abstract/abs039.svg-->
                                            <span class="svg-icon svg-icon-2 svg-icon-success me-3">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                    viewBox="0 0 24 24" fill="none">
                                                    <path opacity="0.3"
                                                        d="M14.1 15.013C14.6 16.313 14.5 17.813 13.7 19.113C12.3 21.513 9.29999 22.313 6.89999 20.913C5.29999 20.013 4.39999 18.313 4.39999 16.613C5.09999 17.013 5.99999 17.313 6.89999 17.313C8.39999 17.313 9.69998 16.613 10.7 15.613C11.1 15.713 11.5 15.813 11.9 15.813C12.7 15.813 13.5 15.513 14.1 15.013ZM8.5 12.913C8.5 12.713 8.39999 12.513 8.39999 12.313C8.39999 11.213 8.89998 10.213 9.69998 9.613C9.19998 8.313 9.30001 6.813 10.1 5.513C10.6 4.713 11.2 4.11299 11.9 3.71299C10.4 2.81299 8.49999 2.71299 6.89999 3.71299C4.49999 5.11299 3.70001 8.113 5.10001 10.513C5.80001 11.813 7.1 12.613 8.5 12.913ZM16.9 7.313C15.4 7.313 14.1 8.013 13.1 9.013C14.3 9.413 15.1 10.513 15.3 11.713C16.7 12.013 17.9 12.813 18.7 14.113C19.2 14.913 19.3 15.713 19.3 16.613C20.8 15.713 21.8 14.113 21.8 12.313C21.9 9.513 19.7 7.313 16.9 7.313Z"
                                                        fill="black"></path>
                                                    <path
                                                        d="M9.69998 9.61307C9.19998 8.31307 9.30001 6.81306 10.1 5.51306C11.5 3.11306 14.5 2.31306 16.9 3.71306C18.5 4.61306 19.4 6.31306 19.4 8.01306C18.7 7.61306 17.8 7.31306 16.9 7.31306C15.4 7.31306 14.1 8.01306 13.1 9.01306C12.7 8.91306 12.3 8.81306 11.9 8.81306C11.1 8.81306 10.3 9.11307 9.69998 9.61307ZM8.5 12.9131C7.1 12.6131 5.90001 11.8131 5.10001 10.5131C4.60001 9.71306 4.5 8.91306 4.5 8.01306C3 8.91306 2 10.5131 2 12.3131C2 15.1131 4.2 17.3131 7 17.3131C8.5 17.3131 9.79999 16.6131 10.8 15.6131C9.49999 15.1131 8.7 14.1131 8.5 12.9131ZM18.7 14.1131C17.9 12.8131 16.7 12.0131 15.3 11.7131C15.3 11.9131 15.4 12.1131 15.4 12.3131C15.4 13.4131 14.9 14.4131 14.1 15.0131C14.6 16.3131 14.5 17.8131 13.7 19.1131C13.2 19.9131 12.6 20.5131 11.9 20.9131C13.4 21.8131 15.3 21.9131 16.9 20.9131C19.3 19.6131 20.1 16.5131 18.7 14.1131Z"
                                                        fill="#fff"></path>
                                                </svg>
                                            </span>
                                            <!--end::Svg Icon-->
                                            <a class="text-white" href="#">Borrower</a>
                                            <!--begin::Svg Icon | path: icons/duotune/arrows/arr071.svg-->
                                            <span class="svg-icon svg-icon-2 svg-icon-success mx-1">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                    viewBox="0 0 24 24" fill="none">
                                                    <path
                                                        d="M12.6343 12.5657L8.45001 16.75C8.0358 17.1642 8.0358 17.8358 8.45001 18.25C8.86423 18.6642 9.5358 18.6642 9.95001 18.25L15.4929 12.7071C15.8834 12.3166 15.8834 11.6834 15.4929 11.2929L9.95001 5.75C9.5358 5.33579 8.86423 5.33579 8.45001 5.75C8.0358 6.16421 8.0358 6.83579 8.45001 7.25L12.6343 11.4343C12.9467 11.7467 12.9467 12.2533 12.6343 12.5657Z"
                                                        fill="#fff"></path>
                                                </svg>
                                            </span>
                                            <!--end::Svg Icon-->
                                            <a class="text-white" href="#">Folder Name</a>
                                            <!--begin::Svg Icon | path: icons/duotune/arrows/arr071.svg-->
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 text-right">
                                    <div class="badge badge-md bg-success text-white">{{ $itemCount }} items</div>
                                </div>
                            </div>
                        </div>
                        <!--end::Table header-->
                        <div class="table-responsive">
                            <table class="table table-bordered zero-configuration">
                                <thead>
                                    <th class="min-w-250px" rowspan="1" colspan="1">Name</th>
                                    <th class="min-w-10px" rowspan="1" colspan="1">Size</th>
                                    <th class="min-w-125px" rowspan="1" colspan="1">Last Modified</th>
                                    <th class="min-w-125px" rowspan="1" colspan="1">Share By</th>
                                    <th class="min-w-125px" rowspan="1" colspan="1">Action</th>
                                </thead>
                                <tbody>
                                    @if (!$folders->isEmpty())
                                        @foreach ($folders as $folder)
                                            <tr>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <!--begin::Svg Icon | path: icons/duotune/files/fil012.svg-->
                                                        <span class="svg-icon svg-icon-2x svg-icon-success me-4">
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                                viewBox="0 0 24 24" fill="none">
                                                                <path opacity="0.3" d="M10 4H21C21.6 4 22 4.4 22 5V7H10V4Z"
                                                                    fill="black"></path>
                                                                <path
                                                                    d="M9.2 3H3C2.4 3 2 3.4 2 4V19C2 19.6 2.4 20 3 20H21C21.6 20 22 19.6 22 19V7C22 6.4 21.6 6 21 6H12L10.4 3.60001C10.2 3.20001 9.7 3 9.2 3Z"
                                                                    fill="grey"></path>
                                                            </svg>
                                                        </span>
                                                        &nbsp;
                                                        <!--end::Svg Icon-->
                                                        @if ($folder->adminFolder != null)
                                                            <a href="{{ route('borrower.files', ['folder' => $folder->adminFolder->id, 'shareBy' => 'admin']) }}"
                                                                class="text-white">{{ $folder->name }}</a>
                                                        @elseif($folder->lenderFolder != null)
                                                            <a href="{{ route('borrower.files', ['folder' => $folder->lenderFolder->id, 'shareBy' => 'lender']) }}"
                                                                class="text-white">{{ $folder->name }}</a>
                                                        @else
                                                            <a href="{{ route('borrower.own.files', ['folder' => $folder->id]) }}"
                                                                class="text-white">{{ $folder->name }}</a>
                                                        @endif
                                                    </div>
                                                </td>
                                                <td></td>
                                                {{-- <td>Edinburgh</td> --}}
                                                <td>{{ $folder->created_at->format('m-d-Y') }}</td>
                                                <td>{{ $folder->borrower_folder_id != null? 'Admin': ($folder->lender_folder_id != null? $folder->lenderFolder->user->first_name . ' ' . $folder->lenderFolder->user->last_name . ' (Lender)': 'Own') }}
                                                </td>
                                                <td>
                                                    @if ($folder->borrower_folder_id != null ? false : ($folder->lender_folder_id != null ? false : true))
                                                        <a class="btn btn-warning"
                                                            href="{{ route('borrower.sharings', ['folder' => $folder->id]) }}"><i
                                                                class="fa fa-eye"></i></a>
                                                        <a data-toggle="modal" data-id="{{ $folder->id }}"
                                                            data-target="#exampleModal3" class="btn btn-success folder-id"
                                                            href=""><i class="fa fa-share-alt"></i>
                                                        </a>
                                                        <a onclick="return confirm('Sure Want To Delete?')"
                                                            class="btn btn-danger"
                                                            href="{{ route('borrower.folder.delete', ['id' => $folder->id]) }}"><i
                                                                class="fa fa-trash"></i></a>
                                                    @else
                                                        <p>Can't Share & Delete Other's Folder</p>
                                                    @endif
                                                </td>
                                            </tr>
                                        @endforeach
                                    @endif
                                    @if (!$files->isEmpty())
                                        @foreach ($files as $file)
                                            <tr>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <!--begin::Svg Icon | path: icons/duotune/files/fil012.svg-->
                                                        <span class="svg-icon svg-icon-2x svg-icon-success me-4">
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                                viewBox="0 0 24 24" fill="none">
                                                                <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="black"></path>
                                                                <path d="M15 8H20L14 2V7C14 7.6 14.4 8 15 8Z" fill="grey">
                                                                </path>
                                                            </svg>
                                                        </span>
                                                        &nbsp;
                                                        <!--end::Svg Icon-->
                                                        @php
                                                            $role = $file->admin_id != null ? 'Admin' : ($file->lender_id != null ? 'Lender' : 'Borrower');
                                                        @endphp
                                                        <a href="{{ asset('storage/' . $role . '-File/' . $file->file_name) }}"
                                                            class="text-white"
                                                            target="_blank">{{ $file->file_name }}</a>
                                                    </div>
                                                </td>
                                                <td>{{ $file->file_size }}</td>
                                                {{-- <td>Edinburgh</td> --}}
                                                <td>{{ $file->file_date }}</td>
                                                <td>{{ $file->admin_id != null? 'Admin': ($file->lender_id != null? $file->lender->first_name . ' ' . $file->lender->last_name . ' (Lender)': 'Own') }}
                                                </td>
                                                <td>
                                                    <div class="row">
                                                        <div class="col-md-12">
                                                            @if ($file->admin_id != null ? false : ($file->lender_id != null ? false : true))
                                                                <a class="btn btn-warning"
                                                                    href="{{ route('borrower.sharings', ['folder' => $file->id, 'file' => true]) }}"><i
                                                                        class="fa fa-eye"></i></a>
                                                                <a data-toggle="modal" data-id="{{ $file->id }}"
                                                                    data-target="#exampleModal3"
                                                                    class="btn btn-success file-id" href=""><i
                                                                        class="fa fa-share-alt"></i>
                                                                </a>
                                                                <a onclick="return confirm('Sure Want To Delete!')"
                                                                    class="btn btn-danger"
                                                                    href="{{ route('borrower.file.delete', ['id' => $file->id]) }}"><i
                                                                        class="fa fa-trash"></i></a>
                                                            @else
                                                                <p>Can't Share & Delete Other Files</p>
                                                            @endif
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforeach
                                    @endif
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Folder Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="mb-0">New Folder</h3>
                </div>
                <div class="modal-body">
                    <form action="{{ route('borrower.uploadFolder.process') }}" method="POST">
                        @csrf
                        <div class="row">
                            <div class="col-md-12">
                                <input type="text" placeholder="Enter Folder Name" name="folder" class="form-control"
                                    required>
                            </div>
                        </div>
                        <br>
                        <button type="submit" class="btn btn-success">
                            Create
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>


    <!-- File Modal -->
    <div class="modal fade" id="exampleModal2" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="mb-0">
                        Upload Files
                    </h3>
                </div>
                <div class="modal-body">
                    <form action="{{ route('borrower.uploadFile.process') }}" method="POST"
                        enctype="multipart/form-data">
                        @csrf
                        <div class="row">
                            <div class="col-md-12">
                                <input type="file" name="file[]" class="form-control" multiple>
                            </div>
                        </div>
                        <br>
                        <button type="submit" class="btn btn-success">
                            Submit
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>


    <!-- SHARING -->
    <div class="modal fade" id="exampleModal3" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="mb-0">SHARE</h3>
                </div>
                <div class="modal-body">
                    <form action="{{ route('borrower.share.process') }}" method="POST">
                        @csrf
                        <select class="form-control mb-1" id="role" name="user">
                            @forelse ($users as $user)
                                <option value="{{ $user->id }}">{{ $user->first_name . ' ' . $user->last_name }}
                                </option>
                            @empty
                                <option value="">No Record Exists!!</option>
                            @endforelse
                        </select>
                        <input type="hidden" name="folder_id" id="folder">
                        <input type="hidden" name="file_id" id="files">
                        <div id="user">
                        </div>
                        <button type="submit" class="btn btn-success">
                            Share
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script>
        $(document).ready(function() {
            $(".folder-id").click(function() {
                $("#folder").val($(this).attr("data-id"));
            });
            $(".file-id").click(function() {
                $("#files").val($(this).attr("data-id"));
            });
        });
    </script>
@endpush