@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-12 d-none d-sm-block">
                <h4><strong>Totals Solution Logistic</strong> and Warehousing Services Private Limited.</h4>
            </div>
        </div>
        <div class="row mb-2 mb-xl-3">
            <div class="col-4 d-none d-sm-block">
                <h3><strong>Hello, {{ Auth::user()->name }}</strong></h3>
                <h5>All the data shown below is respective to the selected customer.</h5>
            </div>

            <div class="col-8 ms-auto  mt-n1">
                <div class="row">
                    <div class="mb-3 col-md-4">
                        <label class="form-label" for="inputState">Customer : <small class="text-danger">*</small></label>
                        <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 class="mb-3 col-md-4">
                        <label class="form-label" for="inputState">From Date :</label>
                        <input type="date" class="form-control">
                    </div>
                    <div class="mb-3 col-md-4">
                        <label class="form-label" for="inputState">To Date : </label>
                        <input type="date" class="form-control">
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <!-- Left: Order Status -->
            <div class="col-md-8">
                <div class="card">
                    <div class="card-body">
                        <div class="col mt-0">
                            <h5 class="card-title">Order Status <img src="{{ asset('backend/img/icons/details.png') }}" alt="Details" class="img-fluid"></h5>
                        </div>
                        <div class="row text-center g-2">
                            <!-- Draft -->
                            <div class="col-md-2 col-sm-6">
                                <div class="card bg-light mb-0 h-100">
                                    <div class="card-body py-3 px-2">
                                        <div class="d-flex flex-column align-items-center">
                                            <i data-feather="edit-3" class="text-warning mb-1" style="width:20px;height:20px;"></i>
                                            <h6 class="mb-1">Draft</h6>
                                            <h4 class="mb-0">{{ $draftCount ?? 0 }}</h4>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- In Progress -->
                            <div class="col-md-2 col-sm-6">
                                <div class="card bg-light mb-0 h-100">
                                    <div class="card-body py-3 px-2">
                                        <div class="d-flex flex-column align-items-center">
                                            <i data-feather="loader" class="text-primary mb-1" style="width:20px;height:20px;"></i>
                                            <h6 class="mb-1">InProgress</h6>
                                            <h4 class="mb-0">{{ $inprogressCount ?? 0 }}</h4>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- Delivered -->
                            <div class="col-md-2 col-sm-6">
                                <div class="card bg-light mb-0 h-100">
                                    <div class="card-body py-3 px-2">
                                        <div class="d-flex flex-column align-items-center">
                                            <i data-feather="check-circle" class="text-success mb-1" style="width:20px;height:20px;"></i>
                                            <h6 class="mb-1">Delivered</h6>
                                            <h4 class="mb-0">{{ $deliveredCount ?? 0 }}</h4>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- Complete -->
                            <div class="col-md-2 col-sm-6">
                                <div class="card bg-light mb-0 h-100">
                                    <div class="card-body py-3 px-2">
                                        <div class="d-flex flex-column align-items-center">
                                            <i data-feather="check-square" class="text-info mb-1" style="width:20px;height:20px;"></i>
                                            <h6 class="mb-1">Complete</h6>
                                            <h4 class="mb-0">{{ $completeCount ?? 0 }}</h4>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- Cancelled -->
                            <div class="col-md-2 col-sm-6">
                                <div class="card bg-light mb-0 h-100">
                                    <div class="card-body py-3 px-2">
                                        <div class="d-flex flex-column align-items-center">
                                            <i data-feather="x-circle" class="text-danger mb-1" style="width:20px;height:20px;"></i>
                                            <h6 class="mb-1">Cancelled</h6>
                                            <h4 class="mb-0">{{ $cancelledCount ?? 0 }}</h4>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div> <!-- row -->
                    </div>
                </div>
            </div>

            <!-- Right: Stock Status -->
            <div class="col-md-4">
                <div class="card">
                    <div class="card-body">
                        <div class="col mt-0">
                            <h5 class="card-title">Stock Status <img src="{{ asset('backend/img/icons/details.png') }}" alt="Details" class="img-fluid"></h5>
                        </div>
                        <div class="row text-center g-2">
                            <!-- Low Stock -->
                            <div class="col-md-6 col-sm-6">
                                <div class="card bg-light mb-0 h-100">
                                    <div class="card-body py-3 px-2">
                                        <div class="d-flex flex-column align-items-center">
                                            <i data-feather="package" class="text-primary mb-1" style="width:20px;height:20px;"></i>
                                            <h6 class="mb-1">Low Stock</h6>
                                            <h4 class="mb-0">{{ $lowStockCount ?? 0 }}</h4>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- Expired Stock -->
                            <div class="col-md-6 col-sm-6">
                                <div class="card bg-light mb-0 h-100">
                                    <div class="card-body py-3 px-2">
                                        <div class="d-flex flex-column align-items-center">
                                            <i data-feather="alert-triangle" class="text-danger mb-1" style="width:20px;height:20px;"></i>
                                            <h6 class="mb-1">Expired</h6>
                                            <h4 class="mb-0">{{ $expiredStockCount ?? 0 }}</h4>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div> <!-- row -->
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <!-- GRN Status -->
            <div class="col-12 col-lg-5 d-flex">
                <div class="card flex-fill w-100">
                    <div class="card-header">
                        <h5 class="card-title mb-0">GRN Status <img src="{{ asset('backend/img/icons/details.png') }}" alt="Details" class="img-fluid">
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row align-items-center">
                            <!-- Chart -->
                            <div class="col-md-6">
                                <div class="chart chart-xs">
                                    <canvas id="chartjs-dashboard-piee"></canvas>
                                </div>
                            </div>
                            <!-- Table -->
                            <div class="col-md-6">
                                <table class="table mb-0">
                                    <tbody>
                                        <tr>
                                            <td><i class="fas fa-circle text-primary fa-fw"></i> Draft</td>
                                            <td class="text-end">1</td>
                                        </tr>
                                        <tr>
                                            <td><i class="fas fa-circle text-success fa-fw"></i> Completed</td>
                                            <td class="text-end">6</td>
                                        </tr>
                                        <tr>
                                            <td><i class="fas fa-circle text-secondary fa-fw"></i> Generated</td>
                                            <td class="text-end">8</td>
                                        </tr>
                                        <tr>
                                            <td><i class="fas fa-circle text-danger fa-fw"></i> Cancelled</td>
                                            <td class="text-end">1</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Warehouse Occupancy By Pallet -->
            <div class="col-12 col-lg-7 d-flex">
                <div class="card flex-fill w-100">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Warehouse Occupancy By Pallet 
                            <img src="{{ asset('backend/img/icons/details.png') }}" alt="Details" class="img-fluid">
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row align-items-center">
                            <!-- Chart -->
                            <div class="col-md-6">
                                <div class="chart chart-xs">
                                    <canvas id="chartjs-dashboard-pie"></canvas>
                                </div>
                            </div>
                            <!-- Table -->
                            <div class="col-md-6">
                                <table class="table mb-0">
                                    <tbody>
                                        <tr>
                                            <td><i class="fas fa-circle text-primary fa-fw"></i> Available Storage L.</td>
                                            <td class="text-end">1%</td>
                                        </tr>
                                        <tr>
                                            <td><i class="fas fa-circle text-warning fa-fw"></i> Occupied Storage L.</td>
                                            <td class="text-end">6%</td>
                                        </tr>
                                        <tr>
                                            <td><i class="fas fa-circle text-danger fa-fw"></i> Total Storage L.(No.)</td>
                                            <td class="text-end">8</td>
                                        </tr>
                                        <tr>
                                            <td><i class="fas fa-circle text-secondary fa-fw"></i> Loaded Pallets (No.)</td>
                                            <td class="text-end">6</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {{-- line chart --}}
        <div class="col-lg-12 col-md-12 col-xl-6 col-xxl-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">Top Selling Products | <i class="align-middle" data-feather="calendar"></i> To </h5>
                </div>
                <div class="card-body">
                    <div class="chart w-100">
                        <div id="apexcharts-column"></div>
                    </div>
                </div>
            </div>
        </div>
        {{-- Product Overview --}}
        <div class="col-lg-12 col-md-12 col-xl-6 col-xxl-12">
            <div class="card">
                <div class="card-header">
                    <ul class="nav nav-pills card-header-pills pull-right" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" data-bs-toggle="tab" href="#tab-4">Product Inventory</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" href="#tab-5">Product Inward/Outward</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" href="#tab-6">Damaged Product</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" href="#tab-7">Ageing Report</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" href="#tab-8">Product Shelf Life</a>
                        </li>
                    </ul>
                </div>
                <div class="card-body">
                    <div class="tab-content">
                        <div class="tab-pane fade show active" id="tab-4" role="tabpanel">
                            <h5 class="card-title">Product Inventory</h5>
                        </div>
                        <div class="tab-pane fade text-center" id="tab-5" role="tabpanel">
                            <h5 class="card-title">Product Inward/Outward</h5>
                        </div>
                        <div class="tab-pane fade" id="tab-6" role="tabpanel">
                            <h5 class="card-title">Damaged Product</h5>
                        </div>
                        <div class="tab-pane fade" id="tab-7" role="tabpanel">
                            <h5 class="card-title">Ageing Report</h5>
                        </div>
                        <div class="tab-pane fade" id="tab-8" role="tabpanel">
                            <h5 class="card-title">Product Shelf Life</h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>



    </div>
