@extends('app')
@section('title', 'Add time slot')
@section('link')
<style>
    table tr th{ border: none; }
    table tr td{ border: none; }
</style>
@endsection
@section('content')
<div class="pcoded-inner-content">
    @include('includes._alert')
    <div class="main-body">
        <div class="page-wrapper">
            <div class="page-body">
                <div class="card">
                    <div class="card-header mb-0 pb-0">
                        <div class="d-flex justify-content-between">                        
                            <h4>Horaires</h4>
                            <span class="form-control-variant">Les champ avec asterisk (<code>*</code>) sont obligatoires.</span>
                            <span>
                                <a href="{{route('time_slot.index')}}" class="btn btn-inverse btn-outline-inverse  btn-sm py-1" title="Return Back"><i class="fas fa-reply mx-0"></i></a>
                            </span>
                        </div>
                    </div>
                    <hr class="my-0 mx-3">
                    <div class="card-block mt-3">
                        <form action="{{route('time_slot.store')}}" method="post">
                            @csrf
                            <div class="row">
                                <div class="col-md-6">
                                    <strong class="ml-2" style="font-size: 17px"><u>Matin</u></strong>
                                    @for ($i = 0; $i < $nbre; $i++ )
                                    <table class="table" style="border: none">
                                        <thead>
                                            <tr style="border:none">
                                                <th colspan="2" style="border:none">{{$i+1}}{{$i+1 == 1 ? 'ère':'ème'}} Heure :</td>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr style="border:none">
                                                <th style="border:none; width:10%"></th>
                                                <td class="py-0" style="border:none; width:40%">
                                                    <span class="d-flex">
                                                        <label for="mtinDbt{{$i+1}}" class="mr-1 mt-2">Debut :</label>
                                                        <input type="time" name="mtDbts[]" id="mtinDbt{{$i+1}}" class="form-control w-50" value="{{$morning[$i]['debut'] ?? null}}">
                                                    </span>
                                                </td>
                                                <td class="py-0" style="border:none; width:40%">
                                                    <span class="d-flex">
                                                        <label for="mtinFin{{$i+1}}" class="mr-1 mt-2">Fin :</label>
                                                        <input type="time" name="mtFns[]" id="mtinFin{{$i+1}}" class="form-control w-50" value="{{$morning[$i]['fin'] ?? null}}">
                                                    </span>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    @endfor
                                </div>
                                <div class="col-md-6">
                                    <strong class="ml-2" style="font-size: 17px"><u>Après Midi</u></strong>
                                    @for ($i = 0; $i < $nbre; $i++ )
                                    <table class="table" style="border: none">
                                        <thead>
                                            <tr style="border:none">
                                                <th colspan="2" style="border:none">{{$i+1}}{{$i+1 == 1 ? 'ère':'ème'}} Heure :</td>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr style="border:none">
                                                <th style="border:none; width:10%"></th>
                                                <td class="py-0" style="border:none; width:40%">
                                                    <span class="d-flex">
                                                        <label for="mdiDbt{{$i+1}}" class="mr-1 mt-2">Debut :</label>
                                                        <input type="time" name="mdDbts[]" id="mdiDbt{{$i+1}}" class="form-control w-50" value="{{$after[$i]['debut'] ?? null}}">
                                                    </span>
                                                </td>
                                                <td class="py-0" style="border:none; width:40%">
                                                    <span class="d-flex">
                                                        <label for="mdFns{{$i+1}}" class="mr-1 mt-2">Fin :</label>
                                                        <input type="time" name="mdFns[]" id="mdFns{{$i+1}}" class="form-control w-50" value="{{$after[$i]['fin'] ?? null}}">
                                                    </span>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    @endfor
                                </div>
                            </div>
                            <hr class="text-center">
                            <div class="text-center">
                                <button type="submit" class="btn btn-inverse btn-outline-inverse py-2"> <i class="fas fa-check-circle"></i> Valider les informations</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('script')
<script src="{{asset('assets/js/pcoded.min.js')}}"></script>
<script src="{{asset('assets/js/vartical-layout.min.js')}}"></script>
<script src="{{asset('assets/js/jquery.mCustomScrollbar.concat.min.js')}}"></script>
<script>
    $(document).ready(function(){

    })
</script>
@endsection