@extends('layouts.app')
@section('content')

<div class="page-header">
    <div class="add-item d-flex">
        <div class="page-title">
            <h4>Mettre à jour le ravitaillement {{ $ravitaillement->reference }}</h4>
        </div>
    </div>
</div>
<div class="page-content">
    <div class="card-content">
        <div class="page-wrapper-new p-0">
            <div class="content">
                <div class="card-body">
                    <form id="update-ravitaillement-form" method="POST" action="{{ route('ravitaillements.update', $ravitaillement->id) }}">
                        @csrf
                        @method('PUT')

                        <div class="row">
                            <div class="col-lg-2 col-md-6 col-sm-12">
                                <div class="input-blocks">
                                    <label>Date de sortie</label>
                                    <input type="date" name="date_ravitaillement" class="form-control" value="{{ old('date_ravitaillement', $ravitaillement->date) }}" required>
                                </div>
                            </div>
                            <div class="col-lg-2 col-md-6 col-sm-12">
                                <div class="input-blocks">
                                    <label>Matricule de véhicule</label>
                                    <input type="text" class="form-control" name="matricule_vehicule" placeholder="Ex: AA-568-01" value="{{ old('matricule_vehicule', $ravitaillement->matricule_vehicule) }}" required>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-6 col-sm-12">
                                <div class="input-blocks">
                                    <label>Nom du chauffeur</label>
                                    <input type="text" class="form-control" name="nom_chauffeur" placeholder="Ex: KONE ADAMA" value="{{ old('nom_chauffeur', $ravitaillement->nom_chauffeur) }}" required>
                                </div>
                            </div>
                            <div class="col-lg-2 col-md-6 col-sm-12">
                                <div class="input-blocks">
                                    <label>Contact du chauffeur</label>
                                    <input type="tel" class="form-control" name="contact_chauffeur" placeholder="Ex: 25507XXXXXXXX" value="{{ old('contact_chauffeur', $ravitaillement->contact_chauffeur) }}" required>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-6 col-sm-12">
                                <div class="input-blocks">
                                    <label>Destination</label>
                                    <input type="text" class="form-control" name="destination" placeholder="Ex: Abidjan, Treichville" value="{{ old('destination', $ravitaillement->destination) }}" required>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-lg-12">
                                <div class="input-blocks">
                                    <label>Produit(s)</label>
                                    <input type="text" id="search-update" class="form-control" placeholder="Entrer le nom du produit ici">
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="modal-body-table">
                                    <div class="table-responsive">
                                        <table class="table">
                                            <thead>
                                                <tr>
                                                    <th>Nom</th>
                                                    <th>Prix</th>
                                                    <th>Quantité</th>
                                                    <th>Action</th>
                                                </tr>
                                            </thead>
                                            <tbody id="product-list"></tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>

                            <div class="col-lg-12">
                                <div class="table-responsive">
                                    <table class="table">
                                        <thead>
                                            <tr>
                                                <th>Nom</th>
                                                <th>Prix</th>
                                                <th>Quantité</th>
                                                <th>Montant</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody id="cart-update">
                                            @foreach($ravitaillement->details as $detail)
                                                <tr data-id="{{ $detail->product->id }}">
                                                    <td>{{ $detail->product->name }}</td>
                                                    <td>{{ $detail->price }} FCFA</td>
                                                    <td>
                                                        <input type="number" class="cart-qty form-control" name="products[{{ $detail->product->id }}][quantity]" value="{{ $detail->quantity }}" min="1" max="{{ $detail->product->quantity }}">
                                                    </td>
                                                    <td class="total-price">{{ $detail->quantity * $detail->price }} FCFA</td>
                                                    <td><button type="button" class="btn btn-danger remove-from-cart">X</button></td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                                <div class="d-flex justify-content-between mt-3">
                                    <span class="btn btn-secondary">Montant Total : <span id="total-price">0 FCFA</span></span>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-12">
                            <div class="modal-footer-btn">
                                <button type="submit" class="btn btn-submit">Mettre à jour</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div> 
