000

@extends('layouts.app')

@section('title', 'Diesel Management')

@section('content')

.modal-content {
    border-radius: 12px;
    padding: 20px;
}

table thead {
    background-color: #28a745;
    color: white;
}

table tbody tr:nth-child(even) {
    background-color: #f8f9fa;
}

.form-label {
    font-weight: 500;
}
</style>

@if(session('success'))
<div class="alert alert-success alert-dismissible fade show mt-3" role="alert" id="successAlert">
    {{ session('success') }}
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
@endif

<div class=" mt-4">
    @if(Auth::check() && Auth::user()->role != 1)
    <button class="btn-add mb-3" data-bs-toggle="modal" data-bs-target="#dieselModal" onclick="clearForm()">Add Diesel Entry</button>
    @endif

<div class="row mb-3">
        <div class="col-md-6">
            <div class="d-flex align-items-center">
                <label class="me-2">Show</label>
                <select id="entriesPerPage" class="form-select" style="width: auto;" onchange="changeEntriesPerPage()">
                    <option value="10">10</option>
                    <option value="25">25</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                </select>
                <label class="ms-2">entries</label>
            </div>
        </div>
        <div class="col-md-6">
            <input type="text" id="searchInput" onkeyup="searchTable()" class="form-control float-end" style="width: 250px;" placeholder="Search">
        </div>
    </div>

<div class="table-responsive">
        <table class="table table-bordered" id="dieselTable">
            <thead class="bg-success text-white">
                <tr>
                    <th>Sr.No.</th>
               
                    <th>Diesel Stock (Ltr)	</th>
                    <th>Date</th>
                    <th>Price / Ltr (Rs)</th>
                    <th>Location</th>
                    @if(Auth::check() && Auth::user()->role != 1)
                    <th>Action</th>
                    @endif
                </tr>
            </thead>
            <tbody>
                @forelse($diesels as $index => $diesel)
                <tr>
                    <td>{{ $index + 1 }}</td>
                 
                    <td>{{ $diesel->diesel_stock }}</td>
                    <td>{{ \Carbon\Carbon::parse($diesel->date_of_entry)->format('d-m-Y') }}</td>
                    <td>{{ $diesel->rate_per_liter ?? '-' }}</td>
                    <td>{{ $sites->firstWhere('id', $diesel->site_id)->site_name ?? 'N/A' }}</td>
                    @if(Auth::check() && Auth::user()->role != 1)
                    <td class="d-flex justify-content-center gap-2">
                        
                        
                        
                        
                        <button class="btn btn-sm btn-success" data-bs-toggle="modal" data-bs-target="#addStockModal{{ $diesel->id }}">
                            <i class="fas fa-plus"></i>
                        </button>
                        <button class="btn btn-info btn-sm view-history-btn" data-diesel-id="{{ $diesel->id }}" data-bs-toggle="modal" data-bs-target="#historyModal">
                            <i class="fas fa-history"></i>
                        </button>
                        <form action="{{ route('diesels.destroy', $diesel->id) }}" method="POST" class="d-inline">
                            @csrf
                            @method('DELETE')
                            <button class="btn btn-danger btn-sm" onclick="return confirm('Are you sure?')">
                                <i class="fas fa-trash-alt"></i>
                            </button>
                        </form>
                    </td>
                    @endif
                </tr>

@if(Auth::check() && Auth::user()->role != 1)
                <div class="modal fade" id="addStockModal{{ $diesel->id }}" tabindex="-1" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <form action="{{ route('diesel.addStock', $diesel->id) }}" method="POST">
                                @csrf
                                <div class="modal-header">
                                    <h5 class="modal-title">Add Stock for {{ ucfirst($diesel->type) }}</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                </div>
                                <div class="modal-body">
                                    <div class="mb-3">
                                        <label class="form-label">Current Stock (Ltr)</label>
                                        <input type="number" step="0.01" class="form-control" value="{{ $diesel->diesel_stock }}" readonly>
                                        <small class="text-muted">This is the current stock before adding.</small>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Quantity to Add (Ltr)</label>
                                        <input type="number" name="added_quantity" class="form-control" required>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Price / Ltr (Rs)</label>
                                        <input type="number" step="0.01" name="new_rate" class="form-control">
                                    </div>

</div>
                                <div class="modal-footer">
                                    <button type="submit" class="btn btn-success w-100">Add Stock</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                @endif
                @empty
                <tr>
                    <td colspan="{{ Auth::check() && Auth::user()->role != 1 ? 7 : 6 }}">No diesel stocks found.</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

