@extends('layouts.app')
@section('style')
    <link href="{{asset('assets/libs/sweetalert2/sweetalert2.min.css')}}" rel="stylesheet" type="text/css"/>
@endsection
@section('content')
    <div class="row mt-5">
        <div class="col-12">
            <div class="card-box">
                <div class="text-center">
                    <h4 class="header-title text-6xl">Horas de pedido</h4>
                    <p class="sub-header text-2xl">
                        Indique cuántos pedidos se pueden negociar en diferentes horas en cada día de la semana
                    </p>
                </div>

                <div class="row">
                    <div class="col-12">
                        <div class="p-2">

                            <form class="form-horizontal" role="form" method="post"
                                  action="{{ route('update_insert_order_hours') }}">
                                <div class="flex justify-center">
                                    <input type="hidden" id="route_search_for_category_order_hours" value="{{route("search_for_category_order_hours")}}">
                                    <select class="form-select rounded-lg" style="color: #000000;" name="filling"
                                            id="filling_select_id">
                                        <option style="color: #000000" selected value="{{$actual_category['id']}}">
                                            {{$actual_category['name']}}
                                        </option>
                                        @foreach($categories_d as $category)
                                            @if($actual_category['id'] <> $category->id)
                                                <option style="color: #000000"
                                                        value="{{$category->id}}">{{$category->name}}
                                                </option>
                                            @endif
                                        @endforeach
                                    </select>
                                </div>
                                @csrf

                                <div id="cuerpo_orders_hours_id">
                                    @forelse($order_hours as $key => $order_hour)
                                        <div class="row">
                                            <div class="flex-grow">
                                                <div class="card">
                                                    <div class="d-flex" >
                                                        <h5 class="card-header">{{ ucfirst($key) }}</h5>
                                                    </div>
                                                    <div class="card-body bg-gray-600">
                                                        <div class="form-group row">
                                                            @foreach($order_hour as $k => $o_h)
                                                                <label class="col-md-1 col-form-label flex justify-end"
                                                                       for="order_hour[update][{{ $o_h['id'] }}]">{{$k}}:00
                                                                    :</label>
                                                                <div class="col-md-2">
                                                                    <input type="text"
                                                                           id="order_hour[update][{{ $o_h['id'] }}]"
                                                                           name="order_hour[update][{{ $o_h['id'] }}]"
                                                                           class="form-control" value="{{$o_h['value']}}">
                                                                </div>
                                                            @endforeach
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @empty
                                        <div class="form-group row">
                                            <label class="col-md-2 col-form-label" for="name">Nombre:</label>
                                            <div class="col-md-10">
                                                <input type="text" id="name" name="name" class="form-control">
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label class="col-md-2 col-form-label" for="amount">Monto:</label>
                                            <div class="col-md-10">
                                                <input type="text" id="amount" name="amount" class="form-control">
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label class="col-md-2 col-form-label" for="description">Descripcion:</label>
                                            <div class="col-md-10">
                                                <input type="text" id="description" name="description" class="form-control">
                                            </div>
                                        </div>
                                    @endforelse
                                </div>

                                <div class="float-right">
                                    <a href="{{route('dashboard')}}"
                                       class="btn btn-danger btn-rounded width-md waves-effect waves-light">Cancelar</a>
                                    <button type="submit"
                                            class="btn btn-primary btn-rounded width-md waves-effect waves-light"
                                            onclick="generalMessange('Guardando');">Guardar
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <!-- end row -->
            </div> <!-- end card-box -->
        </div><!-- end col -->
    </div>
    <!-- end row -->
@endsection

@push("scripts")
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="{{ asset('assets/libs/sweetalert2/sweetalert2.min.js') }}"></script>
    <script src="{{ asset('js/general.js') }}"></script>
    <script>
        $(document).ready(function () {
            $("#filling_select_id").on("change", function () {
                searchForCategory($("#filling_select_id").val(), $("#filling_select_id option:selected").text());
            })
        });

        function searchForCategory(category_id, category_name) {
            var url = $("#route_search_for_category_order_hours").val();
            var data = {
                "category_id" : category_id,
            };
            $.ajax({
                url: url,
                type: 'get',
                data: data,
                beforeSend: function (){
                    Swal.fire({
                        position: 'top-center',
                        type: 'success',
                        title: "Categoria "+ category_name+" Elegida",
                        showConfirmButton: false,
                        timer: 2000
                    });
                },
                success: function (d) {
                    //Borro lo que esta dentro del div
                    $("#cuerpo_orders_hours_id").empty();
                    apendContenido(d);
                }
            });
        }

        function apendContenido(data)
        {
            //Aqui separo el primer arreglo, Order Hours, Categorias y categoria actual
            $.each(data, function (index, value){
                if(index == "order_hours")
                {
                    //Aqui envio Order Hours para hacer el append
                    appendContenido2(value);
                }
            });
        }

        function appendContenido2(order_hours)
        {
            var p = '';
            $.each(order_hours, function (index, value){
                p += '<div class="row">';
                p += '<div class="flex-grow">';
                p += '<div class="card">';
                p += '<div class="d-flex" >';
                p += '<h5 class="card-header">'+index+'</h5>';
                p += '</div>';
                p += '<div class="card-body bg-gray-600">';
                p += '<div class="form-group row">';

                $.each(value, function (ind, val){
                    p += '<label class="col-md-1 col-form-label flex justify-end" for="order_hour[update]['+val.id+']">'+ind+':00:</label>';
                    p += '<div class="col-md-2">';
                    p += '<input type="text" id="order_hour[update]['+val.id+']" name="order_hour[update]['+val.id+']" class="form-control" value="'+val.value+'">';
                    p += '</div>';
                });

                p += '</div>';
                p += '</div>';
                p += '</div>';
                p += '</div>';
                p += '</div>';
            });
            $("#cuerpo_orders_hours_id").append(p);
        }
    </script>

@endpush