@extends('system.administrator.config.index')

@section('subcontent')
<div class="row mt-1 mr-3 ml-3">
    <div class="col p-0">
        @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            {{session('success')}}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        @endif
        @if(session('fail'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            {{session('fail')}}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        @endif
        <div class="card shadow">
            <div class="card-header border-0">
                <div class="row align-items-center">
                    <div class="col-8">
                        <h3 class="mb-0">Horas pico</h3>
                    </div>
                    <div class="col-4 text-right">
                        <button class="btn btn-sm btn-primary" data-toggle="modal" data-target="#modalCrearRegla">Añadir regla</button>
                    </div>
                </div>
            </div>
            <div class="table-responsive">
                <table class="table align-items-center table-flush">
                    <thead class="thead-light text-center">
                        <tr>
                            <th>Hora inicial</th>
                            <th>Hora final</th>
                            <th>Recargo</th>
                            <th>Estado</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody class="text-center">
                        @foreach($horas as $hora)
                        <tr>
                            <td>{{$hora->init_time_i}}</td>
                            <td>{{$hora->fin_time_f}}</td>
                            <td>${{number_format($hora->value)}}</td>
                            <td>
                                <span class="badge badge-{{Config::get('const.states')[$hora->state]['type']}}">{{Config::get('const.states')[$hora->state]['name']}}</span>
                            </td>
                            <td>
                                <button type="button" class="btn btn-warning btn-icon-only" data-toggle="modal" data-target="#modalEditRegla_{{$hora->id}}">
                                    <span class="btn-inner--icon"><i class="fas fa-pencil-alt"></i></span>
                                </button>
                            </td>
                        </tr>
                        <div class="modal fade" id="modalEditRegla_{{$hora->id}}" tabindex="-1" role="dialog" aria-labelledby="modal-default" aria-hidden="true">
                            <form action="/administrator/configuracion/edit/horaPico/{{$hora->id}}" method="post">
                                @csrf
                                <div class="modal-dialog modal- modal-dialog-centered modal-" role="document">
                                    <div class="modal-content modal-sm">
                                        <div class="modal-header">
                                            <h6 class="modal-title" id="modal-title-default">Crear regla</h6>
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">×</span>
                                            </button>
                                        </div>
                                        <div class="modal-body">
                                            <div class="row">
                                                <div class="col">
                                                    <div class="from-group mb-1">
                                                        <label>Hora inicial</label>
                                                        <input required type="text" class="form-control timePicker" name="init_hour" value="{{$hora->init_hour}}">
                                                    </div>
                                                </div>
                                                <div class="col">
                                                    <div class="from-group mb-1">
                                                        <label>Hora final</label>
                                                        <input required type="text" class="form-control timePicker" name="fin_hour" value="{{$hora->fin_hour}}">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group mb-1">
                                                <label>Recargo</label>
                                                <div class="input-group">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text">$</span>
                                                    </div>
                                                    <input required type="number" class="form-control" name="recargo" value="{{$hora->value}}">
                                                </div>
                                            </div>
                                            <div class="form-group mb-1">
                                                <label>Estado</label>
                                                <select name="state" class="form-control">
                                                    <option value="1" {{$hora->state == 1 ? 'selected' : ''}}>Activo</option>
                                                    <option value="2" {{$hora->state == 2 ? 'selected' : ''}}>Inactivo</option>
                                                    <option value="3" {{$hora->state == 3 ? 'selected' : ''}}>Papelera</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="submit" class="btn btn-success">Guardar</button>
                                            <button type="button" class="btn btn-link  ml-auto" data-dismiss="modal">Cerrar</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <div class="card-footer py-4">
                <nav class="d-flex justify-content-end" aria-label="...">
                    {!! $horas->appends(Request::all())->render() !!}
                </nav>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="modalCrearRegla" tabindex="-1" role="dialog" aria-labelledby="modal-default" aria-hidden="true">
    <form action="/administrator/configuracion/new/horaPico" method="post">
        @csrf
        <div class="modal-dialog modal- modal-dialog-centered modal-" role="document">
            <div class="modal-content modal-sm">
                <div class="modal-header">
                    <h6 class="modal-title" id="modal-title-default">Crear regla</h6>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col">
                            <div class="from-group mb-1">
                                <label>Hora inicial</label>
                                <input required type="text" class="form-control timePicker" name="init_hour_new">
                            </div>
                        </div>
                        <div class="col">
                            <div class="from-group mb-1">
                                <label>Hora final</label>
                                <input required type="text" class="form-control timePicker" name="fin_hour_new">
                            </div>
                        </div>
                    </div>
                    <label>Recargo</label>
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text">$</span>
                        </div>
                        <input required type="number" class="form-control" min="0" name="recargo">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success">Crear</button>
                    <button type="button" class="btn btn-link  ml-auto" data-dismiss="modal">Cerrar</button>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection

@section('js')
<script>
    $('.timePicker').datetimepicker({
        format: 'LT',
        icons: {
            up: 'fas fa-chevron-up text-warning',
            down: 'fas fa-chevron-down text-warning'
        }
    })
</script>
@endsection