@extends('layouts.pontoe.painel')
@section('content')
    <style>
        .ui-autocomplete-loading {
            background: white url({{url('img/gif/ajax-loader.gif')}}) right center no-repeat;
        }
    </style>

    <div class="p-3 mt-2 mb-4 bg-light text-dark border-bottom"><h3>Cadastro de Turno</h3></div>
    <form name="FrmCreate" action="{{route('p_turno.store')}}" method="post"  autocomplete="off">
        <label for="" style="color: silver">Aqui fica os dados gerais da jornada do colaborador. Trace as horas e dias aqui abaixo:</label>
        @csrf
        <div class="row">
            <div class="col-md-2">
                <label for="">* Tipo de turno</label>
                <select class="form-control" name="tipo_turno">
                    <option value="1">De segunda a sexta</option>
                    <option value="2">De segunda a sábado</option>
                    <option value="3">De segunda a segunda</option>
                    <option value="4">Sábado e domingo</option>
                </select>
            </div>
            <div class="col-md-6">
                <label for="">* Nome do turno</label>
                <input type="text" class="form-control" name="nome_turno" placeholder="Ex: Turno Geral - 08:00 - 12:00 - 13:00 - 18:00">
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <label for="">Observação</label>
                <textarea class="form-control" name="observacao" cols="30" rows="3"></textarea>
            </div>
        </div>

        <div class="row mt-5">
            <div class="col-md-2">
                <label for=""><b>* Início 1ºTurno (h)</b></label>
                <div class="input-group-prepend">
                    <input type="text" class="form-control" name="inicio_expediente_t1" id="inicio_expediente_t1" style="background-color: #FFE4C4; font-size: 20px; font-weight: bold; color: blue">
                    <div class="input-group-text"><i class="fa fa-clock-o" aria-hidden="true"></i></div>
                </div>
            </div>
            <div class="col-md-2">
                <label for=""><b>* Fim 1ºTurno (h)</b></label>
                <div class="input-group-prepend">
                    <input type="text" class="form-control" name="fim_expediente_t1" id="fim_expediente_t1" style="background-color: #FFE4C4; font-size: 20px; font-weight: bold; color: red">
                    <div class="input-group-text"><i class="fa fa-clock-o" aria-hidden="true"></i></div>
                </div>
            </div>

            <div class="col-md-2 offset-1">
                <label for=""><b>Início 2ºTurno (h)</b></label>
                <div class="input-group-prepend">
                    <input type="text" class="form-control" name="inicio_expediente_t2" id="inicio_expediente_t2" style="background-color: #FFE4C4; font-size: 20px; font-weight: bold; color: blue">
                    <div class="input-group-text"><i class="fa fa-clock-o" aria-hidden="true"></i></div>
                </div>
            </div>
            <div class="col-md-2">
                <label for=""><b>Fim 2ºTurno (h)</b></label>
                <div class="input-group-prepend">
                    <input type="text" class="form-control" name="fim_expediente_t2" id="fim_expediente_t2" style="background-color: #FFE4C4; font-size: 20px; font-weight: bold; color: red">
                    <div class="input-group-text"><i class="fa fa-clock-o" aria-hidden="true"></i></div>
                </div>
            </div>


            <div class="col-md-2 offset-1">
                <label for="">* Total de horas semanal</label>
                <div class="input-group-prepend">
                    <input type="text" class="form-control" name="total_hora" id="total_hora" value="2" style="background-color: #FFE4C4; font-size: 20px; font-weight: bold">
                    <div class="input-group-text"><i class="fa fa-clock-o" aria-hidden="true"></i></div>
                </div>
            </div>
        </div>
        <small style="color: silver">Registre a jornada de trabalho diária do colaborador:</small>

        <hr class="mt-4">
        <div class="row">
            <div class="col-md-12">
                <button type="button" onclick="window.history.back()" class="btn btn-light btn-lg"><i class="fa fa-chevron-left" aria-hidden="true"></i> Voltar</button>
                <button type="submit" class="btn btn-primary btn-lg"><i class="fa fa-floppy-o" aria-hidden="true"></i> Salvar</button>
            </div>
        </div>
        <hr>
    </form>
@endsection
@push('script')
    <script>
        $('#inicio_expediente_t1').mask('99:99');
        $('#fim_expediente_t1').mask('99:99');

        $('#inicio_expediente_t2').mask('99:99');
        $('#fim_expediente_t2').mask('99:99');

        //$('#total_hora').mask('99:99');
    </script>
    <script src="{{url(mix('modulos/pontoe/turno/js/create.js'))}}"></script>
@endpush