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

@section('content')

<div class="col">
    <div class="row" style="margin: 0px;">
        <div class="col-xxl-9 flex justify-start items-center" style="margin-top: 5px;margin-bottom: 20px;">
            <h1 style="white-space: nowrap;font-size: 18px;text-align: left;color: rgb(7,7,7);">Document Record Search</h1>&emsp;
            <div class="flex items-center relative w-full">
                <button data-bs-toggle="modal" data-bs-target="#filterModal" class="absolute">
                    <svg style="margin-top: -10px;" class="absolute ml-2 w-6 h-6" width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <g id="setting-4">
                            <path id="Vector" d="M31.1665 9.20898H22.6665" stroke="#364257" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
                            <path id="Vector_2" d="M8.50016 9.20898H2.8335" stroke="#364257" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
                            <path id="Vector_3" d="M14.1668 14.1667C16.9052 14.1667 19.1252 11.9467 19.1252 9.20833C19.1252 6.46992 16.9052 4.25 14.1668 4.25C11.4284 4.25 9.2085 6.46992 9.2085 9.20833C9.2085 11.9467 11.4284 14.1667 14.1668 14.1667Z" stroke="#364257" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
                            <path id="Vector_4" d="M31.1667 24.791H25.5" stroke="#364257" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
                            <path id="Vector_5" d="M11.3335 24.791H2.8335" stroke="#364257" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
                            <path id="Vector_6" d="M19.8333 29.7507C22.5717 29.7507 24.7917 27.5307 24.7917 24.7923C24.7917 22.0539 22.5717 19.834 19.8333 19.834C17.0949 19.834 14.875 22.0539 14.875 24.7923C14.875 27.5307 17.0949 29.7507 19.8333 29.7507Z" stroke="#364257" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
                        </g>
                    </svg>
                </button>
                <input class="w-full form-control" type="text" style="padding-left: 40px;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);">&nbsp;
            </div>
            <button class="btn btn-success" type="button" data-bs-toggle="modal" data-bs-target="#Modal" style="font-size: 19px;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 300px; height: 50px;">Search</button>
        </div>
        <div class="col-xxl-3 flex justify-end" align="right" style="margin-top: 5px;margin-bottom: 20px">
            <a href="/company-secretary/service-list" class="btn btn-warning" 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;">Back to list</a>
        </div>
    </div>
