@extends('layouts.backend')

@section('css_after')
    <link rel="stylesheet" href="{{asset('css\vendor\buttons.bootstrap5.css') }}">
    <style>
        input[type="time"]::-webkit-calendar-picker-indicator{
            filter: invert(48%) sepia(13%) saturate(3207%) hue-rotate(130deg) brightness(95%) contrast(80%)!important;
        }
        
        .boton2 {
            background-color: #00a65a !important;
            border-color: #008d4c !important;
            color: #fff !important;
            height: 30px !important;
            font-size: 12px !important;
        }
        .boton2:hover{
            background-color: #008d4c !important;
        }
    </style>
    @php
        $cliente = config('app.CLIENTE');
        $opciones_descarga=["getSelloutYTD"=>["Sellout($) year to date" =>["variables"=>[$cliente],"value"=>"id"],"prueba 1"=>["variables"=>["variables", "variables 1"],"value"=>"id1"]]];
        $dias=["Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo"];
    @endphp
@endsection
@section('content')
    <div class="bg-body-light">
        <div class="content content-full">
            <div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-center">
                <h3 class="flex-sm-fill font-size-h2 font-w400 mt-2 mb-0 mb-sm-2 text-center">{{$titulo}}</h3>
                <nav class="flex-sm-00-auto ml-sm-3" aria-label="breadcrumb">
                    
                </nav>
            </div>
        </div>
    </div>
    <div class="row" style="height: 600px;">
        <div class="col-lg-6">
            <div style="height: 20px">

            </div>
            <div class="bg-white" style="min-height: auto; height: 100%; margin: 0 20%">
                <div class="d-flex flex-column" style="padding-left: 10px; width: fit-content;">
                    @foreach ($opciones_descarga as $funcion=>$array)
                        @foreach ($array as $texto=>$array2)
                            <div class="d-flex align-items-center w-100" style="margin-top: 10px; min-width: fit-content;">
                                <div class="form-check w-100" style="height: fit-content; min-width: fit-content;">
                                    <input class="form-check-input" type="checkbox" value="{{$array2["value"]}}" id="{{$array2["value"]}}" style="margin-top: 7px">
                                    <label class="form-check-label w-100 d-flex" style="min-width: fit-content" for="{{$array2["value"]}}">
                                        @php
                                            $onclick=$funcion."('".implode("','",$array2["variables"])."')";
                                        @endphp
                                        <button class="btn boton2 btn-sm align-middle flex-fill" onclick="{{$onclick}}" style="min-width: fit-content">{{$texto}}</button>
                                    </label>
                                </div>
                            </div>
                        @endforeach
                    @endforeach
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <h4 class="text-center m-0" style="height: 20px">
                Programar Entrega
            </h4>
            <div class="bg-white d-flex flex-column align-items-center flex-fill" style="min-height: auto; height: 100%; margin: 0 20%">
                <div style="width: 100%; padding-left: 10px;">
                    @for ($i = 0; $i < count($dias); $i++)
                        <div class="d-flex align-items-center" style="margin-top: 10px">
                            <div class="form-check" style="height: fit-content">
                                <input class="form-check-input" type="checkbox" value="{{$i}}" id="{{$dias[$i]}}">
                                <label class="form-check-label align-middle" for="{{$dias[$i]}}">
                                    {{$dias[$i]}}
                                </label>
                            </div>
                            <input class="rounded" type="time" id="{{$dias[$i]}}-time" name="{{$dias[$i]}}-time" 
                            style="border: 1px solid #dee2e6; height: 30px; color: #999; margin-left: auto">
                        </div>
                    @endfor
                </div>
                <button class="btn boton2 btn-sm align-middle" style="margin-top: 20px">Actualizar</button>
            </div>
        </div>
    </div>
@endsection
@section('js_after')
    <script src="{{asset("js/custom/utilidades.js")}}"></script>
    <script src="{{asset("js/custom/reporteriaGetter.js")}}"></script>
@endsection