@include('includes.header')
<div class="container-fluid mt-3">
    <div class="row">
      <div class="col-md-8 col-sm-6 col-xs-12">
        <ul class="pull-right d-inline-flex" style="list-style: none;">
            <li class="btn-sm">
                <a href="{{route('all-account')}}" class="btn btn-primary rounded-pill" style="width: 110px; text-align: center;"> All Account</a>
            </li>
            <li class="btn-sm">
                <a href="{{route('pending')}}" class="btn btn-warning rounded-pill" style="width: 110px; text-align: center; color: white;"> Pending</a>
            </li>
            <li class="btn-sm">
                <a href="{{route('all-history')}}" class="btn btn-success rounded-pill" style="width: 110px; text-align: center;"> All History</a>
            </li>
        </ul><br>
        <b style="color: #009688;">API settings</b>
      </div>
    </div>
    <hr />
    <!-- Request Statistic Starts -->
    <section>
      <table class="table table-striped account-table">
        <div class="row py-3">
          <div class="col-lg-2 col-md-2 col-sm-2">
            <a href="javascript:void(0)" class="btn-sm btn btn-success rounded-pill mt-4"
              style="width: 113px; text-align: center; color: white;" onclick="showDialog()">New Api</a>
          </div>
          <div class="col-lg-2 col-md-2 col-sm-12">
            <div class="form-group">
                <label for="username" style="display: inline-block; margin-bottom: 5px;"><b>Username</b></label>
              <input type="text" id="username" class="form-control" placeholder="Username"
                style="height: 33px; border-radius: 25px;">
            </div>
          </div>
          <div class="col-lg-1 col-md-1 col-sm-12">
            <button class="btn-sm btn btn-success rounded-pill mt-4" style="width: 113px; color: white;"><i
                class="fa fa-search"></i> Search</button>
          </div>
        </div>
        <tr>
          <th>Domain</th>
          <th>Username</th>
          <th>R Balance</th>
          <th>M Balance</th>
          <th>Service</th>
          <th>Date</th>
          <th>Status</th>
          <th>Action</th>
        </tr>
        <tr>
          <td><span style="color: #edb100;">example.com</span></td>
          <td style="color:#009688">Sunon</td>
          <td style="color:#009688">0.0</td>
           <td style="color:#009688">0.0</td>
          <td>Mobile Banking<br><span style="color:rgb(194, 196, 196)">bKash,Naqad,Rocket,Mcash,Ucash,Robicash,Upay</span></td>
          <td>2024-9-7</td>
          <td style="color: rgb(6, 211, 6)">Active</td>
          <td><img src="{{url('assets/icon/pen.png')}}" style="width: 25px;"  onclick="showEditDialog()"/></td>
        </tr>
        <tr>
          <td><span style="color: #edb100;">example.com</span></td>
          <td style="color:#009688">Feroz</td>
          <td style="color:#009688">0.0</td>
           <td style="color:#009688">0.0</td>
          <td>Recharge<br><span style="color:rgb(194, 196, 196)">Gramen,Banglalink,Teletalk,Airtel Robi</span></td>
          <td>2024-3-10</td>
          <td style="color: rgb(6, 211, 6)">Active</td>
          <td><img src="{{url('assets/icon/pen.png')}}" style="width: 25px;"  /></td>
        </tr>
      </table>
      <!--Ends-->
    </section>
    <div id="apiCard" class="api-dialog">
      <div class="api-dialog-content">
        <p class="top-txt"><span>Api Confirmation</span> <span class="close-btn" onclick="closeDialog()">&times;</span>
        </p>
        <form>
        <div class="row">
          <div class="col-lg-12 col-md-12 col-sm-12">

            <div class="form-group">
              <input type="text" name="domain" class="form-control" placeholder="Domain"
                style="border-top: 0; border-right: 0; border-left: 0;" required>
            </div>
            <div class="form-group">
              <input type="text" id="username" name="username" class="form-control" placeholder="Username"
                style="border-top: 0; border-right: 0; border-left: 0;" required>
            </div>
            <div class="form-group mt-3">
              <select class="form-control chooseoption" style=" border-top: 0; border-right: 0; border-left: 0;" required>
                <option>Choose</option>
                <option value="1">Mobile banking</option>
                <option value="2">Recharge</option>
              </select>
              <div id="banking" style="display: none;" class="ml-2 mt-1">
                <input type="checkbox"> bKash
                <input type="checkbox"> Nagad
                <input type="checkbox"> Rocket
                 <input type="checkbox"> Mcash
                  <input type="checkbox"> Ucash
                   <input type="checkbox"> Robicash
                    <input type="checkbox"> Upy
              </div>
              <div id="recharge" style="display: none;" class="ml-2 mt-1">
                <input type="checkbox"> Grameen
                <input type="checkbox"> Banglalink
                <input type="checkbox"> Teletalk
                <input type="checkbox"> Airtel
                <input type="checkbox"> Robi
              </div>
            </div>
        <div class="form-group">
          <input type="text" id="api_key" name="api_key" class="form-control" value="Key"
            style="border-top: 0; border-right: 0; border-left: 0;" required>
        </div>
        <div class="form-group d-flex align-items-center py-3">
          <button type="submit" class="btn-sm btn btn-success rounded-pill ml-5"
            style="width: 150px; text-align: center; color: white; padding: 7px;">
            Submit
              </button>
            </div>
          </div>
        </div>
      </form>
      </div>
    </div>
    <!--edit-->
    <div id="apiEditCard" class="api-dialog">
      <div class="api-dialog-content">
        <p class="top-txt"><span>Edit Confirmation</span> <span class="close-btn" onclick="closeEditDialog()">&times;</span>
        </p>
        <form>
        <div class="row">
          <div class="col-lg-12 col-md-12 col-sm-12">

            <div class="form-group">
              <input type="text" name="domain" class="form-control" placeholder="example.com"
                style="border-top: 0; border-right: 0; border-left: 0;" value="example.com" required>
            </div>
            <div class="form-group">
              <input type="text" id="username" name="username" class="form-control" placeholder="Sunon"
                style="border-top: 0; border-right: 0; border-left: 0;" value="Sunon" required>
            </div>
            <div class="form-group mt-3">
              <select class="form-control chooseoption" style=" border-top: 0; border-right: 0; border-left: 0;" required>
                <option>Mobile banking</option>
                <option value="1">Mobile banking</option>
                <option value="2">Recharge</option>
              </select>
              <div id="banking" style="display: block;" class="ml-2 mt-1">
                <input type="checkbox" checked> bKash
                <input type="checkbox" checked> Nagad
                <input type="checkbox" checked> Rocket
                <input type="checkbox" checked> Upy
              </div>
              <div id="recharge" style="display: none;" class="ml-2 mt-1">
                <input type="checkbox"> Grameen
                <input type="checkbox"> Banglalink
                <input type="checkbox"> Teletalk
                <input type="checkbox"> Airtel
                <input type="checkbox"> Robi
              </div>
            </div>
            <div class="form-group">
              <input type="text" id="api_key" name="api_key" class="form-control" value="5657uyt765656756"
                style="border-top: 0; border-right: 0; border-left: 0;" required>
            </div>
            <div class="form-group d-flex align-items-center py-3">
              <button type="submit" class="btn-sm btn btn-success rounded-pill ml-5"
                style="width: 150px; text-align: center; color: white; padding: 7px;">
                Submit
              </button>
               <input  type="checkbox" checked style="margin-left: 30%;">&nbsp;Active
            </div>
          </div>
        </div>
      </form>
      </div>
    </div>
    <!--- user chat-->
    <div id="sidebar" class="users p-chat-user showChat" style="display: none">
      <div class="had-container">
        <div class="p-fixed users-main">
          <div class="user-box">
            <div class="chat-search-box">
              <a class="back_friendlist">
                <i class="feather icon-x"></i>
              </a>
              <div class="right-icon-control">
                <div class="input-group input-group-button">
                  <input type="text" id="search-friends" name="footer-email" class="form-control"
                    placeholder="Search Friend">
                  <div class="input-group-append">
                    <button class="btn btn-primary waves-effect waves-light" type="button"><i
                        class="feather fa fa-search"></i></button>
                  </div>
                </div>
              </div>
            </div>
            <div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 561px;">
              <div class="main-friend-list" style="overflow: hidden; width: auto; height: 561px;">
                <div class="media userlist-box waves-effect waves-light" data-id="1" data-status="online"
                  data-username="Josephin Doe">
                  <a class="media-left" href="#!">
                    <img class="media-object img-radius img-radius" src="{{url('assets/image/66caa59ab09b21717478001.jpg')}}"
                      alt="Generic placeholder image ">
                    <div class="live-status bg-success"></div>
                  </a>
                  <div class="media-body">
                    <div class="chat-header">Josephin Doe</div>
                  </div>
                </div>
                <div class="media userlist-box waves-effect waves-light" data-id="2" data-status="online"
                  data-username="Lary Doe">
                  <a class="media-left" href="#!">
                    <img class="media-object img-radius" src="{{url('assets/image/66cab5457cc25Muhammad Nasarullah.jpeg')}}"
                      alt="Generic placeholder image">
                    <div class="live-status bg-success"></div>
                  </a>
                  <div class="media-body">
                    <div class="f-13 chat-header">Lary Doe</div>
                  </div>
                </div>
                <div class="media userlist-box waves-effect waves-light" data-id="3" data-status="online"
                  data-username="Alice">
                  <a class="media-left" href="#!">
                    <img class="media-object img-radius" src="{{url('assets/image/66cabd10e43aacustomer5.jpg')}}"
                      alt="Generic placeholder image">
                    <div class="live-status bg-success"></div>
                  </a>
                  <div class="media-body">
                    <div class="f-13 chat-header">Alice</div>
                  </div>
                </div>
                <div class="media userlist-box waves-effect waves-light" data-id="4" data-status="offline"
                  data-username="Alia">
                  <a class="media-left" href="#!">
                    <img class="media-object img-radius" src="{{url('assets/image/66cabd4c5f08dcustomer7.jpg')}}"
                      alt="Generic placeholder image">
                    <div class="live-status bg-default"></div>
                  </a>
                  <div class="media-body">
                    <div class="f-13 chat-header">Alia<small class="d-block text-muted">10 min ago</small></div>
                  </div>
                </div>
                <div class="media userlist-box waves-effect waves-light" data-id="5" data-status="offline"
                  data-username="Suzen">
                  <a class="media-left" href="#!">
                    <img class="media-object img-radius" src="{{url('assets/image/team-1-4.jpg')}}"
                      alt="Generic placeholder image">
                    <div class="live-status bg-default"></div>
                  </a>
                  <div class="media-body">
                    <div class="f-13 chat-header">Suzen<small class="d-block text-muted">15 min ago</small></div>
                  </div>
                </div>
              </div>
              <div class="slimScrollBar"
                style="background: rgb(0, 0, 0); width: 7px; position: absolute; top: 0px; opacity: 0.4; display: block; border-radius: 7px; z-index: 99; right: 1px;">
              </div>
              <div class="slimScrollRail"
                style="width: 7px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 7px; background: rgb(51, 51, 51); opacity: 0.2; z-index: 90; right: 1px;">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="showChat_inner " style="display:none">
      <div class="media chat-inner-header">
      <a class="back_chatBox">
          Josephin Doe
          <button type="button" class="close" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
      </a>
      </div>
      <div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 486px;"><div class="main-friend-chat" style="overflow: hidden; width: auto; height: 486px;">
      <div class="media chat-messages">

      <a class="media-left photo-table" href="#!">
      <img class="media-object img-radius img-radius m-t-5" src="{{url('assets/image/66caa59ab09b21717478001.jpg')}}" alt="Generic placeholder image">
      </a>
      <div class="media-body chat-menu-content">
      <div class="">
      <p class="chat-cont">I'm just looking around. Will you tell me something about yourself?</p>
      </div>
      <p class="chat-time">8:20 a.m.</p>
      </div>
      </div>
      <div class="media chat-messages">
      <div class="media-body chat-menu-reply">
      <div class="">
      <p class="chat-cont">Ohh! very nice</p>
      </div>
      <p class="chat-time">8:22 a.m.</p>
      </div>
      </div>
      <div class="media chat-messages">
      <a class="media-left photo-table" href="#!">
      <img class="media-object img-radius img-radius m-t-5" src="{{url('assets/image/66caa59ab09b21717478001.jpg')}}" alt="Generic placeholder image">
      </a>
      <div class="media-body chat-menu-content">
      <div class="">
      <p class="chat-cont">can you come with me?</p>
      </div>
      <p class="chat-time">8:20 a.m.</p>
      </div>
      </div>
      </div>
      <div class="slimScrollBar" style="background: rgb(0, 0, 0); width: 7px; position: absolute; top: 0px; opacity: 0.4; display: none; border-radius: 7px; z-index: 99; right: 1px; height: 486px;"></div><div class="slimScrollRail" style="width: 7px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 7px; background: rgb(51, 51, 51); opacity: 0.2; z-index: 90; right: 1px;"></div></div>
      <div class="chat-reply-box py-3">
      <div class="right-icon-control">
      <div class="input-group input-group-button">
      <input type="text" class="form-control" placeholder="Write hear . . " style="border-top: 0; border-right: 0; border-left: 0;">
      <i class="fa fa-paper-plane mt-1 fa-2x" aria-hidden="true"></i>
      </div>
      </div>
      </div>
    </div>

    <br />
    <br />

    <!-- <div>
  <footer>
    <div style="width: 100%; height: 20px; background-color: #009688;">

    </div>
  </footer>
</div> -->

</body>

</html>

<script src="bootstrap/jquery/jquery-3.7.1.js"></script>
<script src="js/custom.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script>
  $(document).ready(function () {
    $('.chooseoption').change(function () {
      var value = $(this).val();
      if (value == "1") {
        $('#banking').css('display', 'block');
        $('#recharge').css('display', 'none');
      } else {
        $('#recharge').css('display', 'none');
      }
      if (value == "2") {
        $('#recharge').css('display', 'block');
        $('#banking').css('display', 'none');
      } else {
        $('#recharge').css('display', 'none');
      }
    });
  });
  function showDialog() {
    document.getElementById('apiCard').style.display = 'block';
  }

  function closeDialog() {
    document.getElementById('apiCard').style.display = 'none';
  }
  function showEditDialog() {
    document.getElementById('apiEditCard').style.display = 'block';
  }

  function closeEditDialog() {
    document.getElementById('apiEditCard').style.display = 'none';
  }
</script>

@include('includes.footer')