@extends('components.customer-layout')

@section('header')
    <div class="page-header-breadcrumb d-md-flex d-block align-items-center justify-content-between ">
        <h4 class="fw-medium mb-0"></h4>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="javascript:void(0);" class="text-white-50"></a>
            </li>
            <li class="breadcrumb-item active" aria-current="page">Home</li>
        </ol>
    </div>
@endsection


@section('content')
    <script src="https://unpkg.com/filepond@^4/dist/filepond.js"></script>

    <div class="row justify-content-center">

        <div class="col-xl-8">
            {{-- <div class="row"> --}}
            {{-- <div class="col-xl-12"> --}}
            <script>
                var userWebDocumentRoute = "{{ route('user.web.document') }}"
                var userDashboardRoute = "{{ route('user.web.dashboard') }}"
            </script>
            <form action="{{ route('user.web.document') }}" method="POST" enctype="multipart/form-data"
                id="updateDocument" id>
                @csrf
                <div class="card custom-card">
                    <div class="card-header  ">
                        <div class="card-title text-center w-100 ">
                            IDENTITY CHECK
                        </div>
                    </div>
                    <div class="card-body">
                        <label for="" class="mb-1">Choose Identity Type </label>
                        <select class="form-control form-control-lg" data-trigger name="identityType" id="choices-single-default">
                            <option value="">Select Type</option>
                            <option value="nationalId">National ID</option>
                            <option value="driversLisense">Drivers License</option>
                            <option value="international">International ID</option>
                        </select>
                    </div>
                    <div class="card-body">
                        <label for="" class="mb-1">Upload 2 Documents (Front & Back View)</label>
                        <input accept="image/*" type="file" class="uploadImage filepond-input" id="document" multiple
                            data-allow-reorder="true" data-max-file-size="3MB" data-max-files="2">

                    </div>
                    <div style="text-align:right !important;" class="card-body    text-primary d-block w-100">
                        <span class="text-primary">Maximum File Size :</span> 3MB
                    </div>


                </div>
                <div class="row justify-content-between px-4">
                    <button type="button" class="btn btn-danger col-3 mt-3 deleteImage"> <i class="bi bi-arrow-right-circle-fill"></i> DELETE DOCUMENT
                    </button>
                    <button type="submit" class="btn btn-primary col-3  mt-3 submitButton _processDeposit" disabled> <i class="bi bi-arrow-right-circle-fill"></i> UPLOAD DOCUMENT
                    </button>
                </div>

                <script>
                    const inputElement = document.querySelector('input[id="document"]');
                    const pond = FilePond.create(inputElement, {
                        allowRemove: false
                    });


                    const clearButton = document.querySelector('.deleteImage');

                    clearButton.addEventListener('click', function() {
                        const files = pond.getFiles();
                        const numberOfFiles = files.length;
                        documentArray.length = 0
                        console.log(documentArray);

                        if (numberOfFiles === 0) {
                            return toastr.error("No Documents To Delete");
                        } else {
                            pond.removeFiles();

                            return toastr.error("Files Removed");
                        }

                    });
                </script>
            </form>
            {{-- </div> --}}
            {{-- </div> --}}
        </div>
    </div>

    {{-- <div class="row justify-content-center align-items-center">
        <div class="col-xl-9">
            <div class="card custom-card overflow-scroll">
                <div class="card-body p-0">
                    <div
                        class="p-4 terms-heading-cover d-flex align-items-center text-primary bg-primary-transparent h5 fw-semibold mb-0">
                        FortLink- Upload Doucument For Verification
                        <a href="javascript:void(0);" data-bs-toggle="card-fullscreen" class="ms-auto text-primary">
                            <i class="ri-fullscreen-line"></i>
                        </a>
                    </div>
                    <div class="col-xl-6">
                        <div class="row">
                            <div class="col-xl-12">
                                <div class="card custom-card">
                                    <div class="card-header">
                                        <div class="card-title">
                                            Multiple Upload
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <input type="file" class="multiple-filepond" name="filepond" multiple
                                            data-allow-reorder="true" data-max-file-size="3MB" data-max-files="6">
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-12">
                                <div class="card custom-card">
                                    <div class="card-header">
                                        <div class="card-title">
                                            Single Upload
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <input type="file" class="single-fileupload" name="filepond"
                                            accept="image/png, image/jpeg, image/gif">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div> --}}
@endsection