@extends('layouts.master')
@section('content')
    {!! Form::open(['url' => action('SuperAdminSourceDataController@post_component_create', $driver)]) !!}
    <div class="container">
        <div class="row">
            <div class="col-md-12 text-center">
                {!! Html::image('img/icon_sourcedata.png') !!}
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 text-center">
                <h4 class="outside-container-header">Create New Components</h4>
            </div>
        </div>
        <div class="row grid-header">
            <div class="col-md-10 col-md-offset-1 no-left-pad">
                {{ Form::button_back() }}
            </div>
        </div>
        <div class="row">
            <div class="col-md-10 col-md-offset-1 grey-bg curve_container">
                <div class="source-with-image-wrapper">
                    <div class="row">
                        <div class="col-md-12 text-center">
                            <label class="source-data-label"><strong>Driver:</strong> {{ $driver->income_stream_name }}</label>
                        </div>
                    </div>
                    <hr class="grey-divider small-screen-divider">
                    <div id="new-component-wrapper">
                        <div id="new-component-row" class="row">
                            <div class="col-md-12 text-center">
                                {{ Form::label_styled('Component Name:', 'source-data-label', \App\Helpers\FormComponentHelper::SIZE_LARGE) }}
                                {{ Form::text_styled('new_component_0', null, 'account-pages-text-input md-lg', null) }}
                                {{ Form::hidden('active_0', 0) }}
                                {{ Form::checkbox('active_0', 1, null, ['class' => 'brand-checkbox no-fade']) }}
                                <label><span><span></span></span>Active</label>
                            </div>
                        </div>
                    </div>
                </div>
                <hr class="grey-divider small-screen-divider">
                <div class="row button-row small-screen-btn-row">
                    <div class="col-md-12 text-center">
                        {{ Form::button_ex('Add Another', null, 'add-new-component') }}
                        {{ Form::button_save('Done') }}
                    </div>
                </div>
            </div>
        </div>
    </div>
    {!! Form::close() !!}
@endsection
@section('page_script')
    <script>
        $(document).ready(function() {
            var componentCount = 0;
            $('#add-new-component').on('click', function() {
                componentCount++;
                $('#new-component-row')
                        .clone()
                        .attr('id', 'new-component-row-' + componentCount)
                        .appendTo('#new-component-wrapper')
                        .hide()
                        .fadeIn();
                var driverRow = $('#new-component-row-' + componentCount);
                driverRow.find(':text').attr('name', 'new_component_' + componentCount).val('');
                driverRow.find(':hidden').attr('name', 'active_' + componentCount);
                driverRow.find(':checkbox').attr('name', 'active_' + componentCount).prop('checked', false);
            })
        });
    </script>
@endsection