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

<div class="page-header">
    <div class="add-item d-flex">
        <div class="page-title">
            <h4>Mettre à jour la commande {{ $purchase->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-purchase-form" method="POST" action="{{ route('purchases.update', $purchase->id) }}">
                        @csrf
                        @method('PUT')

                       <div class="row">
                        @if(Auth::user()->role->name == 'Administrateur')
                            @if($magasins->count() > 1)
                            <div class="col-lg-6 col-sm-6 col-12">
                                <label class="form-label">Magasin</label>
                                <select class="form-control" name="magasin_id">
                                    <option value="">Choisir</option>
                                    @foreach($magasins as $magasin)
                                        <option value="{{ $magasin->id }}" {{ $purchase->magasin_id == $magasin->id ? 'selected' : '' }}>{{ $magasin->name }}</option>
                                    @endforeach
                                </select>
                                @error('magasin_id')<span class="text-danger">{{ $message }}</span>@enderror
                            </div>
                            @else
                            <input type="hidden" name="magasin_id" value="{{ $purchase->magasin_id ?? $magasins->first()->id ?? '' }}">
                            @endif
                            @endif
                            @if(Auth::user()->role->name !== 'Administrateur')
                            <div class="col-lg-6 col-sm-6 col-12">
                                <label class="form-label">Magasin</label>
                                <input type="text" name="magasin_id" class="form-control" value="{{ Auth::user()->magasin->name ?? '' }}" disabled>
                            </div>
                            @endif
                            <div class="col-lg-6 col-sm-6 col-12">
                                <label class="form-label">Fournisseur</label>
                                <select class="form-control" name="fournisseur_id">
                                    <option value="">Choisir</option>
                                    @foreach($fournisseurs as $fournisseur)
                                        <option value="{{ $fournisseur->id }}" {{ $purchase->fournisseur_id == $fournisseur->id ? 'selected' : '' }}>{{ $fournisseur->name }}</option>
                                    @endforeach
                                </select>
                                @error('fournisseur_id')<span class="text-danger">{{ $message }}</span>@enderror
                            </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($purchase->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-purchase-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 formData = {
                montant_total: totalAmount,
                magasin_id: $("select[name='magasin_id']").val(),
                notes: $("textarea[name='notes']").val(),
                fournisseur_id: $("select[name='fournisseur_id']").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", "purchase 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