000

@extends('layouts.app')

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

@section('content')

@php
$fields = [
    'chemical_name' => 'Chemical Name',
    'chemical_type' => 'Chemical Type',
    'brand_name' => 'Brand Name',
    'supplier_name' => 'Supplier Name',
    'uom' => 'UOM',
];
@endphp

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

table thead {
    background-color: #6b8e23;
    color: white;
}

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

table tfoot {
    background-color: #e9ecef;
    font-weight: bold;
}

.form-label {
    font-weight: 500;
}

.filter-section {
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
}
</style>

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

@if(Auth::check() && Auth::user()->role == 1)
<div class="filter-section">
    <form method="GET" action="{{ route('chemicals.index') }}">
        <div class="row align-items-end">
            <div class="col-md-4">
                <label class="form-label">Filter by Site</label>
                <select name="site_id" class="form-select">
                    <option value="">-- All Sites --</option>
                    @foreach($sites as $site)
                    <option value="{{ $site->id }}" {{ request('site_id') == $site->id ? 'selected' : '' }}>
                        {{ $site->site_name }}
                    </option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-4">
                <input type="text" name="search" class="form-control" placeholder="Search..." value="{{ request('search') }}">
            </div>
            <div class="col-md-4">
                <button class="btn btn-primary" type="submit">
                    <i class="fas fa-filter"></i> Filter
                </button>
                <a href="{{ route('chemicals.index') }}" class="btn btn-secondary">
                    <i class="fas fa-refresh"></i> Reset
                </a>
            </div>
        </div>
    </form>
</div>
@endif

<div class="d-flex justify-content-between align-items-center mt-4">
    @if(Auth::check() && Auth::user()->role != 1)
    <button class="btn-add" data-bs-toggle="modal" data-bs-target="#addChemicalModal">
        <i class="fas fa-plus"></i> Add Chemical
    </button>
    @endif

@if(Auth::check() && Auth::user()->role != 1)
    <form method="GET" action="{{ route('chemicals.index') }}" class="input-group shadow-sm rounded-pill w-25">
        <input type="text" name="search" class="form-control border-0" placeholder="Search..." value="{{ request('search') }}">
        <button class="btn btn-light border-0" type="submit">
            <i class="fas fa-search text-secondary"></i>
        </button>
    </form>
    @endif
</div>

<div class="table-responsive mt-4">
    <table class="table table-bordered text-center align-middle">
        <thead>
            <tr>
                <th>Sr.No.</th>
                @if(Auth::check() && Auth::user()->role == 1)
                <th>Location</th>
                @endif
                <th>Chemical Name</th>
                <th>Type</th>
                <th>Brand</th>
                <th>Stock</th>
                <th>UOM</th>
                <th>Purchase Date</th>
                <th>Expiry</th>
                <th>Supplier</th>
                <th>Chemical Price (Rs)</th>
                <th>Amount (Rs)</th>
                @if(Auth::check() && Auth::user()->role != 1)
                <th>Actions</th>
                @endif
            </tr>
        </thead>
        <tbody>
            @forelse ($paginatedChemicals as $index => $chemical)
            <tr>
                <td>{{ $index + 1 }}</td>
                @if(Auth::check() && Auth::user()->role == 1)
                <td>{{ $chemical->site_name }}</td>
                @endif
                <td>{{ $chemical->chemical_name }}</td>
                <td>{{ $chemical->chemical_type }}</td>
                <td>{{ $chemical->brand_name }}</td>
                <td>{{ $chemical->stock_qty }}</td>
                <td>{{ $chemical->uom }}</td>
                <td>{{ \Carbon\Carbon::parse($chemical->purchase_date)->format('d-m-Y') }}</td>
                <td>{{ \Carbon\Carbon::parse($chemical->expiry_date)->format('d-m-Y') }}</td>
                <td>{{ $chemical->supplier_name }}</td>
                <td>{{ $chemical->rate }}</td>
                <td>{{ number_format($chemical->calculated_amount, 2) }}</td>
                @if(Auth::check() && Auth::user()->role != 1)
                <td class="d-flex justify-content-center gap-2">
                    <button class="btn btn-sm" style="background-color: #FFD700; color: black;" data-bs-toggle="modal" data-bs-target="#editChemicalModal{{ $chemical->id }}">
                        <i class="fas fa-edit"></i>
                    </button>
                    <button class="btn btn-sm btn-success" data-bs-toggle="modal" data-bs-target="#addStockModal{{ $chemical->id }}">
                        <i class="fas fa-plus"></i>
                    </button>
                    <button class="btn btn-info btn-sm view-history-btn" data-chemical-id="{{ $chemical->id }}" data-bs-toggle="modal" data-bs-target="#historyModal">
                        <i class="fas fa-history"></i> View History
                    </button>
                    <form action="{{ route('chemicals.destroy', $chemical->id) }}" method="POST">
                        @csrf
                        @method('DELETE')
                        <button onclick="return confirm('Are you sure?')" class="btn btn-sm btn-danger">
                            <i class="fas fa-trash-alt"></i>
                        </button>
                    </form>
                </td>
                @endif
            </tr>
            @empty
            <tr>
                <td colspan="{{ Auth::check() && Auth::user()->role == 1 ? '13' : '12' }}">No chemicals found.</td>
            </tr>
            @endforelse
        </tbody>
        <tfoot>
            <tr>
                @if(Auth::check() && Auth::user()->role == 1)
                <td colspan="5">Total</td>
                @else
                <td colspan="4">Total</td>
                @endif
                <td>{{ $paginatedChemicals->sum('stock_qty') }}</td>
                <td></td>
                <td colspan="3"></td>
                <td></td>
                <td>{{ number_format($paginatedChemicals->sum('calculated_amount'), 2) }}</td>
                @if(Auth::check() && Auth::user()->role != 1)
                <td></td>
                @endif
            </tr>
        </tfoot>
    </table>
