@section('title', __('site.page_polls_edit_title'))
@section('head')
    <link rel="stylesheet" href="/assets/js/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css">
@endsection
@include('includes/header')
@include('includes/topSite')
<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">
                        {{ __('site.page_polls_edit_h1') }}
                    </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('site.home.r') }}">{{ __('general.top_menu_item_site') }}</a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="javascript:void(0)">{{ __('site.menu_item_5') }}</a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="{{ route('site.polls.r') }}">{{ __('site.menu_item_5_sub_6') }}</a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">{{ __('site.action_add') }}</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>


    <div class="row">
        <div class="col-md-12">

            <div class="block block-rounded">
                <div class="block-content p-0">
                    <form action="{{ route('site.polls.u.do',$pollData->id) }}" method="POST">

                        <div class="pt-3 ps-3 pe-3 mb-3 h-width @if (\Session::has('error_name')) erro-inp @endif  ">
                            <label class="form-label" for="val-name">{{ __('site.page_polls_new_input_1') }}</label>
                            <input type="text" class="form-control @if (\Session::has('error_name')) is-invalid @endif" id="val-name" name="name" value="{{ $pollData->name }}" autocomplete="off">
                            @if (\Session::has('error_name')) <div id="msgerror_name" class="form-text text-danger"> {!! \Session::get('error_name') !!} </div> @endif
                        </div>


                        <div class="ps-3 pe-3 mb-3 h-width">
                            <label class="form-label" for="example-text-input">{{ __('site.page_polls_new_input_2') }}</label>
                            <select class="form-select" name="multiple">
                                <option value="1" {{ ($pollData->multiple == '1' ? 'selected' : '') }}>{{ __('site.page_polls_new_input_2_1') }}</option>
                                <option value="0" {{ (!$pollData->multiple || $pollData->multiple == '0' ? 'selected' : '') }}>{{ __('site.page_polls_new_input_2_2') }}</option>
                            </select>
                        </div>

                        <div class="ps-3 pe-3 mb-3 h-width">
                            <label class="form-label" for="example-text-input">{{ __('site.page_polls_new_input_3') }}</label>
                            <select class="form-select" name="unique_vote">
                                <option value="1" {{ (!$pollData->unique_vote || $pollData->unique_vote == '1' ? 'selected' : '') }}>{{ __('site.page_polls_new_input_3_1') }}</option>
                                <option value="0" {{ ($pollData->unique_vote == '0' ? 'selected' : '') }}>{{ __('site.page_polls_new_input_3_2') }}</option>
                            </select>
                        </div>

                        <div class="ps-3 pe-3 mb-3 h-width">
                            <label class="form-label" for="example-text-input">{{ __('site.page_polls_new_input_4') }}</label>
                            <select class="form-select endSelect" name="end_select">
                                <option value="0" {{ (!$pollData->date_end ? 'selected' : '')  }}>{{ __('site.action_no') }}</option>
                                <option value="1" {{ ($pollData->date_end ? 'selected' : '')  }}>{{ __('site.action_yes') }}</option>
                            </select>
                        </div>

                        <div class="ps-3 pe-3 mb-3 h-width end_input {{ ($pollData->date_end ? '' : 'd-none')  }}">
                            <label class="form-label" for="example-text-input">{{ __('site.page_promo_new_form_3') }}</label>
                            <input type="text" class="form-control" id="date_end" value="{{ ($pollData->date_end ? date('d/m/Y',strtotime($pollData->date_end)) : '')  }}" name="date_end" autocomplete="off">
                        </div>



                        <div class="mb-3 mt-4 border-bottom border-1 ps-3 pe-3 pb-1"></div>

                        <input type="hidden" value="{{ count($pollOptions) }}" name="total_chq" id="total_chq">

                        @php
                            $i=0;
                            foreach($pollOptions as $option){
                                $percent =  ($option->total > 0 ? round(($option->total / $totalVotes[0]->qtd) * 100) : 0);
                                //round(($option->total ? ($totalVoteds/$option->total) : 0)*100);
                        @endphp

                        <div class="ps-3 pe-3 mb-3 h-width">
                            <label class="form-label">{{ __('site.page_polls_new_option') }} ({{ ($option->total == '1' ? $option->total.' '.__('site.page_polls_vote') : $option->total.' '.__('site.page_polls_votes')) }})</label>
                            <div class="input-group">
                                <span class="input-group-text d-flex justify-content-center p-0" ><div style="max-width:80px; min-width:80px;height: 36px; border-radius:3px 0px 0px 3px;" class="progress mb-0">
            <div class="progress-bar" role="progressbar" style="width: {{ $percent }}%;">
            </div>
          </div> <span class="fs-sm fw-semibold position-absolute">{{ $percent }}%</span></span>
                                <input type="text" class="form-control" name="options[{{ $option->id }}]" value="{{ (old('options') ? old('options')[$i] : $option->name) }}" autocomplete="off">
                            </div>
                        </div>

                        @php $i++; } @endphp





                        <input type="hidden" value="{{ (old('total_chq') ? old('total_chq') : '0') }}" name="total_chq" id="total_chq">

                        <div id="new_chq">
                            @if(old('options') && count(old('options')) > 1)

                                @php
                                    $i=0;
                                    foreach(old('options') as $field){
                                        if($i > 1){
                                        if(!old('options')[$i]){ $addon = '<div id="msgerror_input_'.$i.'" class="form-text text-danger">'.__('site.site_input_req').'</div>'; }
                                        echo '<div class="ps-3 pe-3 mb-3 h-width addInp-'.$i.'  '.(!old('options')[$i] ? 'erro-inp' : '').'"><label class="form-label">'.__('site.page_polls_new_option').'</label><div class="input-group"> <input type="text" class="form-control '.(!old('options')[$i] ? 'is-invalid' : '').'" name="options[]" autocomplete="off"> <button type="button" id="'.$i.'" class="btn removeInp btn-danger"><i class="fa fa-xmark"></i></button> </div>'.$addon.'</div>';
                                        }
                                        $addon = '';
                                        $i++;
                                    }
                                @endphp

                            @endif
                        </div>

                        <div class="mb-3"><a class="ps-3 addInput clickable mt-0">{{ __('site.page_polls_new_add_option') }}</a></div>

                </div>
                <div class="block-content py-2 border-top">
                    <button type="submit" class="btn btn-primary saveBtn">{{ __('site.action_save') }}</button>
                </div>
                </form>
            </div>

        </div>
    </div>

