
<style type="text/css">
	.pop-up-btn-confirm {
		background-image: linear-gradient(to right, #62C5BD , #C8E1A4) !important;
		width: 200px;
	}

	.pop-up-btn-deny {
		width: 200px;
	}

	.align-left {
		text-align: left;
	}

	select {
		background-color: #EBEBE4;
	}

	.select-width {
		width: 250px;
	}

	.fix-text{
		white-space: pre;
		text-overflow: ellipsis;
		width: 130px;
		overflow: hidden;
	}

	.d-none{
		display: none;
	}

	.dragDropContainer{
		border: 2px dashed #000;
		border-radius: 10px;
		padding: 20px;
        cursor: pointer;
	}

	.btn-upload{
		background-color: #58C2B1;
		padding: 10px 50px;
		color: #000;
		box-shadow: 0px 4px 8px #15785440;
	}

	.uploadingContainer{
		background-color: #F4F7FA;
		padding: 15px;
	}

	.group-input-cont{
		width: 100%;
		align-items: center;
		overflow: hidden;
	}

	.group-input-label{
		float: left;
		padding: 10px 0;
	}

	.group-input{
		width: 100%;
	}

	.group-input-span {
		display: block;
		overflow: hidden;
		padding-right:10px;
	}

    .uploaded-file-container {
        background-color: #F4F7FA;
        padding: 15px 10px;
        height: calc(100vh - 630px);
        overflow-y: auto;
        overflow-x: hidden;
        margin-bottom: 30px;
    }
    .uploaded-file-container .file-row {
        border-bottom: 1px solid;
        border-image-source: linear-gradient(90deg, rgba(87, 87, 87, 0.2) 0%, #010101 48.44%, rgba(74, 74, 74, 0.2) 100%);
    }
    .uploaded-file-container .file-row .file-details {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .uploaded-file-container .file-row .file-details .file-title {
        font-size: 18px;
        font-weight: 600;
        line-height: 25px;
        letter-spacing: 0em;
        color: #000000;
    }
    .uploaded-file-container .file-row .file-details .file-progress-wrapper {
        background-color: #EBEBE4;
        width: 250px;
        height: 39px;
    }
    .uploaded-file-container .file-row .file-details .file-progress-wrapper .file-progress {
        height: 100%;
        background-color: #2C21FE;
    }
    .uploaded-file-container .file-row .file-details .file-progress-wrapper .file-progress.green {
        background-color: #06AE25;
    }
    .uploaded-file-container .file-row .file-details .file-progress-remove {
        cursor: pointer;
    }
    .uploaded-file-container .file-row .file-details select {
        padding: 8px 12px;
        padding-right: 40px;
    }
    .uploaded-file-container .file-row-separator {
        background: linear-gradient(90deg, rgba(87, 87, 87, 0.2) 0%, #010101 48.44%, rgba(74, 74, 74, 0.2) 100%);
        margin-bottom: 10px;
    }
    .uploaded-file-count {
        font-size: 20px;
        font-weight: 600;
        line-height: 27px;
        letter-spacing: 0em;
        color: #06AE25;
        margin-bottom: 30px;
        text-align: right;
    }
</style>

<div class="modal fade custom-modal" id="uploadDocumentModal" tabindex="-1" aria-labelledby="uploadDocumentModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered">
        <div class="modal-content mx-auto">
            <div class="modal-body p-0">
                <p class="modal-title">{{ __("Upload Document") }}</p>

                <form action="{{ route('cms.bookkeepings.document-libraries.store') }}" class="theme-form" id="uploadDocumentFrm">
                    <div class="row mb-5 align-items-center">
                        <div class="col-auto" required>
                            <label class="col-form-label">{{ __("Company Name") }}</label>
                        </div>
                        <div class="col">
                            <select class="w-100" name="company_id">
                                <option value="" selected>{{ __("Select a company") }}</option>
                            </select>
                        </div>
                    </div>
                    <input type="file" name="uploaded_files" id="updloadedFiles" class="d-none" accept="image/png, image/jpeg, application/pdf, application/msword" multiple>
                    <div class="dragDropContainer flex justify-between mb-5">
                        <div class="flex">
                            <img src="/themes/tailwind/images/cloudUpload.png" alt="Cloud Upload" class="mr-5">
                            <span style="color:#58C2B1;">
                                {{ __("Drag and drop files here or choose file.") }}
                                <br>
                                {{ __("Accepted file types: Doc / PDF / JPG / PNG") }}
                            </span>
                        </div>
                        <button type="button" class="btn-upload">{{ __("Choose File") }}</button>
                    </div>
                    <div class="uploaded-file-container" id="uploadedFileList"></div>
                    <div class="uploaded-file-count" id="uploadedFileCount">
                        <span id="totalDone">0</span> {{ __("of") }} <span id="totalFile">0</span> {{ __("files uploaded") }}
                    </div>


                    <div class="d-flex align-items-center justify-content-center">
                        <button type="submit" class="btn green-btn mx-3">{{ __("Submit in queue") }}</button>
                        <button type="button" class="btn red-btn mx-3" data-bs-dismiss="modal">{{ __("Cancel") }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>