<div class="d-flex justify-content-between align-items-center mt-3">
        <div>
            <span id="showingInfo">Showing 1 to 10 of {{ count($diesels) }} entries</span>
        </div>
        <nav aria-label="Page navigation">
            <ul class="pagination pagination-sm mb-0" id="pagination"></ul>
        </nav>
    </div>

<!-- <h4 class="mt-5">Monthly Diesel Summary</h4>
    <div class="table-responsive">
        <table class="table table-bordered">
            <thead class="bg-secondary text-white">
                <tr>
                    <th>Month</th>
                    <th>Total Diesel In</th>
                    <th>Total Diesel Out</th>
                    <th>Balance</th>
                </tr>
            </thead>
            <tbody>
                @forelse($monthlySummary as $summary)
                <tr>
                    <td>{{ $summary->month }}</td>
                    <td>{{ $summary->total_in }}</td>
                    <td>{{ $summary->total_out }}</td>
                    <td>{{ $summary->balance }}</td>
                </tr>
                @empty
                <tr>
                    <td colspan="4">No monthly summary available.</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

<h4 class="mt-5">ðŸ§¾ Diesel In Consumption Report (FIFO)</h4>
    <div class="table-responsive">
        <table class="table table-bordered">
            <thead class="bg-info text-white">
                <tr>
                    <th>#</th>
                    <th>In Date</th>
                    <th>Stock In (lt)</th>
                    <th>Used (lt)</th>
                    <th>Date Fully Consumed</th>
                    <th>Remaining (lt)</th>
                    <th>Rate per lt</th>
                    <th>Site</th>
                </tr>
            </thead>
            <tbody>
                @forelse($consumptionReport as $i => $record)
                <tr>
                    <td>{{ $i + 1 }}</td>
                    <td>{{ \Carbon\Carbon::parse($record['date_in'])->format('d-m-Y') }}</td>
                    <td>{{ $record['stock_in'] }}</td>
                    <td>{{ $record['used'] }}</td>
                    <td>{{ $record['date_zero'] ?? '-' }}</td>
                    <td>{{ $record['stock_in'] - $record['used'] }}</td>
                    <td>{{ $record['rate'] ?? '-' }}</td>
                    <td>{{ $sites->firstWhere('id', $record['site'])->site_name ?? 'N/A' }}</td>
                </tr>
                @empty
                <tr>
                    <td colspan="8">No consumption report available.</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div> -->

<div class="modal fade" id="dieselModal" tabindex="-1" aria-labelledby="modalTitle" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalTitle">Add / Edit Diesel</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="dieselForm" method="POST">
                @csrf
                <input type="hidden" id="diesel_id" name="id">
                <div class="modal-body">
                    
                    
                    
                    
                    
                    
                    
                    
                      @php
                        $user = Auth::user();
                        $userSite = $sites->firstWhere('id', $user->site_id);
                    @endphp
                    <div class="mb-3">
                        <label class="form-label">Location</label>
                        <input type="text" class="form-control" value="{{ $userSite->site_name ?? 'N/A' }}" readonly>
                        <input type="hidden" name="site_id" id="site_id" value="{{ $user->site_id }}">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Diesel Stock (Ltr)</label>
                        <input type="number" step="0.01" name="diesel_stock" id="diesel_stock" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Date</label>
                        <input type="date" name="date_of_entry" id="date_of_entry" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Price / Ltr (Rs)</label>
                        <input type="number" step="0.01" name="rate_per_liter" id="rate_per_liter" class="form-control">
                    </div>
                  
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-success">Submit</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="historyModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title" id="historyModalTitle">Diesel Stock History</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="card p-3 mb-3">
                    <p><strong>Current Stock:</strong> <span class="text-success fw-bold" id="historyCurrentStock">Loading...</span></p>
                </div>

<h6 class="text-primary">Stock History</h6>
                <div id="loadingSpinner" class="text-center my-4 d-none">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                    <p class="mt-2">Loading history...</p>
                </div>
                <div id="historyMessage" class="alert alert-info text-center d-none"></div>
                <table class="table table-bordered table-striped">
                    <thead class="bg-success text-white">
                        <tr>
                            <th>Date</th>
                            <th>Previous Stock (Ltr)</th>
                            <th>Added Quantity (Ltr)</th>
                            <th>Consumed Quantity (Ltr)</th>
                            <th>Price / Ltr (Rs)</th>
                      
                        </tr>
                    </thead>
                    <tbody id="historyTableBody">
                        
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

