@extends('master')
@section('content')
    <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        .page-wrapper .content .row a .hover-shadow:hover {
            transform: translateY(-3px);
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
        }

        .page-wrapper .content .row a .transition {
            transition: all 0.3s ease;
        }

        .row a {
            color: #0C143B;
            text-decoration: none !important;
        }

        .row a:hover {
            color: #0D153A !important;
            text-decoration: underline !important;
        }

        .page-wrapper .content .row a .card .dash-widgetcontent h5 {
            font-weight: 600 !important;
        }

        .page-wrapper .content .row a .card {
            margin-bottom: 0 !important;
            padding: 15px !important;
        }

        .page-wrapper .content .row a .card .gp-notification {
            position: absolute;
            top: 10px;
            right: 10px;
        }

        i.bi {
            width: auto;
            height: auto;
            line-height: 0;
            display: inline-block;
            vertical-align: middle;
        }
    </style>
    @php
        $cards = [
            [
                'route' => 'saleorder',
                'label' => __('sitelabel.CustomerInvoice'),
                'icon' => 'bi-receipt',
                'text_color' => 'text-primary',
                'bg_color' => 'bg-primary',
            ],
            [
                'route' => 'grn',
                'label' => __('sitelabel.Purchase'),
                'icon' => 'bi-cart-check',
                'text_color' => 'text-success',
                'bg_color' => 'bg-success',
            ],
            [
                'route' => 'daybook',
                'label' => __('sitelabel.DayBook'),
                'icon' => 'bi-journal-text',
                'text_color' => 'text-info',
                'bg_color' => 'bg-info',
            ],
            [
                'route' => 'addcustomerpayment',
                'label' => __('sitelabel.CustomerPostDatedCheque'),
                'icon' => 'bi-credit-card',
                'text_color' => 'text-warning',
                'bg_color' => 'bg-warning',
            ],
            [
                'route' => 'vendorpayment',
                'label' => __('sitelabel.VendorPayment'),
                'icon' => 'bi-cash-stack',
                'text_color' => 'text-danger',
                'bg_color' => 'bg-danger',
            ],
            [
                'route' => 'product',
                'label' => __('sitelabel.Product'),
                'icon' => 'bi-box',
                'text_color' => 'text-secondary',
                'bg_color' => 'bg-secondary',
            ],
            [
                'route' => 'finishedGoodsdubaishopReport',
                'label' => __('sitelabel.Stock'),
                'icon' => 'bi-box-seam',
                'text_color' => 'text-primary',
                'bg_color' => 'bg-primary',
            ],
            [
                'route' => 'performainvoice',
                'label' => __('sitelabel.PerformaInvoice'),
                'icon' => 'bi-gear',
                'text_color' => 'text-success',
                'bg_color' => 'bg-success',
            ],
            [
                'route' => 'posreport',
                'label' => __('sitelabel.Reports'),
                'icon' => 'bi-file-earmark-bar-graph',
                'text_color' => 'text-info',
                'bg_color' => 'bg-info',
            ],
            [
                'route' => 'employeeweeklypayment',
                'label' => __('sitelabel.EmployeePayment'),
                'icon' => 'bi-people',
                'text_color' => 'text-danger',
                'bg_color' => 'bg-danger',
            ],
            [
                'route' => 'deliveryorder',
                'label' => __('sitelabel.DeliveryOrder'),
                'icon' => 'bi-people',
                'text_color' => 'text-danger',
                'bg_color' => 'bg-danger',
            ],
        ];
    @endphp
    <div class="page-wrapper">
        <div class="content">
            {{-- Navigation Cards Section --}}
            <div class="row g-2 mb-3">
                @foreach ($cards as $card)
                    <div class="col-xl-3 col-lg-4 col-md-6 col-12">
                        <a href="{{ url($card['route']) }}" class="text-decoration-none">
                            <div class="card hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1">
                                <div class="card-body d-flex align-items-center p-2">
                                    <div class="rounded-full {{ $card['bg_color'] }} bg-opacity-10 p-3 me-3"
                                        style="height: 56px;width: 56px;">
                                        <i class="bi {{ $card['icon'] }} {{ $card['text_color'] }} fs-4"></i>
                                    </div>
                                    <div class="dash-widgetcontent">
                                        <h5 class="mb-0 font-semibold">{{ $card['label'] }}</h5>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                @endforeach

                <div class="col-xl-3 col-lg-4 col-md-6 col-12">
                    <a href="{{ url('/') }}/gatepass">
                        <div class="card h-70 shadow-sm hover-shadow transition">
                            <div class="card-body d-flex align-items-center p-2">
                                <div class="dash-widgetimg rounded-circle bg-warning bg-opacity-10 p-3 me-3"
                                    style="height: 56px;width: 56px;">
                                    <i class="bi bi-door-open text-warning fs-4"></i>
                                </div>
                                <div class="dash-widgetcontent">
                                    <h5 class="mb-0 fw-semibold">{{ __('sitelabel.GatePass') }}</h5>
                                </div>
                                @if ($gp_notification > 0)
                                    <span class="absolute top-2 right-2">
                                        <span class="bg-yellow-500 text-white px-2 py-1 rounded-full text-xs">
                                            <i class="fas fa-bell mr-1"></i> {{ $gp_notification }}
                                        </span>
                                    </span>
                                @endif
                            </div>
                        </div>
                    </a>
                </div>
            </div>

            {{-- Main Content Grid --}}
            <div id="my_dashboard_data_tables" class="grid grid-cols-1 md:grid-cols-2 gap-4">
                {{-- Top 10 Customers - Bar Chart --}}
                <div class="rounded-xl shadow-sm hover-shadow transition overflow-hidden h-100">
                    <div class="px-3 py-2" style="background: #D2DAFF; color: #2551A1">
                        <h4 class="text-xl font-bold text-center">{{ __('sitelabel.Top10Customers') }}</h4>
                    </div>
                    <div class="p-4">
                        <div class="overflow-x-auto">
                            <div class="chart-container" style="position: relative; height: 300px;">
                                <canvas id="Top10Customers"></canvas>
                            </div>
                            <div id="customerNameDisplay"
                                style="text-align: center; font-weight: bold; color: #2551A1; height: 20px; margin-bottom: 10px;">
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Daily Sales - Line Chart --}}
                <div class="rounded-xl shadow-sm hover-shadow transition overflow-hidden h-100">
                    <div class="px-3 py-2" style="background: #FFDBC7; color: #D07645">
                        <h4 class="text-xl font-bold text-center">{{ __('sitelabel.DailySales') }}</h4>
                    </div>
                    <div class="p-4">
                        <div class="overflow-x-auto">
                            <div class="chart-container" style="position: relative; height: 300px;">
                                <canvas id="DailySalesData"></canvas>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Gate Pass - Pending --}}
                <div class="rounded-xl shadow-sm hover-shadow transition overflow-hidden h-100">
                    <div class="px-3 py-2" style="background: #D2DAFF; color: #2551A1">
                        <h4 class="text-xl font-bold text-center">{{ __('sitelabel.GatePass') }}
                        </h4>
                    </div>
                    <div class="p-4">
                        <div class="overflow-x-auto">
                            <div class="table-responsive" style="padding-bottom: 8px;">
                                <table class="table datanew">
                                    <thead>
                                        <tr>
                                            <th>{{ __('sitelabel.SerialNumber') }}</th>
                                            <th>{{ __('sitelabel.PassNo') }}</th>
                                            <th>{{ __('sitelabel.Date') }}</th>
                                            <th>{{ __('sitelabel.DriverName') }}</th>
                                            <th>{{ __('sitelabel.Action') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($gatepass as $item)
                                            <tr>
                                                <td>{{ $loop->iteration }}</td>
                                                <td>{{ $item->PassNo }}</td>
                                                <td>{{ $item->Date }}</td>
                                                <td>{{ $item->DriverName }}</td>
                                                <td>
                                                    <button data-id="{{ $item->Id }}"
                                                        class="bg-blue-500 hover:bg-blue-600 text-white px-2 py-1 rounded-full text-xs manage-button">
                                                        <i class="fas fa-cog mr-1"></i> {{ __('sitelabel.Update') }}
                                                    </button>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Customer Payment Reminder --}}
                <div class="rounded-xl shadow-sm hover-shadow transition overflow-hidden h-100">
                    <div class="d-flex align-items-center justify-content-between"
                        style="background: #FFDBC7;color:#D07645; padding: 0.25rem 1rem">
                        <span class="text-xl font-bold text-center">
                            {{ __('sitelabel.CustomerPaymentReminder') }}</span>
                        <span style="padding: 0.5rem; text-align:right">
                            <button id="CustomerPaymentReminder"
                                class="bg-yellow-500 hover:bg-yellow-600 text-white px-3 py-1 rounded-full text-sm">
                                <i class="fas fa-plus mr-1"></i> {{ __('sitelabel.AddReminder') }}
                            </button>
                        </span>
                    </div>

                    <div class="p-4">
                        <div class="overflow-x-auto">
                            <div class="table-responsive" style="padding-bottom: 8px;">
                                <table class="table datanew">
                                    <thead>
                                        <tr>
                                            <th>{{ __('sitelabel.SerialNumber') }}</th>
                                            <th>{{ __('sitelabel.Customer') }}</th>
                                            <th>{{ __('sitelabel.PaymentDate') }}</th>
                                            <th>{{ __('sitelabel.PaymentType') }}</th>
                                            <th style="text-align: right">{{ __('sitelabel.Amount') }}</th>
                                            <th>{{ __('sitelabel.Action') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($customerpaymentreminder as $item)
                                            <tr>
                                                <td>{{ $loop->iteration }}</td>
                                                <td>{{ $item->Customer }}</td>
                                                <td>{{ $item->Date }}</td>
                                                <td>{{ $item->PaymentType }}</td>
                                                <td style="text-align: right">{{ number_format($item->Amount, 2) }}</td>
                                                <td>
                                                    <button data-id="{{ $item->Id }}"
                                                        class="bg-blue-500 hover:bg-blue-600 text-white px-2 py-1 rounded-full text-xs manage-button">
                                                        <i class="fas fa-cog mr-1"></i> {{ __('sitelabel.Update') }}
                                                    </button>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Last Order Reminder -->
                <div class="rounded-xl shadow-sm hover-shadow transition overflow-hidden h-100">
                    <div class="px-3 py-2" style="background: #D2DAFF; color: #2551A1">
                        <h4 class="text-xl font-bold text-center">{{ __('sitelabel.LastOrderReminder') }}
                        </h4>
                    </div>
                    <div class="p-4">
                        <div class="overflow-x-auto">
                            <div class="table-responsive" style="padding-bottom: 8px;">
                                <table class="table datanew">
                                    <thead>
                                        <tr>
                                            <th>{{ __('sitelabel.SerialNumber') }}</th>
                                            <th>{{ __('sitelabel.OrderDate') }}</th>
                                            <th>{{ __('sitelabel.OrderNo') }}</th>
                                            <th>{{ __('sitelabel.Customer') }}</th>
                                            <th style="text-align: right">{{ __('sitelabel.Amount') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($lastOrderReminder as $item)
                                            <tr>
                                                <td>{{ $loop->iteration }}</td>
                                                <td>{{ $item->Date }}</td>
                                                <td>{{ $item->BillNo }}</td>
                                                <td>{{ $item->Name }}</td>
                                                <td style="text-align: right">{{ number_format($item->NetAmount, 2) }}</td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Purchase Request -->
                <div class="rounded-xl shadow-sm hover-shadow transition overflow-hidden h-100">
                    <div class="px-3 py-2" style="background: #FFDBC7;color:#D07645">
                        <h4 class="text-xl font-bold text-center">{{ __('sitelabel.PurchaseRequest') }}
                        </h4>
                    </div>
                    <div class="p-4">
                        <div class="overflow-x-auto">
                            <div class="table-responsive" style="padding-bottom: 8px;">
                                <table class="table datanew">
                                    <thead>
                                        <tr>
                                            <th>{{ __('sitelabel.SerialNumber') }}</th>
                                            <th>{{ __('sitelabel.RequestDate') }}</th>
                                            <th>{{ __('sitelabel.RequestBy') }}</th>
                                            <th>{{ __('sitelabel.Department') }}</th>
                                            <th>{{ __('sitelabel.RequestStatus') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($purchaserequest as $item)
                                            <tr>
                                                <td>{{ $loop->iteration }}</td>
                                                <td>{{ $item->RequestDate }}</td>
                                                <td>{{ $item->RequestedBy }}</td>
                                                <td>{{ $item->DepartmentName }}</td>
                                                <td>
                                                    @if ($item->RequestStatus == 1)
                                                        <span
                                                            class="badges bg-lightyellow">{{ __('sitelabel.Pending') }}</span>
                                                    @elseif ($item->RequestStatus == 2)
                                                        <span
                                                            class="badges bg-lightgreen">{{ __('sitelabel.Approved') }}</span>
                                                    @else
                                                        <span
                                                            class="badges bg-lightred">{{ __('sitelabel.Rejected') }}</span>
                                                    @endif
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Payables Chart --}}
                <div class="rounded-xl shadow-sm hover-shadow transition overflow-hidden h-100">
                    <div class="px-3 py-2" style="background: #D2DAFF; color: #2551A1">
                        <h4 class="text-xl font-bold text-center">
                            {{ __('sitelabel.Payables/Receivables') }}</h4>
                    </div>
                    <div class="p-4">
                        <div class="overflow-x-auto">
                            <div class="chart-container">
                                <canvas id="payablesPieChart"></canvas>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Finished Goods Stock Alert --}}
                <div class="rounded-xl shadow-sm hover-shadow transition overflow-hidden h-100">
                    <div class="px-3 py-2" style="background: #FFDBC7;color:#D07645">
                        <h4 class="text-xl font-bold text-center">
                            {{ __('sitelabel.FinishedGoodsStockAlert') }}</h4>
                    </div>
                    <div class="p-4">
                        <div class="overflow-x-auto">
                            <table class="min-w-full divide-y divide-gray-200">
                                <thead class="bg-gray-50">
                                    <tr>
                                        <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 tracking-wider">
                                            {{ __('sitelabel.SerialNumber') }}
                                        </th>
                                        <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 tracking-wider">
                                            {{ __('sitelabel.Item') }}</th>
                                        <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 tracking-wider">
                                            {{ __('sitelabel.Stock') }}</th>
                                        <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 tracking-wider">
                                            {{ __('sitelabel.Action') }}</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-gray-200">
                                    <tr class="hover:bg-gray-50">
                                        <td class="px-3 py-2 whitespace-nowrap text-sm text-gray-900">1</td>
                                        <td class="px-3 py-2 whitespace-nowrap text-sm text-gray-900">Wire 1</td>
                                        <td class="px-3 py-2 whitespace-nowrap text-sm text-gray-900">300.00</td>
                                        <td class="px-3 py-2 whitespace-nowrap text-sm">
                                            <button
                                                class="bg-blue-500 hover:bg-blue-600 text-white px-3 py-1 rounded-full text-sm">
                                                <i class="fas fa-cog mr-1"></i> Manage
                                            </button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                {{-- Vendor Payment Reminder --}}
                <div class="rounded-xl shadow-sm hover-shadow transition overflow-hidden h-100">
                    <div class="d-flex align-items-center justify-content-between"
                        style="background: #FFDBC7;color:#D07645; padding: 0.25rem 1rem">
                        <span class="text-xl font-bold text-center">
                            {{ __('sitelabel.VendorPaymentReminder') }}</span>
                        <span style="padding: 0.5rem; text-align:right">
                            <button id="VendorPaymentReminder"
                                class="bg-yellow-500 hover:bg-yellow-600 text-white px-3 py-1 rounded-full text-sm">
                                <i class="fas fa-plus mr-1"></i> {{ __('sitelabel.AddReminder') }}
                            </button>
                        </span>
                    </div>

                    <div class="p-4">
                        <div class="overflow-x-auto">
                            <div class="table-responsive" style="padding-bottom: 8px;">
                                <table class="table datanew">
                                    <thead>
                                        <tr>
                                            <th>{{ __('sitelabel.SerialNumber') }}</th>
                                            <th>{{ __('sitelabel.Vendor') }}</th>
                                            <th>{{ __('sitelabel.PaymentDate') }}</th>
                                            <th>{{ __('sitelabel.PaymentType') }}</th>
                                            <th style="text-align: right">{{ __('sitelabel.Amount') }}</th>
                                            <th>{{ __('sitelabel.Action') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($vendorpaymentreminder as $item)
                                            <tr>
                                                <td>{{ $loop->iteration }}</td>
                                                <td>{{ $item->Vendor }}</td>
                                                <td>{{ $item->Date }}</td>
                                                <td>{{ $item->PaymentType }}</td>
                                                <td style="text-align: right">{{ number_format($item->Amount, 2) }}</td>
                                                <td>
                                                    <button data-id="{{ $item->Id }}"
                                                        class="bg-blue-500 hover:bg-blue-600 text-white px-2 py-1 rounded-full text-xs manage-button">
                                                        <i class="fas fa-cog mr-1"></i> {{ __('sitelabel.Update') }}
                                                    </button>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Cash in Hand Section -->
                <div class="rounded-xl shadow-sm hover-shadow transition overflow-hidden h-100">
                    <div class="px-3 py-2" style="background: #D2DAFF; color: #2551A1">
                        <h4 class="text-xl font-bold text-center">{{ __('sitelabel.CashInHand') }}</h4>
                    </div>
                    <div class="p-4">
                        <div class="overflow-x-auto">
                            <table class="min-w-full divide-y divide-gray-200">
                                <thead class="bg-gray-50">
                                    <tr>
                                        <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 tracking-wider">
                                            {{ __('sitelabel.Description') }}</th>
                                        <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 tracking-wider">
                                            {{ __('sitelabel.Amount') }}</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-gray-200">
                                    <tr class="hover:bg-gray-50">
                                        <td class="px-3 py-2 whitespace-nowrap text-sm text-gray-900">Opening
                                            Balance
                                        </td>
                                        <td class="px-3 py-2 whitespace-nowrap text-sm text-gray-900">15,000.00
                                        </td>
                                    </tr>
                                    <tr class="hover:bg-gray-50">
                                        <td class="px-3 py-2 whitespace-nowrap text-sm text-gray-900">Added Balance
                                        </td>
                                        <td class="px-3 py-2 whitespace-nowrap text-sm text-gray-900">5,000.00</td>
                                    </tr>
                                </tbody>
                                <thead class="bg-gray-50">
                                    <tr>
                                        <td class="px-3 py-2 whitespace-nowrap text-sm text-gray-900">
                                            <strong>{{ __('sitelabel.Total') }}</strong>
                                        </td>
                                        <td class="px-3 py-2 whitespace-nowrap text-sm text-gray-900">
                                            <strong>20,000.00</strong>
                                        </td>
                                    </tr>
                                    </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- GatePass Fade Modal --}}
    <div id="gatepassModal" class="fixed inset-0 bg-gray-800 bg-opacity-50 flex items-center justify-center hidden"
        style="z-index: 2060">
        <div class="bg-white w-3/4 max-w-4xl rounded-lg shadow-lg">
            <!-- Modal Header -->
            <div class="px-4 py-2 bg-blue-500 text-white flex justify-between items-center rounded-t-lg">
                <h2 class="text-lg font-semibold">{{ __('sitelabel.GatePassDetails') }}</h2>
                <button id="closeModal" class="text-white text-xl">&times;</button>
            </div>

            <!-- Modal Content -->
            <div class="p-4" style="height: 80vh; overflow-y:auto">
                <div id="gatepassContent">
                    <p>{{ __('sitelabel.Loading') }}...</p>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal for Adding Customer Payment Reminder --}}
    <div id="CustomerPaymentReminderModal" class="modal fade" tabindex="-1" role="dialog"
        aria-labelledby="CustomerPaymentReminderModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="CustomerPaymentReminderModalLabel">
                        {{ __('sitelabel.AddReminder') }}
                    </h5>
                </div>
                <form id="CustomerPaymentReminderForm" action="{{ url('/') }}/customerpaymentreminderprocess"
                    method="POST">
                    @csrf
                    <div class="modal-body">
                        <div class="row col-12">
                            <div class="col-lg-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.Customer') }}<span class="text-danger">*</span></label>
                                    <select name="cmbCustomer" id="cmbCustomer" class="form-control" required>
                                        <option value="-1">{{ __('sitelabel.SelectCustomer') }}</option>
                                        @foreach ($customers as $item)
                                            <option value="{{ $item->Id }}">{{ $item->Name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.ClosingBalance') }}</label>
                                    <input type="text" name="txtClosingBalance" id="txtClosingBalance"
                                        class="form-control" value="{{ old('txtClosingBalance') }}" readonly>
                                </div>
                            </div>
                            <div class="col-lg-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.Amount') }}<span class="text-danger">*</span></label>
                                    <input type="number" name="txtAmount" id="txtAmount" class="form-control"
                                        value="{{ old('txtAmount') }}" required>
                                </div>
                            </div>
                            <div class="col-lg-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.PaymentDate') }}<span class="text-danger">*</span></label>
                                    <input type="date" name="txtPaymentDate" id="txtPaymentDate" class="form-control"
                                        value="{{ old('txtPaymentDate') }}" required>
                                </div>
                            </div>
                            <div class="col-lg-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.PaymentType') }}<span class="text-danger">*</span></label>
                                    <select name="cmbPaymentType" id="cmbPaymentType" class="form-control" required>
                                        <option value="-1">{{ __('sitelabel.SelectPaymentType') }}</option>
                                        @foreach ($paymenttype as $item)
                                            <option value="{{ $item->Id }}">{{ $item->Name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.Notes') }}</label>
                                    <textarea name="txtNotes" id="txtNotes">{{ old('txtNotes') }}</textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">{{ __('sitelabel.Create') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Modal for Adding Vendor Payment Reminder --}}
    <div id="VendorPaymentReminderModal" class="modal fade" tabindex="-1" role="dialog"
        aria-labelledby="VendorPaymentReminderModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="VendorPaymentReminderModalLabel">
                        {{ __('sitelabel.AddReminder') }}
                    </h5>
                </div>
                <form id="VendorPaymentReminderForm" action="{{ url('/') }}/vendorpaymentreminderprocess"
                    method="POST">
                    @csrf
                    <div class="modal-body">
                        <div class="row col-12">
                            <div class="col-lg-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.Vendor') }}<span class="text-danger">*</span></label>
                                    <select name="cmbVendor" id="cmbVendor" class="form-control" required>
                                        <option value="-1">{{ __('sitelabel.SelectVendor') }}</option>
                                        @foreach ($vendors as $item)
                                            <option value="{{ $item->Id }}">{{ $item->Name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.ClosingBalance') }}</label>
                                    <input type="text" name="txtClosingBalance" id="txtClosingBalance"
                                        class="form-control" value="{{ old('txtClosingBalance') }}" readonly>
                                </div>
                            </div>
                            <div class="col-lg-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.Amount') }}<span class="text-danger">*</span></label>
                                    <input type="number" name="txtAmount" id="txtAmount" class="form-control"
                                        value="{{ old('txtAmount') }}" required>
                                </div>
                            </div>
                            <div class="col-lg-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.PaymentDate') }}<span class="text-danger">*</span></label>
                                    <input type="date" name="txtPaymentDate" id="txtPaymentDate" class="form-control"
                                        value="{{ old('txtPaymentDate') }}" required>
                                </div>
                            </div>
                            <div class="col-lg-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.PaymentType') }}<span class="text-danger">*</span></label>
                                    <select name="cmbPaymentType" id="cmbPaymentType" class="form-control" required>
                                        <option value="-1">{{ __('sitelabel.SelectPaymentType') }}</option>
                                        @foreach ($paymenttype as $item)
                                            <option value="{{ $item->Id }}">{{ $item->Name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.Notes') }}</label>
                                    <textarea name="txtNotes" id="txtNotes">{{ old('txtNotes') }}</textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">{{ __('sitelabel.Create') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    {{-- Top 10 Customer's Chart Data --}}
    <script>
        // Get dynamic data passed from the controller
        const customerNames = @json($top10customerNames);
        const customerSales = @json($top10customerSales);

        let activeHoverIndex = -1;
        const nameDisplay = document.getElementById('customerNameDisplay');

        // Function to update customer name display
        function updateCustomerName(index) {
            if (index !== -1) {
                nameDisplay.textContent = customerNames[index];
            } else {
                nameDisplay.textContent = '';
            }
        }

        const customerChartConfig = {
            type: 'bar',
            data: {
                labels: customerNames,
                datasets: [{
                    label: 'Total Sales ($)',
                    data: customerSales,
                    backgroundColor: 'rgba(75, 192, 192, 0.6)',
                    borderColor: 'rgba(75, 192, 192, 1)',
                    borderWidth: 1,
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false,
                    },
                    tooltip: {
                        enabled: false
                    }
                },
                scales: {
                    x: {
                        display: false,
                        title: {
                            display: true,
                            text: 'Customers',
                        }
                    },
                    y: {
                        title: {
                            display: true,
                            text: 'Sales ($)',
                        },
                        beginAtZero: true,
                    }
                },
                onHover: (event, elements) => {
                    if (elements && elements.length > 0) {
                        const element = elements[0];
                        activeHoverIndex = element.index;
                    } else {
                        activeHoverIndex = -1;
                    }
                    updateCustomerName(activeHoverIndex);
                }
            }
        };

        // Render the chart
        new Chart(
            document.getElementById('Top10Customers'),
            customerChartConfig
        );
    </script>

    {{-- Daily Sales Chart Data --}}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Get the sales data from PHP
            const salesData = @json($last30DaysSales);

            // Process the data for the chart
            const dates = salesData.map(item => item.Date); // Already in DD/MM format from controller
            const amounts = salesData.map(item => parseFloat(item.TotalAmount));

            const expenseChartData = {
                labels: dates,
                datasets: [{
                    label: 'Sales (Last 30 Days)',
                    data: amounts,
                    backgroundColor: 'rgba(255, 99, 132, 0.2)', // Light Red
                    borderColor: 'rgba(255, 99, 132, 1)', // Darker Red
                    borderWidth: 2,
                    tension: 0.3, // Smoothing effect for the line
                    fill: true,
                    spanGaps: false // Ensure line connects through zero values
                }]
            };

            const expenseChartConfig = {
                type: 'line',
                data: expenseChartData,
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false,
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    const amount = new Intl.NumberFormat('en-US', {
                                        style: 'currency',
                                        currency: 'USD'
                                    }).format(context.raw);
                                    return `Sales: ${amount}`;
                                }
                            }
                        }
                    },
                    scales: {
                        x: {
                            title: {
                                display: true,
                                text: 'Date',
                            },
                            ticks: {
                                maxRotation: 45,
                                minRotation: 45
                            },
                            grid: {
                                display: false // Hide vertical grid lines
                            }
                        },
                        y: {
                            title: {
                                display: true,
                                text: 'Sales ($)',
                            },
                            beginAtZero: true,
                            ticks: {
                                callback: function(value) {
                                    return new Intl.NumberFormat('en-US', {
                                        style: 'currency',
                                        currency: 'USD',
                                        minimumFractionDigits: 0,
                                        maximumFractionDigits: 0
                                    }).format(value);
                                }
                            }
                        }
                    }
                }
            };

            new Chart(
                document.getElementById('DailySalesData'),
                expenseChartConfig
            );
        });
    </script>

    <script>
        $(document).ready(function() {
            $('#cmbCustomer, #cmbPaymentType').select2({
                theme: "bootstrap-5",
                dropdownParent: $('#CustomerPaymentReminderModal')
            });
            $('#cmbVendor, #cmbPaymentType').select2({
                theme: "bootstrap-5",
                dropdownParent: $('#VendorPaymentReminderModal')
            });

            if ($.fn.DataTable.isDataTable('.datanew')) {
                $('.datanew').DataTable().destroy();
            }
            $('.datanew').DataTable({
                pageLength: 5,
                lengthMenu: [
                    [5, 10, 25, 50, -1],
                    [5, 10, 25, 50, "All"]
                ],
                destroy: true
            });
        });

        document.getElementById('CustomerPaymentReminder').addEventListener('click', function() {
            $('#CustomerPaymentReminderModal').modal('show');
        });
        document.getElementById('VendorPaymentReminder').addEventListener('click', function() {
            $('#VendorPaymentReminderModal').modal('show');
        });

        document.addEventListener('DOMContentLoaded', function() {
            const modal = document.getElementById('gatepassModal');
            const modalContent = document.getElementById('gatepassContent');
            const closeModalButton = document.getElementById('closeModal');

            function showModal() {
                modal.classList.remove('hidden');
            }

            function hideModal() {
                modal.classList.add('hidden');
                modalContent.innerHTML = '<p>{{ __('sitelabel.Loading') }}...</p>'; // Reset content
            }

            closeModalButton.addEventListener('click', hideModal);

            document.querySelectorAll('.manage-button').forEach(button => {
                button.addEventListener('click', function() {
                    const gatepassId = this.getAttribute('data-id');

                    fetch(`/api/GetCompleteGatePassById/${gatepassId}`)
                        .then(response => {
                            if (!response.ok) {
                                throw new Error(`HTTP error! status: ${response.status}`);
                            }
                            return response.json();
                        })
                        .then(data => {
                            if (data) {
                                modalContent.innerHTML = `
                                    <div class="p-4">
                                        <!-- Gate Pass Info -->
                                        <div>
                                            <div class="flex justify-between mb-2">
                                                <p><strong>{{ __('sitelabel.GatePassNo') }}:</strong> ${data.gatepass.PassNo}</p>
                                                <p><strong>{{ __('sitelabel.Date') }}:</strong> ${data.gatepass.Date}</p>
                                                <p>
                                                    <strong>{{ __('sitelabel.Status') }}:</strong>
                                                    <a href="#" data-bs-toggle="modal" data-bs-target="#statusModal">
                                                        <span class="${getBadgeClass(data.gatepass.PassStatus)}">
                                                            ${getBadgeText(data.gatepass.PassStatus)}
                                                        </span>
                                                    </a>
                                                </p>
                                            </div>
                                            
                                            <!-- Gate Pass Details Table -->
                                            <div class="table-responsive">
                                                <table class="table table-bordered">
                                                    <thead>
                                                        <tr>
                                                            <th class="px-2 py-2 field-type" style="background: #D2DAFF; color: #2551A1">{{ __('sitelabel.Type') }}</th>
                                                            <th class="px-2 py-2 field-ware" style="background: #D2DAFF; color: #2551A1">{{ __('sitelabel.Warehouse') }}</th>
                                                            <th class="px-2 py-2 field-from" style="background: #D2DAFF; color: #2551A1">{{ __('sitelabel.FromWarehouse') }}</th>
                                                            <th class="px-2 py-2 field-to" style="background: #D2DAFF; color: #2551A1">{{ __('sitelabel.ToWarehouse') }}</th>
                                                            <th class="px-2 py-2 field-grn" style="background: #D2DAFF; color: #2551A1">{{ __('sitelabel.GRN') }}</th>
                                                            <th class="px-2 py-2 field-sale" style="background: #D2DAFF; color: #2551A1">{{ __('sitelabel.SaleOrder') }}</th>
                                                            <th class="px-2 py-2" style="background: #D2DAFF; color: #2551A1">{{ __('sitelabel.Description') }}</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <tr>
                                                            <td class="border px-2 py-2 field-type">${data.gatepass.Type || ''}</td>
                                                            <td class="border px-2 py-2 field-ware">${data.gatepass.FromWarehouse || ''}</td>
                                                            <td class="border px-2 py-2 field-from">${data.gatepass.FromWarehouse || ''}</td>
                                                            <td class="border px-2 py-2 field-to">${data.gatepass.ToWarehouse || ''}</td>
                                                            <td class="border px-2 py-2 field-grn">${data.gatepass.GRN || ''}</td>
                                                            <td class="border px-2 py-2 field-sale">${data.gatepass.SaleOrder || ''}</td>
                                                            <td class="border px-2 py-2">${data.gatepass.PassDescription || ''}</td>
                                                        </tr>
                                                    </tbody>
                                                </table>

                                            
                                                <!-- Details Table -->
                                                <table class="table table-bordered">
                                                    <thead>
                                                        <tr>
                                                            <th class="px-2 py-2" style="background: #FFDBC7; color: #D07645; width:10%">{{ __('sitelabel.SerialNumber') }}</th>
                                                            <th class="px-2 py-2" style="background: #FFDBC7; color: #D07645">{{ __('sitelabel.Product') }}</th>
                                                            <th class="px-2 py-2" style="background: #FFDBC7; color: #D07645">{{ __('sitelabel.Bundle') }}</th>
                                                            <th class="px-2 py-2" style="background: #FFDBC7; color: #D07645">{{ __('sitelabel.Quantity') }}</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        ${data.details.map((detail, index) => `
                                                                                <tr>
                                                                                    <td class="border px-2 py-2 text-center">${index + 1}</td>
                                                                                    <td class="border px-2 py-2">${detail.Product}</td>
                                                                                    <td class="border px-2 py-2">${detail.Bundle}</td>
                                                                                    <td class="border px-2 py-2">${detail.Quantity}</td>
                                                                                </tr>
                                                                            `).join('')}
                                                    </tbody>
                                                </table>

                                                <!-- Vehicle Info -->
                                                <table class="table table-bordered">
                                                    <thead>
                                                        <tr>
                                                            <th class="px-2 py-2" style="background: #D2DAFF; color: #2551A1">{{ __('sitelabel.DriverName') }}</th>
                                                            <th class="px-2 py-2" style="background: #D2DAFF; color: #2551A1">{{ __('sitelabel.TransportCompany') }}</th>
                                                            <th class="px-2 py-2" style="background: #D2DAFF; color: #2551A1">{{ __('sitelabel.PhoneNo') }}</th>
                                                            <th class="px-2 py-2" style="background: #D2DAFF; color: #2551A1">{{ __('sitelabel.BuiltyNo') }}</th>
                                                            <th class="px-2 py-2" style="background: #D2DAFF; color: #2551A1">{{ __('sitelabel.VehicleNo') }}</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <tr>
                                                            <td class="border px-2 py-2">${data.vehicle.DriverName || ''}</td>
                                                            <td class="border px-2 py-2">${data.vehicle.TransportCompany || ''}</td>
                                                            <td class="border px-2 py-2">${data.vehicle.PhoneNo || ''}</td>
                                                            <td class="border px-2 py-2">${data.vehicle.BuiltyNo || ''}</td>
                                                            <td class="border px-2 py-2">${data.vehicle.VehicleNo || ''}</td>
                                                        </tr>
                                                    </tbody>
                                                </table>

                                                <!-- Vehicle Charges -->
                                                <table class="table table-bordered">
                                                    <thead>
                                                        <tr>
                                                            <th class="text-right px-2 py-2" style="background: #FFDBC7; color: #D07645">{{ __('sitelabel.Weight') }}</th>
                                                            <th class="text-right px-2 py-2" style="background: #FFDBC7; color: #D07645">{{ __('sitelabel.Rate') }}</th>
                                                            <th class="text-right px-2 py-2" style="background: #FFDBC7; color: #D07645">{{ __('sitelabel.Amount') }}</th>
                                                            <th class="text-right px-2 py-2" style="background: #FFDBC7; color: #D07645">{{ __('sitelabel.WeighingCharges') }}</th>
                                                            <th class="text-right px-2 py-2" style="background: #FFDBC7; color: #D07645">{{ __('sitelabel.Total') }}</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <tr>
                                                            <td class="border px-2 py-2 text-right">${Number(data.vehicle.Weight || 0).toFixed(2)}</td>
                                                            <td class="border px-2 py-2 text-right">${Number(data.vehicle.Rate || 0).toFixed(2)}</td>
                                                            <td class="border px-2 py-2 text-right">${Number(data.vehicle.Amount || 0).toFixed(2)}</td>
                                                            <td class="border px-2 py-2 text-right">${Number(data.vehicle.WeighingCharges || 0).toFixed(2)}</td>
                                                            <td class="border px-2 py-2 text-right">${Number(data.vehicle.TotalAmount || 0).toFixed(2)}</td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                    
                                        <!-- Status Update Modal -->
                                        <div class="modal fade" id="statusModal" tabindex="-1" aria-labelledby="statusModalLabel" aria-hidden="true" style="z-index: 2070">
                                            <div class="modal-dialog modal-dialog-centered">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title" id="statusModalLabel">Update Status</h5>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <form method="post" action="{{ url('/updatestatus') }}" enctype="multipart/form-data">
                                                            @csrf
                                                            <input type="hidden" name="hdid" id="statusId" value="${data.gatepass.PassId}">
                                                            <div class="mb-3">
                                                                <label class="form-label">Current Status</label>
                                                                <select id="cmbStatus" name="cmbStatus" class="form-control" required>
                                                                    <option value="0" ${data.gatepass.PassStatus == 0 ? 'selected' : ''}>{{ __('sitelabel.Pending') }}</option>
                                                                    <option value="1" ${data.gatepass.PassStatus == 1 ? 'selected' : ''}>{{ __('sitelabel.Approved') }}</option>
                                                                    <option value="2" ${data.gatepass.PassStatus == 2 ? 'selected' : ''}>{{ __('sitelabel.Rejected') }}</option>
                                                                </select>
                                                            </div>
                                                            <div class="text-end">
                                                                <button type="submit" class="btn btn-primary">Update Status</button>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>`;

                                function togglePassTypeFields() {
                                    const passType = data.gatepass
                                        .TypeId; // Get TypeId from the response
                                    const fields = {
                                        ware: document.querySelectorAll('.field-ware'),
                                        from: document.querySelectorAll('.field-from'),
                                        to: document.querySelectorAll('.field-to'),
                                        grn: document.querySelectorAll('.field-grn'),
                                        sale: document.querySelectorAll('.field-sale')
                                    };

                                    // Hide all fields initially
                                    Object.values(fields).forEach(fieldSet => {
                                        fieldSet.forEach(field => field.style.display =
                                            'none');
                                    });

                                    // Show relevant fields based on passType
                                    if (passType == 1) {
                                        fields.ware.forEach(field => field.style.display =
                                            'table-cell');
                                        fields.grn.forEach(field => field.style.display =
                                            'table-cell');
                                    } else if (passType == 2) {
                                        fields.ware.forEach(field => field.style.display =
                                            'table-cell');
                                        fields.sale.forEach(field => field.style.display =
                                            'table-cell');
                                    } else if (passType == 3) {
                                        fields.from.forEach(field => field.style.display =
                                            'table-cell');
                                        fields.to.forEach(field => field.style.display =
                                            'table-cell');
                                    }
                                }

                                function getBadgeText(status) {
                                    switch (parseInt(status)) {
                                        case 0:
                                            return '{{ __('sitelabel.Pending') }}';
                                        case 1:
                                            return '{{ __('sitelabel.Approved') }}';
                                        case 2:
                                            return '{{ __('sitelabel.Rejected') }}';
                                        default:
                                            return '';
                                    }
                                }

                                function getBadgeClass(status) {
                                    switch (parseInt(status)) {
                                        case 0:
                                            return 'badges bg-warning text-dark';
                                        case 1:
                                            return 'badges bg-lightgreen';
                                        case 2:
                                            return 'badges bg-lightred';
                                        default:
                                            return '';
                                    }
                                }

                                togglePassTypeFields();

                                showModal();
                            } else {
                                modalContent.innerHTML =
                                    '<p>{{ __('sitelabel.NoDataFound') }}</p>';
                                showModal();
                            }
                        })
                        .catch(error => {
                            console.error('Error details:', error);
                            modalContent.innerHTML =
                                '<p>{{ __('sitelabel.ErrorOccurred') }}</p>';
                            showModal();
                        });
                });
            });

            // Sample data for the pie chart
            const payablesData = {
                labels: ['Payables', 'Receivables'],
                datasets: [{
                    data: [40, 60],
                    backgroundColor: [
                        '#F26E26',
                        '#0C143B',
                    ],
                    borderWidth: 0,
                }]
            };

            // Chart configuration
            const pieChart = {
                type: 'pie',
                data: payablesData,
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom',
                            labels: {
                                padding: 20,
                                usePointStyle: true,
                                pointStyle: 'circle'
                            }
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    const label = context.label || '';
                                    const value = context.raw || 0;
                                    return `${label}: ${value}%`;
                                }
                            }
                        }
                    }
                }
            };

            // Initialize the chart
            new Chart(
                document.getElementById('payablesPieChart'),
                pieChart
            );
        });
    </script>
@endsection