@extends('template.app')

@section('meta')
@endsection

@section('title')
    Documents
@endsection

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
@section('styles')
<style>
     body {
            background-color: #f8f9fa;
            font-family: Arial, sans-serif;
            height: 250%;
        }

        .card-header {
            font-weight: bold;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            table-layout: fixed;
        }

        th, td {
            padding: 10px;
            text-align: center;
            font-size: 14px;
            color: white;
            word-wrap: break-word;
        }

        thead {
            background-color: #2e367c;
        }

        .model-header {
            background-color: #6c757d;
            /*color: white;*/
            font-weight: bold;
        }
        
        .model-header.black-bg {
            background-color: #43568d;
            /*color: white;*/
        }
        
        .booking-header {
            background-color: #6c757d;
            /*color: white;*/
            font-weight: bold;
        }
        
        .booking-header.black-bg {
            background-color: #43568d;
            color: white !important;
        }

        .fuel-row {
            background-color: #6c757d;
            color: white !important;
        }
        
        .custom-total-color {
            background-color:#463862!important;
            color: white !important;
        }
        
        .custom-total-data-color{
            background-color:#5c5283!important;
            color: white !important;
        }
        
        .custom-total-data-color>.black_anchor_tag, .custom-total-fuel-color>.white_anchor_tag, .custom-total-color>.black_anchor_tag{
            color: white !important;
        }
        .custom-total-fuel-color{
            background-color:#9186bb!important;
            color: white !important;
        }

        .table-footer {
            background-color: #2e367c;
            font-weight: bold;
        }
        
        tbody tr:not(.model-header):not(.booking-header):not(.fuel-row):not(.table-footer) td {
            background-color: #ebebeb;
            color: black;
        }
        
        .table-responsive {
            overflow-x: auto;
        }
        
        .black_anchor_tag{
            /*color:white!important;*/
        }
        
        .white_anchor_tag{
            color:black!important;
        }
        
        .text-right {
            text-align: right;
        }
        
        .modal-xl {
            max-width: 80%!important;
        }
        
        .custom_height {
            height: 120px!important;
        }
        
</style>
@endsection

@section('content')

<div class="page-breadcrumb">
    <div class="row">
        <h4 class="page-title text-truncate text-dark font-weight-medium mb-1">Document Dashboard</h4>
        <div class="col-7 align-self-center">
            <div class="d-flex align-items-center">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb m-0 p-0">
                        <li class="breadcrumb-item"><a href="{{ route('dashboard') }}" class="text-muted">Dashboard</a></li>
                        <li class="breadcrumb-item text-muted active" aria-current="page">Documents</li>
                    </ol>
                </nav>
            </div>
        </div>
        <div class="col-sm-8"></div>
    </div>
</div>


<div class="container-fluid">
    <div class="row">
        @if(auth()->user()->can('invoice-view'))
            <div class="col-xl-2 col-md-3 mb-2 custom_height">
                <div class="card border-left-success shadow h-100 py-2">
                    <div class="card-body">
                        <a href="{{route('invoice_view')}}">
                            <div class="row no-gutters align-items-center">
                                <div class="col mr-2">
                                    <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                        Document View</div>
                                    <div class="h6 mb-0 font-weight-bold">Invoice</div>
                                </div>
                                <div class="col-auto">
                                    <i class="fas fa-bookmark fa-2x text-gray-300"></i>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        @endif 
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
  


<script>

var xValues = ["Rajkot", "Junagadh", "jamnagar", "Morbi"];
var yValues = [5, 4, 3, 2, 1];
var barColors = ["red", "green","blue","orange","brown"];

new Chart("myChart", {
  type: "bar",
  data: {
    labels: xValues,
    datasets: [{
      backgroundColor: barColors,
      data: yValues
    }]
  },
  options: {
    legend: {display: false},
    title: {
      display: true,
      text: "Bar chart"
    }
  }
});
</script>
@endsection

@section('scripts')

