@extends('layouts.app')

@section('title', 'Fleet Loading')

@section('content')
<div class="mb-4 d-flex justify-content-between align-items-center">
    <div>
        <h4 class="mb-0 fw-bold">Fleet Loading Operations</h4>
        <p class="text-muted small mb-0">Track and manage cargo distribution across your fleet.</p>
    </div>
    <button class="btn btn-primary shadow-sm btn-sm px-3" data-bs-toggle="modal" data-bs-target="#newLoadingModal">
        <i class="bi bi-plus-lg me-1"></i> New Loading Dispatch
    </button>
</div>

@if(session('success'))
    <div class="alert alert-success border-0 shadow-sm rounded-4 mb-4">
        <i class="bi bi-check-circle me-2"></i> {{ session('success') }}
    </div>
@endif

@if($errors->any())
    <div class="alert alert-danger border-0 shadow-sm rounded-4 mb-4">
        <ul class="mb-0">
            @foreach($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

<div class="row g-4 mb-4">
    <div class="col-lg-8">
        <div class="card border-0 shadow-sm rounded-4 overflow-hidden">
            <div class="card-header bg-transparent border-0 p-4">
                <h6 class="mb-0 fw-bold">Active Loadings</h6>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="bg-light">
                            <tr>
                                <th class="ps-4 border-0 py-3 text-uppercase small fw-bold text-muted">Vehicle</th>
                                <th class="border-0 py-3 text-uppercase small fw-bold text-muted">Product</th>
                                <th class="border-0 py-3 text-uppercase small fw-bold text-muted">Load Amount</th>
                                <th class="border-0 py-3 text-uppercase small fw-bold text-muted">Destination</th>
                                <th class="border-0 py-3 text-uppercase small fw-bold text-muted">Status</th>
                                <th class="border-0 py-3 text-uppercase small fw-bold text-muted text-end pe-4">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($loadings as $loading)
                            <tr>
                                <td class="ps-4">
                                    <strong>{{ $loading->fleet->vehicle_number }}</strong><br>
                                    <span class="text-muted small">{{ $loading->fleet->driver_name }}</span>
                                </td>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <div class="bg-primary-subtle p-2 rounded-3 me-2">
                                            <i class="bi bi-box-seam text-primary"></i>
                                        </div>
                                        <div>
                                            <span class="fw-bold">{{ $loading->product ? $loading->product->name : $loading->cargo_type }}</span><br>
                                            <small class="text-muted">{{ $loading->product ? $loading->product->sku : 'N/A' }}</small>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    @if($loading->load_type == 'weight')
                                        {{ number_format($loading->weight, 2) }} <span class="text-muted small">Tons</span>
                                    @else
                                        {{ number_format($loading->quantity, 0) }} <span class="text-muted small">Units</span>
                                    @endif
                                </td>
                                <td>{{ $loading->destination }}</td>
                                <td>
                                    <span class="badge bg-{{ $loading->status == 'Completed' ? 'success' : ($loading->status == 'In Transit' ? 'primary' : 'warning') }}-subtle text-{{ $loading->status == 'Completed' ? 'success' : ($loading->status == 'In Transit' ? 'primary' : 'warning') }} rounded-pill px-3">
                                        {{ $loading->status }}
                                    </span>
                                </td>
                                <td class="text-end pe-4">
                                    <div class="d-flex gap-2 justify-content-end">
                                        <button class="btn btn-light btn-sm rounded-3" data-bs-toggle="modal" data-bs-target="#editLoadingModal{{ $loading->id }}">
                                            <i class="bi bi-pencil"></i>
                                        </button>
                                        <form action="{{ route('fleet.loading.destroy', $loading->id) }}" method="POST" onsubmit="return confirm('Delete this dispatch? Stock will be restored.')">
                                            @csrf
                                            @method('DELETE')
                                            <button class="btn btn-light btn-sm rounded-3 text-danger"><i class="bi bi-trash"></i></button>
                                        </form>
                                    </div>

                                    <!-- Edit Loading Modal -->
                                    <div class="modal fade text-start" id="editLoadingModal{{ $loading->id }}" tabindex="-1">
                                        <div class="modal-dialog modal-dialog-centered">
                                            <div class="modal-content border-0 shadow-lg rounded-4">
                                                <form action="{{ route('fleet.loading.update', $loading->id) }}" method="POST">
                                                    @csrf
                                                    @method('PUT')
                                                    <div class="modal-header border-0 p-4">
                                                        <h5 class="fw-bold mb-0">Edit Loading Dispatch</h5>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                                    </div>
                                                    <div class="modal-body p-4 pt-0">
                                                        <div class="mb-3">
                                                            <label class="form-label small fw-bold">Select Vehicle</label>
                                                            <select name="fleet_id" class="form-select rounded-3" required>
                                                                @foreach($fleets as $f)
                                                                    <option value="{{ $f->id }}" {{ $loading->fleet_id == $f->id ? 'selected' : '' }}>{{ $f->vehicle_number }} ({{ $f->driver_name }})</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                        <div class="mb-3">
                                                            <label class="form-label small fw-bold">Product to Load</label>
                                                            <select name="product_id" class="form-select rounded-3 product-select-edit" required 
                                                                data-current-amount="{{ $loading->load_type == 'weight' ? $loading->weight : $loading->quantity }}"
                                                                data-current-type="{{ $loading->load_type }}">
                                                                @foreach($products as $product)
                                                                    @php
                                                                        $currentVal = ($loading->product_id == $product->id) ? ($loading->load_type == 'weight' ? $loading->weight : $loading->quantity) : 0;
                                                                        $availStock = $product->totalStock() + $currentVal;
                                                                    @endphp
                                                                    <option value="{{ $product->id }}" 
                                                                        data-stock="{{ $availStock }}"
                                                                        {{ $loading->product_id == $product->id ? 'selected' : '' }}>
                                                                        {{ $product->name }} (Available: {{ number_format($availStock, 2) }})
                                                                    </option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                        <div class="mb-3">
                                                            <label class="form-label small fw-bold d-block">Load Type</label>
                                                            <div class="btn-group w-100" role="group">
                                                                <input type="radio" class="btn-check load-type-toggle-edit" name="load_type" id="typeWeightEdit{{ $loading->id }}" value="weight" {{ $loading->load_type == 'weight' ? 'checked' : '' }}>
                                                                <label class="btn btn-outline-primary rounded-start-3" for="typeWeightEdit{{ $loading->id }}">Weight (Tons)</label>

                                                                <input type="radio" class="btn-check load-type-toggle-edit" name="load_type" id="typeQuantityEdit{{ $loading->id }}" value="quantity" {{ $loading->load_type == 'quantity' ? 'checked' : '' }}>
                                                                <label class="btn btn-outline-primary rounded-end-3" for="typeQuantityEdit{{ $loading->id }}">Quantity (Units)</label>
                                                            </div>
                                                        </div>
                                                        <div class="row g-3 mb-3">
                                                            <div class="col-md-6">
                                                                <label class="form-label small fw-bold">Load Date</label>
                                                                <input type="datetime-local" name="load_date" class="form-control rounded-3" value="{{ \Carbon\Carbon::parse($loading->load_date)->format('Y-m-d\TH:i') }}" required>
                                                            </div>
                                                            <div class="col-md-6">
                                                                <label class="form-label small fw-bold">Status</label>
                                                                <select name="status" class="form-select rounded-3" required>
                                                                    <option value="Pending" {{ $loading->status == 'Pending' ? 'selected' : '' }}>Pending</option>
                                                                    <option value="Loading" {{ $loading->status == 'Loading' ? 'selected' : '' }}>Loading</option>
                                                                    <option value="In Transit" {{ $loading->status == 'In Transit' ? 'selected' : '' }}>In Transit</option>
                                                                    <option value="Completed" {{ $loading->status == 'Completed' ? 'selected' : '' }}>Completed</option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <div class="mb-3">
                                                            <label class="form-label small fw-bold label-amount-edit">
                                                                {{ $loading->load_type == 'weight' ? 'Weight to Load (Tons)' : 'Quantity to Load (Units)' }}
                                                            </label>
                                                            <div class="weight-input-container-edit {{ $loading->load_type == 'weight' ? '' : 'd-none' }}">
                                                                <input type="number" step="0.01" name="weight" class="form-control rounded-3 input-weight-edit" value="{{ $loading->weight }}" {{ $loading->load_type == 'weight' ? 'required' : '' }}>
                                                            </div>
                                                            <div class="quantity-input-container-edit {{ $loading->load_type == 'quantity' ? '' : 'd-none' }}">
                                                                <input type="number" step="1" name="quantity" class="form-control rounded-3 input-quantity-edit" value="{{ $loading->quantity }}" {{ $loading->load_type == 'quantity' ? 'required' : '' }}>
                                                            </div>
                                                            <div class="text-danger small mt-1 d-none stock-warning-edit">
                                                                <i class="bi bi-exclamation-triangle-fill"></i> Warning: Insufficient stock.
                                                            </div>
                                                        </div>
                                                        <div class="mb-0">
                                                            <label class="form-label small fw-bold">Destination</label>
                                                            <input type="text" name="destination" class="form-control rounded-3" value="{{ $loading->destination }}" required>
                                                        </div>
                                                    </div>
                                                    <div class="modal-footer border-0 p-4 pt-0">
                                                        <button type="button" class="btn btn-light rounded-3 px-4" data-bs-dismiss="modal">Cancel</button>
                                                        <button type="submit" class="btn btn-primary rounded-3 px-4 submit-btn-edit">Save & Adjust Stock</button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="6" class="py-5 text-center text-muted small">No active loading dispatches.</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="card border-0 shadow-sm rounded-4 p-4 h-100 bg-primary text-white position-relative overflow-hidden">
            <div class="position-absolute top-0 end-0 p-3 opacity-25">
                <i class="bi bi-truck-flatbed fs-1"></i>
            </div>
            <h6 class="fw-bold opacity-75 text-uppercase small">Daily Dispatch Summary</h6>
            <h2 class="display-5 fw-800 my-3">{{ number_format($loadings->where('load_type', 'weight')->sum('weight'), 2) }} <small class="fs-6">Tons</small></h2>
            <p class="small mb-0">Total volume dispatched (Weight base).</p>
            <div class="mt-4 pt-4 border-top border-white border-opacity-25">
                <div class="d-flex justify-content-between small mb-2">
                    <span>Unit Dispatches</span>
                    <span>{{ number_format($loadings->where('load_type', 'quantity')->sum('quantity'), 0) }} Units</span>
                </div>
                <div class="progress bg-white bg-opacity-25" style="height: 6px;">
                    <div class="progress-bar bg-white" style="width: 100%"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- New Loading Modal -->
<div class="modal fade" id="newLoadingModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg rounded-4">
            <form action="{{ route('fleet.loading.store') }}" method="POST">
                @csrf
                <div class="modal-header border-0 p-4">
                    <h5 class="fw-bold mb-0">New Loading Dispatch</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body p-4 pt-0">
                    <div class="mb-3">
                        <label class="form-label small fw-bold">Select Vehicle</label>
                        <select name="fleet_id" class="form-select rounded-3" required>
                            <option value="" disabled selected>Choose a vehicle...</option>
                            @foreach($fleets as $fleet)
                                <option value="{{ $fleet->id }}">{{ $fleet->vehicle_number }} ({{ $fleet->driver_name }})</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label small fw-bold">Select Product to Load</label>
                        <select name="product_id" id="productSelect" class="form-select rounded-3" required>
                            <option value="" disabled selected>Choose a product...</option>
                            @foreach($products as $product)
                                <option value="{{ $product->id }}" data-stock="{{ $product->totalStock() }}">
                                    {{ $product->name }} (Available: {{ number_format($product->totalStock(), 2) }})
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label small fw-bold d-block">Load Type</label>
                        <div class="btn-group w-100" role="group">
                            <input type="radio" class="btn-check" name="load_type" id="typeWeight" value="weight" checked>
                            <label class="btn btn-outline-primary rounded-start-3" for="typeWeight">Weight (Tons)</label>

                            <input type="radio" class="btn-check" name="load_type" id="typeQuantity" value="quantity">
                            <label class="btn btn-outline-primary rounded-end-3" for="typeQuantity">Quantity (Units)</label>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label small fw-bold">Load Date</label>
                        <input type="datetime-local" name="load_date" class="form-control rounded-3" value="{{ date('Y-m-d\TH:i') }}" required>
                    </div>
                    <div class="row g-3 mb-3">
                        <div class="col-md-6" id="weightInputContainer">
                            <label class="form-label small fw-bold">Weight to Load (Tons)</label>
                            <input type="number" step="0.01" name="weight" id="loadWeight" class="form-control rounded-3" placeholder="0.00" required>
                        </div>
                        <div class="col-md-6 d-none" id="quantityInputContainer">
                            <label class="form-label small fw-bold">Quantity to Load (Units)</label>
                            <input type="number" step="1" name="quantity" id="loadQuantity" class="form-control rounded-3" placeholder="0">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small fw-bold">Destination</label>
                            <input type="text" name="destination" class="form-control rounded-3" placeholder="Final destination" required>
                        </div>
                    </div>
                    <div id="stockWarning" class="text-danger small mt-1 d-none">
                        <i class="bi bi-exclamation-triangle-fill"></i> Warning: Insufficient stock for selected product.
                    </div>
                </div>
                <div class="modal-footer border-0 p-4 pt-0">
                    <button type="button" class="btn btn-light rounded-3 px-4" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary rounded-3 px-4" id="submitDispatch">Dispatch & Deduct Stock</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // New Modal UI Logic
    const typeWeight = document.getElementById('typeWeight');
    const typeQuantity = document.getElementById('typeQuantity');
    const weightContainer = document.getElementById('weightInputContainer');
    const qunatityContainer = document.getElementById('quantityInputContainer');
    const weightInput = document.getElementById('loadWeight');
    const quantityInput = document.getElementById('loadQuantity');

    function toggleLoadType() {
        if (typeWeight.checked) {
            weightContainer.classList.remove('d-none');
            qunatityContainer.classList.add('d-none');
            weightInput.required = true;
            quantityInput.required = false;
        } else {
            weightContainer.classList.add('d-none');
            qunatityContainer.classList.remove('d-none');
            weightInput.required = false;
            quantityInput.required = true;
        }
        checkStock();
    }

    typeWeight?.addEventListener('change', toggleLoadType);
    typeQuantity?.addEventListener('change', toggleLoadType);

    // New Modal Stock Validation
    const productSelect = document.getElementById('productSelect');
    const stockWarning = document.getElementById('stockWarning');
    const submitBtn = document.getElementById('submitDispatch');

    function checkStock() {
        if (!productSelect.value) {
            submitBtn.disabled = true;
            return;
        }
        const selectedOption = productSelect.options[productSelect.selectedIndex];
        const availableStock = parseFloat(selectedOption.getAttribute('data-stock'));
        const targetValue = typeWeight.checked ? parseFloat(weightInput.value) : parseFloat(quantityInput.value);

        if (availableStock <= 0) {
            stockWarning.textContent = '❌ Error: This product is out of stock.';
            stockWarning.classList.remove('d-none');
            submitBtn.disabled = true;
        } else if (targetValue > availableStock) {
            stockWarning.textContent = '⚠️ Warning: Insufficient stock for selected product.';
            stockWarning.classList.remove('d-none');
            submitBtn.disabled = true;
        } else {
            stockWarning.classList.add('d-none');
            submitBtn.disabled = false;
        }
    }

    productSelect?.addEventListener('change', checkStock);
    weightInput?.addEventListener('input', checkStock);
    quantityInput?.addEventListener('input', checkStock);

    // Edit Modal UI & Validation
    document.querySelectorAll('.modal').forEach(modal => {
        const toggles = modal.querySelectorAll('.load-type-toggle-edit');
        if (toggles.length === 0) return;

        const weightCont = modal.querySelector('.weight-input-container-edit');
        const quantCont = modal.querySelector('.quantity-input-container-edit');
        const label = modal.querySelector('.label-amount-edit');
        const wInput = modal.querySelector('.input-weight-edit');
        const qInput = modal.querySelector('.input-quantity-edit');
        const prodSelect = modal.querySelector('.product-select-edit');
        const warning = modal.querySelector('.stock-warning-edit');
        const subBtn = modal.querySelector('.submit-btn-edit');

        function updateEditUI() {
            const isWeight = modal.querySelector('input[name="load_type"]:checked').value === 'weight';
            
            if (isWeight) {
                weightCont.classList.remove('d-none');
                quantCont.classList.add('d-none');
                label.textContent = 'Weight to Load (Tons)';
                wInput.required = true;
                qInput.required = false;
            } else {
                weightCont.classList.add('d-none');
                quantCont.classList.remove('d-none');
                label.textContent = 'Quantity to Load (Units)';
                wInput.required = false;
                qInput.required = true;
            }
            checkStockEdit();
        }

        function checkStockEdit() {
            if (!prodSelect.value) return;
            const selectedOpt = prodSelect.options[prodSelect.selectedIndex];
            const availableStock = parseFloat(selectedOpt.getAttribute('data-stock'));
            const isWeight = modal.querySelector('input[name="load_type"]:checked').value === 'weight';
            const targetValue = isWeight ? parseFloat(wInput.value) : parseFloat(qInput.value);

            if (availableStock <= 0) {
                warning.textContent = '❌ Error: This product is out of stock.';
                warning.classList.remove('d-none');
                subBtn.disabled = true;
            } else if (targetValue > availableStock) {
                warning.textContent = '⚠️ Warning: Insufficient stock.';
                warning.classList.remove('d-none');
                subBtn.disabled = true;
            } else {
                warning.classList.add('d-none');
                subBtn.disabled = false;
            }
        }

        toggles.forEach(t => t.addEventListener('change', updateEditUI));
        prodSelect?.addEventListener('change', checkStockEdit);
        wInput?.addEventListener('input', checkStockEdit);
        qInput?.addEventListener('input', checkStockEdit);
    });
});
</script>
@endsection