@php
    use Carbon\Carbon;
@endphp

@extends('layouts.root')

@section('styles')
<!-- Add your custom styles here -->
@endsection

@section('root-content')

<div class="dashboard-widg-bar d-block">

    <!-- Header Wrap -->
    <div class="row">
        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
            <div class="card">
                <div class="card-body">

                    <form method="POST" action="{{ route('root.manage_devis', ['id' => $devis_simple->id]) }}">

                        @csrf
                        @method('PUT')

                        <input type="hidden" name="user_id" value="{{ Auth::user()->id }}" />
                        <input type="hidden" name="prestataire_id" value="{{ Auth::user()->id }}" />

                        <div class="row justify-content-start gx-3 gy-4">

                            <!-- Devis Details -->
                            <div class="col-xl-12 col-lg-12 col-md-12">
                                <div class="d-flex justify-content-between border p-3">
                                    <h4>DEVIS - {{ $devis_simple->code }}</h4>
                                    <h4>
                                        <u>DATE :</u> {{ Carbon::parse($devis_simple->created_at)->locale('fr')->isoFormat('DD MMMM YYYY') }}
                                    </h4>
                                </div>
                            </div>

                            <!-- Client and Prestataire Info -->
                            <div class="col-xl-12 col-lg-12 col-md-12">
                                <div class="d-flex justify-content-between border p-3">
                                    <div>
                                        <h4>LE CLIENT</h4>
                                        <p><i class="fa-solid fa-shield me-1"></i>{{ $devis_simple->client->name ?? '' }}</p>
                                        <p><i class="fa-solid fa-phone me-1"></i>{{ $devis_simple->client->phone ?? '' }}</p>
                                        <p><i class="fa-solid fa-envelope me-1"></i>{{ $devis_simple->client->email ?? '' }}</p>
                                    </div>
                                    <div>
                                        <h4>LE PRESTATAIRE</h4>
                                        <p><i class="fa-solid fa-shield me-1"></i>{{ $devis_simple->user->name ?? '' }}</p>
                                        <p><i class="fa-solid fa-phone me-1"></i>{{ $devis_simple->user->phone ?? '' }}</p>
                                        <p><i class="fa-solid fa-envelope me-1"></i>{{ $devis_simple->user->email ?? '' }}</p>
                                    </div>
                                </div>
                            </div>

                            <!-- Demande Info -->
                            <div class="col-xl-12 col-lg-12 col-md-12">
                                <div class="border p-3">
                                    <h4>LA DEMANDE</h4>
                                    <p><strong>Secteur d'activité :</strong> {{ $devis_simple->demande->secteur->libelle ?? '' }}</p>
                                    <p><strong>Service :</strong> {{ $devis_simple->demande->service->libelle ?? '' }}</p>
                                    <p><strong>Prestation :</strong> {{ $devis_simple->demande->prestation->libelle ?? '' }}</p>
                                    <p><strong>Date prestation :</strong> {{ $devis_simple->demande->date_prestation ?? '' }}</p>
                                    <p><strong>Heure prestation :</strong> {{ $devis_simple->demande->heure_prestation ?? '' }}</p>
                                    <p><strong>Nombre de prestataires :</strong> {{ $devis_simple->demande->nbre_prestataires ?? '' }}</p>
                                </div>
                            </div>

                            <!-- Items Table -->
                            <div class="col-xl-12 col-lg-12 col-md-12">
                                <div class="table-responsive border p-3">
                                    <table class="table">
                                        <thead>
                                            <tr>
                                                <th class="text-center"><a class="btn btn-primary add-item"><i class="fa-solid fa-add"></i></a></th>
                                                <th>Libellé</th>
                                                <th>Description</th>
                                                <th>Qté</th>
                                                <th>P.U (en XAF)</th>
                                                <th>Sous Total</th>
                                                <th>Actions</th>
                                            </tr>
                                        </thead>
                                        <tbody id="items-table">
                                            @foreach($devis_items as $index => $item)
                                                <tr data-id="{{ $item->id }}">
                                                    <td class="text-center"><i class="bi bi-alexa"></i></td>
                                                    <td><input type="text" name="items[{{ $index }}][libelle]" class="form-control" value="{{ $item->libelle }}" required></td>
                                                    <td><input type="text" name="items[{{ $index }}][description]" class="form-control" value="{{ $item->description }}" required></td>
                                                    <td><input type="number" name="items[{{ $index }}][quantite]" class="form-control quantite" value="{{ $item->quantite }}" required></td>
                                                    <td><input type="number" step="0.01" name="items[{{ $index }}][prix_unitaire]" class="form-control prix_unitaire" value="{{ $item->prix_unitaire }}" required></td>
                                                    <td><input type="number" step="0.01" name="items[{{ $index }}][sous_total]" class="form-control sous_total" value="{{ $item->total_item }}" readonly></td>
                                                    <td><a class="btn btn-light-success delete-item"><i class="fa-solid fa-trash"></i></a></td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                            <!-- Totals -->
                            <div class="col-xl-12 col-lg-12 col-md-12">
                                <div class="table-responsive border p-3">
                                    <table class="table">
                                        <thead>
                                            <tr>
                                                <th>Sous Total</th>
                                                <th>Taxes</th>
                                                <th>Montant Total</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td><input type="number" step="0.01" name="sous_total" class="form-control sous_total_global" value="{{ $devis_simple->sous_total }}" readonly></td>
                                                <td><input type="number" step="0.01" name="taxes" class="form-control taxes" value="{{ $devis_simple->taxes }}"></td>
                                                <td><input type="number" step="0.01" name="montant_total" class="form-control montant_total" value="{{ $devis_simple->montant_total }}" readonly></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                            <!-- Notes -->
                            <div class="col-xl-12 col-lg-12 col-md-12">
                                <div class="border p-3">
                                    <h4>NOTES :</h4>
                                    <p>{!! $devis_simple->notes !!}</p>
                                </div>
                            </div>

                            <!-- Submit Button -->
                            <div class="col-xl-12 col-lg-12 col-md-12">
                                <button type="submit" class="btn btn-primary full-width btn-lg">Sauvegardez les Données</button>
                            </div>
                        </div>

                    </form>

                </div>
            </div>
        </div>
    </div>
    <!-- Header Wrap -->

