@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', 'oldEgg' => $isDisplayedTAModal])>
        <div class="block-fill">
            <div class="header">
                <p><span>Tout connaître</span><br>de l’origine de mes œufs</p>
            </div>
            <div class="body">
                <p class="message blue">Merci de compléter ces indications que<br>vous trouverez sur votre boîte d’œufs :</p>
                <form action="{{ route('egg.searchSubmit') }}" method="POST">
                    @csrf
                    <div class="item">
                        <label>Code du producteur <span>A</span> :</label>
                        <input name="code" type="text" placeholder="Ex. 1FRJBB01" required>
                    </div>
                    <div class="item">
                        <label>Date de consommation<br>recommandée (DCR) <span>B</span> :</label>
                        <input name="date" type="text" placeholder="JJ/MM" pattern="[0-9]{2}/[0-9]{2}" required>
                    </div>

                    <input type="submit" value="Valider">
                </form>
            </div>
            <div class="footer d-flex justify-content-center mt-5">
                <p>Informations sur l'oeuf :</p>
                <div class="box">
                    <img src="{{ asset('assets/images/egg/oeuf.png') }}" alt="Oeuf" width="70%">
                    {{-- <p>Pondu le<br><span class="date">14/12</span></p>
                <p>À cons. de préf. avant le
                    <br><span class="date">11/01</span><span class="step">A</span>
                    <br><span class="prod">1FR0PD01</span><span class="step">B</span>
                </p> --}}
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script nonce="{{ $nonce }}">
        document.addEventListener('DOMContentLoaded', function() {
            $(document).ready(function() {
                $('input[name=date]').bind('keyup', 'keydown', function(e) {
                    //To accomdate for backspacing, we detect which key was pressed - if backspace, do nothing:
                    if (e.which !== 8) {
                        var numChars = $(this).val().length;
                        var thisVal = $(this).val();
                        if (numChars === 2) {
                            thisVal += '/';
                            $(this).val(thisVal);
                        }
                        if (numChars >= 3) {
                            if (thisVal.charAt(2) != '/') {
                                thisVal = thisVal.substring(0, 2) + '/' + thisVal.substring(2);
                                $(this).val(thisVal);
                            }
                        }
                    }
                });
            });
        });
    </script>
@endpush