<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Perfekt Design | </title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.7 -->
    <link rel="stylesheet" href="/assets/vendor/bower_components/bootstrap/dist/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="/assets/vendor/bower_components/font-awesome/css/font-awesome.min.css">
    <!-- DataTables -->
    <link rel="stylesheet"
          href="/assets/vendor/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
    <link rel="stylesheet"
          href="/assets/vendor/bower_components/datatables.net-buttons-bs/css/buttons.bootstrap.min.css">
    <link rel="stylesheet"
          href="/assets/vendor/bower_components/datatables.net-responsive-bs/css/responsive.bootstrap.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="/assets/vendor/bower_components/Ionicons/css/ionicons.min.css">
    <!-- slider -->
    <link rel="stylesheet"
          href="/assets/vendor/bower_components/admin-lte/plugins/bootstrap-slider/slider.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="/assets/vendor/bower_components/admin-lte/dist/css/AdminLTE.min.css">
    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
    <link rel="stylesheet"
          href="/assets/vendor/bower_components/admin-lte/dist/css/skins/_all-skins.min.css">
    <!-- AdminLTE Skin modifications -->
    <link rel="stylesheet" href="/assets/css/prodution.css?v=010320191622">
    <!-- jvectormap -->
    <link rel="stylesheet" href="/assets/vendor/bower_components/jvectormap/jquery-jvectormap.css">
    <!-- Date Picker -->
    <link rel="stylesheet"
          href="/assets/vendor/bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css">
    <!-- Daterange picker -->
    <link rel="stylesheet"
          href="/assets/vendor/bower_components/bootstrap-daterangepicker/daterangepicker.css">
    <!-- bootstrap time picker -->
    <link rel="stylesheet"
          href="/assets/vendor/bower_components/admin-lte/plugins/timepicker/bootstrap-timepicker.min.css">
    <!-- bootstrap wysihtml5 - text editor -->
    <link rel="stylesheet"
          href="/assets/vendor/bower_components/admin-lte/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- Google Font -->
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Oswald:300,400,600,700,300italic,400italic,600italic">
    </head>
