@extends('layouts.app')
@section('css')
    {{-- css --}}
    <link href="{{ url('public/assets/vendors/datatables.net-bs4/css/dataTables.bootstrap4.css') }}" rel="stylesheet">
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css" />
    <style>
        div.dataTables_wrapper div.dataTables_length select { width: 60px }
        #DataTables_Table_0_wrapper .col-sm-12 { overflow: auto; }
        .bootstrap-select.btn-group .btn .caret {
    
    visibility: hidden;
}
    </style>
@endsection
@section('title', 'Account Management')
@section('breadcrumb')
    <ol class="breadcrumb border-0 m-0 px-0 px-md-3">
        <li class="breadcrumb-item">Home</li>
        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Admin</a></li>
        <li class="breadcrumb-item active">Account Management</li>
    </ol>
@endsection



<style>
table, th, td{
  border:1px solid #ddd;
  
}
.bootstrap-select.btn-group .btn .caret {
    
    visibility: hidden;
}
.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
    width: 220px;
}
html:not([dir="rtl"]) .form-check-input {
    margin-left: -1.25rem;
}

input {
  width: 66%;
  border-radius: 26px;
  border: 1px solid #ada9a9;
  padding: 1% 6%;
  margin: 1% 1%;
  background-image: url(https://www.pngarea.com/pngm/109/1164446_searchicon-png-search-icon-png-download.png);
  background-size: contain;
  background-repeat: no-repeat;
  outline: 0;
  background-position: 12px;
  background-size: 16px;
}
.textStyle {
            border: 1px solid #EDEADE;
            padding: 10px;
        }
        .headerLinkLeft {
            line-height: 44px;
            
            padding: 14px;
            color: black;
            text-decoration: none;
            margin: -2px;
        }
        .headerLinkLeft:hover{
            text-decoration: none;
            background-color: crimson;
            color: white;
        }
        .testColorCrimson{
            color: crimson;
            font-weight: bold;
        }
        container.th{
            color: #3c4b64;
            background-color: red;
        }
</style>
 @section('content')
 <div class="row">
    <div class="col-md-12" style="background-color:#D0D0D0;padding-left: 0px;padding-right: 6px;">
        <div class="float-left">
          <a href="javascript:void(0)" class="headerLinkLeft addBackGround1 removeBackGround" onclick="changeColor(1)">All Services</a>
          <a href="{{ route('admin.activeServices.account') }}" class="headerLinkLeft addBackGround2 removeBackGround" onclick="changeColor(2)">Internet</a>
          <a href="{{url('iptv')}}" class="headerLinkLeft addBackGround3 removeBackGround" onclick="changeColor(3)">IPTV</a>
          <a href="{{url('catv')}}" class="headerLinkLeft addBackGround4 removeBackGround" onclick="changeColor(4)">CATV</a>
          <a href="{{url('dvbc')}}" class="headerLinkLeft addBackGround5 removeBackGround" onclick="changeColor(5)">DVBC</a>
          <a href="{{url('volp')}}" class="headerLinkLeft addBackGround6 removeBackGround" onclick="changeColor(6)">VOIP</a>
          <a href="{{url('service')}}" class="headerLinkLeft addBackGround7 removeBackGround" onclick="changeColor(7)">Services</a>
          <a href="{{url('moblie')}}" class="headerLinkLeft addBackGround8 removeBackGround" onclick="changeColor(8)">Mobile</a>
      </div>
      <div class="float-right"> 
        <select class="btn btn-success align-middle getFormName" style="line-height: 14px;padding: 7px;margin-top: 4PX;" onchange="getFormName()">
            <option> + Add New Service </option>
            <option style="background-color: #D0D0D0;color: black;" value="Internet">Internet</a></option>
            <option style="background-color: #D0D0D0;color: black;">IPTV</option>
            <option style="background-color: #D0D0D0;color: black;">CATV</option>
            <option style="background-color: #D0D0D0;color: black;">DVBC</option>
            <option style="background-color: #D0D0D0;color: black;">VOIP</option>
            <option style="background-color: #D0D0D0;color: black;">Services</option>
            <option style="background-color: #D0D0D0;color: black;">Mobile</option>
        </select>

        <button class="btn btn-light align-middle" style="line-height: 14px;padding: 8px;margin-top: 4PX;">
            <svg class="c-sidebar-nav-icon" style="margin-left: -9rem;margin-right: -9rem;">
                <use xlink:href="{{ url('public/assets/vendors/@coreui/icons/svg/free.svg#cil-search') }}"></use>
            </svg>
            Search Deleted Services (0) 
        </button>



    </div>
</div>
</div>
<div class="row">
    <!--  <div class="alert alert-success mt-2" role="alert">
    Total Monthly Charges <span class="testColorCrimson">5 999 HUF Inc. Tax</span> (5 705 HUF exc. Tax)
</div> -->  
</div>
</div><br><br>


<div class="card11-header">
    <center>
<button type="button" class="btn btn-success">+Add A New Account</button>
<button type="button" class="btn btn-light">Print</button>
<button type="button" class="btn btn-light">CSV</button></center>
 

</div> <br><br>
 






        


    <div class="card">
        <div class="card-header"> Account Management
            <div class="card-header-actions">
                <a href="{{ route('admin.add.customer') }}" class="btn btn-square btn-block btn-info">+ Create Account</a>
            </div>
        </div>
        <div class="row">
            &nbsp;&nbsp;
            <div class="col-1">
                <span><strong>Invoiced By</strong></span><br>
                <select class="form-control selectpicker" id="select-country" data-live-search="true">
                    <option data-tokens="name">name</option>
                    <option data-tokens="family">family</option>
                </select>
            </div>
            <div class="col-1">
                <span><strong>Client Group</strong></span><br>
                <select class="form-control selectpicker" id="select-country" data-live-search="true"style="width: 50px;">
                    <option data-tokens="name">name</option>
                    <option data-tokens="family">family</option>
                </select>
            </div>
            <div class="col-2">
                <span><strong>Connection Status</strong></span><br>
                <select class="form-control selectpicker" id="select-country" data-live-search="true">
                    <option data-tokens="name">name</option>
                    <option data-tokens="family">family</option>
                </select>
            </div>
            <div class="col-2">
                <span><strong>Payment Method</strong></span><br>
                <select class="form-control selectpicker" id="select-country" data-live-search="true">
                    <option data-tokens="name">name</option>
                    <option data-tokens="family">family</option>
                </select>
            </div>
            <div class="col-1">
                <span><strong>Location</strong></span><br>
                <select class="form-control selectpicker" id="select-country" data-live-search="true">
                    <option data-tokens="name">name</option>
                    <option data-tokens="family">family</option>
                </select>
            </div>
            <div class="col-1">
                <span><strong>Detail</strong></span><br>
                <select class="form-control selectpicker" id="select-country" data-live-search="true">
                    <option data-tokens="name">name</option>
                    <option data-tokens="family">family</option>
                </select>
            </div>
            <div class="col-2">
                <span><strong>Text Filter:</strong></span><br>
                <input type="search" class="form-control" name="">
            </div>
            <div class="col-1">
                <br>
                <button class="btn btn-info">Search</button>
            </div>
            <div class="col">
                <br>
                <button class="btn btn-info">Reset</button>
            </div>
        </div>
        <div class="card-body">
            @if(Session::has('success_msg')) <div class="alert alert-success" role="alert">{{ Session::get('success_msg') }}</div> @endif
            @if(Session::has('error_msg')) <div class="alert alert-danger" role="alert">{{ Session::get('error_msg') }}</div> @endif
            <table class="table table-striped table-bordered datatable">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Account</th>
                        <th>Client</th>
                        <th>Address</th>
                        <th>City</th>
                        <th>Connection Status</th>
                        <th>Devices</th>
                        <th>Balance</th>
                        <th>Sched.Tasks</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                        <tr>
                            <td>1</td>
                            <td>Account</td>
                            <td>Client</td>
                            <td>Address</td>
                            <td>City</td>
                            <td>Connection Status</td>
                            <td>Devices</td>
                            <td>Balance</td>
                            <td>Sched.Tasks</td>
                            <td>
                                <a class="btn btn-info mr-1" href="{{ route('admin.information.account') }}">
                                    <svg class="c-icon">
                                        <use xlink:href="{{ url('public/assets/vendors/@coreui/icons/svg/free.svg#cil-router') }}"></use>
                                    </svg>
                                </a>
                                <a class="btn btn-info mr-1" href="">
                                    <svg class="c-icon">
                                        <use xlink:href="{{ url('public/assets/vendors/@coreui/icons/svg/free.svg#cil-map') }}"></use>
                                    </svg>
                                </a>
                                <a class="btn btn-info mr-1" href="" onclick="return confirm('Are you sure you want to delete this product?');">
                                    <svg class="c-icon">
                                        <use xlink:href="{{ url('public/assets/vendors/@coreui/icons/svg/free.svg#cil-pencil') }}"></use>
                                    </svg>
                                </a>
                            </td>
                        </tr>
                </tbody>
            </table>
        </div>
    </div>
@endsection

@section('js')
    {{-- js --}}
    <script src="{{ url('public/assets/vendors/jquery/js/jquery.slim.min.js') }}"></script>
    <script src="{{ url('public/assets/vendors/datatables.net/js/jquery.dataTables.js') }}"></script>
    <script src="{{ url('public/assets/vendors/datatables.net-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
    <script src="{{ url('public/assets/js/datatables.js') }}"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $('.selectpicker').selectpicker();
        });
    </script>
    {{--End js --}}
@endsection