@extends('tenants.layouts.master')
@section('title')
@lang('Companies')
@endsection
@section('css')
<!-- DataTable 1.11.5 -->
<link href="{{ url('css/DataTables_cdn/datatables.bootstrap5.min.css') }}" rel="stylesheet" />
<link href="{{ url('css/DataTables_cdn/datatables.responsive.min.css') }}" rel="stylesheet" />
<link href="{{ url('css/DataTables_cdn/datatables.buttons.min.css') }}" rel="stylesheet" />
<!-- select2@4.1.0 -->
<link href="{{ url('css/Select2_cdn/select2.min.css') }}" rel="stylesheet" />
<!-- font-awesome-6.7.2 -->
<link href="{{ url('css/font-awesome_cdn/font-awesome.min.css') }}" rel="stylesheet" />
<!-- SweetAlert2 CSS -->
<link href="{{ url('css/sweetalert-2@11.0.20/sweetalert2.min.css') }}" rel="stylesheet">
<link href="{{ url('css/equipment/equipment.index.css') }}" rel="stylesheet" />

@endsection
@section('content')
@component('tenants.components.breadcrumb')
@slot('li_1')
Company
@endslot
@slot('title')
Company
@endslot
@endcomponent

<div class="row">
    <div class="col-12 p-0">
        <div class="card">
            <div class="px-3 pt-3 flex-wrap">
                <div class="row">
                    <div class="col-auto my-auto d-flex gap-2 mb-3">
                        <div class="ctl-pag-tit-con mb-0">
                            Company 
                        </div>

                    </div>
                    <div class="ms-lg-auto mb-3 w-225 filter_list">
                        <div class="ctl-input-field">
                            <span class="icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15"
                                    fill="none">
                                    <g clip-path="url(#clip0_224_12492)">
                                        <path
                                            d="M6.60568 0C2.96341 0 0 2.96341 0 6.60568C0 10.2482 2.96341 13.2114 6.60568 13.2114C10.2482 13.2114 13.2114 10.2482 13.2114 6.60568C13.2114 2.96341 10.2482 0 6.60568 0ZM6.60568 11.9919C3.63577 11.9919 1.21951 9.57562 1.21951 6.60571C1.21951 3.6358 3.63577 1.21951 6.60568 1.21951C9.57559 1.21951 11.9919 3.63577 11.9919 6.60568C11.9919 9.57559 9.57559 11.9919 6.60568 11.9919Z"
                                            fill="#868C98"></path>
                                        <path
                                            d="M14.8215 13.9588L11.3255 10.4628C11.0873 10.2246 10.7015 10.2246 10.4633 10.4628C10.2251 10.7008 10.2251 11.087 10.4633 11.325L13.9593 14.821C14.0158 14.8777 14.083 14.9227 14.157 14.9533C14.231 14.984 14.3103 14.9997 14.3904 14.9996C14.4705 14.9997 14.5498 14.984 14.6237 14.9533C14.6977 14.9227 14.7649 14.8777 14.8215 14.821C15.0597 14.583 15.0597 14.1968 14.8215 13.9588Z"
                                            fill="#868C98"></path>
                                    </g>
                                    <defs>
                                        <clipPath id="clip0_224_12492">
                                            <rect width="15" height="15" fill="white"></rect>
                                        </clipPath>
                                    </defs>
                                </svg>
                            </span>
                            <input autocomplete="off" type="text" name="search" class="form-control" id="search-input"
                                placeholder="Search" aria-label="search" aria-describedby="addon-wrapping">
                        </div>
                    </div>
                     
                    <div class="col-auto">
                       
                    </div>
                </div>
            </div>
            <div class="card-body common_datatable_theme table_search_custom common_search_emp scroll_box">
                <table id="company-list" class=" table theme_table dt-responsive nowrap align-middle  "
                    style="width:100%">
                    <thead>
                        <tr>
                           
                          
                            <th data-ordering="false">First Name</th>
                            <th data-ordering="false">Last Name</th>
                            <th data-ordering="false">Email</th>
                            <th data-ordering="false">Company Name</th>
                            <th data-ordering="false">Domain Name</th>
                            <th>Country</th>
                            <th data-ordering="false">Phone Number</th>
                        </tr>
                    </thead>
                    <tbody>
                    @foreach ($tenants as $company)
                        <tr class="ctl-row-information">
                            
                            
                            <td>{{ $company['f_name'] }}</td>
                            <td>{{ $company['l_name'] }}</td>
                            <td>{{ $company['email'] }}</td>
                            <td>{{ $company['name'] }}</td>
                            <td>
                                {{-- <div class="url-text">
                                    http://{{ $company['domains'][0]['domain'] }} 
                                </div> --}}
                            </td>
                            <td>{{ $countries[$company->country]->name ?? 'Unknown' }}</td>
                            <td>{{ $company['phone_number'] }}</td>
                        </tr>
                        @endforeach

                        
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <!--end col-->
</div>
<!--end row-->
@endsection
@section('script')
<script src="{{ url('js/jquery-3.6.0_cdn/jquery.min.js') }}"></script>
<script src="{{ url('js/select2@4.1.0/select2.min.js') }}"></script>
<script src="http://sat.localhost/ets-saas/public/js/app.js"></script>
<script src="{{ url('js/datatable-1.11.5_cdn/datatables.jquery.min.js') }}"></script>
<script src="{{ url('js/datatable-1.11.5_cdn/datatables.bootstrap5.min.js') }}"></script>
<script src="{{ url('js/datatable-1.11.5_cdn/datatables.responsive.min.js') }}"></script>
<script src="{{ url('js/jquery-validate-1.19.3/jquery-validate.min.js') }}"></script>

<script>
$(document).ready(function() {
    // Initialize Select2
    $('.select-multi').select2();
    $(".select2").select2();
    // Initialize DataTable
    var table = $('#company-list').DataTable({
        paging: true,
        searching: true,
        pagingType: "simple_numbers",
        scrollCollapse: true,
        info: true,
        responsive: false,
        scrollX: true,
        ordering: false,
        language: {
            paginate: {
                previous: '<span class="fa fa-chevron-left"></span>',
                next: '<span class="fa fa-chevron-right"></span>'
            }
        }
    });

    $('.dataTables_filter').hide();
});
$('#search-input').on('keyup', function () { 
    
    $('#company-list').DataTable().search(this.value).draw();
});
</script>
@endsection