<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- ========== Required meta tags  ==========-->
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Black Market - Script</title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <!--========== Box Icons css & js ==========-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css">
    <!-- <script src="https://cdn.jsdelivr.net/npm/boxicons@latest/dist/boxicons.js"></script> -->

    <!--========== Sweet Alert ==========-->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <!--========== MAIN CSS ==========-->
    <link rel="stylesheet" href="assets/css/main.css" />

    <!-- Lord Icon -->
    <script src="https://cdn.lordicon.com/lordicon.js"></script>

    
  </head>

  <body style="opacity: 0;">
    <!-- Start Main Page -->
    <div class="main__page" id="blackMarket">
      <!-- Wrapper -->
      <div class="wrapper" data-step2="false">
        <!-- Start Black Market -->
        <div class="Black__Market" style="display: none;">
          <div class="Header__Title">
            <h1 data-lang="ar"></h1>
            <h2 data-lang="en" data-bright-colors="true">Black Market</h2>
          </div>
  
          <div class="Black__Market__Content">
            <!-- Item Start -->
            <div class="Black__Market__Content__Item" data-animation="fade-in" style="--order: 1;">
              <div class="item__title">
                <h3 data-lang="ar">حالة التجارة</h3>
                <span></span>
              </div>
                <div class="svg__icon">
                  <svg width="15" height="30" viewBox="0 0 12.1542 26.829" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                    <path id="Union" d="M12.1542 1L6.87863 1L1.15725 13.4145L6.87862 25.829L12.1542 25.829L12.1542 26.829L6.2384 26.829L0.142609 13.6021L7.62939e-06 13.5364L0.0561676 13.4145L0 13.2926L0.142616 13.2269L6.2384 0L12.1542 0L12.1542 1Z" clip-rule="evenodd" fill="var(--primary-color)" fill-opacity="1.000000" fill-rule="evenodd"/>
                  </svg>
                </div>
                <div class="divdir flex-grow-1"></div>
                <!-- Switcher -->
                <div class="switcher" data-switcher="trade-status">
                  <input type="checkbox" name="trade-status" class="input-switch">
                </div>
              </div>
              <!-- Item End -->
              <!-- Red Alert -->
              <div class="Red__Alert" data-animation="fade-in" style="--order: 2;">
                <h3 data-lang="ar">تحذير سوف يتم تصفير سجل البيع عند إغلاق التجارة</h3>
              </div>
              <!-- Red Alert End -->
              <!-- Columns Start -->
              <div class="flex_columns mt-2" data-animation="fade-in" style="--order: 3;z-index: 20;">  
                <!-- Column Start -->
                <div class="flex_column">
                  <!-- Item Start -->
                  <div class="Black__Market__Content__Item">
                    <div class="item__title">
                      <h3 data-lang="ar">إضافة عضو</h3>
                      <span></span>
                    </div>
                      <div class="svg__icon">
                        <svg width="15" height="30" viewBox="0 0 12.1542 26.829" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                          <path id="Union" d="M12.1542 1L6.87863 1L1.15725 13.4145L6.87862 25.829L12.1542 25.829L12.1542 26.829L6.2384 26.829L0.142609 13.6021L7.62939e-06 13.5364L0.0561676 13.4145L0 13.2926L0.142616 13.2269L6.2384 0L12.1542 0L12.1542 1Z" clip-rule="evenodd" fill="var(--primary-color)" fill-opacity="1.000000" fill-rule="evenodd"/>
                        </svg>
                      </div>
                      <div class="divdir_short flex-grow-0">
                        <div class="divdir_90"></div>
                      </div>
                    </div>
                  <!-- Item End -->
                  <!-- Item content Start -->
                  <div class="item_content">
                    <select name="player-name" id="select-player">
                      <option value="" disabled selected hidden>الرتبة</option>
                    </select>
                    <input type="text" name="player-id" placeholder="ID" id="input-player-employ">
                    <button class="btn" id="employ-player"><i class='bx bx-check'></i></button>
                  </div>
                  <!-- Item content End -->
                </div>
                <!-- Column End -->
                <!-- Column Start -->
                <div class="flex_column">
                  <!-- Item Start -->
                  <div class="Black__Market__Content__Item">
                    <div class="item__title">
                      <h3 data-lang="ar">استعلام</h3>
                      <span></span>
                    </div>
                      <div class="svg__icon">
                        <svg width="15" height="30" viewBox="0 0 12.1542 26.829" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                          <path id="Union" d="M12.1542 1L6.87863 1L1.15725 13.4145L6.87862 25.829L12.1542 25.829L12.1542 26.829L6.2384 26.829L0.142609 13.6021L7.62939e-06 13.5364L0.0561676 13.4145L0 13.2926L0.142616 13.2269L6.2384 0L12.1542 0L12.1542 1Z" clip-rule="evenodd" fill="var(--primary-color)" fill-opacity="1.000000" fill-rule="evenodd"/>
                        </svg>
                      </div>
                      <div class="divdir_short flex-grow-0">
                        <div class="divdir_90"></div>
                      </div>
                    </div>
                  <!-- Item End -->
                  <!-- Item content Start -->
                  <div class="item_content">
                    <input type="text" name="player-id" placeholder="ID" id="input-player-check">
                    <button class="btn" id="check-player"><i class='bx bx-check'></i></button>
                  </div>
                  <!-- Item content End -->
                </div>
                <!-- Column End -->
                <!-- Column Start -->
                <div class="flex_column">
                  <!-- Item Start -->
                  <div class="Black__Market__Content__Item">
                    <div class="item__title">
                      <h3 data-lang="ar">فصل</h3>
                      <span></span>
                    </div>
                      <div class="svg__icon">
                        <svg width="15" height="30" viewBox="0 0 12.1542 26.829" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                          <path id="Union" d="M12.1542 1L6.87863 1L1.15725 13.4145L6.87862 25.829L12.1542 25.829L12.1542 26.829L6.2384 26.829L0.142609 13.6021L7.62939e-06 13.5364L0.0561676 13.4145L0 13.2926L0.142616 13.2269L6.2384 0L12.1542 0L12.1542 1Z" clip-rule="evenodd" fill="var(--primary-color)" fill-opacity="1.000000" fill-rule="evenodd"/>
                        </svg>
                      </div>
                      <div class="divdir_short flex-grow-0">
                        <div class="divdir_90"></div>
                      </div>
                    </div>
                  <!-- Item End -->
                  <!-- Item content Start -->
                  <div class="item_content">
                    <input type="text" name="player-id" placeholder="ID" id="input-player-fire">
                    <button class="btn" id="fire-player"><i class='bx bx-check'></i></button>
                  </div>
                  <!-- Item content End -->
                </div>
                <!-- Column End -->
              </div>
              <!-- End Columns -->
              <!-- Start Buttons -->
              <div class="Black__Market__Content__Item horizontal-line mt-3" data-animation="fade-in" style="--order: 4;">
                <div class="item__title">
                  <h3 data-lang="ar">الخيارات</h3>
                  <span></span>
                </div>
                <div class="svg__icon">
                  <svg width="98.371208" height="8.103490" viewBox="0 0 98.3712 8.10349" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                    <path id="Union" d="M1 0L1 3.17535L49.1856 7.00429L97.3712 3.17537L97.3712 1.04904e-05L98.3712 1.04904e-05L98.3712 4.09906L50.4097 7.91017L50.3943 8.10349L49.1856 8.00744L47.9769 8.10349L47.9615 7.91017L0 4.09904L0 0L1 0Z" clip-rule="evenodd" fill="var(--primary-color)" fill-opacity="1.000000" fill-rule="evenodd"/>
                  </svg>
                </div>
                <div class="divdir_horizontal"></div>
                <div class="flex_buttons mt-2">
                  <button class="btn" id="pull-button" data-bright-colors="true">سحب جميع الأعضاء</button>
                  <button class="btn" id="message-button" data-bright-colors="true">رسالة إلي جميع الأعضاء</button>
                  <button class="btn" data-step="more">المزيد</button>
                  <button class="btn" id="removerecord-button" data-bright-colors="true">مسح سجل البيع</button>
                </div>
              </div>
              <!-- End Buttons -->
          </div>
        </div>
        <!-- End Black Market -->
        <!-- Record the sale -->
        <div class="Black__Market__Record">
          <div class="Header__Title">
            <h1 data-lang="ar"></h1>
            <h2 data-lang="en" data-bright-colors="true">Black Market</h2>
          </div>
          <ul class="record__list">
            <li>
              <div class="wrapper_num">
                <span data-num="true" id="tic_num">3</span>
              </div>
              <span>عدد التذاكر</span>
            </li>
            <li>
              <div class="wrapper_num">
                <span data-num="true" id="weapons_num">3</span>
              </div>
              <span>عدد الأسلحة</span>
            </li>
            <li>
              <div class="wrapper_num">
                <span data-num="true" id="items_num">3</span>
              </div>
              <span>عدد الاغراض</span>
            </li>
            <li>
              <div class="wrapper_num">
                <span data-num="true" id="vehicles_num">3</span>
              </div>
              <span>عدد المركبات</span>
            </li>
            <li>
              <div class="wrapper_num">
                <span data-num="true" id="totalmoney_num">3$</span>
              </div>
              <span>المبلغ الإجمالي</span>
          </ul>
        </div>
        <!-- Record the sale End -->
        <!-- Online Players -->
        <div class="Black__Market__Online__Players">
          <div class="Header__Title">
            <h1 data-lang="ar"></h1>
            <h2 data-lang="en" data-bright-colors="true">Black Market</h2>
          </div>
          <div class="wrapper_table">
            <div class="refresh-player-data" id="refresh-player-data">
              <lord-icon
                src="https://cdn.lordicon.com/bvdjlgnl.json"
                trigger="loop-on-hover"

                stroke="bold"
                colors="primary:#fff,secondary:#4901E0"
                style="width:25px;height:25px">
              </lord-icon>
            </div>
            <table class="online__players__table">
              <thead> 
              <tr>
                <th><div class="online__players__num">23</div></th>
                <th>الأسم</th>
                <th>الأي دي</th>
              </tr>
            </thead>
            <tbody id="playerRows">
            </tbody>
            </table>
          </div>
        </div>
        <!-- Online Players End -->
      </div>
      <!-- End Wrapper -->
    </div>
    <div id="blackMarketStatus" class="black_market_status" style="opacity: 0;">
      <h5>حالة البلاك ماركت: <span data-blackMarket-status="null">الدالة غير موجودة</span></h5>
    </div>
    <!-- End Main Page -->

    <!--========== JQuery JS ==========-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <!--========== Nice Select ==========-->

    <script src="https://cdn.jsdelivr.net/npm/jquery-nice-select@1.1.0/js/jquery.nice-select.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/jquery-nice-select@1.1.0/css/nice-select.min.css" rel="stylesheet">
    <!--========== MAIN JS ==========-->
    <script src="assets/js/main.js"></script>
    <!-- jQuery UI -->
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

    <script>
      $(document).ready(() => {
        $('#select-player').niceSelect();
        $('#select-player').niceSelect().on('change', () => {
          $('.nice-select').addClass('active');
        });
      });
    </script>
  </body>
</html>
