{% extends '_include/base.html.twig' %}

{% block title %}Consumable Requests{% endblock %}

{% block style %}{% endblock %}

{% block breadcrumbs %}
    <nav aria-label="Breadcrumb">
        <ul class="breadcrumb__list">
            <li class="breadcrumb__item"><a href="{{ path('dashboard') }}">Home</a></li>
            <li class="breadcrumb__item" aria-current="page">Consumable Requests</li>
        </ul>
    </nav>
{% endblock %}

{% block page_title %}Consumable Requests{% endblock %}

{% block content %}
    <div class="card">
        <div class="card__body">
            <table id="table" class="data-table table-full data-table--nowrap">
                <thead>
                <tr>
                    <th>Ref</th>
                    <th>Type Article</th>
                    <th>Requested At</th>
                    <th>Status</th>
                    <th>Confirmed / Requested</th>
                    <th>Confirmed At</th>
                    <th>Actions</th>
                </tr>
                </thead>
                <tbody>
                {% for consumable_request in consumable_requests %}
                    {% set bgClass = loop.index0 is even ? 'row-bg-light' : 'row-bg-dark' %}
                    {% if consumable_request.consumableReqItems|length > 0 %}
                        {% for item in consumable_request.consumableReqItems %}
                            <tr class="{{ bgClass }}">
                                <td>{{ consumable_request.ref }}</td>
                                <td>{{ item.itemId.groupeArticle.typeArticle.name ?? 'N/A' }}</td>
                                <td>{{ consumable_request.requestedAt ? consumable_request.requestedAt|date('Y-m-d') : '' }}</td>
                                <td>{{ consumable_request.status }}</td>
                                <td>
                                    <strong>{{ item.confirmedQte ?? '--' }}</strong> /
                                    <span class="tone-muted">{{ item.reqQty }}</span>
                                </td>
                                <td>{{ consumable_request.confirmedAt ? consumable_request.confirmedAt|date('Y-m-d') : '--' }}</td>
                                <td>
                                    <!-- Show bouton -->
                                    <a class="btn btn--secondary btn--sm" href="{{ path('app_consumable_request_show', {'id': consumable_request.id}) }}" title="Show Details">
                                        <i class="fa fa-eye" aria-hidden="true"></i>
                                    </a>

                                    <!-- ROLE_MAG : Accept/Reject -->
                                    {% if is_granted('ROLE_MAG') and consumable_request.status == 'Pending' %}
                                        <form method="post" class="inline-form accept-inline-form" action="{{ path('app_consumable_request_accept', {'id': consumable_request.id}) }}">
                                            <input type="hidden" name="_token" value="{{ csrf_token('accept' ~ consumable_request.id) }}">
                                            <input type="hidden" name="items[0][id]" value="{{ item.id }}">
                                            <input type="number" name="items[0][qty]" min="0" max="{{ item.reqQty }}" value="{{ item.confirmedQte ?? item.reqQty }}" class="inline-qty">
                                            <button type="submit" class="btn btn--primary btn--sm">Accept</button>
                                        </form>

                                        <form method="post" class="reject-inline-form inline-form" action="{{ path('app_consumable_request_reject', {'id': consumable_request.id}) }}">
                                            <input type="hidden" name="_token" value="{{ csrf_token('reject' ~ consumable_request.id) }}">
                                            <button type="submit" class="btn btn--danger btn--sm">Reject</button>
                                        </form>
                                    {% endif %}

                                    <!-- ROLE_EMB : Edit/Delete seulement si Pending -->
                                    {% if is_granted('ROLE_EMB') and consumable_request.status == 'Pending' %}
                                        <a class="btn btn--secondary btn--sm" href="{{ path('app_consumable_request_edit', {'id': consumable_request.id}) }}" title="Edit">
                                            <i class="fa fa-edit" aria-hidden="true"></i>
                                        </a>
                                        <a href="#"
                                           class="btn btn--secondary btn--sm btn--delete"
                                           data-id="{{ consumable_request.id }}"
                                           data-csrf="{{ csrf_token('delete' ~ consumable_request.id) }}"
                                           title="Delete">
                                            <i class="fa fa-trash" aria-hidden="true"></i>
                                        </a>
                                    {% endif %}
                                </td>
                            </tr>
                        {% endfor %}
                    {% else %}
                        <tr class="{{ bgClass }}">
                            <td>{{ consumable_request.ref }}</td>
                            <td class="align-center">No items found</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td>{{ consumable_request.confirmedAt ? consumable_request.confirmedAt|date('Y-m-d') : '--' }}</td>
                            <td>--</td>
                        </tr>
                    {% endif %}
                {% else %}
                        <tr class="align-center">
                        <td>No records found</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
    <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>

    <script>
        $(document).ready(function () {
            $('#table').DataTable({
                "paging": true,
                "pageLength": 10,
                "lengthMenu": [5, 10, 25, 50, 100],
                "ordering": true,
                "searching": true,
                "info": true,
                "columnDefs": [{ "orderable": false, "targets": 6 }],
                "language": {
                    "lengthMenu": "Show _MENU_ entries",
                    "search": "Search:",
                    "paginate": { "first": "First", "last": "Last", "next": "Next", "previous": "Previous" },
                    "info": "Showing _START_ to _END_ of _TOTAL_ entries",
                    "infoEmpty": "No entries available",
                    "zeroRecords": "No matching records found"
                }
            });

            // Accept inline
            $(document).on('submit', '.accept-inline-form', function(e){
                e.preventDefault();
                const form = $(this);
                $.ajax({
                    url: form.attr('action'),
                    method: 'POST',
                    data: form.serialize(),
                    success: function(resp){
                        if(resp.success){ location.reload(); }
                        else{ alert('Error: ' + (resp.message || 'Unable to update')); }
                    },
                    error: function(){ alert('Error updating request'); }
                });
            });

            // Reject inline
            $(document).on('submit', '.reject-inline-form', function(e){
                e.preventDefault();
                const form = $(this);
                $.ajax({
                    url: form.attr('action'),
                    method: 'POST',
                    data: form.serialize(),
                    success: function(resp){
                        if(resp.success){ location.reload(); }
                        else{ alert('Error: ' + (resp.message || 'Unable to update')); }
                    },
                    error: function(){ alert('Error updating request'); }
                });
            });

            // Delete for EMB
            $(document).on('click', '.btn--delete', function(e){
                e.preventDefault();
                if(!confirm('Are you sure you want to delete this request?')) return;
                var btn = $(this);
                var id = btn.data('id');
                var csrfToken = btn.data('csrf');
                $.ajax({
                    url: "{{ path('app_consumable_request_delete', {'id':'ID_PLACEHOLDER'}) }}".replace('ID_PLACEHOLDER', id),
                    method: 'POST',
                    data: {_method:'DELETE', _token: csrfToken},
                    success: function(){ btn.closest('tr').fadeOut(500, function(){ $(this).remove(); }); },
                    error: function(){ alert('Error while deleting.'); }
                });
            });
        });
    </script>
{% endblock %}