@extends('theme::user.layouts.app')

<link rel="stylesheet" href="/themes/tailwind/css/Drag--Drop-Upload-Form.css">

@section('content')

<div class="card">
    <div class="d-sm-flex d-md-flex d-lg-flex d-xl-flex d-xxl-flex justify-content-between align-items-sm-center align-items-md-center align-items-lg-center align-items-xl-center align-items-xxl-center" style="height: 100px;background: linear-gradient(90deg, #7db979, #26bbaa);margin-right: 0px;">
        <div class="justify-content-start" style="margin-left: 20px;">
            <div class="col d-sm-flex d-md-flex d-lg-flex d-xl-flex d-xxl-flex align-items-sm-center align-items-md-center align-items-lg-center justify-content-xl-start align-items-xl-center justify-content-xxl-center align-items-xxl-center" style="width: 332px;">
                <img src="/themes/tailwind/images/clipboard-image-15.png" style="width: 80px;margin-left: 10px;">
                <h1 style="font-size: 20px;color: rgb(0,0,0);margin-bottom: 0px;">Change Company Name</h1>
            </div>
        </div>
        <div style="margin-right: 20px;"><img src="/themes/tailwind/images/clipboard-image-16.png" style="width: 98px;"></div>
    </div>
    <div class="card-body scstyle-15" style="overflow: auto;height: 650px;">
        <form>
            <div style="margin-right: 150px;margin-left: 150px;">
                <div class="col">
                    <div class="row" style="margin: 0px;">
                        <div class="col-xxl-12" style="margin-top: 20px;margin-bottom: 20px;">
                            <h1 style="font-size: 24px;text-align: center;color: rgb(7,7,7);">Please enter a <b>new</b> company name</h1>
                        </div>
                    </div>
                    <div class="row" style="margin: 0px;margin-top: 20px;">
                        <div class="col">
                            <h1 style="color: rgb(0,0,0);font-size: 24px;">Existing Company Name</h1>
                        </div>
                    </div>
                    <div class="row" style="margin: 0px;margin-top: 20px;">
                        <div class="col-xxl-3 offset-xxl-0 d-xxl-flex align-items-xxl-center" style="width: 100px;">
                            <h1 style="color: rgb(0,0,0);font-size: 20px;">English</h1>
                        </div>
                        <div class="col" style="width: 765px;"><input class="form-control" type="text" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 50px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 20px;"></div>
                    </div>
                    <div class="row" style="margin: 0px;margin-top: 20px;">
                        <div class="col-xxl-5 d-xxl-flex align-items-xxl-center" style="width: 100px;">
                            <h1 style="color: rgb(0,0,0);font-size: 20px;">Chinese</h1>
                        </div>
                        <div class="col"><input class="form-control" type="text" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 50px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 20px;"></div>
                    </div>
                    <div class="row" style="margin: 0px;margin-top: 20px;">
                        <div class="col d-xxl-flex justify-content-between align-items-xxl-center">
                            <div class="d-xxl-flex">
                                <h1 style="color: rgb(0,0,0);font-size: 20px;">Date of Special Resolution for Change of Company Name</h1>
                            </div>
                            <div class="d-xxl-flex justify-content-xxl-center align-items-xxl-center">
                                <div class="col-xxl-2" style="width: 80px;"><input class="form-control d-xxl-flex" type="text" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 40px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 12px;width: 80px;text-align: center;" placeholder="YYYY"></div>
                                <div class="col-xxl-1 d-xxl-flex justify-content-xxl-center align-items-xxl-center" style="width: 20px;">
                                    <div>
                                        <h1 style="color: rgb(0,0,0);font-size: 20px;font-weight: bold;width: auto;">/</h1>
                                    </div>
                                </div>
                                <div class="col-xxl-1" style="width: 80px;"><input class="form-control" type="text" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 40px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 12px;width: 80px;text-align: center;" placeholder="MM"></div>
                                <div class="col-xxl-1 d-xxl-flex justify-content-xxl-center align-items-xxl-center" style="width: 20px;">
                                    <h1 style="color: rgb(0,0,0);font-size: 20px;font-weight: bold;width: auto;">/</h1>
                                </div>
                                <div class="col" style="width: 80px;"><input class="form-control" type="text" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 40px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 12px;width: 80px;text-align: center;" placeholder="DD"></div>
                            </div>
                        </div>
                    </div>
                    <div class="row" style="margin: 0px;margin-top: 20px;">
                        <div class="col">
                            <hr class="new2">
                        </div>
                    </div>
                    <div class="row" style="margin: 0px;margin-top: 20px;">
                        <div class="col">
                            <h1 style="color: rgb(0,0,0);font-size: 24px;">Intended Company Name</h1>
                        </div>
                    </div>
                    <div class="row" style="margin: 0px;margin-top: 20px;">
                        <div class="col-xxl-3 offset-xxl-0 d-xxl-flex align-items-xxl-center" style="width: 100px;">
                            <h1 style="color: rgb(0,0,0);font-size: 20px;">English</h1>
                        </div>
                        <div class="col" style="width: 765px;"><input class="form-control" type="text" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 50px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 20px;"></div>
                    </div>
                    <div class="row" style="margin: 0px;margin-top: 20px;">
                        <div class="col-xxl-5 d-xxl-flex align-items-xxl-center" style="width: 100px;">
                            <h1 style="color: rgb(0,0,0);font-size: 20px;">Chinese</h1>
                        </div>
                        <div class="col"><input class="form-control" type="text" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 50px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 20px;"></div>
                    </div>
                    <div class="row" style="margin: 0px;margin-top: 20px;">
                        <div class="col">
                            <h6 style="color: #9B0025;">*Company name availability subject to final confirmation from the company registry</h6>
                        </div>
                    </div>
                    <div class="row" style="margin: 0px;margin-top: 20px;">
                        <div class="col">
                            <div class="card">
                                <div class="card-body" style="background: #F4F7FA;">
                                    <div class="container">
                                        <div class="row" style="margin-top: 10px;margin-bottom: 10px;">
                                            <div class="col">
                                                <h1 style="color: rgb(0,0,0);font-size: 24px;">Verify documents and identity</h1>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col">
                                                <div class="card">
                                                    <div class="card-body" style="height: 100px;background: url(&quot;/themes/tailwind/images/clipboard-image-19.png&quot;) center / contain no-repeat;">
                                                        <div class="col">
                                                            <div class="row">
                                                                <div class="col-xxl-8">
                                                                    <h1 style="color: rgb(0,0,0);font-size: 20px;">Verification of Director&nbsp;<br>ID / passport</h1>
                                                                </div>
                                                                <div class="col d-xxl-flex justify-content-xxl-end"><img src="/themes/tailwind/images/clipboard-image-21.png" style="width: 70px;"></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col">
                                                <div class="card">
                                                    <div class="card-body" style="height: 100px;background: url(&quot;/themes/tailwind/images/clipboard-image-20.png&quot;) center / contain no-repeat;">
                                                        <div class="col">
                                                            <div class="row">
                                                                <div class="col-xxl-8">
                                                                    <h1 style="color: rgb(0,0,0);font-size: 20px;">Verification of Director&nbsp;<br>ID / passport</h1>
                                                                </div>
                                                                <div class="col d-xxl-flex justify-content-xxl-end"><img src="/themes/tailwind/images/clipboard-image-22.png" style="width: 70px;"></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row" style="margin-top: 30px;">
                                            <div class="col">
                                                <h1 style="color: rgb(0,0,0);font-size: 24px;">Please upload a copy of the following documents</h1>
                                            </div>
                                        </div>
                                        <div class="row" style="margin-top: 30px;">
                                            <div class="col d-xxl-flex justify-content-between align-items-xxl-center">
                                                <div>
                                                    <h1 id="certificate" class="certificate" style="color: rgb(0,0,0);font-size: 20px;">Certificate of Incorporation</h1>
                                                </div>
                                                <div>
                                                    <div id="modal-open">
                                                        <div class="modal fade" role="dialog" tabindex="-1" id="exampleModal" aria-labelledby="exampleModalLabel">
                                                            <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
                                                                <div class="modal-content">
                                                                    <div class="modal-body">
                                                                        <div class="row">
                                                                            <div class="col">
                                                                                <div>
                                                                                    <h1 style="text-align: center;font-size: 18px;color: #364257;">Upload Document</h1>
                                                                                </div>
                                                                                <div class="card" style="border-style: none;">
                                                                                    <div class="card-body" style="border-style: none;">
                                                                                        <div class="dashed_upload"><div class="wrapper">
                                                                                        <div class="drop">
                                                                                        <div class="cont">
                                                                                        <img src="/themes/tailwind/images/clipboard-image-23.png" width="100px"/>
                                                                                        <div class="tit">
                                                                                        Drag and drop files here or choose file.<br>
                                                                                        Accepted file types: Doc / PDF / JPG / PNG
                                                                                        </div>
                                                                                        <div>
                                                                                        <button class="btn" type="button" style="color: #364257;background: #F3CF5D;font-size: 15px;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 200px;height: 40px;margin-top: 15px;">Choose File</button>
                                                                                        </div>
                                                                                        </div>
                                                                                        <output id="list"></output><input id="files" multiple name="files[]" type="file" />
                                                                                        </div>
                                                                                        </div>
                                                                                        <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

                                                                                        <script src="js/index.js"></script></div>
                                                                                    </div>
                                                                                </div>
                                                                                <div style="margin-top: 20px;margin-bottom: 20px;">
                                                                                    <div class="col d-xxl-flex justify-content-between align-items-xxl-center" style="margin-left: 40px;margin-right: 40px;">
                                                                                        <div>
                                                                                            <h1 style="color: #364257;font-size: 20px;">Document Name</h1>
                                                                                        </div>
                                                                                        <div><input class="form-control" type="text" style="border-color: #364257;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 500px;"></div>
                                                                                    </div>
                                                                                </div>
                                                                                <div style="margin-top: 20px;margin-bottom: 20px;">
                                                                                    <div class="col d-xxl-flex justify-content-start align-items-xxl-center" style="margin-left: 40px;margin-right: 40px;">
                                                                                        <div>
                                                                                            <h1 style="color: #364257;font-size: 20px;">Document Category</h1>
                                                                                        </div>
                                                                                        <div style="margin-left: 25px;width: 130.2656px;">
                                                                                            <div class="dropdown"><button class="btn btn-primary disabled dropdown-toggle placeholder disabled" aria-expanded="false" data-bs-toggle="dropdown" type="button" style="background: rgba(37,37,37,0);color: var(--bs-gray-dark);border-style: none;width: 129.2656px;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;text-align: left;" disabled="">CL&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</button>
                                                                                                <div class="dropdown-menu"><a class="dropdown-item" href="#">First Item</a><a class="dropdown-item" href="#">Second Item</a><a class="dropdown-item" href="#">Third Item</a></div>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="modal-footer">
                                                                        <div class="col d-xxl-flex justify-content-center align-items-xxl-center">
                                                                            <div><button class="btn btn-primary" type="button" style="background: #009B9A;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;border-style: none;width: 200px;margin-right: 10px;" data-bs-dismiss="modal">Save</button></div>
                                                                            <div><button class="btn btn-primary" type="button" style="background: #9B0025;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;border-style: none;width: 200px;margin-left: 10px;" data-bs-dismiss="modal">Cancel</button></div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div><button class="btn btn-warning" type="button" data-bs-toggle="modal" data-bs-target="#exampleModal" style="color: #364257;background: #F3CF5D;font-size: 19px;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 200px;height: 50px;">UPLOAD</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row" style="margin-top: 30px;">
                                            <div class="col d-xxl-flex justify-content-between align-items-xxl-center">
                                                <div>
                                                    <h1 id="br" style="color: rgb(0,0,0);font-size: 20px;">BR</h1>
                                                </div>
                                                <div>
                                                    <div id="modal-open-1">
                                                        <div class="modal fade" role="dialog" tabindex="-1" id="exampleModal-1" aria-labelledby="exampleModalLabel">
                                                            <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
                                                                <div class="modal-content">
                                                                    <div class="modal-body">
                                                                        <div class="row">
                                                                            <div class="col">
                                                                                <div>
                                                                                    <h1 style="text-align: center;font-size: 18px;color: #364257;">Upload Document</h1>
                                                                                </div>
                                                                                <div class="card" style="border-style: none;">
                                                                                    <div class="card-body" style="border-style: none;">
                                                                                        <div class="dashed_upload"><div class="wrapper">
                                                                                        <div class="drop">
                                                                                        <div class="cont">
                                                                                        <img src="/themes/tailwind/images/clipboard-image-23.png" width="100px"/>
                                                                                        <div class="tit">
                                                                                        Drag and drop files here or choose file.<br>
                                                                                        Accepted file types: Doc / PDF / JPG / PNG
                                                                                        </div>
                                                                                        <div>
                                                                                        <button class="btn" type="button" style="color: #364257;background: #F3CF5D;font-size: 15px;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 200px;height: 40px;margin-top: 15px;">Choose File</button>
                                                                                        </div>
                                                                                        </div>
                                                                                        <output id="list"></output><input id="files" multiple name="files[]" type="file" />
                                                                                        </div>
                                                                                        </div>
                                                                                        <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

                                                                                        <script src="js/index.js"></script></div>
                                                                                    </div>
                                                                                </div>
                                                                                <div style="margin-top: 20px;margin-bottom: 20px;">
                                                                                    <div class="col d-xxl-flex justify-content-between align-items-xxl-center" style="margin-left: 40px;margin-right: 40px;">
                                                                                        <div>
                                                                                            <h1 style="color: #364257;font-size: 20px;">Document Name</h1>
                                                                                        </div>
                                                                                        <div><input class="form-control" type="text" style="border-color: #364257;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 500px;"></div>
                                                                                    </div>
                                                                                </div>
                                                                                <div style="margin-top: 20px;margin-bottom: 20px;">
                                                                                    <div class="col d-xxl-flex justify-content-start align-items-xxl-center" style="margin-left: 40px;margin-right: 40px;">
                                                                                        <div>
                                                                                            <h1 style="color: #364257;font-size: 20px;">Document Category</h1>
                                                                                        </div>
                                                                                        <div style="margin-left: 25px;width: 130.2656px;">
                                                                                            <div class="dropdown"><button class="btn btn-primary disabled dropdown-toggle placeholder disabled" aria-expanded="false" data-bs-toggle="dropdown" type="button" style="background: rgba(37,37,37,0);color: var(--bs-gray-dark);border-style: none;width: 129.2656px;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;text-align: left;" disabled="">CL&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</button>
                                                                                                <div class="dropdown-menu"><a class="dropdown-item" href="#">First Item</a><a class="dropdown-item" href="#">Second Item</a><a class="dropdown-item" href="#">Third Item</a></div>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="modal-footer">
                                                                        <div class="col d-xxl-flex justify-content-center align-items-xxl-center">
                                                                            <div><button class="btn btn-primary" type="button" style="background: #009B9A;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;border-style: none;width: 200px;margin-right: 10px;" data-bs-dismiss="modal">Save</button></div>
                                                                            <div><button class="btn btn-primary" type="button" style="background: #9B0025;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;border-style: none;width: 200px;margin-left: 10px;" data-bs-dismiss="modal">Cancel</button></div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div><button class="btn btn-warning" type="button" data-bs-toggle="modal" data-bs-target="#exampleModal-1" style="color: #364257;background: #F3CF5D;font-size: 19px;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 200px;height: 50px;">UPLOAD</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row" style="margin-top: 30px;">
                                            <div class="col d-xxl-flex justify-content-between align-items-xxl-center">
                                                <div>
                                                    <h1 id="address" style="color: rgb(0,0,0);font-size: 20px;">Proof of address issued within the last three months</h1>
                                                </div>
                                                <div>
                                                    <div id="modal-open-3">
                                                        <div class="modal fade" role="dialog" tabindex="-1" id="exampleModal-3" aria-labelledby="exampleModalLabel">
                                                            <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
                                                                <div class="modal-content">
                                                                    <div class="modal-body">
                                                                        <div class="row">
                                                                            <div class="col">
                                                                                <div>
                                                                                    <h1 style="text-align: center;font-size: 18px;color: #364257;">Upload Document</h1>
                                                                                </div>
                                                                                <div class="card" style="border-style: none;">
                                                                                    <div class="card-body" style="border-style: none;">
                                                                                        <div class="dashed_upload"><div class="wrapper">
                                                                                        <div class="drop">
                                                                                        <div class="cont">
                                                                                        <img src="/themes/tailwind/images/clipboard-image-23.png" width="100px"/>
                                                                                        <div class="tit">
                                                                                        Drag and drop files here or choose file.<br>
                                                                                        Accepted file types: Doc / PDF / JPG / PNG
                                                                                        </div>
                                                                                        <div>
                                                                                        <button class="btn" type="button" style="color: #364257;background: #F3CF5D;font-size: 15px;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 200px;height: 40px;margin-top: 15px;">Choose File</button>
                                                                                        </div>
                                                                                        </div>
                                                                                        <output id="list"></output><input id="files" multiple name="files[]" type="file" />
                                                                                        </div>
                                                                                        </div>
                                                                                        <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

                                                                                        <script src="js/index.js"></script></div>
                                                                                    </div>
                                                                                </div>
                                                                                <div style="margin-top: 20px;margin-bottom: 20px;">
                                                                                    <div class="col d-xxl-flex justify-content-between align-items-xxl-center" style="margin-left: 40px;margin-right: 40px;">
                                                                                        <div>
                                                                                            <h1 style="color: #364257;font-size: 20px;">Document Name</h1>
                                                                                        </div>
                                                                                        <div><input class="form-control" type="text" style="border-color: #364257;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 500px;"></div>
                                                                                    </div>
                                                                                </div>
                                                                                <div style="margin-top: 20px;margin-bottom: 20px;">
                                                                                    <div class="col d-xxl-flex justify-content-start align-items-xxl-center" style="margin-left: 40px;margin-right: 40px;">
                                                                                        <div>
                                                                                            <h1 style="color: #364257;font-size: 20px;">Document Category</h1>
                                                                                        </div>
                                                                                        <div style="margin-left: 25px;width: 130.2656px;">
                                                                                            <div class="dropdown"><button class="btn btn-primary disabled dropdown-toggle placeholder disabled" aria-expanded="false" data-bs-toggle="dropdown" type="button" style="background: rgba(37,37,37,0);color: var(--bs-gray-dark);border-style: none;width: 129.2656px;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;text-align: left;" disabled="">CL&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</button>
                                                                                                <div class="dropdown-menu"><a class="dropdown-item" href="#">First Item</a><a class="dropdown-item" href="#">Second Item</a><a class="dropdown-item" href="#">Third Item</a></div>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="modal-footer">
                                                                        <div class="col d-xxl-flex justify-content-center align-items-xxl-center">
                                                                            <div><button class="btn btn-primary" type="button" style="background: #009B9A;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;border-style: none;width: 200px;margin-right: 10px;" data-bs-dismiss="modal">Save</button></div>
                                                                            <div><button class="btn btn-primary" type="button" style="background: #9B0025;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;border-style: none;width: 200px;margin-left: 10px;" data-bs-dismiss="modal">Cancel</button></div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div><button class="btn btn-warning" type="button" data-bs-toggle="modal" data-bs-target="#exampleModal-3" style="color: #364257;background: #F3CF5D;font-size: 19px;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 200px;height: 50px;">UPLOAD</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row" style="margin-top: 30px;">
                                            <div class="col d-xxl-flex justify-content-between align-items-xxl-center">
                                                <div>
                                                    <h1 id="transferee" style="color: rgb(0,0,0);font-size: 20px;">Proof of address issued within the last three months&nbsp;<br>(Transferee)</h1>
                                                </div>
                                                <div>
                                                    <div id="modal-open-4">
                                                        <div class="modal fade" role="dialog" tabindex="-1" id="exampleModal-4" aria-labelledby="exampleModalLabel">
                                                            <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
                                                                <div class="modal-content">
                                                                    <div class="modal-body">
                                                                        <div class="row">
                                                                            <div class="col">
                                                                                <div>
                                                                                    <h1 style="text-align: center;font-size: 18px;color: #364257;">Upload Document</h1>
                                                                                </div>
                                                                                <div class="card" style="border-style: none;">
                                                                                    <div class="card-body" style="border-style: none;">
                                                                                        <div class="dashed_upload"><div class="wrapper">
                                                                                        <div class="drop">
                                                                                        <div class="cont">
                                                                                        <img src="/themes/tailwind/images/clipboard-image-23.png" width="100px"/>
                                                                                        <div class="tit">
                                                                                        Drag and drop files here or choose file.<br>
                                                                                        Accepted file types: Doc / PDF / JPG / PNG
                                                                                        </div>
                                                                                        <div>
                                                                                        <button class="btn" type="button" style="color: #364257;background: #F3CF5D;font-size: 15px;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 200px;height: 40px;margin-top: 15px;">Choose File</button>
                                                                                        </div>
                                                                                        </div>
                                                                                        <output id="list"></output><input id="files" multiple name="files[]" type="file" />
                                                                                        </div>
                                                                                        </div>
                                                                                        <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

                                                                                        <script src="js/index.js"></script></div>
                                                                                    </div>
                                                                                </div>
                                                                                <div style="margin-top: 20px;margin-bottom: 20px;">
                                                                                    <div class="col d-xxl-flex justify-content-between align-items-xxl-center" style="margin-left: 40px;margin-right: 40px;">
                                                                                        <div>
                                                                                            <h1 style="color: #364257;font-size: 20px;">Document Name</h1>
                                                                                        </div>
                                                                                        <div><input class="form-control" type="text" style="border-color: #364257;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 500px;"></div>
                                                                                    </div>
                                                                                </div>
                                                                                <div style="margin-top: 20px;margin-bottom: 20px;">
                                                                                    <div class="col d-xxl-flex justify-content-start align-items-xxl-center" style="margin-left: 40px;margin-right: 40px;">
                                                                                        <div>
                                                                                            <h1 style="color: #364257;font-size: 20px;">Document Category</h1>
                                                                                        </div>
                                                                                        <div style="margin-left: 25px;width: 130.2656px;">
                                                                                            <div class="dropdown"><button class="btn btn-primary disabled dropdown-toggle placeholder disabled" aria-expanded="false" data-bs-toggle="dropdown" type="button" style="background: rgba(37,37,37,0);color: var(--bs-gray-dark);border-style: none;width: 129.2656px;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;text-align: left;" disabled="">CL&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</button>
                                                                                                <div class="dropdown-menu"><a class="dropdown-item" href="#">First Item</a><a class="dropdown-item" href="#">Second Item</a><a class="dropdown-item" href="#">Third Item</a></div>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="modal-footer">
                                                                        <div class="col d-xxl-flex justify-content-center align-items-xxl-center">
                                                                            <div><button class="btn btn-primary" type="button" style="background: #009B9A;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;border-style: none;width: 200px;margin-right: 10px;" data-bs-dismiss="modal">Save</button></div>
                                                                            <div><button class="btn btn-primary" type="button" style="background: #9B0025;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;border-style: none;width: 200px;margin-left: 10px;" data-bs-dismiss="modal">Cancel</button></div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div><button class="btn btn-warning" type="button" data-bs-toggle="modal" data-bs-target="#exampleModal-4" style="color: #364257;background: #F3CF5D;font-size: 19px;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 200px;height: 50px;">UPLOAD</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row" style="margin-top: 30px;">
                                            <div class="col d-xxl-flex justify-content-end align-items-xxl-center">
                                                <div style="padding-right: 10px;">
                                                    <div id="modal-open-2">
                                                        <div class="modal fade" role="dialog" tabindex="-1" id="exampleModal-2" aria-labelledby="exampleModalLabel">
                                                            <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
                                                                <div class="modal-content">
                                                                    <div class="modal-body">
                                                                        <h6 style="color: #364257;">Your enquiry submitted successfully</h6>
                                                                    </div>
                                                                    <div class="modal-footer d-xxl-flex justify-content-xxl-center align-items-xxl-center"><button class="btn" style="width: 200px;background: #9B0025;color: rgb(255,255,255);border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;" type="button" data-bs-dismiss="modal">Back</button></div>
                                                                </div>
                                                            </div>
                                                        </div><button class="btn btn-warning" type="button" data-bs-toggle="modal" data-bs-target="#exampleModal-2" style="background: #009B9A;border-style: none;color: var(--bs-card-bg);border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 200px;height: 44px;">Save as draft</button>
                                                    </div>
                                                </div>
                                                <div style="margin-right: 10px;border-style: none;"><button class="btn btn-primary" type="button" style="background: #009B9A;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 200px;padding-top: 10px;padding-bottom: 10px;border-style: none;">Next</button></div>
                                                <div><button class="btn btn-primary" type="button" style="background: #9B0025;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 200px;padding-top: 10px;padding-bottom: 10px;border-style: none;">Next</button></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

@endsection