</div>

<div class="d-flex justify-content-center">
    {{ $paginatedChemicals->appends(request()->query())->links('pagination::bootstrap-5') }}
</div>

@if(Auth::check() && Auth::user()->role != 1)
<div class="modal fade" id="addChemicalModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form action="{{ route('chemicals.store') }}" method="POST">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title">Add Chemical</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="row g-3">
                        @if(Auth::user()->role == 1)
                        <div class="col-md-4">
                            <label class="form-label">Location</label>
                            <select name="site_id" class="form-select" required>
                                <option value="">-- Select Site --</option>
                                @foreach($sites as $site)
                                <option value="{{ $site->id }}">{{ $site->site_name }}</option>
                                @endforeach
                            </select>
                        </div>
                        @else
                        <div class="col-md-4">
                            <label class="form-label">Location</label>
                            @php
                            $userSite = $sites->where('id', Auth::user()->site_id)->first();
                            @endphp
                            <input type="text" class="form-control" value="{{ $userSite ? $userSite->site_name : 'N/A' }}" readonly>
                            <input type="hidden" name="site_id" value="{{ Auth::user()->site_id }}">
                        </div>
                        @endif

@foreach($fields as $field => $label)
                        <div class="col-md-4">
                            <label class="form-label">{{ $label }}</label>
                            <input type="text" class="form-control" name="{{ $field }}" required>
                        </div>
                        @endforeach
                        <div class="col-md-6">
                            <label class="form-label">Purchase Date</label>
                            <input type="date" class="form-control" name="purchase_date" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Expiry Date</label>
                            <input type="date" class="form-control" name="expiry_date" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Rate (Rs)</label>
                            <input type="number" class="form-control" name="rate" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Stock</label>
                            <input type="number" class="form-control" name="stock_qty" step="0.01" required>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn-add">Add Chemical</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endif

@if(Auth::check() && Auth::user()->role != 1)
@foreach($paginatedChemicals as $chemical)
<div class="modal fade" id="editChemicalModal{{ $chemical->id }}" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form action="{{ route('chemicals.update', $chemical->id) }}" method="POST">
                @csrf
                @method('PUT')
                <div class="modal-header">
                    <h5 class="modal-title">Edit Chemical</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="row g-3">
                        @if(Auth::user()->role == 1)
                        <div class="col-md-4">
                            <label class="form-label">Location</label>
                            <select name="site_id" class="form-select" required>
                                <option value="">-- Select Site --</option>
                                @foreach($sites as $site)
                                <option value="{{ $site->id }}" {{ $chemical->site_id == $site->id ? 'selected' : '' }}>{{ $site->site_name }}</option>
                                @endforeach
                            </select>
                        </div>
                        @else
                        <div class="col-md-4">
                            <label class="form-label">Location</label>
                            @php
                            $userSite = $sites->where('id', Auth::user()->site_id)->first();
                            @endphp
                            <input type="text" class="form-control" value="{{ $userSite ? $userSite->site_name : 'N/A' }}" readonly>
                            <input type="hidden" name="site_id" value="{{ Auth::user()->site_id }}">
                        </div>
                        @endif

