@extends('layouts.master')
@extends('sidebar.dashboard')

@section('page-style')

<style>
    .table> :not(:first-child) {
        border-top: none;
    }

    .table {
        border: 1px solid #dbdade;
        border-collapse: collapse;
    }

    a:hover {
        color: #fff;
        text-decoration: none;
    }

    .viewstoreclass {
        background: linear-gradient(118deg, #7367f0, rgba(115, 103, 240, 0.7));
        box-shadow: 0px 0px 6px 1px rgba(115, 103, 240, 0.6);
        color: #fff;
        border-radius: 4px;
    }
</style>

@endsection




@section('content')

<section id="ajax-datatable">
    <div class="row">
        <div class="col-12">
            
            <div class="card">
                <div class="card-header">
                <span style="text-align: center;color: #3c4b67;font-size: 17px;font-weight: 700;padding:30px;">Manage Outlets</span>
                    <div class="col-xl-1 col-md-6 col-12">
                    </div>

                    <div class="col-xl-9 col-md-6 col-12">
                        <div class="card-statistics">

                            <div class="card-body statistics-body">
                                <div class="row">
                                    <div class="col-xl-3 col-sm-6 col-12 mb-2 mb-xl-0">
                                        <div class="d-flex flex-row">
                                            <div class="avatar bg-light-primary me-2" style="color: green !important;">
                                                <div class="avatar-content">
                                                    <i data-feather="wifi" class="avatar-icon"></i>
                                                </div>
                                            </div>
                                            <div class="my-auto">
                                                <h4 class="fw-bolder mb-0">{{$onlinecount}}</h4>
                                                <p class="card-text font-small-3 mb-0">Online</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xl-3 col-sm-6 col-12 mb-2 mb-xl-0">
                                        <div class="d-flex flex-row">
                                            <div class="avatar bg-light-danger me-2" style="color: red !important;">
                                                <div class="avatar-content">
                                                    <i data-feather="wifi-off" class="avatar-icon"></i>
                                                </div>
                                            </div>
                                            <div class="my-auto">
                                                <h4 class="fw-bolder mb-0">{{$offlinecount}}</h4>
                                                <p class="card-text font-small-3 mb-0">Offline</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xl-3 col-sm-6 col-12 mb-2 mb-sm-0">
                                        <div class="d-flex flex-row">
                                            <div class="avatar bg-light-info me-2">
                                                <div class="avatar-content">
                                                    <i data-feather="layout" class="avatar-icon"></i>
                                                </div>
                                            </div>
                                            <div class="my-auto">
                                                <h4 class="fw-bolder mb-0">{{$totaloutlets}}</h4>
                                                <p class="card-text font-small-3 mb-0">Total Outlets</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xl-3 col-sm-6 col-12">
                                        <div class="d-flex flex-row">
                                            <div class="avatar bg-light-success me-2">
                                                <div class="avatar-content">
                                                    <i data-feather="archive" class="avatar-icon"></i>
                                                </div>
                                            </div>
                                            <div class="my-auto">
                                                <h4 class="fw-bolder mb-0">{{$closedOutlets}}</h4>
                                                <p class="card-text font-small-3 mb-0">Closed Outlets</p>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-xl-1 col-md-6 col-12">
                    </div>

                </div>

                <div class="card-datatable" style="padding: 40px;margin-top: -60px;">

                    <div class="col-12 col-xl-12 col-sm-12 order-1 order-lg-2 mb-4 mb-lg-0">
                        <div class="card">
                            <div class="card-datatable table-responsive">
                                <div id="DataTables_Table_0_wrapper" class="dataTables_wrapper dt-bootstrap5 no-footer">


                                    @foreach($results as $location => $assets)

                                    @foreach($assets as $aname => $outlets)
                                    <table class="datatables-projects table dataTable no-footer dtr-column" id="DataTables_Table_0" aria-describedby="DataTables_Table_0_info" style="width: 922px;padding-bottom: 30px;">
                                        <thead>
                                            <tr>
                                                <td colspan="7" style="text-align: center;color: #3c4b67;font-size: 17px;font-weight: 700;padding:30px;">{{$aname}} - {{$location}}</td>
                                            </tr>
                                            <tr>

                                                <th>Outlet Name</th>
                                                <th>Store Status</th>
                                                <th>Last Sync</th>
                                                <th>Manager</th>
                                                <th>Mobile</th>
                                                <th>Actions</th>
                                                <th>Status</th>
                                            </tr>
                                        </thead>
                                        @foreach($outlets as $outlet)
                                        <tbody>

                                            <tr class="even">

                                                <td class="sorting_1">
                                                    <div class="d-flex justify-content-left align-items-center">
                                                        <div class="avatar-wrapper">
                                                            <div class="me-2" style="padding: 5px;background-color:#f3f2f7;border-radius:50%"><img style="width: 70px;border-radius: 50%;" src="{{$outlet->outlet_logo}}" alt="Avatar" class=""></div>
                                                        </div>
                                                        <div class="d-flex flex-column"><span class="text-truncate fw-semibold"><strong>{{$outlet->StoreName}}</strong></span><small class="text-truncate">PerSFT Installed On : </br> {{date('D, d M Y H:i:s', strtotime($outlet->ADSRInstalledDate))}}</small></div>
                                                    </div>
                                                </td>
                                                <td>