</div>

@endsection

@section('scripts')
<script>
    $(document).ready(function() {
        // Fonction pour ajouter une ligne d'item
        function addItemRow(index) {
            return `
                <tr>
                    <td class="text-center"><i class="bi bi-alexa"></i></td>
                    <td><input type="text" name="items[${index}][libelle]" class="form-control" required></td>
                    <td><input type="text" name="items[${index}][description]" class="form-control" required></td>
                    <td><input type="number" name="items[${index}][quantite]" class="form-control quantite" value="1" required></td>
                    <td><input type="number" step="0.01" name="items[${index}][prix_unitaire]" class="form-control prix_unitaire" value="1.00" required></td>
                    <td><input type="number" step="0.01" name="items[${index}][sous_total]" class="form-control sous_total" value="1.00" readonly></td>
                    <td><a class="btn btn-light-success delete-item"><i class="fa-solid fa-trash"></i></a></td>
                </tr>
            `;
        }

        let index = {{ count($devis_items) }};
        $('.add-item').on('click', function() {
            $('#items-table').append(addItemRow(index));
            index++;
        });

        $(document).on('click', '.delete-item', function() {
            var row = $(this).closest('tr');
            var itemId = row.data('id');

            if (itemId) {
                // If the item is already saved in the database, make an AJAX call
                $.ajax({
                    url: '/root/devis/' + itemId + '/delete/items', // URL de l'endpoint de suppression
                    type: 'DELETE',
                    data: {
                        _token: '{{ csrf_token() }}', // Token CSRF pour la protection
                    },
                    success: function(response) {
                        // Remove the row and update totals
                        row.remove();

                        // Update the totals in the view
                        $('.sous_total_global').val(response.sous_total.toFixed(2));
                        $('.taxes').val(response.taxes.toFixed(2));
                        $('.montant_total').val(response.montant_total.toFixed(2));

                        // Display success message with SweetAlert
                        Swal.fire({
                            icon: 'success',
                            title: 'Succès',
                            text: response.message,
                        });
                    },
                    error: function(xhr) {
                        // Display error message with SweetAlert
                        Swal.fire({
                            icon: 'error',
                            title: 'Erreur',
                            text: 'Erreur lors de la suppression de l\'item.',
                        });
                    }
                });
            } else {
                // If the item is not saved in the database, just remove the row and update totals
                row.remove();
                updateTotals();

                // Optionally, display a success message with SweetAlert
                Swal.fire({
                    icon: 'success',
                    title: 'Succès',
                    text: 'L\'item a été supprimé.',
                });
            }
        });

        // Function to update totals
        function updateTotals() {
            let sousTotal = 0;
            $('#items-table tr').each(function() {
                let quantite = parseFloat($(this).find('.quantite').val()) || 0;
                let prixUnitaire = parseFloat($(this).find('.prix_unitaire').val()) || 0;
                let sousTotalItem = quantite * prixUnitaire;
                $(this).find('.sous_total').val(sousTotalItem.toFixed(2));
                sousTotal += sousTotalItem;
            });

            $('.sous_total_global').val(sousTotal.toFixed(2));
            let taxes = parseFloat($('.taxes').val()) || 0;
            let montantTotal = sousTotal + taxes;
            $('.montant_total').val(montantTotal.toFixed(2));
        }

        $(document).on('input', '.quantite, .prix_unitaire, .taxes', function() {
            updateTotals();
        });

    });
</script>
@endsection