<?php
use App\Models\ReportQuarter;
use App\Models\ActivitVieScolaire;
use Livewire\Component;
?>

<div>
    <div class="card-header my-0 pb-0">
        <div class="d-flex justify-content-between">
            <h6>Activités liées à la vie scolaire</h6>
            <span>
                <button wire:click="myInput" class="btn btn-inverse btn-outline-inverse btn-sm py-1 mt-0" title="Edit Info" data-toggle="modal" data-target="#schoolModal">
                <i class="fas fa-pen m-0"></i>
                </button>
            </span>
        </div>
    </div>
    <div class="card-body table-border-style mt-2">
        <div class="table-responsive">
            <table class="table table-bordered" style="width: 100%">
                <thead>
                    <tr>
                        <th class="text-center">N°</th>
                        <th>Infirmerie</th>
                        <th>Bibliothèque</th>
                        <th>Cantine</th>
                        <th>Activités des clubs et associations</th>
                        <th>Activités coopératives</th>
                        <th>Projet d’établissement</th>
                    </tr>
                </thead>
                <tbody>
                    @php $i = 1; @endphp
                    @forelse ($data as $item)
                        <tr>
                            <th class="text-center">{{ $i < 10 ? '0'.$i++:$i++ }}</th>
                            <td>
                                {{ ucfirst($item->infirmerie) }}
                            </td>
                            <td>
                                {{ ucfirst($item->bibliothek) }}
                            </td>
                            <td>
                                {{ ucfirst($item->cantin) }}
                            </td>
                            <td>
                                {{ ucfirst($item->activits) }}
                            </td>
                            <td>
                                {{ ucfirst($item->cooperativ) }}
                            </td>
                            <td>
                                {{ ucfirst($item->projet) }}
                            </td>
                        </tr> 
                    @empty
                        <tr>
                            <td colspan="7" class="text-center">Underdefined data</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
    <!-- @Modal -->
    <div wire:ignore.self class="modal fade" id="schoolModal" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-lg modal-dialog-centered" role="document" style="max-width: 70%;">
            <div class="modal-content">
                <div class="modal-header bg-dark py-2">
                    <h4 class="modal-title">Activités liées à la vie scolaire</h4>
                    <strong style="font-size: 17px">
                        {{ $input ? 'Edit':'Add' }}
                        <i class="fas fa-pencil-alt my-0"></i>
                    </strong>
                </div>
                <form action="{{ route('chapter_3.vie') }}" method="post">
                    @csrf
                    <div class="modal-body">
                        <button type="button" class="btn mb-2 p-0" id="btnVies" style="width: 25px; float: right; border: 1px solid grey">+</button> 
                        <table class="table table-bordered" id="tableVies" style="width: 100%">
                            <tbody>
                                @php $i = 1; @endphp
                                @forelse ($input as $item)
                                <tr>
                                    <td style="width: 100%">
                                        <div class="row">
                                            <div class="col-sm-4">
                                                <label class="col-form-label" for="infim{{ $i }}">Infirmerie<span class="text-danger">*</span> :</label>
                                                <input type="text" name="tab1[]" id="infim{{ $i }}" class="form-control" value="{{ $item->infirmerie }}" placeholder="---">
                                            </div>
                                            <div class="col-sm-4">
                                                <label class="col-form-label" for="biblio{{ $i }}">Bibliothèque<span class="text-danger">*</span> :</label>
                                                <input type="text" name="tab2[]" id="biblio{{ $i }}" class="form-control" value="{{ $item->bibliothek }}" placeholder="---">
                                            </div>
                                            <div class="col-sm-4">
                                                <label class="col-form-label" for="cant{{ $i }}">Cantine<span class="text-danger">*</span> :</label>
                                                <input type="text" name="tab3[]" id="cant{{ $i }}" class="form-control" value="{{ $item->cantin }}" placeholder="---">
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-sm-4">
                                                <label class="col-form-label" for="club{{ $i }}">Activités des clubs et associations<span class="text-danger">*</span> :</label>
                                                <input type="text" name="tab4[]" id="club{{ $i }}" class="form-control" value="{{ $item->activits }}" placeholder="---">
                                            </div>
                                            <div class="col-sm-4">
                                                <label class="col-form-label" for="coop{{ $i }}">Activités coopératives<span class="text-danger">*</span> :</label>
                                                <input type="text" name="tab5[]" id="coop{{ $i }}" class="form-control" value="{{ $item->cooperativ }}" placeholder="---">
                                            </div>
                                            <div class="col-sm-4">
                                                <label class="col-form-label" for="proj{{ $i }}">Projet d’établissement<span class="text-danger">*</span> :</label>
                                                <input type="text" name="tab6[]" id="proj{{ $i }}" class="form-control" value="{{ $item->projet }}" placeholder="---">
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                @php $i++ @endphp
                                @empty
                                <tr>
                                    <td style="width: 100%">
                                        <div class="row">
                                            <div class="col-sm-4">
                                                <label class="col-form-label" for="infim1">Infirmerie<span class="text-danger">*</span> :</label>
                                                <input type="text" name="tab1[]" id="infim1" class="form-control" placeholder="---">
                                            </div>
                                            <div class="col-sm-4">
                                                <label class="col-form-label" for="biblio1">Bibliothèque<span class="text-danger">*</span> :</label>
                                                <input type="text" name="tab2[]" id="biblio1" class="form-control" placeholder="---">
                                            </div>
                                            <div class="col-sm-4">
                                                <label class="col-form-label" for="cant1">Cantine<span class="text-danger">*</span> :</label>
                                                <input type="text" name="tab3[]" id="cant1" class="form-control" placeholder="---">
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-sm-4">
                                                <label class="col-form-label" for="club1">Activités des clubs et associations<span class="text-danger">*</span> :</label>
                                                <input type="text" name="tab4[]" id="club1" class="form-control" placeholder="---">
                                            </div>
                                            <div class="col-sm-4">
                                                <label class="col-form-label" for="coop1">Activités coopératives<span class="text-danger">*</span> :</label>
                                                <input type="text" name="tab5[]" id="coop1" class="form-control" placeholder="---">
                                            </div>
                                            <div class="col-sm-4">
                                                <label class="col-form-label" for="proj1">Projet d’établissement<span class="text-danger">*</span> :</label>
                                                <input type="text" name="tab6[]" id="proj1" class="form-control" placeholder="---">
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                    <div class="modal-footer">
                        <input type="hidden" name="school" value="{{ $school }}">
                        <input type="hidden" name="cutting" value="{{ $cutting }}">
                        <button class="btn btn-inverse btn-outline-inverse btn-sm py-1 mx-2" data-dismiss="modal">Fermer</button>
                        <button class="btn btn-inverse btn-outline-inverse btn-sm py-1 mx-2">Valider</button>
                    </div>
                    </form>
            </div>
        </div>
    </div>
</div>