const historyCurrentStock = document.getElementById('historyCurrentStock');
    const historyTableBody = document.getElementById('historyTableBody');
    const loadingSpinner = document.getElementById('loadingSpinner');
    const historyMessage = document.getElementById('historyMessage');

viewHistoryButtons.forEach(button => {
        button.addEventListener('click', async function () {
            const dieselId = encodeURIComponent(this.dataset.dieselId);

historyTableBody.innerHTML = '';
            historyMessage.classList.add('d-none');
            loadingSpinner.classList.remove('d-none');

historyCurrentStock.textContent = 'Loading...';

try {
                const dieselResponse = await fetch(`{{ route('diesel.details', ':id') }}`.replace(':id', dieselId));
                if (!dieselResponse.ok) throw new Error(`HTTP error! status: ${dieselResponse.status}`);
                const dieselData = await dieselResponse.json();

historyModalTitle.textContent = `Diesel Stock History`;
                historyCurrentStock.textContent = `${dieselData.diesel_stock} Ltr`;

loadingSpinner.classList.add('d-none');

if (historyRecords.length > 0) {
                historyRecords.forEach(record => {
                    const date = new Date(record.date_of_entry);
                    const formattedDate = `${String(date.getDate()).padStart(2, '0')}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getFullYear()).slice(2)}`;
            
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>${formattedDate}</td>
                        <td>${record.stock_before_addition || 'N/A'}</td>
                        <td>${record.added_quantity || 'N/A'}</td>
                        <td>${record.consumed_quantity || 'N/A'}</td>
                        <td>₹${record.rate_per_liter || 'N/A'}</td>
                    `;
                    historyTableBody.appendChild(row);
                });
            } else {
                historyMessage.textContent = 'No history found for this diesel stock.';
                historyMessage.classList.remove('d-none');
            }

} catch (error) {
                console.error('Error fetching diesel history:', error);
                loadingSpinner.classList.add('d-none');
                historyMessage.textContent = 'Failed to load history. Please try again.';
                historyMessage.classList.remove('d-none');
            } finally {
                historyModal.show();
            }
        });
    });

// Add/Edit Modal Form Handling
    const dieselForm = document.getElementById('dieselForm');
    dieselForm.addEventListener('submit', function (e) {
        const dieselId = document.getElementById('diesel_id').value;
        if (dieselId) {
            dieselForm.action = `{{ url('/diesels/update') }}/${dieselId}`;
            dieselForm.querySelector('input[name="_method"]').value = 'PUT';
        } else {
            dieselForm.action = '{{ route('diesels.store') }}';
            dieselForm.querySelector('input[name="_method"]')?.remove();
        }
    });

window.editDiesel = function (diesel) {
        document.getElementById('modalTitle').textContent = 'Edit Diesel';
        document.getElementById('diesel_id').value = diesel.id;
        document.getElementById('type').value = diesel.type;
        document.getElementById('diesel_stock').value = diesel.diesel_stock;
        document.getElementById('date_of_entry').value = diesel.date_of_entry;
        document.getElementById('rate_per_liter').value = diesel.rate_per_liter || '';
        document.getElementById('site_id').value = diesel.site_id;
    };

// Pagination and Search (Existing Logic)
    let currentPage = 1;
    let entriesPerPage = 10;

function changeEntriesPerPage() {
        entriesPerPage = parseInt(document.getElementById('entriesPerPage').value);
        currentPage = 1;
        updateTable();
    }

function searchTable() {
        const search = document.getElementById('searchInput').value.toLowerCase();
        const rows = document.querySelectorAll('#dieselTable tbody tr');
        rows.forEach(row => {
            const cells = row.querySelectorAll('td');
            const matches = Array.from(cells).some(cell => cell.textContent.toLowerCase().includes(search));
            row.style.display = matches ? '' : 'none';
        });
        updatePagination();
    }

function updatePagination() {
        const rows = document.querySelectorAll('#dieselTable tbody tr:not([style*="display: none"])');
        const totalPages = Math.ceil(rows.length / entriesPerPage);
        const pagination = document.getElementById('pagination');
        pagination.innerHTML = '';

if (totalPages <= 1) return;

for (let i = 1; i <= totalPages; i++) {
            const li = document.createElement('li');
            li.className = `page-item ${i === currentPage ? 'active' : ''}`;
            li.innerHTML = `<a class="page-link" href="#">${i}</a>`;
            li.onclick = () => { currentPage = i; updateTable(); };
            pagination.appendChild(li);
        }

updateTable();
});
</script>

@endsection