@extends('layouts.app')

@section('title', 'Bons de Livraison - Print Manager')

@section('content')
    <div class="card">
        <div class="card-header bg-secondary text-white d-flex justify-content-between align-items-center">
            <h1 class="mb-0">Bons de Livraison <span class="badge bg-light text-dark ms-2">{{ $bons->count() }}</span></h1>
            <div class="d-flex gap-2">
                <a href="{{ route('bons-livraison.create') }}" class="btn btn-light">
                    <i class="fas fa-plus me-1"></i>Nouveau
                </a>
                <a href="{{ route('bons-livraison.ocr') }}" class="btn btn-info text-white">
                    <i class="fas fa-search me-1"></i>OCR
                </a>
            </div>
        </div>
        <div class="card-body">
            @include('partials.session-alerts')

            <form method="GET" class="mb-3" id="filter-form">
                <input type="hidden" name="sort" value="{{ request('sort') }}">
                <input type="hidden" name="dir" value="{{ request('dir') }}">
                <div class="row g-3">
                    <div class="col-md-2">
                        <label class="form-label">Marques</label>
                        <div class="filter-checkbox-group" id="filter-marque">
                            @foreach($marques as $marque)
                                <div class="form-check">
                                    <input class="form-check-input filter-marque-cb" type="checkbox"
                                        name="marque_id[]" value="{{ $marque->id }}"
                                        id="mq_{{ $marque->id }}"
                                        {{ in_array($marque->id, (array) request('marque_id', [])) ? 'checked' : '' }}>
                                    <label class="form-check-label small" for="mq_{{ $marque->id }}">{{ $marque->nom }}</label>
                                </div>
                            @endforeach
                        </div>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Fournitures</label>
                        <div class="filter-checkbox-group" id="filter-fourniture">
                            @foreach($fournitures as $fourniture)
                                <div class="form-check" data-marque-id="{{ $fourniture->marque_id }}">
                                    <input class="form-check-input filter-fourniture-cb" type="checkbox"
                                        name="fourniture_id[]" value="{{ $fourniture->id }}"
                                        id="fn_{{ $fourniture->id }}"
                                        data-marque-id="{{ $fourniture->marque_id }}"
                                        {{ in_array($fourniture->id, (array) request('fourniture_id', [])) ? 'checked' : '' }}>
                                    <label class="form-check-label small" for="fn_{{ $fourniture->id }}">{{ $fourniture->nom }}</label>
                                </div>
                            @endforeach
                        </div>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Recherche</label>
                        <input type="text" name="search" class="form-control" placeholder="N° livraison ou fourniture" value="{{ request('search') }}">
                    </div>
                    <div class="col-md-2 d-flex flex-column gap-1">
                        <label class="form-label invisible">&nbsp;</label>
                        <div class="d-flex gap-1">
                            <button type="submit" class="btn btn-primary flex-fill"><i class="fas fa-search"></i> Filtrer</button>
                            <a href="{{ route('bons-livraison.index') }}" class="btn btn-outline-secondary flex-fill">Reset</a>
                        </div>
                    </div>
                </div>
            </form>

            <div class="table-responsive">
                <table class="table table-striped table-hover table-sortable" data-default-sort-col="1" data-default-sort-dir="desc">
                    <thead>
                        <tr>
                            <th data-col="0" class="sort-header">N° Livraison</th>
                            <th data-col="1" class="sort-header">Date</th>
                            <th data-col="2" class="sort-header">Fournitures</th>
                            <th data-col="3" class="sort-header">N° Commande</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($bons as $bon)
                        <tr>
                            <td>{{ $bon->numero_livraison }}</td>
                            <td data-date="{{ $bon->created_at ? $bon->created_at->format('Y-m-d') : '' }}">{{ $bon->created_at ? $bon->created_at->format('d/m/Y') : '-' }}</td>
                            <td>
                                @foreach($bon->entrees as $entree)
                                    <span class="badge bg-info text-dark me-1">
                                        {{ $entree->fourniture->reference ?? '' }} {{ $entree->fourniture->nom ?? '' }} x{{ $entree->quantite }}
                                    </span>
                                @endforeach
                            </td>
                            <td>
                                @if($bon->commande)
                                    <a href="{{ route('commandes.show', ['bonsLivraison' => $bon->commande->id, 'back_url' => request()->fullUrl()]) }}" class="badge bg-success text-white text-decoration-none me-1">{{ $bon->commande->numero_livraison }}</a>
                                @else
                                    <span class="text-muted small">—</span>
                                @endif
                            </td>
                            <td class="d-flex gap-1">
                                <a href="{{ route('bons-livraison.show', $bon) }}" class="btn btn-sm btn-action" title="Voir" style="background-color: #9c27b0; border-color: #9c27b0; color: white;">
                                    <i class="fas fa-eye"></i>
                                </a>
                                <a href="{{ route('bons-livraison.edit', $bon) }}" class="btn btn-sm btn-action" title="Modifier" style="background-color: #ff9800; border-color: #ff9800; color: white;">
                                    <i class="fas fa-edit"></i>
                                </a>
                                @if($canDelete($bon))
                                <button type="button" class="btn btn-sm btn-danger btn-delete" title="Supprimer" data-url="{{ route('bons-livraison.destroy', $bon) }}" data-label="{{ $bon->numero_livraison }}">
                                    <i class="fas fa-trash"></i>
                                </button>
                                @endif
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="5" class="text-center text-muted">Aucun bon de livraison.</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    initTableSort('.table-sortable');

    var filterForm = document.getElementById('filter-form');
    var marqueGroup = document.getElementById('filter-marque');
    var fournitureGroup = document.getElementById('filter-fourniture');

    function filterFournituresByMarque() {
        var marqueIds = [];
        marqueGroup.querySelectorAll('.filter-marque-cb:checked').forEach(function(cb) {
            marqueIds.push(cb.value);
        });
        fournitureGroup.querySelectorAll('.form-check').forEach(function(div) {
            var show = marqueIds.length === 0 || marqueIds.includes(div.dataset.marqueId);
            div.style.display = show ? '' : 'none';
            if (!show) {
                var cb = div.querySelector('.filter-fourniture-cb');
                if (cb) cb.checked = false;
            }
        });
    }

    marqueGroup.querySelectorAll('.filter-marque-cb').forEach(function(cb) {
        cb.addEventListener('change', function() {
            filterFournituresByMarque();
            filterForm.submit();
        });
    });

    filterFournituresByMarque();
});
</script>
@endpush