<body class="hold-transition skin-black sidebar-mini">
    <form name="complaintbundle_complaint" method="post" enctype="multipart/form-data">
    <div id="customer_complaint_wrapper">
        <header>
            <h4>Złóż reklamację online</h4>
        </header>
        <section>
            <div class="row">
                <div class="col-sm-6 col-xs-12">
                    <a class="button" href="#" id="customer_complaint_step_1_back_btn">
                        <div id="customer_complaint_step_1" class="customer_complaint_step active">
                            <label>Dane podstawowe</label>
                        </div>
                    </a>
                </div>
                <div class="col-sm-6 col-xs-12">
                    <a class="button" href="#" id="customer_complaint_step_2_back_btn">
                        <div id="customer_complaint_step_2" class="customer_complaint_step inactive">
                            <label>Dane kontaktowe</label>
                        </div>
                    </a>
                </div>
            </div>
        </section>
        <section id="step_1">
            <div class="row">
                <div class="col-sm-6 col-xs-12">
                    <h4>Gdzie został zakupiony towar?</h4>
                    <div class="row">
                        <div class="col-xs-4">
                            <div class="form-group"><label class="no-bold control-label required" for="complaintbundle_complaint_shopDepartment">Sklep</label><select id="complaintbundle_complaint_shopDepartment" name="complaintbundle_complaint[shopDepartment]" class="form-control"><option value="1">SALON Tarnowskie Góry</option><option value="2">SALON Piekary Śląskie</option><option value="3">SALON Ruda Śląska</option><option value="4">SALON Mikołów</option><option value="5">SALON Opole</option><option value="6">SALON Lubliniec</option><option value="7">SALON Pszczyna</option><option value="8">Przedstawiciel handlowy</option><option value="9">SALON Żywiec</option></select></div>
                        </div>
                    </div>
                    <h4>Podaj datę wykonania montażu</h4>
                    <div class="row">
                        <div class="col-xs-4">
                            <div class="form-group"><label class="no-bold control-label required" for="complaintbundle_complaint_assemblyDate">Data montażu</label><input type="text" id="complaintbundle_complaint_assemblyDate" name="complaintbundle_complaint[assemblyDate]" required="required" class="form-control input-inline datepicker form-control" data-provide="datepicker" data-date-format="dd-mm-yyyy" autocomplete="off" /></div>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12">
                    <h4>Jakiego produktu dotyczy reklamacja?</h4>
                    <label class="no-bold control-label required">Produkty</label>
                    
                    <ul class="complaint-items"
                        data-prototype="&#x20;&#x20;&#x20;&#x20;&lt;div&#x20;class&#x3D;&quot;row&quot;&gt;&#x0A;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&lt;i&#x20;class&#x3D;&quot;pull-right&#x20;fa&#x20;fa-lg&#x20;fa-remove&#x20;text-red&#x20;cursor-pointer&quot;&#x20;onclick&#x3D;&quot;&#x24;&#x28;this&#x29;.closest&#x28;&#x27;li&#x27;&#x29;.remove&#x28;&#x29;&#x3B;&quot;&gt;&lt;&#x2F;i&gt;&#x0A;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&lt;div&#x20;class&#x3D;&quot;col-xs-2&quot;&gt;&lt;div&#x20;class&#x3D;&quot;form-group&quot;&gt;&lt;label&#x20;class&#x3D;&quot;no-bold&#x20;control-label&#x20;required&quot;&#x20;for&#x3D;&quot;complaintbundle_complaint_items___name___product&quot;&gt;Produkt&lt;&#x2F;label&gt;&lt;select&#x20;id&#x3D;&quot;complaintbundle_complaint_items___name___product&quot;&#x20;name&#x3D;&quot;complaintbundle_complaint&#x5B;items&#x5D;&#x5B;__name__&#x5D;&#x5B;product&#x5D;&quot;&#x20;class&#x3D;&quot;form-control&quot;&gt;&lt;option&#x20;value&#x3D;&quot;1&quot;&gt;Drzwi&lt;&#x2F;option&gt;&lt;option&#x20;value&#x3D;&quot;2&quot;&gt;Okna&lt;&#x2F;option&gt;&lt;option&#x20;value&#x3D;&quot;3&quot;&gt;Rolety&lt;&#x2F;option&gt;&lt;option&#x20;value&#x3D;&quot;4&quot;&gt;Brama&lt;&#x2F;option&gt;&lt;option&#x20;value&#x3D;&quot;5&quot;&gt;Monta&#x017C;&lt;&#x2F;option&gt;&lt;option&#x20;value&#x3D;&quot;6&quot;&gt;Inne&lt;&#x2F;option&gt;&lt;&#x2F;select&gt;&lt;&#x2F;div&gt;&lt;&#x2F;div&gt;&#x0A;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&lt;div&#x20;class&#x3D;&quot;col-xs-2&quot;&gt;&lt;div&#x20;class&#x3D;&quot;form-group&quot;&gt;&lt;label&#x20;class&#x3D;&quot;no-bold&#x20;control-label&#x20;required&quot;&gt;Przyczyna&lt;&#x2F;label&gt;&lt;div&#x20;id&#x3D;&quot;complaintbundle_complaint_items___name___reasons&quot;&gt;&lt;div&#x20;class&#x3D;&quot;checkbox&quot;&gt;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&lt;label&#x20;for&#x3D;&quot;complaintbundle_complaint_items___name___reasons_1&quot;&#x20;class&#x3D;&quot;no-bold&quot;&gt;&lt;input&#x20;type&#x3D;&quot;checkbox&quot;&#x20;id&#x3D;&quot;complaintbundle_complaint_items___name___reasons_1&quot;&#x20;name&#x3D;&quot;complaintbundle_complaint&#x5B;items&#x5D;&#x5B;__name__&#x5D;&#x5B;reasons&#x5D;&#x5B;&#x5D;&quot;&#x20;value&#x3D;&quot;1&quot;&#x20;&#x2F;&gt;&#x20;Uszkodzona&#x20;okleina&#x20;okienna&lt;&#x2F;label&gt;&#x0A;&#x20;&#x20;&#x20;&#x20;&lt;&#x2F;div&gt;&lt;div&#x20;class&#x3D;&quot;checkbox&quot;&gt;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&lt;label&#x20;for&#x3D;&quot;complaintbundle_complaint_items___name___reasons_2&quot;&#x20;class&#x3D;&quot;no-bold&quot;&gt;&lt;input&#x20;type&#x3D;&quot;checkbox&quot;&#x20;id&#x3D;&quot;complaintbundle_complaint_items___name___reasons_2&quot;&#x20;name&#x3D;&quot;complaintbundle_complaint&#x5B;items&#x5D;&#x5B;__name__&#x5D;&#x5B;reasons&#x5D;&#x5B;&#x5D;&quot;&#x20;value&#x3D;&quot;2&quot;&#x20;&#x2F;&gt;&#x20;Uszkodzony&#x20;pakiet&#x20;szybowy&lt;&#x2F;label&gt;&#x0A;&#x20;&#x20;&#x20;&#x20;&lt;&#x2F;div&gt;&lt;div&#x20;class&#x3D;&quot;checkbox&quot;&gt;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&lt;label&#x20;for&#x3D;&quot;complaintbundle_complaint_items___name___reasons_3&quot;&#x20;class&#x3D;&quot;no-bold&quot;&gt;&lt;input&#x20;type&#x3D;&quot;checkbox&quot;&#x20;id&#x3D;&quot;complaintbundle_complaint_items___name___reasons_3&quot;&#x20;name&#x3D;&quot;complaintbundle_complaint&#x5B;items&#x5D;&#x5B;__name__&#x5D;&#x5B;reasons&#x5D;&#x5B;&#x5D;&quot;&#x20;value&#x3D;&quot;3&quot;&#x20;&#x2F;&gt;&#x20;Regulacja,&#x20;nieszczelno&#x015B;&#x0107;&lt;&#x2F;label&gt;&#x0A;&#x20;&#x20;&#x20;&#x20;&lt;&#x2F;div&gt;&lt;div&#x20;class&#x3D;&quot;checkbox&quot;&gt;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&lt;label&#x20;for&#x3D;&quot;complaintbundle_complaint_items___name___reasons_4&quot;&#x20;class&#x3D;&quot;no-bold&quot;&gt;&lt;input&#x20;type&#x3D;&quot;checkbox&quot;&#x20;id&#x3D;&quot;complaintbundle_complaint_items___name___reasons_4&quot;&#x20;name&#x3D;&quot;complaintbundle_complaint&#x5B;items&#x5D;&#x5B;__name__&#x5D;&#x5B;reasons&#x5D;&#x5B;&#x5D;&quot;&#x20;value&#x3D;&quot;4&quot;&#x20;&#x2F;&gt;&#x20;Inne&lt;&#x2F;label&gt;&#x0A;&#x20;&#x20;&#x20;&#x20;&lt;&#x2F;div&gt;&lt;div&#x20;class&#x3D;&quot;checkbox&quot;&gt;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&lt;label&#x20;for&#x3D;&quot;complaintbundle_complaint_items___name___reasons_5&quot;&#x20;class&#x3D;&quot;no-bold&quot;&gt;&lt;input&#x20;type&#x3D;&quot;checkbox&quot;&#x20;id&#x3D;&quot;complaintbundle_complaint_items___name___reasons_5&quot;&#x20;name&#x3D;&quot;complaintbundle_complaint&#x5B;items&#x5D;&#x5B;__name__&#x5D;&#x5B;reasons&#x5D;&#x5B;&#x5D;&quot;&#x20;value&#x3D;&quot;5&quot;&#x20;&#x2F;&gt;&#x20;Uszkodzony&#x20;panel&lt;&#x2F;label&gt;&#x0A;&#x20;&#x20;&#x20;&#x20;&lt;&#x2F;div&gt;&lt;div&#x20;class&#x3D;&quot;checkbox&quot;&gt;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&lt;label&#x20;for&#x3D;&quot;complaintbundle_complaint_items___name___reasons_6&quot;&#x20;class&#x3D;&quot;no-bold&quot;&gt;&lt;input&#x20;type&#x3D;&quot;checkbox&quot;&#x20;id&#x3D;&quot;complaintbundle_complaint_items___name___reasons_6&quot;&#x20;name&#x3D;&quot;complaintbundle_complaint&#x5B;items&#x5D;&#x5B;__name__&#x5D;&#x5B;reasons&#x5D;&#x5B;&#x5D;&quot;&#x20;value&#x3D;&quot;6&quot;&#x20;&#x2F;&gt;&#x20;Zerwany&#x20;pasek&#x2F;&#x0142;a&#x0144;cuch&lt;&#x2F;label&gt;&#x0A;&#x20;&#x20;&#x20;&#x20;&lt;&#x2F;div&gt;&lt;div&#x20;class&#x3D;&quot;checkbox&quot;&gt;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&lt;label&#x20;for&#x3D;&quot;complaintbundle_complaint_items___name___reasons_7&quot;&#x20;class&#x3D;&quot;no-bold&quot;&gt;&lt;input&#x20;type&#x3D;&quot;checkbox&quot;&#x20;id&#x3D;&quot;complaintbundle_complaint_items___name___reasons_7&quot;&#x20;name&#x3D;&quot;complaintbundle_complaint&#x5B;items&#x5D;&#x5B;__name__&#x5D;&#x5B;reasons&#x5D;&#x5B;&#x5D;&quot;&#x20;value&#x3D;&quot;7&quot;&#x20;&#x2F;&gt;&#x20;Problem&#x20;z&#x20;otwieraniem&#x2F;zamykaniem&lt;&#x2F;label&gt;&#x0A;&#x20;&#x20;&#x20;&#x20;&lt;&#x2F;div&gt;&lt;div&#x20;class&#x3D;&quot;checkbox&quot;&gt;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&lt;label&#x20;for&#x3D;&quot;complaintbundle_complaint_items___name___reasons_8&quot;&#x20;class&#x3D;&quot;no-bold&quot;&gt;&lt;input&#x20;type&#x3D;&quot;checkbox&quot;&#x20;id&#x3D;&quot;complaintbundle_complaint_items___name___reasons_8&quot;&#x20;name&#x3D;&quot;complaintbundle_complaint&#x5B;items&#x5D;&#x5B;__name__&#x5D;&#x5B;reasons&#x5D;&#x5B;&#x5D;&quot;&#x20;value&#x3D;&quot;8&quot;&#x20;&#x2F;&gt;&#x20;Problem&#x20;z&#x20;zamkni&#x0119;ciem&lt;&#x2F;label&gt;&#x0A;&#x20;&#x20;&#x20;&#x20;&lt;&#x2F;div&gt;&lt;div&#x20;class&#x3D;&quot;checkbox&quot;&gt;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&lt;label&#x20;for&#x3D;&quot;complaintbundle_complaint_items___name___reasons_9&quot;&#x20;class&#x3D;&quot;no-bold&quot;&gt;&lt;input&#x20;type&#x3D;&quot;checkbox&quot;&#x20;id&#x3D;&quot;complaintbundle_complaint_items___name___reasons_9&quot;&#x20;name&#x3D;&quot;complaintbundle_complaint&#x5B;items&#x5D;&#x5B;__name__&#x5D;&#x5B;reasons&#x5D;&#x5B;&#x5D;&quot;&#x20;value&#x3D;&quot;9&quot;&#x20;&#x2F;&gt;&#x20;Nieszczelno&#x015B;&#x0107;&lt;&#x2F;label&gt;&#x0A;&#x20;&#x20;&#x20;&#x20;&lt;&#x2F;div&gt;&lt;div&#x20;class&#x3D;&quot;checkbox&quot;&gt;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&lt;label&#x20;for&#x3D;&quot;complaintbundle_complaint_items___name___reasons_10&quot;&#x20;class&#x3D;&quot;no-bold&quot;&gt;&lt;input&#x20;type&#x3D;&quot;checkbox&quot;&#x20;id&#x3D;&quot;complaintbundle_complaint_items___name___reasons_10&quot;&#x20;name&#x3D;&quot;complaintbundle_complaint&#x5B;items&#x5D;&#x5B;__name__&#x5D;&#x5B;reasons&#x5D;&#x5B;&#x5D;&quot;&#x20;value&#x3D;&quot;10&quot;&#x20;&#x2F;&gt;&#x20;Roleta&#x20;nie&#x20;opuszcza&#x2F;&#x20;nie&#x20;otwiera&#x20;&#x20;si&#x0119;&#x20;do&#x20;ko&#x0144;ca&lt;&#x2F;label&gt;&#x0A;&#x20;&#x20;&#x20;&#x20;&lt;&#x2F;div&gt;&lt;div&#x20;class&#x3D;&quot;checkbox&quot;&gt;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&lt;label&#x20;for&#x3D;&quot;complaintbundle_complaint_items___name___reasons_11&quot;&#x20;class&#x3D;&quot;no-bold&quot;&gt;&lt;input&#x20;type&#x3D;&quot;checkbox&quot;&#x20;id&#x3D;&quot;complaintbundle_complaint_items___name___reasons_11&quot;&#x20;name&#x3D;&quot;complaintbundle_complaint&#x5B;items&#x5D;&#x5B;__name__&#x5D;&#x5B;reasons&#x5D;&#x5B;&#x5D;&quot;&#x20;value&#x3D;&quot;11&quot;&#x20;&#x2F;&gt;&#x20;Uszkodzony&#x20;pancerz&#x20;lub&#x20;prowadnice&lt;&#x2F;label&gt;&#x0A;&#x20;&#x20;&#x20;&#x20;&lt;&#x2F;div&gt;&lt;div&#x20;class&#x3D;&quot;checkbox&quot;&gt;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&lt;label&#x20;for&#x3D;&quot;complaintbundle_complaint_items___name___reasons_12&quot;&#x20;class&#x3D;&quot;no-bold&quot;&gt;&lt;input&#x20;type&#x3D;&quot;checkbox&quot;&#x20;id&#x3D;&quot;complaintbundle_complaint_items___name___reasons_12&quot;&#x20;name&#x3D;&quot;complaintbundle_complaint&#x5B;items&#x5D;&#x5B;__name__&#x5D;&#x5B;reasons&#x5D;&#x5B;&#x5D;&quot;&#x20;value&#x3D;&quot;12&quot;&#x20;&#x2F;&gt;&#x20;Problem&#x20;z&#x20;silnikiem&#x20;lub&#x20;kasetk&#x0105;&lt;&#x2F;label&gt;&#x0A;&#x20;&#x20;&#x20;&#x20;&lt;&#x2F;div&gt;&lt;&#x2F;div&gt;&lt;&#x2F;div&gt;&lt;&#x2F;div&gt;&#x0A;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&lt;div&#x20;class&#x3D;&quot;col-xs-2&quot;&#x20;style&#x3D;&quot;display&#x3A;none&#x3B;&quot;&gt;&lt;div&#x20;class&#x3D;&quot;form-group&quot;&gt;&lt;label&#x20;class&#x3D;&quot;no-bold&#x20;control-label&quot;&#x20;for&#x3D;&quot;complaintbundle_complaint_items___name___productionNumber&quot;&gt;Numer&#x20;produkcyjny&lt;&#x2F;label&gt;&lt;input&#x20;type&#x3D;&quot;text&quot;&#x20;id&#x3D;&quot;complaintbundle_complaint_items___name___productionNumber&quot;&#x20;name&#x3D;&quot;complaintbundle_complaint&#x5B;items&#x5D;&#x5B;__name__&#x5D;&#x5B;productionNumber&#x5D;&quot;&#x20;maxlength&#x3D;&quot;255&quot;&#x20;class&#x3D;&quot;form-control&quot;&#x20;&#x2F;&gt;&lt;&#x2F;div&gt;&lt;&#x2F;div&gt;&#x0A;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&lt;div&#x20;class&#x3D;&quot;col-xs-2&quot;&#x20;style&#x3D;&quot;display&#x3A;none&#x3B;&quot;&gt;&lt;div&#x20;class&#x3D;&quot;form-group&quot;&gt;&lt;label&#x20;class&#x3D;&quot;no-bold&#x20;control-label&quot;&#x20;for&#x3D;&quot;complaintbundle_complaint_items___name___manufacturer&quot;&gt;Producent&lt;&#x2F;label&gt;&lt;input&#x20;type&#x3D;&quot;text&quot;&#x20;id&#x3D;&quot;complaintbundle_complaint_items___name___manufacturer&quot;&#x20;name&#x3D;&quot;complaintbundle_complaint&#x5B;items&#x5D;&#x5B;__name__&#x5D;&#x5B;manufacturer&#x5D;&quot;&#x20;maxlength&#x3D;&quot;255&quot;&#x20;class&#x3D;&quot;form-control&quot;&#x20;&#x2F;&gt;&lt;&#x2F;div&gt;&lt;&#x2F;div&gt;&#x0A;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&lt;div&#x20;class&#x3D;&quot;col-xs-2&quot;&gt;&lt;div&#x20;class&#x3D;&quot;form-group&quot;&gt;&lt;label&#x20;class&#x3D;&quot;no-bold&#x20;control-label&quot;&#x20;for&#x3D;&quot;complaintbundle_complaint_items___name___comment&quot;&gt;Dodaj&#x20;komentarz&lt;&#x2F;label&gt;&lt;textarea&#x20;id&#x3D;&quot;complaintbundle_complaint_items___name___comment&quot;&#x20;name&#x3D;&quot;complaintbundle_complaint&#x5B;items&#x5D;&#x5B;__name__&#x5D;&#x5B;comment&#x5D;&quot;&#x20;class&#x3D;&quot;form-control&quot;&gt;&lt;&#x2F;textarea&gt;&lt;&#x2F;div&gt;&lt;&#x2F;div&gt;&#x0A;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&lt;div&#x20;class&#x3D;&quot;col-xs-2&quot;&gt;&#x0A;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&lt;form&#x20;name&#x3D;&quot;attachment&quot;&#x20;method&#x3D;&quot;post&quot;&#x20;enctype&#x3D;&quot;multipart&#x2F;form-data&quot;&gt;&#x0A;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&lt;label&#x20;class&#x3D;&quot;no-bold&#x20;control-label&quot;&#x20;for&#x3D;&quot;attachment_fileName&quot;&gt;Za&#x0142;&#x0105;czniki&lt;&#x2F;label&gt;&#x0A;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&lt;input&#x20;type&#x3D;&quot;file&quot;&#x20;id&#x3D;&quot;attachment_fileName&quot;&#x20;name&#x3D;&quot;attachment&#x5B;fileName&#x5D;&quot;&gt;&#x0A;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&lt;&#x2F;form&gt;&#x0A;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&lt;div&#x20;class&#x3D;&quot;attachments&quot;&gt;&#x0A;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&lt;&#x2F;div&gt;&#x0A;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&lt;&#x2F;div&gt;&#x0A;&#x20;&#x20;&#x20;&#x20;&lt;&#x2F;div&gt;&#x0A;">
                                            </ul>
                                    </div>
                <div class="col-sm-6 col-xs-12">
                    <h4>Gdzie znajduje się reklamowany produkt(y)?</h4>
                    <div class="row">
                        <div class="col-xs-4">
                            <div class="form-group"><label class="no-bold control-label required" for="complaintbundle_complaint_postalCode">Kod pocztowy</label><input type="text" id="complaintbundle_complaint_postalCode" name="complaintbundle_complaint[postalCode]" required="required" maxlength="16" class="form-control" /></div>
                        </div>
                        <div class="col-xs-8">
                            <div class="form-group"><label class="no-bold control-label required" for="complaintbundle_complaint_city">Miasto</label><input type="text" id="complaintbundle_complaint_city" name="complaintbundle_complaint[city]" required="required" maxlength="255" class="form-control" /></div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-6">
                            <div class="form-group"><label class="no-bold control-label required" for="complaintbundle_complaint_street">Ulica</label><input type="text" id="complaintbundle_complaint_street" name="complaintbundle_complaint[street]" required="required" maxlength="255" class="form-control" /></div>
                        </div>
                        <div class="col-xs-3">
                            <div class="form-group"><label class="no-bold control-label required" for="complaintbundle_complaint_buildingNumber">Numer budynku</label><input type="text" id="complaintbundle_complaint_buildingNumber" name="complaintbundle_complaint[buildingNumber]" required="required" maxlength="16" class="form-control" /></div>
                        </div>
                        <div class="col-xs-3">
                            <div class="form-group"><label class="no-bold control-label" for="complaintbundle_complaint_apartmentNumber">Numer mieszkania</label><input type="text" id="complaintbundle_complaint_apartmentNumber" name="complaintbundle_complaint[apartmentNumber]" maxlength="16" class="form-control" /></div>
                        </div>
                    </div>
                    <button class="btn btn-lg btn-success" type="button"
                            id="customer_complaint_step_1_next_btn">Dalej</button>
                </div>
            </div>
        </section>
        <section id="step_2">
            <div class="row">
                <div class="col-sm-4 col-xs-12">
                    <div class="form-group"><label class="control-label required" for="complaintbundle_complaint_firstName">Imię</label><input type="text" id="complaintbundle_complaint_firstName" name="complaintbundle_complaint[firstName]" required="required" maxlength="255" class="form-control" /></div><div class="form-group"><label class="control-label required" for="complaintbundle_complaint_lastName">Nazwisko</label><input type="text" id="complaintbundle_complaint_lastName" name="complaintbundle_complaint[lastName]" required="required" maxlength="255" class="form-control" /></div><div class="form-group"><label class="control-label required" for="complaintbundle_complaint_email">E-mail</label><input type="email" id="complaintbundle_complaint_email" name="complaintbundle_complaint[email]" required="required" class="form-control" /></div><div class="form-group"><label class="control-label required" for="complaintbundle_complaint_phoneNumber">Numer telefonu</label><input type="text" id="complaintbundle_complaint_phoneNumber" name="complaintbundle_complaint[phoneNumber]" required="required" maxlength="32" class="form-control" /></div><input type="hidden" id="complaintbundle_complaint__token" name="complaintbundle_complaint[_token]" value="A9pt7YoD-7SPjJ5srCRdKcUQoAQRo-NMsSnebViPQ6I" />
                    <button id="step_1_back_button" class="btn btn-lg btn-default"
                            type="button">Powrót</button>
                    <button class="btn btn-lg btn-warning" type="submit">Wyślij</button>
                </div>
            </div>
        </section>
    </div>
    </form>
