@extends('crudbooster::admin_template')

@section('content')


<div class='panel panel-default efit-add-product'>
  <div class='panel-heading eap-box'>{{ __('action.form_gnerator') }}</div>
    <div class='panel-body'>
    <form class="form-generator-code" post="post"  action="{{asset('singup/website')}}" id="generator_form">
            <div class="row">
                <div class="col-sm-3">
                    <p>Product:</p>
                </div>
                <div class="col-sm-9">
                    <div class="list_product">
                            @foreach ( $products as $product )
                            <label for="#list_item">
                                <input type="checkbox" value="{{$product->id}}" class="product_item" id="list_item"> {{$product->product_name}}
                            </label>
                            @endforeach
                    </div>
                </div>
            </div>
            {{-- <div class="row select-url">
                <div class="col-sm-3">
                    <p>After sign up :</p>
                </div>
                <div class="col-sm-9">
                    <select name="" id="" class="form-control">
                        <option value="">log in the user and redirect him to the product's start page</option>
                        <option value="">redirect him to a thank you page</option>
                    </select>
                </div>
            </div> --}}
            <button type="submit" class="btn btn-primary"> {{ __('action.generator_form_code') }}</button>
        </form>


        <div class="singup-form-code">
             <h1>{{ __('action.sign_up_form_code') }}</h1>
             <textarea   class="form-control" name="" id="form-code" cols="30" rows="10"></textarea>
        </div>
    </div>
  </div>
</div>
@endsection

@push('bottom')
    <style>
        .list_product {
            width: 100%;
            height: 200px;
            overflow-y: scroll;
            border:1px solid #ccc;
            padding: 10px
        }
        .list_product label {
           display: block;
        }
        .select-url{
            margin-top: 20px;
        }
        .singup-form-code h1{
             font-size: 25px;
             font-weight: 600
        }
    </style>

    <script>
        $(function(){
           $("#generator_form").on("submit", function(e){
               e.preventDefault();
                let product_id = [];
                    $(':checkbox:checked').each(function(i){
                     product_id[i]= $(this).val() ;
                });
                let url= $('#generator_form').attr('action');
                let action = url+"?param="+encodeURIComponent(product_id)+ "&redirect=";
                let form =`
                     <form action="${action}" method="get">
                         <input type="text"  name="firstName">
                     </form>
                 `
                  $("#form-code").html("");
                  $("#form-code").html(form);
                 //$("#form-code").append(form);
        
           }); 
        });
    </script>
@endpush