@extends('layouts.front')
@section('title', __('Traçabilité des Volailles de Loué'))
@section('description', __('Recherchez la treaceabilité de votre produit Loué ainsi que sa provenance.'))

@section('breadcrumb', request()->route()->getName())

@section('content')
<div class="container poultrySearch">
    <div class="row header g-5 bg-loue-blue text-light">
        <div class="col m-2 p-3 h1 fw-bold text-center">
            {{ __('Tout connaître sur l\'origine') }}
        </div>
    </div>
    @include('front.modules.flashMessage')
    <div class="row justify-content-center">
        <div class="col mt-5 px-5 py-3 content-max-width text-center">
            <span class="h5 fw-bold text-loue-blue">
                Merci de compléter ces informations que vous trouverez
                sur l’étiquette poids/prix de votre produit.
            </span>
        </div>
    </div>
    <div class="row justify-content-center">
        <form id="searchForm" class="col my-5 content-max-width text-center needs-validation" action="{{ route('poultry.searchSubmit') }}" method="POST">
            @csrf
            <div class="container p-0">
                <div class="row mb-5">
                    <div class="col text-center">
                        <div class="d-flex flex-column">
                            <label for="codelot" class="fw-bold p-2">{{ __('N° de lot') }}&nbsp;<b class="motus A">A</b>&nbsp;:</label>
                            <input id="codelot" name="codelot" type="text" class="searchInput inputMask" pattern="^[0-9]{10}$" data-mask="00000000{00}" min-length="10" max-length="10" placeholder="{{ __('Numéro à 10 chiffres') }}" title="{{ __('Doit être un numéro à 10 chiffres') }}" required>
                            @include('back.modules.input-error', ['inputName' => 'codelot'])
                            <div class="invalid-feedback">{{ __('Doit être un numéro à 10 chiffres comme par exemple : 2021049873') }}</div>
                        </div>
                    </div>
                </div>
                <div class="row mt-3">
                    <div class="col text-center">
                        <div class="d-flex flex-column">
                            <label for="eancode" class="fw-bold p-2">{{ __('N° du code-barres') }}&nbsp;<b class="motus B">B</b>&nbsp;:</label>
                            <input id="eancode" name="eancode" type="text" class="searchInput inputMask" pattern="^([0-9]{13})|([0-9] [0-9]{6} [0-9]{6})$" data-mask="0 000000 0000{00}" min-length="13" max-length="15" placeholder="{{ __('Numéro à 13 chiffres') }}" title="{{ __('Doit être un code à 13 chiffres') }}" required>
                            @include('back.modules.input-error', ['inputName' => 'eancode'])
                            <div class="invalid-feedback">{{ __('Doit être un code à 13 chiffres comme par exemple : 0 350217 648298') }}</div>
                        </div>
                    </div>
                </div>
                <div class="row mt-5">
                    <div class="col text-center">
                        <button type="submit" class="btn btn-Loue link-shade text-uppercase">{{ __('Valider') }}</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div class="row justify-content-center">
        <div class="indications col text-center content-max-width mb-5">
            <img class="img-fluid" src="{{ asset('assets/images/tracea/poultry/etiquette_legendee.png') }}" alt="{{ __('Indications des informations de traçabilité sur le produit.') }}">
            <b class="motus A">A</b>
            <b class="motus B">B</b>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script nonce="{{ $nonce }}">
    document.addEventListener('DOMContentLoaded', function() {
        let searchForm = document.getElementById('searchForm'),
            submitBtn = searchForm.querySelector('button');

        if (searchForm) {
            submitBtn.addEventListener('click', function() {
                if (!searchForm.classList.contains('was-validated')) {
                    searchForm.classList.add('was-validated')
                }
            })
        }
    });
</script>
@endpush