@foreach($fields as $field => $label)
                        <div class="col-md-4">
                            <label class="form-label">{{ $label }}</label>
                            <input type="text" class="form-control" name="{{ $field }}" value="{{ $chemical->$field }}" required>
                        </div>
                        @endforeach
                        <div class="col-md-6">
                            <label class="form-label">Purchase Date</label>
                            <input type="date" class="form-control" name="purchase_date" value="{{ $chemical->purchase_date }}" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Expiry Date</label>
                            <input type="date" class="form-control" name="expiry_date" value="{{ $chemical->expiry_date }}" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Rate (Rs)</label>
                            <input type="number" class="form-control" name="rate" value="{{ $chemical->rate }}" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Current Stock</label>
                            <input type="number" class="form-control" name="stock_qty" value="{{ $chemical->stock_qty }}" readonly>
                            <small class="text-muted">Managed separately</small>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success w-100">Update Chemical</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="addStockModal{{ $chemical->id }}" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form action="{{ route('chemicals.addStock', $chemical->id) }}" method="POST">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title">Add Stock for {{ $chemical->chemical_name }}</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 </label>
                        <input type="number" class="form-control" value="{{ $chemical->stock_qty }}" readonly>
                        <small class="text-muted">This is the current stock before adding.</small>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Added Quantity</label>
                        <input type="number" step="0.01" name="quantity_to_add" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">New Price (Rs)</label>
                        <input type="number" step="0.01" name="new_rate" class="form-control">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Location</label>
                        <input type="text" name="storage_location" 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>
@endforeach
@endif

<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">Chemical 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">
                    <h6 id="historyChemicalName"><strong>Chemical Name:</strong> Loading...</h6>
                    <p id="historyChemicalDetails"><strong>Type:</strong> Loading... | <strong>Brand:</strong> Loading...</p>
                    <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 Chemical Stock</th>
                            <th>Added Quantity</th>
                            <th>New Price (Rs)</th>
                            <th>Location</th>
                        </tr>
                    </thead>
                    <tbody id="historyTableBody">
                        
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

// Function to format date as DD-MM-YY
    function formatDateDDMMYY(dateStr) {
        const dateObj = new Date(dateStr);
        const day = String(dateObj.getDate()).padStart(2, '0');
        const month = String(dateObj.getMonth() + 1).padStart(2, '0');
        const year = String(dateObj.getFullYear()).slice(-2);
        return `${day}-${month}-${year}`;
    }

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

// Clear previous data and show loading spinner
            historyTableBody.innerHTML = '';
            historyMessage.classList.add('d-none');
            loadingSpinner.classList.remove('d-none');

// Reset header info
            historyModalTitle.textContent = 'Chemical Stock History';
            historyChemicalName.innerHTML = '<strong>Chemical Name:</strong> Loading...';
            historyChemicalDetails.innerHTML = '<strong>Type:</strong> Loading... | <strong>Brand:</strong> Loading...';
            historyCurrentStock.textContent = 'Loading...';

try {
                // Fetch chemical details
                const chemicalResponse = await fetch(`/api/chemicals/${chemicalId}`);
                if (!chemicalResponse.ok) throw new Error(`HTTP error! status: ${chemicalResponse.status}`);
                const chemicalData = await chemicalResponse.json();

// Populate chemical details
                historyModalTitle.textContent = `Chemical Stock History for ${chemicalData.chemical_name}`;
                historyChemicalName.innerHTML = `<strong>Chemical Name:</strong> ${chemicalData.chemical_name}`;
                historyChemicalDetails.innerHTML = `<strong>Type:</strong> ${chemicalData.chemical_type} | <strong>Brand:</strong> ${chemicalData.brand_name}`;
                historyCurrentStock.textContent = `${chemicalData.stock_qty}`;

// Fetch history records
                const historyResponse = await fetch(`/api/chemicals/${chemicalId}/history`);
                if (!historyResponse.ok) throw new Error(`HTTP error! status: ${historyResponse.status}`);
                const historyRecords = await historyResponse.json();

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

if (historyRecords.length > 0) {
                    historyRecords.forEach(record => {
                        const row = document.createElement('tr');
                        row.innerHTML = `
                            <td>${formatDateDDMMYY(record.created_at)}</td>
                            <td>${record.stock_before_addition ?? 'N/A'}</td>
                            <td>${record.added_quantity ?? 'N/A'}</td>
                            <td>${record.rate ?? 'N/A'}</td>
                            <td>${record.storage_location ?? 'N/A'}</td>
                        `;
                        historyTableBody.appendChild(row);
                    });
                } else {
                    historyMessage.textContent = 'No history found for this chemical.';
                    historyMessage.classList.remove('d-none');
                }

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

@endsection