</div>
<div class="card" style="border-bottom-left-radius: 35px;border-bottom-right-radius: 35px;">
    <div class="card-body scstyle-15" style="overflow: auto;height: 650px; border-bottom-left-radius: 35px; border-bottom-right-radius: 35px; padding: 0px;">
        <table class="table">
            <thead>
                <tr class="table-bordered">
                    <th scope="col">
                        <div class="form-check">
                          <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
                            Document Name
                        </div>
                    </th>
                    <th scope="col">Service</th>
                    <th scope="col">Document Category</th>
                    <th scope="col">File Size</th>
                    <th scope="col">Date Uploaded</th>
                    <th scope="col">Action</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td scope="row" class="flex items-center">
                        <div class="form-check flex items-center">
                            <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
                            <svg style="width: 50px;" xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 44 55" fill="none">
                                <g filter="url(#filter0_d_194_9675)">
                                    <path d="M36 9.94639V41.4633C36 42.2104 35.3875 42.8227 34.6401 42.8227H9.63323C8.88583 42.8227 8.27337 42.2104 8.27337 41.4633V5.35947C8.27337 4.61228 8.88583 4 9.63323 4H30.0519L36 9.94639Z" fill="white"/>
                                </g>
                                <path d="M36 9.94577V41.4626C36 42.2098 35.3875 42.8221 34.6401 42.8221H32.6989C33.4463 42.8221 34.0588 42.2098 34.0588 41.4626V9.94577L28.1211 4.00977H30.0519L36 9.94577Z" fill="#E2E1DE"/>
                                <path d="M36 9.94639H31.4118C30.6644 9.94639 30.0519 9.34448 30.0519 8.58692V4L36 9.94639Z" fill="#C9C9C9"/>
                                <path d="M19.6194 16.1308H6V10.6202C6 10.2051 6.33218 9.87305 6.7474 9.87305H19.609C20.0242 9.87305 20.3564 10.2051 20.3564 10.6202V15.3836C20.3668 15.7883 20.0346 16.1308 19.6194 16.1308Z" fill="#4ACC97"/>
                                <path d="M20.3668 15.2804V15.3738C20.3668 15.7889 20.0346 16.1314 19.609 16.1314H6V10.6209C6 10.2057 6.33218 9.86328 6.75778 9.86328H7.14187V11.8247C7.14187 13.7341 8.68858 15.2804 10.5986 15.2804H20.3668Z" fill="#38C487"/>
                                <path d="M6 16.1309L8.28373 18.7253V16.1309H6Z" fill="#00B564"/>
                                <path d="M18.5916 17.7601H8.28367V16.1309H19.5985V16.7639C19.5985 17.3139 19.1418 17.7601 18.5916 17.7601Z" fill="#E2E1DE"/>
                                <path d="M8.1488 15.6741V14.9581C8.26299 14.9892 8.35642 15.01 8.44984 15.01C8.60555 15.01 8.71974 14.9685 8.7924 14.8751C8.86507 14.7921 8.89621 14.6364 8.89621 14.4185V11.2429H8.30451V10.5684H10.4637V11.2429H9.92389V14.46C9.92389 14.8958 9.82008 15.2279 9.60209 15.4355C9.3841 15.643 9.10382 15.7572 8.75088 15.7572C8.56403 15.7468 8.3668 15.7157 8.1488 15.6741Z" fill="white"/>
                                <path d="M12.82 13.8587V14.5332H10.7335V13.8587H11.2421V11.2331H10.7335V10.5586H12.82C13.3078 10.5586 13.6815 10.6727 13.9514 10.9011C14.2213 11.1294 14.3459 11.4407 14.3459 11.8247C14.3459 12.0426 14.3044 12.2398 14.211 12.4266C14.1175 12.603 14.0033 12.7483 13.858 12.8417C13.7127 12.9351 13.5466 13.0077 13.3597 13.0389C13.1729 13.07 12.9341 13.0907 12.6539 13.0907H12.2698V13.8587H12.82ZM12.2698 12.4266H12.4255C12.7784 12.4266 13.0068 12.3643 13.1106 12.2501C13.2144 12.136 13.2663 11.9907 13.2663 11.8247C13.2663 11.6794 13.2352 11.5549 13.1625 11.4511C13.0899 11.3473 13.0068 11.285 12.9238 11.2643C12.8407 11.2435 12.685 11.2331 12.4774 11.2331H12.2802V12.4266H12.2698Z" fill="white"/>
                                <path d="M17.2525 13.1943V12.5197H19.1107C19.1107 12.9971 19.0276 13.3811 18.8512 13.6613C18.6747 13.9415 18.4256 14.1594 18.0934 14.3254C17.7612 14.4915 17.3875 14.5641 16.9827 14.5641C16.2664 14.5641 15.7162 14.3773 15.3321 13.9934C14.9481 13.6094 14.7612 13.1216 14.7612 12.5301C14.7612 12.115 14.8546 11.7622 15.0415 11.4405C15.2283 11.1291 15.4878 10.8904 15.8096 10.7348C16.1314 10.5791 16.4844 10.4961 16.8581 10.4961C17.3875 10.4961 17.8027 10.6206 18.1038 10.8801V10.5584H18.7785V11.9697H18.1038C18.0311 11.731 17.8961 11.5442 17.6885 11.4093C17.4809 11.2744 17.2525 11.2018 17.0138 11.2018C16.7024 11.2018 16.4325 11.3159 16.2041 11.5339C15.9861 11.7622 15.8719 12.0631 15.8719 12.4575C15.8719 12.9141 15.9861 13.2565 16.2145 13.4849C16.4429 13.7235 16.7128 13.8377 17.0449 13.8377C17.2837 13.8377 17.4809 13.7754 17.6366 13.6613C17.7923 13.5471 17.9065 13.3811 17.9688 13.1735H17.2525V13.1943Z" fill="white"/>
                                <path d="M32.263 39.1482H11.0243C10.6921 39.1482 10.4118 38.8783 10.4118 38.5359V21.6826C10.4118 21.3505 10.6817 21.0703 11.0243 21.0703H32.263C32.5952 21.0703 32.8755 21.3401 32.8755 21.6826V38.5462C32.8755 38.8783 32.5952 39.1482 32.263 39.1482Z" fill="#7CC8FB"/>
                                <path d="M32.8755 27.4322C32.8755 27.4322 27.5087 24.101 22.8893 26.1558C22.3391 26.4048 21.8305 26.7265 21.353 27.1001C20.1592 28.0341 15.5087 31.2719 10.4118 29.3002V33.4512H32.8651V27.4322H32.8755Z" fill="#00B564"/>
                                <path d="M10.4118 27.4322C10.4118 27.4322 15.7786 24.101 20.398 26.1558C20.9481 26.4048 21.4568 26.7265 21.9343 27.1001C23.1281 28.0341 27.7786 31.2719 32.8755 29.3002V33.4512H10.4118V27.4322Z" fill="#4ACC97"/>
                                <path d="M32.0658 39.1498H11.2215C10.7751 39.1498 10.4118 38.7866 10.4118 38.3404V33.4629H32.8651V38.3404C32.8754 38.7866 32.5121 39.1498 32.0658 39.1498Z" fill="#41C0E3"/>
                                <defs>
                                    <filter id="filter0_d_194_9675" x="0.273369" y="0" width="43.7266" height="54.8223" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                                      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
                                      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
                                      <feOffset dy="4"/>
                                      <feGaussianBlur stdDeviation="4"/>
                                      <feComposite in2="hardAlpha" operator="out"/>
                                      <feColorMatrix type="matrix" values="0 0 0 0 0.080434 0 0 0 0 0.470833 0 0 0 0 0.329856 0 0 0 0.25 0"/>
                                      <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_194_9675"/>
                                      <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_194_9675" result="shape"/>
                                    </filter>
                                </defs>
                            </svg>
                            Copy of DCR Ltd.CI
                        </div>
                    </td>
                    <td>Incorporation of Hong Kong Limit...</td>
                    <td>CI</td>
                    <td><span style="color: #009B9A;;">234KB</span></td>
                    <td>20230515</td>
                    <td><a href="#" style="color: #009B9A;">View</a> | <a href="#" data-bs-toggle="modal" data-bs-target="#listPropertiesModal" style="color: #009B9A;">Download</a></td>
                </tr>
                <tr>
                    <td scope="row" class="flex items-center">
                        <div class="form-check flex items-center">
                            <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
                            <svg style="width: 50px;" xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 44 56" fill="none">
                              <g filter="url(#filter0_d_194_9768)">
                                <path d="M36.0001 10.4041V41.9186C36.0001 42.6654 35.3906 43.2747 34.6436 43.2747H9.63711C8.89006 43.2747 8.28062 42.6654 8.28062 41.9186V5.82485C8.28062 5.07801 8.89006 4.46875 9.63711 4.46875H30.0532L36.0001 10.4041Z" fill="white"/>
                              </g>
                              <path d="M35.9999 10.4041V41.9186C35.9999 42.6654 35.3904 43.2747 34.6434 43.2747H32.707C33.454 43.2747 34.0634 42.6654 34.0634 41.9186V10.4041L28.1264 4.46875H30.0628L35.9999 10.4041Z" fill="#E5E5E5"/>
                              <path d="M35.9998 10.4041H31.4093C30.6623 10.4041 30.0529 9.79486 30.0529 9.04803V4.46875L35.9998 10.4041Z" fill="#CECECE"/>
                              <path d="M30.2691 22.8443H14.1683C13.6276 22.8443 13.1853 22.4021 13.1853 21.8616C13.1853 21.3211 13.6276 20.8789 14.1683 20.8789H30.2691C30.8098 20.8789 31.2521 21.3211 31.2521 21.8616C31.2521 22.4119 30.8196 22.8443 30.2691 22.8443Z" fill="#CECECE"/>
                              <path d="M30.2691 27.8853H14.1683C13.6276 27.8853 13.1853 27.4431 13.1853 26.9026C13.1853 26.3621 13.6276 25.9199 14.1683 25.9199H30.2691C30.8098 25.9199 31.2521 26.3621 31.2521 26.9026C31.2521 27.4529 30.8196 27.8853 30.2691 27.8853Z" fill="#CECECE"/>
                              <path d="M30.2691 32.9263H14.1683C13.6276 32.9263 13.1853 32.4841 13.1853 31.9436C13.1853 31.4031 13.6276 30.9609 14.1683 30.9609H30.2691C30.8098 30.9609 31.2521 31.4031 31.2521 31.9436C31.2521 32.4939 30.8196 32.9263 30.2691 32.9263Z" fill="#CECECE"/>
                              <path d="M19.6139 17.7343H5.99991V12.2215C5.99991 11.8088 6.33411 11.4648 6.75678 11.4648H19.6139C20.0267 11.4648 20.3708 11.799 20.3708 12.2215V16.9777C20.3708 17.3904 20.0366 17.7343 19.6139 17.7343Z" fill="#F55B4B"/>
                              <path d="M20.3708 16.8794V16.9777C20.3708 17.3904 20.0366 17.7343 19.6139 17.7343H5.99991V12.2215C5.99991 11.8088 6.33411 11.4648 6.75678 11.4648H7.14014V13.4302C7.14014 15.3366 8.68339 16.8892 10.6002 16.8892H20.3708V16.8794Z" fill="#DD4E43"/>
                              <path d="M5.99991 17.7344L8.28037 20.3286V17.7344H5.99991Z" fill="#DB1B1B"/>
                              <path d="M9.68596 15.7897V16.4481H7.63157V15.7897H8.13288V13.2053H7.63157V12.5469H9.68596C10.1676 12.5469 10.5313 12.655 10.7967 12.881C11.0621 13.107 11.1899 13.4116 11.1899 13.785C11.1899 14.0012 11.1407 14.1978 11.0523 14.3747C10.9638 14.5515 10.8458 14.6891 10.6984 14.7776C10.551 14.8758 10.3937 14.9348 10.2069 14.9741C10.0202 15.0134 9.79408 15.0232 9.51885 15.0232H9.14533V15.7799H9.68596V15.7897ZM9.14533 14.3747H9.29277C9.63681 14.3747 9.86289 14.3157 9.96118 14.2076C10.0595 14.0995 10.1086 13.9521 10.1086 13.785C10.1086 13.6475 10.0693 13.5197 10.0005 13.4215C9.93169 13.3232 9.85306 13.2642 9.76459 13.2347C9.67613 13.2151 9.52868 13.1954 9.32226 13.1954H9.1355V14.3747H9.14533Z" fill="white"/>
                              <path d="M11.4258 16.4481V15.7897H12.0155V13.2053H11.4258V12.5469H13.2737C13.6669 12.5469 13.9716 12.5665 14.2174 12.6157C14.4533 12.6648 14.6794 12.7729 14.8956 12.9301C15.1119 13.0972 15.2888 13.3134 15.4166 13.5885C15.5444 13.8637 15.6132 14.1683 15.6132 14.5024C15.6132 14.7776 15.564 15.033 15.4756 15.2787C15.3871 15.5244 15.2691 15.7209 15.1315 15.8782C14.9939 16.0256 14.8366 16.1533 14.64 16.2417C14.4533 16.3302 14.2763 16.3891 14.1191 16.4186C13.9618 16.4481 13.7161 16.4579 13.3819 16.4579H11.4258V16.4481ZM13.0378 15.7897H13.2836C13.5784 15.7897 13.8144 15.7504 13.9913 15.6718C14.1682 15.5932 14.3058 15.4556 14.4041 15.2689C14.5123 15.0724 14.5614 14.8267 14.5614 14.5122C14.5614 14.2174 14.5123 13.9619 14.4041 13.7556C14.296 13.5492 14.1584 13.4018 13.9716 13.3232C13.7947 13.2446 13.5588 13.2053 13.2836 13.2053H13.0378V15.7897Z" fill="white"/>
                              <path d="M16.0654 16.4481V15.7897H16.6257V13.2053H16.0654V12.5469H19.5647V13.7556H18.8177V13.2151H17.6479V14.1192H18.4933V14.7776H17.6479V15.7897H18.2475V16.4481H16.0654Z" fill="white"/>
                              <path d="M18.1199 19.5622H8.29033V17.7344H19.6632V18.0292C19.6533 18.8743 18.9653 19.5622 18.1199 19.5622Z" fill="#E5E5E5"/>
                              <defs>
                                <filter id="filter0_d_194_9768" x="0.280624" y="0.46875" width="43.7195" height="54.8066" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                                  <feFlood flood-opacity="0" result="BackgroundImageFix"/>
                                  <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
                                  <feOffset dy="4"/>
                                  <feGaussianBlur stdDeviation="4"/>
                                  <feComposite in2="hardAlpha" operator="out"/>
                                  <feColorMatrix type="matrix" values="0 0 0 0 0.080434 0 0 0 0 0.470833 0 0 0 0 0.329856 0 0 0 0.25 0"/>
                                  <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_194_9768"/>
                                  <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_194_9768" result="shape"/>
                                </filter>
                              </defs>
                            </svg>
                            Copy of DCR Ltd.BR
                        </div>
                    </td>
                    <td>Change Company Name</td>
                    <td>BR</td>
                    <td><span style="color: #009B9A;;">234KB</span></td>
                    <td>20230515</td>
                    <td><a href="#" style="color: #009B9A;">View</a> | <a href="#" data-bs-toggle="modal" data-bs-target="#listPropertiesModal" style="color: #009B9A;">Download</a></td>
                </tr>
                <tr>
                    <td scope="row" class="flex items-center">
                        <div class="form-check flex items-center">
                            <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
                                <svg style="width: 50px;" xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 44 55" fill="none">
                                    <g filter="url(#filter0_d_194_9675)">
                                        <path d="M36 9.94639V41.4633C36 42.2104 35.3875 42.8227 34.6401 42.8227H9.63323C8.88583 42.8227 8.27337 42.2104 8.27337 41.4633V5.35947C8.27337 4.61228 8.88583 4 9.63323 4H30.0519L36 9.94639Z" fill="white"/>
                                    </g>
                                    <path d="M36 9.94577V41.4626C36 42.2098 35.3875 42.8221 34.6401 42.8221H32.6989C33.4463 42.8221 34.0588 42.2098 34.0588 41.4626V9.94577L28.1211 4.00977H30.0519L36 9.94577Z" fill="#E2E1DE"/>
                                    <path d="M36 9.94639H31.4118C30.6644 9.94639 30.0519 9.34448 30.0519 8.58692V4L36 9.94639Z" fill="#C9C9C9"/>
                                    <path d="M19.6194 16.1308H6V10.6202C6 10.2051 6.33218 9.87305 6.7474 9.87305H19.609C20.0242 9.87305 20.3564 10.2051 20.3564 10.6202V15.3836C20.3668 15.7883 20.0346 16.1308 19.6194 16.1308Z" fill="#4ACC97"/>
                                    <path d="M20.3668 15.2804V15.3738C20.3668 15.7889 20.0346 16.1314 19.609 16.1314H6V10.6209C6 10.2057 6.33218 9.86328 6.75778 9.86328H7.14187V11.8247C7.14187 13.7341 8.68858 15.2804 10.5986 15.2804H20.3668Z" fill="#38C487"/>
                                    <path d="M6 16.1309L8.28373 18.7253V16.1309H6Z" fill="#00B564"/>
                                    <path d="M18.5916 17.7601H8.28367V16.1309H19.5985V16.7639C19.5985 17.3139 19.1418 17.7601 18.5916 17.7601Z" fill="#E2E1DE"/>
                                    <path d="M8.1488 15.6741V14.9581C8.26299 14.9892 8.35642 15.01 8.44984 15.01C8.60555 15.01 8.71974 14.9685 8.7924 14.8751C8.86507 14.7921 8.89621 14.6364 8.89621 14.4185V11.2429H8.30451V10.5684H10.4637V11.2429H9.92389V14.46C9.92389 14.8958 9.82008 15.2279 9.60209 15.4355C9.3841 15.643 9.10382 15.7572 8.75088 15.7572C8.56403 15.7468 8.3668 15.7157 8.1488 15.6741Z" fill="white"/>
                                    <path d="M12.82 13.8587V14.5332H10.7335V13.8587H11.2421V11.2331H10.7335V10.5586H12.82C13.3078 10.5586 13.6815 10.6727 13.9514 10.9011C14.2213 11.1294 14.3459 11.4407 14.3459 11.8247C14.3459 12.0426 14.3044 12.2398 14.211 12.4266C14.1175 12.603 14.0033 12.7483 13.858 12.8417C13.7127 12.9351 13.5466 13.0077 13.3597 13.0389C13.1729 13.07 12.9341 13.0907 12.6539 13.0907H12.2698V13.8587H12.82ZM12.2698 12.4266H12.4255C12.7784 12.4266 13.0068 12.3643 13.1106 12.2501C13.2144 12.136 13.2663 11.9907 13.2663 11.8247C13.2663 11.6794 13.2352 11.5549 13.1625 11.4511C13.0899 11.3473 13.0068 11.285 12.9238 11.2643C12.8407 11.2435 12.685 11.2331 12.4774 11.2331H12.2802V12.4266H12.2698Z" fill="white"/>
                                    <path d="M17.2525 13.1943V12.5197H19.1107C19.1107 12.9971 19.0276 13.3811 18.8512 13.6613C18.6747 13.9415 18.4256 14.1594 18.0934 14.3254C17.7612 14.4915 17.3875 14.5641 16.9827 14.5641C16.2664 14.5641 15.7162 14.3773 15.3321 13.9934C14.9481 13.6094 14.7612 13.1216 14.7612 12.5301C14.7612 12.115 14.8546 11.7622 15.0415 11.4405C15.2283 11.1291 15.4878 10.8904 15.8096 10.7348C16.1314 10.5791 16.4844 10.4961 16.8581 10.4961C17.3875 10.4961 17.8027 10.6206 18.1038 10.8801V10.5584H18.7785V11.9697H18.1038C18.0311 11.731 17.8961 11.5442 17.6885 11.4093C17.4809 11.2744 17.2525 11.2018 17.0138 11.2018C16.7024 11.2018 16.4325 11.3159 16.2041 11.5339C15.9861 11.7622 15.8719 12.0631 15.8719 12.4575C15.8719 12.9141 15.9861 13.2565 16.2145 13.4849C16.4429 13.7235 16.7128 13.8377 17.0449 13.8377C17.2837 13.8377 17.4809 13.7754 17.6366 13.6613C17.7923 13.5471 17.9065 13.3811 17.9688 13.1735H17.2525V13.1943Z" fill="white"/>
                                    <path d="M32.263 39.1482H11.0243C10.6921 39.1482 10.4118 38.8783 10.4118 38.5359V21.6826C10.4118 21.3505 10.6817 21.0703 11.0243 21.0703H32.263C32.5952 21.0703 32.8755 21.3401 32.8755 21.6826V38.5462C32.8755 38.8783 32.5952 39.1482 32.263 39.1482Z" fill="#7CC8FB"/>
                                    <path d="M32.8755 27.4322C32.8755 27.4322 27.5087 24.101 22.8893 26.1558C22.3391 26.4048 21.8305 26.7265 21.353 27.1001C20.1592 28.0341 15.5087 31.2719 10.4118 29.3002V33.4512H32.8651V27.4322H32.8755Z" fill="#00B564"/>
                                    <path d="M10.4118 27.4322C10.4118 27.4322 15.7786 24.101 20.398 26.1558C20.9481 26.4048 21.4568 26.7265 21.9343 27.1001C23.1281 28.0341 27.7786 31.2719 32.8755 29.3002V33.4512H10.4118V27.4322Z" fill="#4ACC97"/>
                                    <path d="M32.0658 39.1498H11.2215C10.7751 39.1498 10.4118 38.7866 10.4118 38.3404V33.4629H32.8651V38.3404C32.8754 38.7866 32.5121 39.1498 32.0658 39.1498Z" fill="#41C0E3"/>
                                    <defs>
                                        <filter id="filter0_d_194_9675" x="0.273369" y="0" width="43.7266" height="54.8223" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                                          <feFlood flood-opacity="0" result="BackgroundImageFix"/>
                                          <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
                                          <feOffset dy="4"/>
                                          <feGaussianBlur stdDeviation="4"/>
                                          <feComposite in2="hardAlpha" operator="out"/>
                                          <feColorMatrix type="matrix" values="0 0 0 0 0.080434 0 0 0 0 0.470833 0 0 0 0 0.329856 0 0 0 0.25 0"/>
                                          <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_194_9675"/>
                                          <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_194_9675" result="shape"/>
                                        </filter>
                                    </defs>
                                </svg>
                                Copy of Lee HKID
                            </div>
                    </td>
                    <td>Change Company Name</td>
                    <td>HKID</td>
                    <td><span style="color: #009B9A;;">234KB</span></td>
                    <td>20230515</td>
                    <td><a href="#" style="color: #009B9A;">View</a> | <a href="#" data-bs-toggle="modal" data-bs-target="#listPropertiesModal" style="color: #009B9A;">Download</a></td>
                </tr>
                <tr>
                    <td scope="row" class="flex items-center">
                        <div class="form-check flex items-center">
                            <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
                                <svg style="width: 50px;" xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 44 55" fill="none">
                                    <g filter="url(#filter0_d_194_9675)">
                                        <path d="M36 9.94639V41.4633C36 42.2104 35.3875 42.8227 34.6401 42.8227H9.63323C8.88583 42.8227 8.27337 42.2104 8.27337 41.4633V5.35947C8.27337 4.61228 8.88583 4 9.63323 4H30.0519L36 9.94639Z" fill="white"/>
                                    </g>
                                    <path d="M36 9.94577V41.4626C36 42.2098 35.3875 42.8221 34.6401 42.8221H32.6989C33.4463 42.8221 34.0588 42.2098 34.0588 41.4626V9.94577L28.1211 4.00977H30.0519L36 9.94577Z" fill="#E2E1DE"/>
                                    <path d="M36 9.94639H31.4118C30.6644 9.94639 30.0519 9.34448 30.0519 8.58692V4L36 9.94639Z" fill="#C9C9C9"/>
                                    <path d="M19.6194 16.1308H6V10.6202C6 10.2051 6.33218 9.87305 6.7474 9.87305H19.609C20.0242 9.87305 20.3564 10.2051 20.3564 10.6202V15.3836C20.3668 15.7883 20.0346 16.1308 19.6194 16.1308Z" fill="#4ACC97"/>
                                    <path d="M20.3668 15.2804V15.3738C20.3668 15.7889 20.0346 16.1314 19.609 16.1314H6V10.6209C6 10.2057 6.33218 9.86328 6.75778 9.86328H7.14187V11.8247C7.14187 13.7341 8.68858 15.2804 10.5986 15.2804H20.3668Z" fill="#38C487"/>
                                    <path d="M6 16.1309L8.28373 18.7253V16.1309H6Z" fill="#00B564"/>
                                    <path d="M18.5916 17.7601H8.28367V16.1309H19.5985V16.7639C19.5985 17.3139 19.1418 17.7601 18.5916 17.7601Z" fill="#E2E1DE"/>
                                    <path d="M8.1488 15.6741V14.9581C8.26299 14.9892 8.35642 15.01 8.44984 15.01C8.60555 15.01 8.71974 14.9685 8.7924 14.8751C8.86507 14.7921 8.89621 14.6364 8.89621 14.4185V11.2429H8.30451V10.5684H10.4637V11.2429H9.92389V14.46C9.92389 14.8958 9.82008 15.2279 9.60209 15.4355C9.3841 15.643 9.10382 15.7572 8.75088 15.7572C8.56403 15.7468 8.3668 15.7157 8.1488 15.6741Z" fill="white"/>
                                    <path d="M12.82 13.8587V14.5332H10.7335V13.8587H11.2421V11.2331H10.7335V10.5586H12.82C13.3078 10.5586 13.6815 10.6727 13.9514 10.9011C14.2213 11.1294 14.3459 11.4407 14.3459 11.8247C14.3459 12.0426 14.3044 12.2398 14.211 12.4266C14.1175 12.603 14.0033 12.7483 13.858 12.8417C13.7127 12.9351 13.5466 13.0077 13.3597 13.0389C13.1729 13.07 12.9341 13.0907 12.6539 13.0907H12.2698V13.8587H12.82ZM12.2698 12.4266H12.4255C12.7784 12.4266 13.0068 12.3643 13.1106 12.2501C13.2144 12.136 13.2663 11.9907 13.2663 11.8247C13.2663 11.6794 13.2352 11.5549 13.1625 11.4511C13.0899 11.3473 13.0068 11.285 12.9238 11.2643C12.8407 11.2435 12.685 11.2331 12.4774 11.2331H12.2802V12.4266H12.2698Z" fill="white"/>
                                    <path d="M17.2525 13.1943V12.5197H19.1107C19.1107 12.9971 19.0276 13.3811 18.8512 13.6613C18.6747 13.9415 18.4256 14.1594 18.0934 14.3254C17.7612 14.4915 17.3875 14.5641 16.9827 14.5641C16.2664 14.5641 15.7162 14.3773 15.3321 13.9934C14.9481 13.6094 14.7612 13.1216 14.7612 12.5301C14.7612 12.115 14.8546 11.7622 15.0415 11.4405C15.2283 11.1291 15.4878 10.8904 15.8096 10.7348C16.1314 10.5791 16.4844 10.4961 16.8581 10.4961C17.3875 10.4961 17.8027 10.6206 18.1038 10.8801V10.5584H18.7785V11.9697H18.1038C18.0311 11.731 17.8961 11.5442 17.6885 11.4093C17.4809 11.2744 17.2525 11.2018 17.0138 11.2018C16.7024 11.2018 16.4325 11.3159 16.2041 11.5339C15.9861 11.7622 15.8719 12.0631 15.8719 12.4575C15.8719 12.9141 15.9861 13.2565 16.2145 13.4849C16.4429 13.7235 16.7128 13.8377 17.0449 13.8377C17.2837 13.8377 17.4809 13.7754 17.6366 13.6613C17.7923 13.5471 17.9065 13.3811 17.9688 13.1735H17.2525V13.1943Z" fill="white"/>
                                    <path d="M32.263 39.1482H11.0243C10.6921 39.1482 10.4118 38.8783 10.4118 38.5359V21.6826C10.4118 21.3505 10.6817 21.0703 11.0243 21.0703H32.263C32.5952 21.0703 32.8755 21.3401 32.8755 21.6826V38.5462C32.8755 38.8783 32.5952 39.1482 32.263 39.1482Z" fill="#7CC8FB"/>
                                    <path d="M32.8755 27.4322C32.8755 27.4322 27.5087 24.101 22.8893 26.1558C22.3391 26.4048 21.8305 26.7265 21.353 27.1001C20.1592 28.0341 15.5087 31.2719 10.4118 29.3002V33.4512H32.8651V27.4322H32.8755Z" fill="#00B564"/>
                                    <path d="M10.4118 27.4322C10.4118 27.4322 15.7786 24.101 20.398 26.1558C20.9481 26.4048 21.4568 26.7265 21.9343 27.1001C23.1281 28.0341 27.7786 31.2719 32.8755 29.3002V33.4512H10.4118V27.4322Z" fill="#4ACC97"/>
                                    <path d="M32.0658 39.1498H11.2215C10.7751 39.1498 10.4118 38.7866 10.4118 38.3404V33.4629H32.8651V38.3404C32.8754 38.7866 32.5121 39.1498 32.0658 39.1498Z" fill="#41C0E3"/>
                                    <defs>
                                        <filter id="filter0_d_194_9675" x="0.273369" y="0" width="43.7266" height="54.8223" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                                          <feFlood flood-opacity="0" result="BackgroundImageFix"/>
                                          <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
                                          <feOffset dy="4"/>
                                          <feGaussianBlur stdDeviation="4"/>
                                          <feComposite in2="hardAlpha" operator="out"/>
                                          <feColorMatrix type="matrix" values="0 0 0 0 0.080434 0 0 0 0 0.470833 0 0 0 0 0.329856 0 0 0 0.25 0"/>
                                          <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_194_9675"/>
                                          <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_194_9675" result="shape"/>
                                        </filter>
                                    </defs>
                                </svg>
                                Copy of Chan HKID
                            </div>
                    </td>
                    <td>Change of Company and Director...</td>
                    <td>HKID</td>
                    <td class="flex items-center">
                        <span style="color: #009B9A;;">234KB</span>
                    </td>
                    <td>20230515</td>
                    <td><a href="#" style="color: #009B9A;">View</a> | <a href="#" data-bs-toggle="modal" data-bs-target="#listPropertiesModal" style="color: #009B9A;">Download</a></td>
                </tr>
            </tbody>
        </table>
        <br>
        <div class="row" style="margin-left: 50px; margin-right: 50px;">
            <div class="col-xxl-4">
                <div class="flex items-center">
                    每頁顯示 &nbsp;
                    <select class="form-select form-select-sm" aria-label="Page Count" style="width: 80px; border-radius: 25px;">
                        <option value="20">20</option>
                        <option value="50">50</option>
                        <option value="100">100</option>
                    </select> &nbsp; 項
                </div>
            </div>
            <div class="col-xxl-4 justify-center">
                <button class="btn btn-success btn-sm" type="button" data-bs-toggle="modal" data-bs-target="#Modal" style="font-size: 19px;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 300px; height: 50px;">Download</button>
            </div>
            <div class="col-xxl-4 items-center">
                <nav aria-label="Page navigation">
                    <ul class="pagination justify-content-center">
                        <li class="page-item disabled">
                          <a class="page-link" href="#" aria-label="Previous" style="color: #000000;">
                            <span aria-hidden="true"><<</span>
                          </a>
                        </li>
                        <li class="page-item disabled">
                          <a class="page-link" href="#" aria-label="Previous" style="color: #000000;">
                            <span aria-hidden="true"><</span>
                          </a>
                        </li>
                        <li class="page-item"><a class="page-link" href="#" style="border-radius: 5px;background-color: #009B9A; color: #fff;">1</a></li>
                        <li class="page-item"><a class="page-link" href="#" style="border-radius: 5px; color: #000;">2</a></li>
                        <li class="page-item"><a class="page-link" href="#" style="border-radius: 5px; color: #000;">3</a></li>
                        <li class="page-item disabled" style="border-radius: 5px; color: #000;"><span class="page-link">...</span></li>
                        <li class="page-item"><a class="page-link" href="#" style="border-radius: 5px; color: #000;">10</a></li>
                        <li class="page-item">
                          <a class="page-link" href="#" aria-label="Next" style="color: #000000;">
                            <span aria-hidden="true">></span>
                          </a>
                        </li>
                        <li class="page-item">
                          <a class="page-link" href="#" aria-label="Next" style="color: #000000;">
                            <span aria-hidden="true">>></span>
                          </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</div>

