@extends('layout.main')

@section('content')
    <ol class="breadcrumb bc-3">
        <li> <a href="{{URL::to('dashboard')}}"><i class="entypo-home"></i>Home</a> </li>
        <li class="active"> <strong>Integration</strong> </li>
    </ol>
    <h3>Integration</h3>
    @include('includes.errors')
    @include('includes.success')
    <style>
        .col-md-4{
            padding-left:5px;
            padding-right:5px;
        }
        .dataTables_filter label{
            display:none !important;
        }
        .dataTables_wrapper .export-data{
            right: 30px !important;
        }
        #selectcheckbox{
            padding: 15px 10px;
        }
        input[type="radio"].js {
            display: none;
        }

        .newredio.js {
            display: block;
            float: left;
            margin-right: 10px;
            border: 1px solid #ababab;
            color: #ababab;
            text-align: center;
            padding: 25px;
            height:25%;
            width: 25%;
            cursor: pointer;
        }

        .newredio.js.active {
            border: 1px solid #21a9e1;
            color: #ababab;
            font-weight: bold;
        }

        .newredio i {
            color:green;
        }
        .subselected{
            color:green !important;
            font-weight:bold;
        }
        .form-horizontal .control-label{
            text-align: left !important;
        }

        /*#tab2-2{
            margin: 0 0 0 50px;
        }*/
        .pager li.disabled{
            display: none;
        }
        .export-data{
            display: none;
        }
        .pager li > a, .pager li > span{
            background-color: #000000 !important;
            border-radius:3px;
            border:none;
        }
        .pager li > a{

            color : #ffffff !important;
        }
        .gatewayloading{
            display:none;
            color: #ffffff;
            background: #303641;
            display: table;
            position: fixed;
            visibility: visible;
            padding: 10px;
            text-align: center;
            left: 50%; top: auto;
            margin: 71px auto;
            z-index: 999;
            border: 1px solid #303641;
        }
        #st1 a,#st2 a,#st3 a{
            cursor: default;
            text-decoration: none;
        }

        #csvimport{
            padding: 0 75px;
        }
        h5{
            font-size: 14px !important;
        }
        .subcategoryblock, .subcategorycontent{display:none;}
        .secondstep{padding-left:0px !important; padding-bottom:19px !important; padding-top:19px !important; }
        .integrationimage{height:40px !important;}
        #quickbook-connect{display: none;}
        #xero-connect{display: none;}
        .selectbatchupload{
            border-color: #ebebeb !important;
            background: #fff;
            background-clip: border-box;
            -moz-box-shadow: none;
            -webkit-box-shadow: none;
            box-shadow: none;
            -webkit-background-clip: padding-box;
            -moz-background-clip: padding;
            background-clip: padding-box;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
            height: 21px;
            line-height: 20px;
            outline: none;
            outline: none;
        }
        .styled-select {
            /*background: url(http://i62.tinypic.com/15xvbd5.png) no-repeat 96% 0;*/
            border-color: #ebebeb !important;
            color:#555555;
            background: #fff;
            height: 25px;
            overflow: hidden;
            width: 240px;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
        }

        .styled-select select {
            background: transparent;
            border: none;
            font-size: 11px;
            height: 29px;
            padding: 5px; /* If you add too much padding here, the options won't show in IE */
            width: 268px;
        }

        .styled-select.slate {
            background: url(http://i62.tinypic.com/2e3ybe1.jpg) no-repeat right center;
            height: 30px;
            width: 240px;
        }

        .styled-select.slate select {
            border: 1px solid #ebebeb;
            font-size: 14px;
            height: 34px;
            width: 268px;
        }
    </style>
    <div class="panel">
        <form id="rootwizard-2" method="post" action="" class="form-wizard validate form-horizontal form-groups-bordered" enctype="multipart/form-data">
            <div style="display:none;" class="steps-progress">
                <div class="progress-indicator"></div>
            </div>
            <ul style="display:none;" id="wizardul" >
                <li class="active" id="st1"> <a href="#tab2-1" data-toggle="tab"><span>1</span>
                        <h5 class="test">Select Category</h5>
                    </a> </li>
                <li id="st2"> <a href="#tab2-2" data-toggle="tab"><span>2</span>
                        <h5 class="test">Select Sub Category</h5>
                    </a> </li>
            </ul>
            <div class="tab-content"> <span class="itype">
      <h3 class="firstStep">Select Category</h3>
      <h3 style="display:none;" class="SecondStep">Select Subcategory</h3>
      </span>
                <div class="tab-pane active" id="tab2-1">
                    <div class="row"> </br>
                        </br>
                        <div class="col-md-1"></div>
                        <div class="col-md-9"> @foreach($categories as $key => $CategoriesData)