</div>

</div>

</main>


@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>
    $('#date_end').datepicker({
        autoclose: true,
        startDate: '{{ date('d/m/Y') }}',
        endDate: Infinity,
        orientation: "bottom",
        format: 'dd/mm/yyyy',
        language: 'pt-BR',
    });


    $('.addInput').on('click', add);
    $('body').on('click','.removeInp', remove);

    $(".endSelect").change(function(){
        if($(this).val() == 1){
            $('.end_input').removeClass('d-none');
        }else{
            $('.end_input').addClass('d-none');
        }
    });

    function add() {
        var new_chq_no = parseInt($('#total_chq').val()) + 1;
        var new_input = '<div class="ps-3 pe-3 mb-3 h-width addInp-'+new_chq_no+'"><label class="form-label">Opção</label><div class="input-group"> <span class="input-group-text d-flex justify-content-center p-0"><div style="max-width:80px; min-width:80px;height: 36px; border-radius:3px 0px 0px 3px;" class="progress mb-0"> <div class="progress-bar" role="progressbar" style="width: 0%;"> </div> </div> <span class="fs-sm fw-semibold position-absolute">0%</span></span> <input type="text" class="form-control" name="options[]" autocomplete="off"> <button type="button" id="'+new_chq_no+'"  class="btn removeInp btn-danger"><i class="fa fa-xmark"></i></button></div></div>';
        $('#new_chq').append(new_input);
        $('#total_chq').val(new_chq_no);
    }

    function remove() {
        var id = $(this).attr('id');
        var last_chq_no = $('#total_chq').val();
        $('.addInp-'+id).remove();
        $('#total_chq').val(last_chq_no - 1);
    }

</script>
</body>
</html>