<!--<script src="{{ asset('assets/vendor/chart.js/Chart.min.js') }}"></script>-->
<!--<script src="{{ asset('assets/js/demo/chart-area-demo.js') }}"></script>-->
<!--<script src="{{ asset('assets/js/demo/chart-pie-demo.js') }}"></script>-->
<!--<script src="https://cdn.tailwindcss.com"></script>-->

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // function showCarDetails(inventoryIds, transitIds = []) { 
        //     // if (!inventoryIds || inventoryIds.length === 0) return;
        //     if ((!inventoryIds || inventoryIds.length === 0) && (!transitIds || transitIds.length === 0)) return;
            
        //     $('#exportInventoryIds').val(JSON.stringify(inventoryIds));
        
        //     $.ajax({
        //         url: '{{ route("Cardetails") }}',
        //         type: 'POST',
        //         data: {
        //             _token: '{{ csrf_token() }}',
        //             ids: inventoryIds,
        //             transit_ids: transitIds
        //         },
        //         success: function(response) {
        //             $('#carDetailsContent').html(response);
        //             $('#carDetailsModal').modal('show');
        //         },
        //         error: function() {
        //             alert('Failed to fetch car details.');
        //         }
        //     });
        // }
        
        /*function showCarDetails(inventoryIds = [], transitIds = []) {
            if ((!inventoryIds || inventoryIds.length === 0) && (!transitIds || transitIds.length === 0)) {
                return;
            }
        
            $('#exportInventoryIds').val(JSON.stringify(inventoryIds));
            $('#exportTransitInventoryIds').val(JSON.stringify(transitIds));
        
            $.ajax({
                url: '{{ route("Cardetails") }}',
                type: 'POST',
                contentType: 'application/json', // Important: sending JSON
                data: JSON.stringify({
                    _token: '{{ csrf_token() }}',
                    ids: inventoryIds,
                    transit_ids: transitIds
                }),
                success: function(response) {
                    $('#carDetailsContent').html(response);
                    $('#carDetailsModal').modal('show');
                },
                error: function() {
                    alert('Failed to fetch car details.');
                }
            });
        }*/
        
        function showCarDetails(inventoryIds = [], transitIds = []) {
            if ((!inventoryIds || inventoryIds.length === 0) && (!transitIds || transitIds.length === 0)) {
                return;
            }
        
            // Set both inventory and transit IDs for Excel Export
            $('#exportInventoryIds').val(JSON.stringify(inventoryIds));
            $('#exportTransitInventoryIds').val(JSON.stringify(transitIds));
        
            // Send both arrays separately in JSON, as your controller expects
            $.ajax({
                url: '{{ route("Cardetails") }}',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({
                    _token: '{{ csrf_token() }}',
                    ids: inventoryIds,        // total IDs
                    transit_ids: transitIds   // transit IDs
                }),
                success: function(response) {
                    $('#carDetailsContent').html(response);
                    $('#carDetailsModal').modal('show');
                },
                error: function() {
                    alert('Failed to fetch car details.');
                }
            });
        }

        
        $(document).on('click', '.open-booking-modal', function (e) {
            e.preventDefault();
    
            const obfIds = $(this).data('obf-ids');
            
            $('#exportBookingIds').val(JSON.stringify(obfIds));
    
            $.ajax({
                url: '{{ route("Bookingdetails") }}',
                method: 'GET',
                data: {
                    obf_ids: obfIds
                },
                success: function (response) {
                    $('#bookingDetailsContent').html(response);
                    $('#bookingDetailsModal').modal('show');
                },
                error: function () {
                    alert('Something went wrong while loading the data.');
                }
            });
        });
        
        document.addEventListener("DOMContentLoaded", function () {
            // ------------------- MIS REPORT TABLE -------------------
            const misRows = document.querySelectorAll(".mis-report-table tbody tr");

            // Hide only fuel-type rows (not model headers or footer)
            misRows.forEach((row, index) => {
                const isModelHeader = row.classList.contains("model-header");
                const isFooter = row.classList.contains("table-footer");
                if (!isModelHeader && !isFooter) {
                    row.style.display = "none";
                }
            });

            // On clicking a model-header, toggle its fuel-type rows
            misRows.forEach((row, index) => {
                if (row.classList.contains("model-header")) {
                    row.addEventListener("click", function () {
                        let i = index + 1;
                        while (
                            i < misRows.length &&
                            !misRows[i].classList.contains("model-header") &&
                            !misRows[i].classList.contains("table-footer")
                        ) {
                            misRows[i].style.display =
                                misRows[i].style.display === "none" ? "table-row" : "none";
                            i++;
                        }
                    });
                }
            });

            // Modal logic for MIS Report table
            misRows.forEach((row, rowIndex) => {
                const cells = row.querySelectorAll("td:not(:first-child)");
                cells.forEach((cell) => {
                    cell.style.cursor = "pointer";
                    cell.addEventListener("click", function (e) {
                        const value = e.target.textContent;
                        const columnIndex = Array.from(cell.parentElement.children).indexOf(cell);
                        const columnHeader = document.querySelectorAll(".mis-report-table thead th")[columnIndex].textContent;

                        let modelName = "Unknown Model";
                        for (let i = rowIndex; i >= 0; i--) {
                            if (misRows[i].classList.contains("model-header")) {
                                modelName = misRows[i].querySelector("td").textContent;
                                break;
                            }
                        }

                        document.getElementById("modalContent").innerHTML = 
                            `<strong>${value}</strong> in ${columnHeader} for <strong>${modelName}</strong>`;

                        const modal = new bootstrap.Modal(document.getElementById("infoModal"));
                        modal.show();
                    });
                });
            });

            // ------------------- BOOKING REPORT TABLE -------------------
            const bookingRows = document.querySelectorAll(".booking-report-table tbody tr");
                
            bookingRows.forEach((row, index) => {
                const isModelHeader = row.classList.contains("booking-header");
                const isFooter = row.classList.contains("table-footer");
                if (!isModelHeader && !isFooter) {
                    row.style.display = "none";
                }
            });

            // On clicking a booking-header, toggle its fuel-type rows
            bookingRows.forEach((row, index) => {
                if (row.classList.contains("booking-header")) {
                    row.addEventListener("click", function () {
                        let i = index + 1;
                        while (
                            i < bookingRows.length &&
                            !bookingRows[i].classList.contains("booking-header") &&
                            !bookingRows[i].classList.contains("table-footer")
                        ) {
                            bookingRows[i].style.display =
                                bookingRows[i].style.display === "none" ? "table-row" : "none";
                            i++;
                        }
                    });
                }
            });
                
            bookingRows.forEach((row) => {
                const modelName = row.dataset.model || "Unknown Model"; // Read from data-model
            
                const cells = row.querySelectorAll("td:not(:first-child)");
                cells.forEach((cell) => {
                    cell.style.cursor = "pointer";
                    cell.addEventListener("click", function (e) {
                        const value = e.target.textContent.trim();
                        const columnIndex = Array.from(cell.parentElement.children).indexOf(cell);
                        const columnHeader = document.querySelectorAll(".booking-report-table thead th")[columnIndex].textContent.trim();
            
                        document.getElementById("bookingContent").innerHTML = 
                            `<strong>${value}</strong> in <strong>${columnHeader}</strong> for <strong>${modelName}</strong>`;
            
                        const modal = new bootstrap.Modal(document.getElementById("bookingModal"));
                        modal.show();
                    });
                });
            });
        });
    </script>
@endsection