Page displays table of components and table containing chosen components for custom kit build. (Laravel4/Blade/jQuery)

build-a-kit

```
@extends('layouts.master')

@section('styles')
<link href="{{ asset('css/jquery.dataTables.css') }}" rel="stylesheet">
@stop

@section('body')

<div class="row search-row">
    <div class="col-xs-12 col-sm-6 col-md-4">
        <h3 class="kit-title">Build a Custom Kit</h3>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4">
        <h3 class="kit-title">Reference # {{ $ref }}</h3>
    </div>
</div>
<div class="row">
    <div class="build-kit col-md-12">
        <div class="panel panel-primary">
            <div class="panel-heading search-heading">
                <h3 class="panel-title">Item List &nbsp;<span class="processing"> <i class="fa fa-refresh fa-spin"></i></span> </h3>
                {{--<span class="pull-right">Colorization Key <button type="button" class="btn btn-xs btn-info popover-dismiss" data-toggle="popover"> <i class="fa fa-question-circle"></i></button></span>--}}
            </div>
            <div class="kit-table component-list">
                <table id="full-list" class="table display smaller-text table-condensed table-responsive">
                    <thead>
                    <tr>
                        <th><strong>Description</strong></th>
                        <th><strong>Part Number</strong></th>
                        <th><strong>Mfg Part</strong></th>
                        <th><strong>Image</strong></th>
                        <th><strong>UOM</strong></th>
                        <th style="padding-right:12px"><strong>Category</strong></th>
                        <th style="padding-right:14px"><strong>Vendor</strong></th>
                        <th><strong>MSRP</strong></th>
                        <th class="text-right"><strong>Add</strong></th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach ($cats as $cat)
                        @foreach ($cat->components as $comp)
                        <tr class="{{ $comp->id }}">
                            <td class="description">{{ $comp->description }}</td>
                            <td class="partnum">{{ $comp->partnum }}</td>
                            <td class="manuf_part">{{ $comp->man_partnum ? : '' }}</td>
                            <td class="image">{{ ($comp->image) ? '<a href="#img-modal" data-id="' . $comp->id . '" data-path="' . $comp->image . '" class="img-popup btn btn-success camera-btn"><i class="fa fa-camera"></i></a>' : '' }}</td>
                            <td class="uom">{{ $comp->uom }}</td>
                            <td class="category">{{ $cat->name }}</td>
                            <td class="manufacturer">{{ $comp->manufacturer }}</td>
                            <td class="msrp">{{ ($comp->msrp) ? '$' . $comp->msrp : '' }}</td>
                            <td class="text-right"><button type="button" class="btn-{{ $comp->id }} add-btn btn btn-success"><i class="fa fa-plus"></i></button></td>
                        </tr>
                        @endforeach
                    @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@foreach ($cats as $cat)
    @foreach ($cat->components as $comp)
    <div id="modal-{{ $comp->id }}" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">{{ $comp->partnum }}</h4>
                    <p>{{ $comp->description }}</p>
                </div>
                <div class="modal-body"></div>
            </div>
        </div>
    </div>
    @endforeach
@endforeach

{{-- var_dump(DB::getQueryLog()) --}}

{{ Form::open(['id' => 'kit-form', 'class' => 'form-inline', 'role' => 'form', 'route' => 'build-a-kit']) }}
{{ Form::hidden('newRef', $ref) }}

<div class="row">
    <div class="build-kit col-xs-12">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">Need to add something not in the item list above?</h3>
            </div>
            <table class="table table-condensed smaller-text" id="custom_add">
                <thead>
                    <tr>
                        <th class="col-md-3">Enter a McKesson part number</th>
                        <th class="col-md-8">Or enter a description of what you would like</th>
                        <th class="col-md-1 text-right">Add</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td id="custom_pn">{{ Form::text("", "", ["id" => "custom_pn", "class" => "form-control custom-add", "placeholder" => "Part Number"]) }}</td>
                        <td id="custom_desc">{{ Form::text("", "", ["id" => "custom_desc", "class" => "form-control custom-add", "placeholder" => "Or a description"]) }}</td>
                        <td class="text-right"><button type="button" id="custom-add-btn" class="btn btn-success"><i class="fa fa-plus"></i></button></td>
                    </tr>
                </tbody>
            </table>
        </div>

    </div>
</div>

<div class="row">
    <div class="build-kit col-xs-12">
        <div class="panel panel-primary" id="bom-panel">
            <div class="panel-heading">
                <h3 class="panel-title">My Custom Kit Build</h3>
                <div class="pull-right">
                    {{ Form::submit('Save Kit', ['id' => 'kit-submit', 'class' => 'btn btn-success btn-xs']) }}
                </div>
            </div>

            <div class="kit-table">
                <table class="table table-striped table-condensed smaller-text" id="bom">
                    <thead>
                    <tr>
                        <th><strong>Description</strong></th>
                        <th><strong>Part Number</strong></th>
                        <th><strong>UOM</strong></th>
                        <th><strong>Quantity</strong></th>
                        <th class="text-right"><strong>Remove?</strong></th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>

    </div>
</div>
{{ Form::close() }}



@stop

@section('scripts')
<script src="{{ asset('js/jquery.validate.min.js') }}"></script>
<script src="{{ asset('js/additional-methods.min.js') }}"></script>
<script src="{{ asset('js/jquery.dataTables.js') }}"></script>
<script src="{{ asset('js/dataTables.bootstrap.js') }}"></script>
<script>
    $(document).ready(function() {
        $('.img-popup').click(function(event) {
            var path = $(this).data('path');
            var imgId = $(this).data('id');
            $('#modal-' + imgId).find('.modal-body').html('<img class="component-popup" id="img-' + imgId + '" alt="{{ $comp->partnum }}">');
            $('#img-' + imgId).attr("src", path);
            $('#modal-' + imgId).modal('show');
        });
        $('#full-list').dataTable( {
            "paging":             false,
            "processing":       true,
            "dom":              '<"panel-heading"rfl>tp',
            "order":            [[ 0, "asc" ]],
            "columnDefs":       [{"orderable": false,
                                "targets": [3,4,5,7,8]
            }],
            "initComplete":     function(settings, json) {
                $('.processing').hide();
            }
        });


        var table = $('#full-list').DataTable();

        var catColumn = 5;
        $("#full-list thead th").each( function ( i ) {
            if (i === catColumn) {
                var select = $('<select><option value="">All Categories</option></select>')
                    .appendTo( $(this).empty() )
                    .on( 'change', function () {
                        table.column( i )
                            .search( $(this).val() )
                            .draw();
                    });
                table.column( i ).data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                });
            }
        });

        $('#full-list').dataTable().fnAdjustColumnSizing( false );
    } );

    var qty = '<input min="1" required="required" digits="digits" class="bom-qty form-control" name="qty[]" type="text" value="1">';

    var escapeHTML = (function () {
        'use strict';
        var chr = {
            '"': '&quot;', '&': '&amp;', "'": '&#39;',
            '/': '&#47;',  '<': '&lt;',  '>': '&gt;'
        };
        return function (text) {
            return text.replace(/[\"&'\/<>]/g, function (a) { return chr[a]; });
        };
    }());

    $("#custom-add-btn").on("click", function() {
        var cpn = $("input#custom_pn").val();
        var cds = $("input#custom_desc").val();
        var remove = "<td class='text-right'><button type='button' class='remove-btn btn btn-danger'><i class='fa fa-ban'></i></button></td>";
        $('<tr>' +
            '<td class="newDesc">' + cds + '</td>' +
            '<input type="hidden" name="description[]" value="' + escapeHTML(cds) + '" /> + ' +
            '<td class="newPartnum">' + cpn + '</td>' +
            '<input type="hidden" name="partnum[]" value="' + escapeHTML(cpn) + '" /> + ' +
            '<td class="newUom">TBD</td>' +
            '<input type="hidden" name="uom[]" value="TBD" />' +
            '<td class="newQty">' + qty + '</td>' +
            remove +
            '<input type="hidden" name="itemId[]" value="N/A" /> + ' +
            '</tr>').appendTo($("#bom"));
        $("input#custom_pn").val('');
        $("input#custom_desc").val('');
    });

    $("#full-list").on("click", ".add-btn", function() {
        var row = $(this).closest("tr");
        var itemId = ($(row).attr("class").split(' ')[0]); {{-- the split should grab only the first class since dataTables adds its own --}}
        var rowClass = ($(row).attr("class").split(' ')[1]);
        var newPartnum = $(row).find(".partnum").html();
        var newDesc = $(row).find(".description").html();
        var uom = $(row).find(".uom").html();
        var remove = "<td class='text-right'><button type='button' id='" + itemId + "' class='remove-btn btn btn-danger'><i class='fa fa-ban'></i></button></td>";
        $('<tr class=' + rowClass + '>' +
            '<td class="newDesc">' + newDesc + '</td>' +
            '<input type="hidden" name="description[]" value="' + escapeHTML(newDesc) + '" /> + ' +
            '<td class="newPartnum">' + newPartnum + "</td>" +
            '<input type="hidden" name="partnum[]" value="' + escapeHTML(newPartnum) + '" /> + ' +
            '<td class="newUom">' + uom + '</td>' +
            '<input type="hidden" name="uom[]" value="' + uom + '" /> + ' +
            '<td class="newQty">' + qty + '</td>' +
            remove +
            '<input type="hidden" name="itemId[]" value="' + itemId + '" /> + ' +
            '</tr>').appendTo($("#bom"));
        $("#full-list .btn-" + itemId).prop("disabled", true);
    });

    $("#bom").on("click", ".remove-btn", function() {
        var row = $(this).closest("tr");
        var oldItemId = $(row).find("button").attr("id");
        $(row).remove();
        $("#full-list .btn-" + oldItemId).prop("disabled", false);
    });

    $("#kit-submit").click(function () {
        var form = $("#kit-form");
        $("#custom_pn").prop("disabled", true);
        $("#custom_desc").prop("disabled", true);
        $(form).validate({
            submitHandler: function(form) {
                form.submit();
            }
        });
    });

    $('.popover-dismiss').popover({
        trigger: 'focus',
        placement: 'left',
        html: 'true',
        template: '<div class="popover popover-box"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>',
        title: 'Colorization Key',
        content: '<span class="colorization-popover">' +
            '<table class="table">' +
            '<tbody>' +
            '<tr><td class="key-swatch-high">High-cost Item</td></tr>' +
            '<tr><td class="key-swatch-low">Low-cost Item</td></tr>' +
            '<tr><td class="key-swatch-kit">Pre-built Kit Item</td></tr>' +
            '</tbody></table></span>'
    });
</script>
@stop
```