{{-- Filter Modal --}}
<div class="modal fade custom-modal style2" id="filterModal" tabindex="-1" aria-labelledby="filterModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-lg modal-dialog-centered">
		<div class="modal-content mx-auto">
			<div class="modal-body p-0">
				<p class="modal-title">Search</p>
				<div class="col">
                    <div class="row" style="margin: 0px;margin-top: 20px;">
                        <div class="col-xxl-5 d-xxl-flex align-items-xxl-center" style="width: 250px;">
                            <h1 style="color: rgb(0,0,0);font-size: 20px;">Document Category </h1>
                        </div>
                        <div class="col">
                            <select class="form-select form-select-sm" aria-label="Page Count" style="border-radius: 25px;">
                                <option>Any</option>
                                <option>CI</option>
                                <option>BR</option>
                                <option>HKID</option>
                                <option>Other ID</option>
                            </select>
                        </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: 250px;">
                            <h1 style="color: rgb(0,0,0);font-size: 20px;">Status </h1>
                        </div>
                        <div class="col">
                            <select class="form-select form-select-sm" aria-label="Page Count" style="border-radius: 25px;">
                                <option>Pending</option>
                                <option>Completed</option>
                            </select>
                        </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: 250px;">
                            <h1 style="color: rgb(0,0,0);font-size: 20px;">Keyword </h1>
                        </div>
                        <div class="col">
                            <input class="w-full form-control form-control-sm" 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);">
                        </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: 250px;">
                            <h1 style="color: rgb(0,0,0);font-size: 20px;">Date uploaded:</h1>
                        </div>
                        <div class="col">
                            <select class="form-select form-select-sm" aria-label="Page Count" style="border-radius: 25px;">
                                <option>Any Time</option>
                                <option>Today</option>
                                <option>Yesterday</option>
                                <option>Last 7 days</option>
                                <option>Last 30 days</option>
                                <option>Last 90 days</option>
                                <option>Custom...</option>
                            </select>
                        </div>
                    </div>
                    <div class="row d-none" style="margin: 0px;margin-top: 20px;">
                        <div class="col-xxl-5 d-xxl-flex align-items-xxl-center" style="width: 250px;">
                        </div>
                        <div class="col flex">
                            <input class="w-full form-control form-control-sm" type="date" 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);">
                            <input class="w-full form-control form-control-sm" type="date" 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);">
                        </div>
                    </div>
                    <div class="row flex justify-center items-center" style="margin-top: 20px;">
                        <button class="btn btn-md btn-success" style="width: 300px;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">Search</button> &nbsp;
                        <button class="btn btn-md" style="width: 300px;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">Cancel</button>
                    </div>
                </div>
			</div>
		</div>
	</div>
</div>

@endsection