<!-- ./wrapper -->

<!-- jQuery 3 -->
<script src="/assets/vendor/bower_components/jquery/dist/jquery.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="/assets/vendor/bower_components/jquery-ui/jquery-ui.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
    $.widget.bridge('uibutton', $.ui.button);
</script>
<!-- Bootstrap 3.3.7 -->
<script src="/assets/vendor/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Inputmask -->
<script src="/assets/vendor/bower_components/inputmask/dist/jquery.inputmask.bundle.js"></script>
<!-- ChartJS -->
<script src="/assets/vendor/bower_components/chart.js/Chart.js"></script>
<!-- Sparkline -->
<script src="/assets/vendor/bower_components/jquery-sparkline/dist/jquery.sparkline.min.js"></script>
<!-- jvectormap -->
<script src="/assets/vendor/bower_components/admin-lte/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="/assets/vendor/bower_components/admin-lte/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<!-- jQuery Knob Chart -->
<script src="/assets/vendor/bower_components/jquery-knob/dist/jquery.knob.min.js"></script>
<!-- daterangepicker -->
<script src="/assets/vendor/bower_components/moment/min/moment.min.js"></script>
<script src="/assets/vendor/bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>
<!-- datepicker -->
<script src="/assets/vendor/bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
<script src="/assets/vendor/bower_components/bootstrap-datepicker/js/locales/bootstrap-datepicker.pl.js"></script>
<!-- slider -->
<script src="/assets/vendor/bower_components/bootstrap-slider/bootstrap-slider.js"></script>
<!-- bootstrap time picker -->
<script src="/assets/vendor/bower_components/admin-lte/plugins/timepicker/bootstrap-timepicker.min.js"></script>
<!-- Bootstrap WYSIHTML5 -->
<script src="/assets/vendor/bower_components/admin-lte/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<!-- Slimscroll -->
<script src="/assets/vendor/bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="/assets/vendor/bower_components/fastclick/lib/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="/assets/vendor/bower_components/admin-lte/dist/js/adminlte.min.js"></script>
<!-- JSZip -->
<script src="/assets/vendor/bower_components/jszip/dist/jszip.js"></script>
<!-- DataTables -->
<script src="/assets/vendor/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="/assets/vendor/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<script src="/assets/vendor/bower_components/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
<script src="/assets/vendor/bower_components/datatables.net-buttons-bs/js/buttons.bootstrap.min.js"></script>
<script src="/assets/vendor/bower_components/datatables.net-buttons/js/buttons.flash.min.js"></script>
<script src="/assets/vendor/bower_components/datatables.net-buttons/js/buttons.html5.min.js"></script>
<script src="/assets/vendor/bower_components/datatables.net-buttons/js/buttons.print.min.js"></script>
<script src="/assets/vendor/bower_components/datatables.net-buttons/js/buttons.colVis.min.js"></script>
<script src="/assets/vendor/bower_components/datatables.net-fixedheader/js/dataTables.fixedHeader.min.js"></script>
<script src="/assets/vendor/bower_components/datatables.net-keytable/js/dataTables.keyTable.min.js"></script>
<script src="/assets/vendor/bower_components/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
<script src="/assets/vendor/bower_components/datatables.net-responsive-bs/js/responsive.bootstrap.min.js"></script>
<script src="/assets/vendor/bower_components/datatables.net-scroller/js/dataTables.scroller.min.js"></script>
<script src="/assets/vendor/bower_components/datatables.net-colreorder/js/dataTables.colReorder.js"></script>
<script src="/assets/vendor/bower_components/datatables.net-fixedcolumns/js/dataTables.fixedColumns.min.js"></script>
<!-- app.js -->
<script src="/assets/js/app.js"></script>
<!-- tableHeaderFixer -->
<script src="/assets/vendor/bower_components/tableheaderfixer-fork/tableHeadFixer.js"></script>
<script>
    function setActiveMenu() {
        let objects = [];
        let matched = null;
        $('.sidebar-menu a').each(function () {
            var regExp = new RegExp('^' + $(this).attr('href'));
            if (window.location.pathname.match(regExp)) {
                objects.push($(this));
                matched = bestMatch(objects);
            }
        });
        if (matched !== null) {
            matched.parent().addClass('active');
            matched.parent().parent().show();
            matched.parent().parent().closest('li').addClass('active menu-open');
        }
    }

    function bestMatch(arr) {
        let long1 = arr[0];
        for (let i = 0; i < arr.length; i++) {
            if (arr[i].attr("href").length > long1.attr("href").length) {
                long1 = arr[i];
            }
        }
        return long1;
    }

    function showPopUp(body, title) {
        const modalId = 'pop-up-modal';
        if (!$('#' + modalId).length) {
            const modalHtml = '<div class="modal fade" tabindex="-1" role="dialog" id="' + modalId + '">' +
                '<div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header">' +
                '<button type="button" class="close" data-dismiss="modal" aria-label="Close">' +
                '<span aria-hidden="true">&times;</span></button>' +
                '<h4 class="modal-title"></h4>' +
                '</div><div class="modal-body"></div>' +
                '<div class="modal-footer" id="' + modalId + '-footer">' +
                '<a href="#" class="btn btn-default" data-dismiss="modal" id="' + modalId + '-cancel-btn">OK</a>' +
                '</div>' +
                '</div><!-- /.modal-content -->' +
                '</div><!-- /.modal-dialog -->' +
                '</div><!-- /.modal -->';
            $('body').append(modalHtml);
        }
        $('#' + modalId).find('.modal-title').text(title);
        $('#' + modalId).find('.modal-body').html(decodeURI(body));
        $('#' + modalId).modal({show: true});
        return false;
    }

    $(document).ready(function () {
        setActiveMenu();
                        $('.datepicker').datepicker({
            language: 'pl',
        });
    });