</div>
<script src="{{ asset('assets/js/jquery-3.7.1.min.js') }}"></script>
<script>
    $(document).ready(function () {
        let cart = [];
        function updateTotal() {
            let total = 0;
            $('#cart-update tr').each(function () {
                let qty = parseInt($(this).find('.cart-qty').val()) || 0;
                let price = parseFloat($(this).find('.cart-qty').closest('tr').find('td:nth-child(2)').text()) || 0;
                let subtotal = qty * price;
                total += subtotal;
                $(this).find('.total-price').text(subtotal + " FCFA");
            });
            $('#total-price').text(total + " FCFA");
        }

        $('#search-update').on('keyup', function () {
            let query = $(this).val().trim();
            if (query.length > 2) {
                $.ajax({
                    url: "{{ route('sales.search.products') }}",
                    type: 'GET',
                    data: { query },
                    dataType: 'json',
                    success: function (products) {
                        $('#product-list').empty();
                        products.forEach(product => {
                            $('#product-list').append(`
                                <tr>
                                    <td>${product.name}</td>
                                    <td>${product.price} FCFA</td>
                                    <td>
                                        <input type="number" value="1" min="1" max="${product.quantity}" class="product-qty" data-id="${product.id}">
                                    </td>
                                    <td>
                                        <button type="button" class="btn btn-success add-product"
                                            data-id="${product.id}" 
                                            data-name="${product.name}" 
                                            data-price="${product.price}" 
                                            data-quantity="${product.quantity}">
                                            Ajouter
                                        </button>
                                    </td>
                                </tr>
                            `);
                        });
                    }
                });
            }
        });

        $(document).on('click', '.add-product', function (e) {
            e.preventDefault();
            let id = $(this).data('id');
            let name = $(this).data('name');
            let price = parseFloat($(this).data('price'));
            let stock = parseInt($(this).data('quantity'));

            let existingRow = $(`#cart-update tr[data-id='${id}']`);
            if (existingRow.length > 0) {
                let qtyInput = existingRow.find('.cart-qty');
                let newQty = parseInt(qtyInput.val()) + 1;
                if (newQty > stock) {
                    Swal.fire("Erreur", "Stock insuffisant", "error");
                    return;
                }
                qtyInput.val(newQty).trigger('change');
            } else {
                $('#cart-update').append(`
                    <tr data-id="${id}">
                        <td>${name}</td>
                        <td>${price} FCFA</td>
                        <td>
                            <input type="number" class="cart-qty form-control" value="1" min="1" max="${stock}" data-price="${price}">
                        </td>
                        <td class="total-price">${price} FCFA</td>
                        <td><button class="btn btn-danger remove-from-cart">X</button></td>
                    </tr>
                `);
            }
            updateCartData();
            updateTotal();
        });

        function updateCartData() {
            cart = [];
            $('#cart-update tr').each(function () {
                let id = $(this).data('id');
                let qty = parseInt($(this).find('.cart-qty').val());
                let price = parseFloat($(this).find('.cart-qty').closest('tr').find('td:nth-child(2)').text()) || 0;
                cart.push({ product_id: id, quantity: qty, price });
            });
        }
        $(document).on('change', '.cart-qty', function () {
            let qty = parseInt($(this).val());
            let max = parseInt($(this).attr('max'));

            if (qty > max) {
                $(this).val(max);
                Swal.fire("Erreur", "Quantité maximale atteinte", "error");
            }
            updateCartData();
            updateTotal();
        });

        $(document).on('click', '.remove-from-cart', function () {
            $(this).closest('tr').remove();
            updateCartData();
            updateTotal();
        });

        $("#update-ravitaillement-form").on("submit", function (event) {
            event.preventDefault();
            updateCartData();
            
            let totalAmount = parseFloat($("#total-price").text()) || 0;
            if (isNaN(totalAmount) || totalAmount <= 0) {
                Swal.fire("Erreur", "Le montant total est invalide.", "error");
                return;
            }
            let dateValue = $("input[name='date_ravitaillement']").val();
            if (!dateValue || new Date(dateValue).toString() === "Invalid Date") {
                Swal.fire("Erreur", "Veuillez entrer une date valide.", "error");
                return;
            }

            let formData = {
                montant_total: totalAmount,
                contact_chauffeur: $("input[name='contact_chauffeur']").val(),
                nom_chauffeur: $("input[name='nom_chauffeur']").val(),
                date_ravitaillement: dateValue,
                notes: $("textarea[name='notes']").val(),
                matricule_vehicule: $("input[name='matricule_vehicule']").val(),
                destination: $("input[name='destination']").val(),
                products: cart
            };

            //formData.push({ name: "montant_total", value: totalAmount });

            $(".btn-submit").prop("disabled", true);

            $.ajax({
                url: $(this).attr("action"),
                type: "PUT",
                headers: { "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content") },
                data: JSON.stringify(formData),
                contentType: "application/json",
                success: function () {
                    Swal.fire("Succès", "Ravitaillement mis à jour avec succès !", "success").then(() => {
                        location.reload();
                    });
                },
                error: function (xhr) {
                    $(".btn-submit").prop("disabled", false);
                    if (xhr.status === 422) {
                        let errors = xhr.responseJSON.errors;
                        let errorMessages = Object.values(errors).flat().map(msg => `• ${msg}`).join('<br>');
                        Swal.fire({ icon: "error", title: "Erreurs de validation", html: errorMessages });
                    } else if (xhr.responseJSON?.error) {
                        Swal.fire({ icon: "error", title: "Erreur", text: xhr.responseJSON.error });
                    } else {
                        Swal.fire("Erreur", "Une erreur est survenue lors du paiement", "error");
                    }
                }
                
            });
        });

        updateTotal();
    });
</script>

@endsection