@section('title', __('radio.page_reportgen_title'))
@section('head')
	<link rel="stylesheet" type="text/css" href="/assets/css/daterangepicker.css"/>
    <link rel="stylesheet" href="/assets/js/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css">
@endsection
@include('includes/header')
@include('includes/topRadio')
<div class="content">

    <div class="row">
        <div class="col-12">
            <div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-center py-2">
                <div class="flex-grow-1">
                    <h1 class="h3 fw-bold mb-2">
                        {{ __('radio.page_reportgen_title') }}
                    </h1>
                </div>
                <nav class="flex-shrink-0 mt-3 mt-sm-0 ms-sm-3" aria-label="breadcrumb">
                    <ol class="breadcrumb breadcrumb-alt push mb-0">
                        <li class="breadcrumb-item">
                            <a href="{{ route('radio.home.r') }}">{{ __('radio.menu_item_1') }}</a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">{{ __('radio.page_reportgen_title') }}</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
		
		<form action="" method="POST">
			<div class="block block-rounded">
				<div class="block-content">
					<div class="row">
						<div class="col-lg-6">
							<div class="mb-4">
							  <label class="form-label" for="example-text-input">{{ __('radio.reportgen_audio_name') }}</label>
							  <input type="text" class="form-control" id="a" name="audioName" placeholder="{{ __('radio.reportgen_audio_name_placeholder') }}">
							</div>
						</div>
						<div class="col-lg-6">
							<div class="mb-4">
								  <label class="form-label" for="example-text-input">Text</label>
								  <input type="text" class="form-control" id="start" name="start" value="" autocomplete="off">
							</div>
						</div>
						<input type="hidden" id="d" value="" />
					</div>
						
						
					<button type="button" class="btn btn-primary w-100 mb-3 genR">{{ __('general.action_generate') }}</button>	
				</div>
			</div>
		</form>
		</div>
	</div>
	
	</div>
	</div>
	
	@include('includes/footer')

</div>

	<script src="/assets/js/lib/jquery.min.js"></script>
<script src="/assets/js/main.min.js"></script>
<script src="/assets/js/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
<script src="/assets/js/plugins/bootstrap-datepicker/locales/bootstrap-datepicker.pt-BR.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="/assets/js/pages/graph/moment.min.js"></script>
<script type="text/javascript" src="/assets/js/pages/graph/daterangepicker.js"></script>
	<script>
	
	function timeConverter(timest) {
            var timestamp = moment(timest);
            var time = timestamp.format("YYYY-MM-DD");
            return time;
        }
	$('#start').daterangepicker({
                locale: {
                    format: 'DD/MM/YYYY',
                    "separator": " - ",
                    "applyLabel": "Aplicar",
                    "cancelLabel": "Cancelar",
                    "fromLabel": "De",
                    "toLabel": "Até",
                    "customRangeLabel": "Customizado",
                    "daysOfWeek": [
                        "Dom",
                        "Seg",
                        "Ter",
                        "Qua",
                        "Qui",
                        "Sex",
                        "Sab"
                    ],
                    "monthNames": [
                        "Janeiro",
                        "Fevereiro",
                        "Março",
                        "Abril",
                        "Maio",
                        "Junho",
                        "Julho",
                        "Agosto",
                        "Setembro",
                        "Outubro",
                        "Novembro",
                        "Dezembro"
                    ]
                },
                minDate: '01/09/2025',
                maxDate: '{{ date('d/m/Y') }}',

            },
            function (start, end, label) {
                if (start && end) {
                    var dateStart = timeConverter(start);
                    var dateEnd = timeConverter(end);
					document.querySelector('#d').value = dateStart+'|'+dateEnd;
                    //location.href = '{{ route('radio.statistics.r.type',['history','custom']) }}/' + dateStart + '|' + dateEnd;
					
                }
            });
			
			document.querySelector(".genR").addEventListener("click", function () {
				const a  = document.getElementById("a").value.trim();
				const d = document.getElementById("d").value.trim();

				const form = document.createElement("form");
				form.method = "POST";
				form.action = "https://app.brascast.com/report/";
				form.target = "_blank"; // abre em nova aba

				// Criar inputs ocultos e adicionar ao form
				const inputNome = document.createElement("input");
				inputNome.type = "hidden";
				inputNome.name = "a";
				inputNome.value = a;
				form.appendChild(inputNome);

				const inputEmail = document.createElement("input");
				inputEmail.type = "hidden";
				inputEmail.name = "d";
				inputEmail.value = d;
				form.appendChild(inputEmail);
				
				const inputPort = document.createElement("input");
				inputPort.type = "hidden";
				inputPort.name = "p";
				inputPort.value = "{{ $siteData->stream_port }}";
				form.appendChild(inputPort);

				// Adicionar formulário ao body, enviar e remover
				document.body.appendChild(form);
				form.submit();
				form.remove();
			});
</script>