{"id":51917,"date":"2023-06-08T12:10:30","date_gmt":"2023-06-08T12:10:30","guid":{"rendered":"https:\/\/ellaithy.com.eg\/?page_id=51917"},"modified":"2024-10-02T17:20:00","modified_gmt":"2024-10-02T17:20:00","slug":"filter-with-deposit","status":"publish","type":"page","link":"https:\/\/ellaithy.com.eg\/en\/filter-with-deposit\/","title":{"rendered":"Filter With Deposit"},"content":{"rendered":"\n<div class=\"cbc-section flex flex-col gap-0 items-center bg-clifford pt-10 px-2 mt-40 mb-8\">\n  <!-- Header -->\n  <h2 class=\"cbc-Header px-6 py-2 -mt-16 rounded\">Car Budget Calculator<\/h2>\n  <!-- Instructions -->\n  <div class=\"cbc-instructions-title flex flex-col\">\n    <button class=\"cbc-instructions-btn mb-1 -mt-4 px-2\" type=\"button\" data-toggle=\"collapse\" data-target=\"#instructions\" aria-expanded=\"false\" aria-controls=\"instructions\">\n      How it works?      <span class=\"arrow\">&#9660;<\/span> <!-- Down arrow -->\n    <\/button>\n    <div class=\"collapse\" id=\"instructions\">\n      <div class=\"cbc-instructions-message text-sm p-2 rounded\">\n        <!-- 1. The amount of the deposit has priority in the results appearing.<br>2. Installment Field not required, So you can search without using it.<br>3. The prices shown are the official car dealer prices. Keep in mind that these prices may vary in the real market. -->\n        <span>1. The amount of the deposit has priority in the results appearing.<\/span><span>2. Installment Field not required, so you can search without using it.<\/span><span>3. The prices shown are the official car dealer prices. Keep in mind that these prices may vary in the real market.<\/span>      <\/div>\n    <\/div>\n  <\/div>\n\n  <div class=\"cbc-container\">\n    <!-- Fields -->\n    <div class=\"cbc-form mt-4\">\n      <form method=\"post\" class=\"cbc-form\">\n\n        <div class=\"cbc-fields flex flex-row flex-wrap items-end justify-center gap-4 mb-10\">\n\n          <div class=\"flex flex-col items-center\">\n            <div class=\"flex flex-col items-start cbc-label-div\">\n              <label for=\"ls-deposit\">Deposit:<\/label>\n              <input type=\"number\" id=\"ls-deposit\" class=\"cursor-text\" name=\"ls-deposit\" min=\"0\" value=\"\">\n            <\/div>\n            <!-- <p class=\"ls-fields-instruction\">Minimum deposit: 50000<\/p> -->\n            <span id=\"deposit-error\" class=\"error-message\"><\/span>\n          <\/div>\n\n          <div class=\"flex flex-col items-center\">\n            <div class=\"flex flex-col items-start cbc-label-div\">\n              <label for=\"ls-months\" class=\"month-select-label\">Months:<\/label>\n              <select id=\"ls-months\" name=\"ls-months\" class=\"month-select\">\n                                  <option value=\"12\" >12 months<\/option>\n                                  <option value=\"24\" >24 months<\/option>\n                                  <option value=\"36\" >36 months<\/option>\n                                  <option value=\"48\" >48 months<\/option>\n                                  <option value=\"60\" >60 months<\/option>\n                                  <option value=\"72\" >72 months<\/option>\n                                  <option value=\"84\" >84 months<\/option>\n                                  <option value=\"96\" >96 months<\/option>\n                              <\/select>\n            <\/div>\n          <\/div>\n\n          <div class=\"flex flex-col items-center\">\n            <div class=\"flex flex-col items-start cbc-label-div\">\n              <label for=\"ls-installment\" class=\"installment-select-label\">Installment: (Optional)<\/label>\n              <input type=\"number\" id=\"ls-installment\" class=\"cursor-text\" name=\"ls-installment\" min=\"2000\" value=\"\">\n            <\/div>\n            <span id=\"installment-error\" class=\"error-message\"><\/span>\n          <\/div>\n\n          <div class=\"flex flex-col items-center\">\n            <div class=\"flex flex-col items-start cbc-label-div\">\n              <label for=\"ls-brand\" class=\"brand-select-label\">Car Brand: (Optional)<\/label>\n              <select id=\"ls-brand\" name=\"ls-brand\" class=\"brand-select\">\n                <option value=\"\">Select a brand<\/option>\n                <option value=\"1158\" >Cobra<\/option><option value=\"1152\" >Dong Feng<\/option><option value=\"1131\" >Bestune<\/option><option value=\"1068\" >Baic<\/option><option value=\"1050\" >Haval<\/option><option value=\"1037\" >Changan<\/option><option value=\"1009\" >Alfa Romeo<\/option><option value=\"982\" >Jetour<\/option><option value=\"959\" >Soueast<\/option><option value=\"97\" >AUDI<\/option><option value=\"96\" >BMW<\/option><option value=\"101\" >Brilliance<\/option><option value=\"102\" >BYD<\/option><option value=\"105\" >changhe<\/option><option value=\"135\" >Chery<\/option><option value=\"137\" >Chevrolet<\/option><option value=\"140\" >Citro\u00ebn<\/option><option value=\"665\" >Domy<\/option><option value=\"615\" >DS<\/option><option value=\"138\" >DFSK<\/option><option value=\"139\" >FAW<\/option><option value=\"142\" >Fiat<\/option><option value=\"143\" >ford<\/option><option value=\"144\" >Geely<\/option><option value=\"145\" >Honda<\/option><option value=\"146\" >Hyundai<\/option><option value=\"147\" >Jac<\/option><option value=\"148\" >Jeep<\/option><option value=\"10\" >Kia<\/option><option value=\"149\" >Lada<\/option><option value=\"150\" >Mazda<\/option><option value=\"151\" >Mercedes<\/option><option value=\"152\" >MG<\/option><option value=\"622\" >Mini Cooper<\/option><option value=\"153\" >Mitsubishi<\/option><option value=\"154\" >Nissan<\/option><option value=\"155\" >Opel<\/option><option value=\"156\" >Peugeot<\/option><option value=\"157\" >Proton<\/option><option value=\"158\" >Renault<\/option><option value=\"159\" >Seat<\/option><option value=\"160\" >Senova<\/option><option value=\"161\" >Skoda<\/option><option value=\"658\" >Sang Yong<\/option><option value=\"162\" >Subaruo<\/option><option value=\"163\" >Suzuki<\/option><option value=\"11\" >Toyota<\/option><option value=\"164\" >volkswagen<\/option><option value=\"165\" >volvo<\/option><option value=\"166\" >Zotye<\/option>              <\/select>\n            <\/div>\n          <\/div>\n\n          <!-- Submit -->\n          <div class=\"cbc-button-submit flex justify-center rounded\">\n            <input class=\"rounded\" type=\"submit\" name=\"Submit\" value=\"View Cars\">\n          <\/div>\n        <\/div>\n\n      <\/form>\n    <\/div>\n  <\/div>\n<\/div>\n\n<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js\"><\/script>\n<script>\n  $(document).ready(function() {\n    $(\"form\").on(\"submit\", function(e) {\n      var deposit = parseInt($(\"#ls-deposit\").val());\n\n      $(\"#deposit-error\").text(\"\");\n\n      if (deposit < 50000) {\n        e.preventDefault();\n        $(\"#deposit-error\").text(\"Deposit can't be less than 50000.\");\n      }\n    });\n  });\n<\/script>\n\n<style>\n\n  @media (min-width: 768px) and (max-width: 1199px) {\n    .cbc-fields {\n      display: grid;\n      grid-template-columns: repeat(2, 1fr);\n      gap: 10px;\n    }\n    \n    .cbc-fields div:first-child, .cbc-fields div:nth-child(3) {\n      align-items: end;\n    }\n    \n    .cbc-fields div:nth-child(2), .cbc-fields div:nth-child(4) {\n      align-items: start;\n    }\n\n    .cbc-fields .cbc-label-div {\n      align-items:  flex-start !important;\n    }\n\n    .cbc-button-submit {\n      grid-column: span 2;\n      justify-self: center;\n      margin-top: 15px;\n    }\n  }\n\n  @media (max-width: 767px) {\n    .cbc-fields {\n      display: flex;\n      flex-direction: column !important;\n      align-items: center;\n    }\n\n    .cbc-button-submit {\n      justify-self: center;\n    }\n  }\n<\/style>\n\r\n<!-- No Result -->\r\n<div class=\"cbc-noresults-container flex flex-col mb-16\" id=\"cbc-no-results\">\r\n    <div class=\"text-white py-16\">\r\n        <h5 class=\"card-title text-xl text-center\">No Results Found<\/h5>\r\n    <\/div>\r\n<\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":5,"featured_media":0,"parent":0,"menu_order":11,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"acf":[],"_links":{"self":[{"href":"https:\/\/ellaithy.com.eg\/en\/wp-json\/wp\/v2\/pages\/51917"}],"collection":[{"href":"https:\/\/ellaithy.com.eg\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ellaithy.com.eg\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ellaithy.com.eg\/en\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/ellaithy.com.eg\/en\/wp-json\/wp\/v2\/comments?post=51917"}],"version-history":[{"count":4,"href":"https:\/\/ellaithy.com.eg\/en\/wp-json\/wp\/v2\/pages\/51917\/revisions"}],"predecessor-version":[{"id":57152,"href":"https:\/\/ellaithy.com.eg\/en\/wp-json\/wp\/v2\/pages\/51917\/revisions\/57152"}],"wp:attachment":[{"href":"https:\/\/ellaithy.com.eg\/en\/wp-json\/wp\/v2\/media?parent=51917"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}