@extends('template.app')

@section('meta') @endsection
@section('title') Mis Report @endsection

@section('styles')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/jquery.dataTables.min.css">
<style>
    table {
        font-family: Arial, sans-serif;
        border-collapse: collapse;
        width: 100%;
    }
    
    thead th,
    tfoot th {
        color: white; /* Makes heading and footer text white */
    }


    td, th {
        border: 1px solid #dddddd;
        text-align: center;
        padding: 8px;
        color: #000; /* Ensures all table text is black */
    }

    .table-responsive {
        overflow-x: auto;
        max-width: 100%;
    }

    .card-body {
        overflow-x: auto;
        max-width: 100%;
        margin-right: 40px;
        margin-left: 40px;
    }

    .card-header {
        margin-right: 40px;
        margin-left: 40px;
    }

    .card.mt-4, .card {
        margin: 20px 40px;
    }

    .dataTables_wrapper {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
    }
</style>
@endsection

@section('content')
<div class="card mt-4">
    <div class="card-header text-center">
        <h4>Mis Report</h4>
    </div>
    <div class="card-body table-responsive">
        <table style="font-size: 13px;">
            <thead style="background: #2c2f48; color: white;">
                <tr style="font-weight: bold; background: #2c2f48; color: white;">
                    <th>Model</th>
                    <th>Rajkot</th>
                    <th>Rajkot_1s</th>
                    <th>Jamnagar</th>
                    <th>Morbi</th>
                    <th>Junagdh</th>
                    <th>Total</th>
                    <th>Allocated</th>
                    <th>Free Stock</th>
                    <th>PDI Hold</th>
                    <th>Total</th>
                </tr>
            </thead>
            <tbody>
                @php
                    $models = [
                        ['Sonet', 60, 60, 60, 60, 60, 300],
                        ['Petrol', 50, 50, 50, 50, 50, 250],
                        ['Diesel', 10, 10, 10, 10, 10, 50],

                        ['Syros', 60, 60, 60, 60, 60, 300],
                        ['Petrol', 50, 50, 50, 50, 50, 250],
                        ['Diesel', 10, 10, 10, 10, 10, 50],

                        ['Seltos', 60, 60, 60, 60, 60, 300],
                        ['Petrol', 50, 50, 50, 50, 50, 250],
                        ['Diesel', 10, 10, 10, 10, 10, 50],

                        ['Carens', 60, 60, 60, 60, 60, 300],
                        ['Petrol', 50, 50, 50, 50, 50, 250],
                        ['Diesel', 10, 10, 10, 10, 10, 50],

                        ['Clavis', 60, 60, 60, 60, 60, 300],
                        ['Petrol', 50, 50, 50, 50, 50, 250],
                        ['Diesel', 10, 10, 10, 10, 10, 50],

                        ['Carnival', 1, 1, 1, 1, 1, 5],
                        ['Diesel', 1, 1, 1, 1, 1, 5],

                        ['Ev6', 1, 1, 0, 1, 1, 4],
                        ['Electric', 1, 2, 0, 1, 0, 4],
                    ];

                    $alloc = [
                        300 => [210, 89, 1, 300],
                        250 => [200, 49, 1, 250],
                        50 => [10, 40, 0, 50],
                        5 => [4, 1, 0, 5],
                        4 => [4, 0, 0, 4],
                    ];
                @endphp

                @foreach ($models as $row)
                    @php
                        $bgColor = $loop->even ? '#f1f1f1' : '#ffffff';
                    @endphp
                    <tr style="background: {{ $bgColor }};">
                        @for ($i = 0; $i < 6; $i++)
                            <td>{{ $row[$i] ?? '' }}</td>
                        @endfor
                        <td>{{ $row[6] ?? '' }}</td>

                        @php
                            $key = $row[6] ?? 0;
                            $a = $alloc[$key] ?? ['', '', '', ''];
                        @endphp
                        @foreach ($a as $value)
                            <td>{{ $value }}</td>
                        @endforeach
                    </tr>
                @endforeach

                <tr style="font-weight: bold; background: #2c2f48; color: white;">
                    <th>Model</th>
                    <th>Rajkot</th>
                    <th>Rajkot_1s</th>
                    <th>Jamnagar</th>
                    <th>Morbi</th>
                    <th>Junagdh</th>
                    <th>Total</th>
                    <th>Allocated</th>
                    <th>Free Stock</th>
                    <th>PDI Hold</th>
                    <th>Total</th>
                </tr>
                <tr style="font-weight: bold; background:#2c2f48; color: white;">
                    <td>Total Stock</td>
                    <td>302</td>
                    <td>303</td>
                    <td>303</td>
                    <td>301</td>
                    <td>301</td>
                    <td style="color: red;">1509</td>
                    <td>1058</td>
                    <td>446</td>
                    <td>5</td>
                    <td style="color: red;">1509</td>
                </tr>

            </tbody>
        </table>
    </div>
</div>
@endsection

@section('scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
@endsection