@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', 'Customer 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">Customer Management</li>
    </ol>
@endsection
@section('content')
    <div class="card">
        <div class="card-header"> Customer Management
            <div class="card-header-actions">
                <a href="{{ route('admin.add.customer') }}" class="btn btn-square btn-block btn-info">+ Create Customer</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