@extends('layout')

@inject('carbon', 'Carbon\Carbon')

@section('content')
    <div class="page-header page-header-light">
        <div class="page-header-content header-elements-md-inline">
            <div class="page-title d-flex">
                <h4><i class="icon-list mr-2"></i> <span
                        class="font-weight-semibold">
                        Liste des bons d'entrée
                    </span>
                </h4>
            </div>
        </div>
    </div>

    <div class="content">

        @if(session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        @endif
        @if (session('error'))
            <div class="alert alert-danger">
                {{ session('error') }}
            </div>
        @endif

        <div class="table-responsive">
            <table class="table table-bordered table-hover font-size-sm">
                <thead>
                <tr>
                    <th>Numéro de Bon</th>
                    <th>Articles Totals</th>
                    <th>Quantité Totale</th>
                    <th>Poids Total (kg)</th>
                    <th>Modifier par</th>
                    <th>Date de création</th>
                    <th>Actions</th>
                </tr>
                </thead>
                <tbody>
                @foreach ($movements as $movement)
                    <tr>
                        <td>{{ $movement->document_number }}</td>
                        <td>{{ $movement->total_items }}</td>
                        <td>{{ $movement->total_quantity }}</td>
                        <td>{{ number_format($movement->total_weight, 2) }}</td>
                        <td>{{ $movement?->getUser()?->name }}</td>
                        <td>{{ $carbon::create($movement->formatted_created_at)->format('d/m/Y') }}</td>
                        <td>
                            <a href="{{ route('laundry.pdf', ['id' => $movement->document_number]) }}" target="_blank" class="btn btn-danger btn-sm">
                                <i class="icon-file-pdf"></i> Télécharger PDF
                            </a>
                            <button
                                class="btn {{ $movement->is_valid ? 'btn-success' : 'btn-info' }} btn-sm"
                                data-toggle="modal"
                                data-target="#detailsModal"
                                data-id="{{ $movement->document_number }}">
                                <i class="icon-eye"></i> Détails
                            </button>
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="detailsModal" tabindex="-1" role="dialog" aria-labelledby="detailsModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <h2 class="modal-title text-center" id="detailsModalLabel">Bon d'entrée</h2>
                <div class="modal-body">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function () {
            $('#detailsModal').on('show.bs.modal', function (event) {
                var button = $(event.relatedTarget); // Button that triggered the modal
                var documentNumber = button.data('id'); // Extract document number
                var modal = $(this);

                // AJAX request for details
                $.ajax({
                    url: '/laundry/detail/' + documentNumber,
                    method: 'GET',
                    success: function (response) {
                        modal.find('.modal-body').html(response.html);
                    },
                    error: function () {
                        modal.find('.modal-body').html('<p>Impossible de charger les détails. Veuillez réessayer.</p>');
                    }
                });
            });
        });
    </script>

@endsection