</script>
    <script type="text/javascript">
        $(function() {
            $('[data-toggle="tooltip"]').tooltip();
        });

        function prepareProductSelector($index) {
            let $element = $('select[id^="complaintbundle_complaint_items_' + $index + '_product"]');
            let $currentProductId = $element.val();
            onChangeProduct($index, $currentProductId);
            $element.change(function () {
                let $newProductId = $(this).val();
                onChangeProduct($index, $newProductId);
            });
        }

        function onChangeProduct($index, $productId) {
            if ($productId !== undefined) {
                let $url = '/customer/complaint/product/' + $productId + '/details';
                $.get($url, function ($data) {
                    // productionNumber
                    toggleFormElement($index, 'productionNumber', $data.promptHtml, $data.showProductionNumberInput, $data.isProductionNumberRequired);
                    // ./productionNumber
                    // manufacturer
                    toggleFormElement($index, 'manufacturer', $data.promptHtml, $data.showManufacturerInput, $data.isManufacturerRequired);
                    // ./manufacturer
                    let $availableReasons = [];
                    $($data.reasons).each(function () {
                        $availableReasons.push(this.id.toString());
                    });
                    let $numberOfDisplayedReasons = 0;
                    $('input[name="complaintbundle_complaint[items][' + $index + '][reasons][]"').each(function () {
                        let $element = $(this);
                        let $elementValue = $element.val();
                        if ($availableReasons.indexOf($elementValue.toString()) > -1) {
                            $element.parent().show();
                            $numberOfDisplayedReasons++;
                        } else {
                            $element.parent().hide();
                            $element.prop('checked', false);
                        }
                    });
                    if ($numberOfDisplayedReasons > 0) {
                        $('#complaintbundle_complaint_items_' + $index + '_reasons').parent().parent().show();
                    } else {
                        $('#complaintbundle_complaint_items_' + $index + '_reasons').parent().parent().hide();
                    }
                });
            }
        }

        function toggleFormElement($index, $suffix, $promptHtml, $show, $required) {
            let $id = 'complaintbundle_complaint_items_' + $index + '_' + $suffix;
            let $element = $('#' + $id);
            let $label = $('label[for="' + $id + '"');
            $label.find('span').remove();
            if ($show) {
                $element.parent().parent().show();
            } else {
                $element.parent().parent().hide();
                $element.val('');
            }
            if ($required) {
                $element.prop('required', true);
                $labelHtml = '<span class="required-star">*</span> ' + $label.html();
                $label.html($labelHtml);
            } else {
                $element.prop('required', false);
            }
            $label.find('.production-number-prompt').remove();
            if ($suffix == 'productionNumber' && $promptHtml != null && $promptHtml.length > 0) {
                $encodedPromptHtml = encodeURI($promptHtml);
                $promptBtn = $('<a href="#" class="production-number-prompt" onclick="showPopUp(\'' + $encodedPromptHtml + '\');"><span class="fa fa-lg fa-question-circle-o"></span></a>');
                $label.append($promptBtn);
            }
        }

        let $complaintItemsHolder;
        $(document).ready(function () {
            $('label[class="no-bold control-label required"]').each(function () {
                let $label = $(this).html();
                $label = '<span class="required-star">*</span> ' + $label;
                $(this).html($label);
                $('.datepicker').datepicker({
                    language: 'pl',
                });
            });
            //
            const $addItemButton = $('<button type="button" class="btn btn-sm btn-primary" id="add-product-btn">Dodaj produkt</button>');
            const $newItemLi = $('<li id="libutton"></li>').append($addItemButton);
            $complaintItemsHolder = $('ul.complaint-items');
            $complaintItemsHolder.append($newItemLi);
            let $index = $('.complaint-items li').length - 1;
            $complaintItemsHolder.data('index', $index);
            for (i = 0; i <= $index; ++i) {
                prepareProductSelector(i);
            }
            //
            $('#add-product-btn').on('click', function (e) {
                const $prototype = $complaintItemsHolder.data('prototype');
                let $index = $complaintItemsHolder.data('index');
                let $newForm = $prototype;
                // Replace '__name__' in the prototype's HTML to
                // instead be a number based on how many items we have
                $newForm = $newForm.replace(/__name__/g, $index);
                // increase the index with one for the next item
                $complaintItemsHolder.data('index', $index + 1);
                // Display the form in the page in an li, before the "Add a tag" link li
                var $newFormLi = $('<li data-item="' + $index + '"></li>').append($newForm);
                $newItemLi.before($newFormLi);
                prepareProductSelector($index);
                prepareUpload();
            });
            var children = $('.complaint-items').children('li:not(#libutton)');
            
            $('#customer_complaint_step_1_next_btn').click(function () {
                let $myForm = $('form[name="complaintbundle_complaint"]');
                $('#complaintbundle_complaint_firstName').removeAttr('required');
                $('#complaintbundle_complaint_lastName').removeAttr('required');
                $('#complaintbundle_complaint_email').removeAttr('required');
                $('#complaintbundle_complaint_phoneNumber').removeAttr('required');

                if (!$myForm[0].checkValidity()) {
                    // If the form is invalid, submit it. The form won't actually submit;
                    // this will just cause the browser to display the native HTML5 error messages.
                    $myForm.find(':submit').click();
                } else {
                    $('#complaintbundle_complaint_firstName').prop('required', 'required');
                    $('#complaintbundle_complaint_lastName').prop('required', 'required');
                    $('#complaintbundle_complaint_email').prop('required', 'required');
                    $('#complaintbundle_complaint_phoneNumber').prop('required', 'required');
                    $('#step_2').show();
                    $('#step_1').hide();
                    $('#customer_complaint_step_1').removeClass('active').addClass('done');
                    $('#customer_complaint_step_2').removeClass('inactive').addClass('active');
                }
            });
            $('#customer_complaint_step_1_back_btn, #step_1_back_button').click(function () {
                $('#step_1').show();
                $('#step_2').hide();
            });
            $('#customer_complaint_step_2_back_btn').click(function () {
                if ($('#customer_complaint_step_2').hasClass('active')) {
                    $('#step_2').show();
                    $('#step_1').hide();
                }
            });

            function prepareUpload() {
                $('input[type="file"]').change(function () {
                    let input = $(this);
                    let form = $(this).closest('form');
                    $formData = new FormData($(form)[0]);
                    // console.log($formData);
                    $.ajax({
                        url: '/customer/complaint/attachment/new',
                        type: 'post',
                        data: $formData,//$(form).serialize(),
                        cache: false,
                        contentType: false,
                        processData: false,
                        success: function (result) {
                            // console.log(result);
                            addUploadedFileToList(result, form);
                            // attachmentFormButtonsToggle();
                            // resetForm(form);
                            input.val('');
                            // NProgress.done();
                        },
                        error: function (error) {
                            console.log(error.statusText);
                            // attachmentFormButtonsToggle();
                            // NProgress.done();
                        }
                    })
                });
            }

            function addUploadedFileToList(result, form) {
                let item = $(form).closest('li').attr('data-item');
                let string = '';
                if(result.result.clientOriginalName.length > 13) {
                    string = result.result.clientOriginalName.substring(0,13)+"...";
                } else {
                    string = result.result.clientOriginalName;
                }
                $(form).siblings('.attachments').append('<span><input type="hidden" name="complaintbundle_complaint[items][' + item + '][files][]" value="' + result.result.id + '"><a data-toggle="tooltip" data-placement="top" title="'+result.result.clientOriginalName+'" href="/customer/complaint/' + result.result.fileName + '/download">' + string + '</a> | <a href="#" onclick="$(this).parent().remove();">Usuń</a><br/></span>');
                $('[data-toggle="tooltip"]').tooltip();
            }
        });
    </script>
</body>
</html>