</main>
@endsection
{{-- warehouse Graph --}}
<script>
    document.addEventListener("DOMContentLoaded", function() {
        // Pie chart
        new Chart(document.getElementById("chartjs-dashboard-pie"), {
            type: "pie",
            data: {
                labels: ["Available Storage L.(%)", "Occupied Storage L.(%)", "Total Storage L.(No.)", "Loaded Pallets (No.)"],
                datasets: [{
                    data: [1, 6, 8, 6],
                    backgroundColor: [
                        window.theme.primary,
                        window.theme.warning,
                        window.theme.danger,
                        "#E8EAED"
                    ],
                    borderWidth: 5,
                    borderColor: window.theme.white
                }]
            },
            options: {
                responsive: !window.MSInputMethodContext,
                maintainAspectRatio: false,
                legend: {
                    display: false
                },
                cutoutPercentage: 70
            }
        });

        new Chart(document.getElementById("chartjs-dashboard-piee"), {
            type: "pie",
            data: {
                labels: ["Draft", "Completed", "Generated", "Cancelled"],
                datasets: [{
                    data: [1, 6, 8, 1],
                    backgroundColor: [
                        window.theme.primary,
                        window.theme.success,
                        "#E8EAED",
                        window.theme.danger,

                    ],
                    borderWidth: 5,
                    borderColor: window.theme.white
                }]
            },
            options: {
                responsive: !window.MSInputMethodContext,
                maintainAspectRatio: false,
                legend: {
                    display: false
                },
                cutoutPercentage: 70
            }
        });
    });
</script>
{{-- bar chart --}}
<script>
		document.addEventListener("DOMContentLoaded", function() {
			// Column chart
			var options = {
				chart: {
					height: 350,
					type: "bar",
				},
				plotOptions: {
					bar: {
						horizontal: false,
						endingShape: "rounded",
						columnWidth: "55%",
					},
				},
				dataLabels: {
					enabled: false
				},
				stroke: {
					show: true,
					width: 2,
					colors: ["transparent"]
				},
				series: [{
					name: "Stock",
					data: [44, 55, 57, 56, 61, 58]
				}],
				xaxis: {
					categories: ["Orange", "Mnagos", "coconut", "Virtus", "Potato", "Peanut"],
                    title: {
						text: "Product Name"
					}
				},
				yaxis: {
					title: {
						text: "Stock Count"
					}
				},
				fill: {
					opacity: 1
				},
				tooltip: {
					y: {
						formatter: function(val) {
							return "" + val + " "
						}
					}
				}
			}
			var chart = new ApexCharts(
				document.querySelector("#apexcharts-column"),
				options
			);
			chart.render();
		});
	</script>