@extends('backend.partials.master')
@section('title')
    Dashboard
@endsection
@section('maincontent')
<!-- main content -->
<main class="content">
    <div class="container-fluid p-0">

        <div class="row mb-2 mb-xl-3">
            <div class="col-auto d-none d-sm-block">
                @if(auth()->user()->user_type == 1)
                    <h3><strong>Customer</strong> Dashboard</h3>
                @else
                    <h3><strong>Admin</strong> Dashboard</h3>
                @endif
            </div>

            <div class="col-md-3 ms-auto mt-n1">
                <select name="customer_id" class="form-control col-md-4 choices-single-customersession" onchange="setCustomerSession(this.value)">
                    <option value=""> Select Customer</option>
                    @php $customers = App\Models\User::where('user_type',1)->get(); @endphp
                    @foreach($customers as $cust)
                        <option value="{{ $cust->id }}" 
                            @if(session('customer_id') == $cust->id) selected @endif>
                            {{ $cust->name }}
                        </option>
                    @endforeach
                </select>
            </div>
        </div>
        <div class="row">
            <div class="col-xl-6 col-xxl-5 d-flex">
                <div class="w-100">
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="card">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col mt-0">
                                            <h5 class="card-title">Renewal Date</h5>
                                        </div>

                                        <div class="col-auto">
                                            <div class="stat text-primary">
                                                <i class="align-middle" data-feather="credit-card"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <h4 class="mt-1 mb-3">
                                        @if(auth()->user()->renewal_date && auth()->user()->user_type == 1 )
                                            {{ \Carbon\Carbon::parse(auth()->user()->renewal_date)->format('d-m-Y') }}
                                        @else
                                            -
                                        @endif
                                    </h4>
                                    {{-- <div class="mb-0">
                                        <span class="badge badge-primary-light">-3.65%</span>
                                        <span class="text-muted">Since last week</span>
                                    </div> --}}
                                </div>
                            </div>
                            <div class="card">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col mt-0">
                                            <h5 class="card-title">Inwards</h5>
                                        </div>

                                        <div class="col-auto">
                                            <div class="stat text-primary">
                                                <i class="align-middle" data-feather="arrow-down"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <h4 class="mt-1 mb-3">{{number_format($total_inwards)}}</h4>
                                    {{-- <div class="mb-0">
                                        <span class="badge badge-success-light">5.25%</span>
                                        <span class="text-muted">Since last week</span>
                                    </div> --}}
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="card">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col mt-0">
                                            <h5 class="card-title">Total Pending</h5>
                                        </div>

                                        <div class="col-auto">
                                            <div class="stat text-primary">
                                                <i class="align-middle" data-feather="dollar-sign"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <h4 class="mt-1 mb-3">Rs. {{number_format($totalPending,2)}}</h4>
                                    {{-- <div class="mb-0">
                                        <span class="badge badge-success-light">6.65%</span>
                                        <span class="text-muted">Since last week</span>
                                    </div> --}}
                                </div>
                            </div>
                            <div class="card">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col mt-0">
                                            <h5 class="card-title">Outwards</h5>
                                        </div>

                                        <div class="col-auto">
                                            <div class="stat text-primary">
                                                <i class="align-middle" data-feather="arrow-up"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <h4 class="mt-1 mb-3">{{number_format($total_Outwards)}}</h4>
                                    {{-- <div class="mb-0">
                                        <span class="badge badge-danger-light">-2.25%</span>
                                        <span class="text-muted">Since last week</span>
                                    </div> --}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @if($userType != 1)
            <div class="col-12 col-md-6 col-xxl-3 d-flex order-1 order-xxl-3">
                <div class="card flex-fill w-100">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Warehouse Usage</h5>
                    </div>
                    <div class="card-body d-flex">
                        <div class="align-self-center w-100">
                            <div class="py-3">
                                <div class="chart chart-xs">
                                    <canvas id="chartjs-dashboard-pie"></canvas>
                                </div>
                            </div>
                            <table class="table mb-0">
                                <tbody>
                                    <tr>
                                        <td><i class="fas fa-circle text-danger fa-fw"></i> Occupied</td>
                                        <td class="text-end"> {{ warehousegraph('total_sqfts') - warehousegraph('rem_sqft') }}</td>
                                    </tr>
                                    <tr>
                                        <td><i class="fas fa-circle text-dark fa-fw"></i> Remaining</td>
                                        <td class="text-end"> {{ warehousegraph('rem_sqft') }}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            {{-- Customers --}}
            <div class="col-12 col-lg-4 col-xxl-4 d-flex">
                <div class="card flex-fill">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Top Customers</h5>
                    </div>
                    <table class="table my-0">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th class="d-none d-xxl-table-cell">Max sqft</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($TopCustomers as $cust)
                                <tr>
                                    <td>
                                        <div class="d-flex">
                                            <div class="flex-grow-1">
                                                {{$cust->customername->name}}
                                            </div>
                                        </div>
                                    </td>
                                    <td class="d-none d-xxl-table-cell">
                                        {{$cust->max_sqft}}
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        @else
             <div class="col-12 col-lg-3 col-xxl-3 d-flex">
                <div class="card flex-fill">
                    <div class="card-header">
                        <div class="card-actions float-end">
                            <div class="dropdown position-relative">
                                <a href="#" data-bs-toggle="dropdown" data-bs-display="static">
                                    <i class="align-middle" data-feather="more-horizontal"></i>
                                </a>

                                <div class="dropdown-menu dropdown-menu-end">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                </div>
                            </div>
                        </div>
                        <h5 class="card-title mb-0">Calendar</h5>
                    </div>
                    <div class="card-body d-flex">
                        <div class="align-self-center w-100">
                            <div class="chart">
                                <div id="datetimepicker-dashboard"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-lg-3 col-xxl-3 d-flex">
                <div class="card flex-fill w-100">
                    <div class="card-header">
                        <div class="card-actions float-end">
                            <div class="dropdown position-relative">
                                <a href="#" data-bs-toggle="dropdown" data-bs-display="static">
                                    <i class="align-middle" data-feather="more-horizontal"></i>
                                </a>

                                <div class="dropdown-menu dropdown-menu-end">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                </div>
                            </div>
                        </div>
                        <h5 class="card-title mb-0">Real-Time</h5>
                    </div>
                    <div class="card-body px-4">
                        <div id="world_map" style="height:350px;"></div>
                    </div>
                </div>
            </div>
        @endif

        </div>
        @if($userType != 1)
        <div class="row">
            <div class="col-12 col-md-12 col-xxl-9 d-flex order-3 order-xxl-2">
                <div class="card flex-fill w-100">
                    <div class="card-header">
                        <div class="card-actions float-end">
                            <div class="dropdown position-relative">
                                <a href="#" data-bs-toggle="dropdown" data-bs-display="static">
                                    <i class="align-middle" data-feather="more-horizontal"></i>
                                </a>

                                <div class="dropdown-menu dropdown-menu-end">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                </div>
                            </div>
                        </div>
                        <h5 class="card-title mb-0">Real-Time</h5>
                    </div>
                    <div class="card-body px-4">
                        <div id="world_map" style="height:350px;"></div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-md-6 col-xxl-3 d-flex order-2 order-xxl-1">
                <div class="card flex-fill">
                    <div class="card-header">
                        <div class="card-actions float-end">
                            <div class="dropdown position-relative">
                                <a href="#" data-bs-toggle="dropdown" data-bs-display="static">
                                    <i class="align-middle" data-feather="more-horizontal"></i>
                                </a>

                                <div class="dropdown-menu dropdown-menu-end">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                </div>
                            </div>
                        </div>
                        <h5 class="card-title mb-0">Calendar</h5>
                    </div>
                    <div class="card-body d-flex">
                        <div class="align-self-center w-100">
                            <div class="chart">
                                <div id="datetimepicker-dashboard"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endif

        <div class="row">
            
        </div>

    </div>
</main>
@endsection
{{-- warehouse Graph --}}
<script>
document.addEventListener("DOMContentLoaded", function() {
    new Choices(document.querySelector(".choices-single-customersession"), { shouldSort: false });
    // Pie chart
    new Chart(document.getElementById("chartjs-dashboard-pie"), {
        type: "pie",
        data: {
            labels: ["Occupied Space", "Free Space"],
            datasets: [{
                data: [
                    {{ warehousegraph('total_sqfts') - warehousegraph('rem_sqft') }},
                    {{ warehousegraph('rem_sqft') }}
                ],
                backgroundColor: [
                    window.theme.danger,
                    "#E8EAED"
                ],
                borderWidth: 3,
                borderColor: window.theme.white
            }]
        },
        options: {
            responsive: !window.MSInputMethodContext,
            maintainAspectRatio: false,
            legend: {
                display: false
            },
            cutoutPercentage: 70
        }
    });
});
</script>
<script>
    function setCustomerSession(customer_id) {
        $.ajax({
            url: "{{ route('set.customer.session') }}",
            method: "POST",
            data: {
                _token: "{{ csrf_token() }}",
                customer_id: customer_id
            },
            success: function (res) {
                location.reload(); // refresh to apply new filter
            }
        });
}
</script>