@extends('layouts.app')

@section('css')
    <link rel="stylesheet" media="screen, print" href="{{asset("css/formplugins/smartwizard/smartwizard.css")}}">
    <link rel="stylesheet" media="screen, print" href="{{asset("css/formplugins/dropzone/dropzone.css")}}">
    <link rel="stylesheet" media="screen, print" href="{{asset("css/formplugins/bootstrap-datepicker/bootstrap-datepicker.css")}}">

    <style>
        .help-block {
            color: #ff0000;
        }
    </style>
@endsection

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-12">
                <ol class="breadcrumb page-breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ url('customer/dashboard') }}">Home</a></li>
                    <li class="breadcrumb-item active">Webform</li>
                    <li class="position-absolute pos-top pos-right d-none d-sm-block"><span class="js-get-date"></span></li>
                </ol>
            </div>
        </div>
        <div class="row justify-content-center">

            <div class="col-xl-12">

                <form action="#" id="webform" method="post" accept-charset="utf-8">
                    @csrf
                    <div id="smartwizard">
                        <ul>
                            <li><a href="#step-1">Step 1<br /><small>Instructions & Declaration</small></a></li>
                            <li><a href="#step-2">Step 2<br /><small>Eligibility</small></a></li>
                            <li><a href="#step-3">Step 3<br /><small>About Your Complaint</small></a></li>
                            <li><a href="#step-4">Step 4<br /><small>Remedy</small></a></li>
                            <li><a href="#step-5">Step 5<br /><small>Evidence & Support Files</small></a></li>
                        </ul>
                        <div class="p-3">
                            <div id="step-1">
                                <h6>Please read carefully</h6>
                                <br>
                                <div id="form-step-0">
                                    <div class="row">
                                        <div class="col-sm-12">
                                            <p>
                                                Welcome to our online Retail complaints portal. To proceed with your complaint please follow the below stages and provide all the information requested. It is important that you complete all sections of the form and that you are careful to provide relevant, accurate and thorough information in relation to your complaint. It is also important that you provide us with any evidence that you have to support your claim.
                                                Please note this is the complaint form applicable to complaints about retail only.
                                                To be eligible to make a complaint against a retailer, you must have already complained to the retailer directly in writing and either received a final written response (sometimes referred to as a ‘deadlock letter’) or given the retailer eight (8) weeks to respond to your dispute. Consumer Dispute Resolution Ltd can only deal with unresolved complaints.
                                                In order to complete this complaint form you will need the following information to hand:
                                                <br /><br />
                                                <b>DECLARATION</b><br />
                                                You are required to agree to our terms stated below on the DECLARATION section.<br /><br />
                                                <b>ELIGIBILITY</b><br />
                                                This will confirm if your complaint is eligible to be processed at this time by asking you questions and for information about dates of the complaint.<br /><br />
                                                <b>ABOUT YOUR COMPLAINT</b><br />
                                                Full details of the purchase or service.
                                                Full details of the complaint.
                                                Accurate dates of any purchase of goods/services, dates of any correspondence, etc. You will be asked to state your desired outcome.
                                                <br /><br />
                                                <b>EVIDENCE & SUPPORTING FILES</b><br />
                                                Images of any receipts.
                                                Any images to support your complaint.
                                                Any email exchanges with the retailer, saved into a MS word document or a text file.
                                                Scans or images of any physical letters.
                                            </p>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div id="divDeclaration" class="col-sm-12">
                                            <b>DECLARATION</b><br />
                                            <p>Please read and sign this declaration: <br>
                                                <br>
                                                I would  like Alternative Dispute Resolution for Retail ("RetailADR") to look into my complaint.
                                                <br><br>
                                                I understand and acknowledge that RetailADR will need to use my personal information  (including sensitive or personal information) and that RetailADR may need to share some or all of this information with the retailer with whom I have a complaint.
                                                <br><br>
                                                I understand and acknowledge that RetailADR may publish the Adjudicator's final decision.
                                                <br><br>
                                                I agree to provide true, accurate and full information about my complaint.
                                                <br><br>
                                                To sign the declaration tick here
                                                <br><br>
                                                I Agree
                                            <div class="form-group">
                                                <div class="input-group">
                                                    <input id="agree" name="agree_ind" type="checkbox" />
                                                </div>
                                            </div>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="step-2" class="">
                                <div id="form-step-1">
                                    <div class="form-group">
                                        <label for="name">Name of Retailer:</label>
                                        <select class="form-control" name="retailer_id" id="retailer_id">
                                            <option value="">Please Select</option>
                                            @foreach ( $retailers as $retailer)
                                                <option value=" {{ $retailer->id }}">
                                                    {{ $retailer->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="form-group" id="el_step_1">
                                        <label for="name">Have you complained directly to the retailer in writing?:</label>
                                        <select class="form-control" name="complained_to_company_in_writing">
                                            <option value="">Please Select</option>
                                            <option value="1">Yes</option>
                                            <option value="0">No</option>

                                        </select>
                                    </div>
                                    <div class="form-group d-none" id="el_step_2">
                                        <label for="name">Has the company provided their final response?:</label>
                                        <select class="form-control" name="company_provide_final_response">
                                            <option value="">Please Select</option>
                                            <option value="1">Yes</option>
                                            <option value="0">No</option>
                                        </select>
                                    </div>
                                    <div class="form-group d-none" id="el_step_3">
                                        <label for="name">What date did you complain to the retailer?:</label>
                                        <input class="form-control" name="date_complained_to_company" id="date_complained_to_company" />
                                    </div>
                                    <div class="form-group d-none" id="el_step_4">
                                        <label for="name">Did the retailer reject your complaint?:</label>
                                        <select class="form-control" name="company_reject_complain">
                                            <option value="">Please Select</option>
                                            <option value="1">Yes</option>
                                            <option value="0">No</option>
                                        </select>
                                    </div>
                                    <div class="form-group d-none" id="el_step_5">
                                        <label for="name">Have you rejected the retailer’s final response?:</label>
                                        <select class="form-control" name="customer_reject_company_final_response">
                                            <option value="">Please Select</option>
                                            <option value="1">Yes</option>
                                            <option value="0">No</option>
                                        </select>
                                    </div>
                                    <div class="form-group d-none" id="el_step_6">
                                        <label for="name">Has your complaint already been investigated by another party?:</label>
                                        <select class="form-control" name="complain_to_other_adr">
                                            <option value="">Please Select</option>
                                            <option value="1">Yes</option>
                                            <option value="0">No</option>
                                        </select>
                                    </div>
                                    <div class="form-group d-none" id="el_step_7">
                                        <label for="name">Please add the final response that you received from the retailer here, it is imperative that you use the exact wording that the retailer has provided to you.</label>
                                        <textarea class="form-control" name="company_final_response" rows="10" cols="5" maxlength="500"></textarea>
                                    </div>
                                </div>
                                <div class="panel-tag bg-danger-900 d-none" id="el_error_message"></div>
                            </div>
                            <div id="step-3" class="">
                                <div class="form-group">
                                    <label for="name">Where did you make your purchase?:</label>
                                    <select class="form-control" name="location" id="location">
                                        <option value="">Please Select</option>
                                        @foreach ( $retailers as $retailer)
                                            <option value=" {{ $retailer->id }}">
                                                {{ $retailer->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="name">What did you purchase?:</label>
                                    <select class="form-control" name="category" id="category">
                                        <option value="">Please Select</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="name">What is your complaint about?:</label>
                                    <select class="form-control" name="sub_category" id="sub_category">
                                        <option value="">Please Select</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="name">Please provide a brief description of your complaint:</label>
                                    <textarea class="form-control" name="description" rows="5" cols="5" maxlength="500"></textarea>
                                </div>
                                <label class="form-label">Please provide a chronological event log of the history of you complaint.
                                    Add a new row for each event/date with a description of what happened.</label>
                                <table class="event-details table table-bordered table-striped" id="event-details">
                                    <thead>
                                    <tr>
                                        <div class="col-sm-4">
                                            <th>Date of event</th>
                                        </div>
                                        <div class="col-sm-8">
                                            <th>Description of event</th>
                                        </div>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <div class="col-sm-4">
                                            <td>
                                                <input class="event-date form-control input-lg" placeholder="12/10/2019" type="text" name="events[0][occured_at]" size="30" >
                                            </td>
                                        </div>
                                        <div class="col-sm-8">
                                            <td>
                                                <input class="form-control input-lg" size="70" placeholder="My item was delivered late" type="text" name="events[0][description]">
                                            </td>
                                        </div>
                                    </tr>
                                    </tbody>
                                </table>
                                <table class="table table-bordered table-striped">
                                    <tbody>
                                    <tr>
                                        <div class="col-sm-10">

                                        </div>
                                        <div class="col-sm-4">
                                            <td style="float:right;">
                                                <div class="add-event"><a href="#" class="button-secondary add-event-button"><strong>Add More</strong></a></div>

                                            </td>
                                        </div>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div id="step-4" class="">
                                <label>What is your desired outcome? Please add a new row for each outcome you are claiming for. The desired outcome column
                                    must be filled in each row.</label>
                                <div class="row" style="margin-bottom: 5px;">
                                    <table class="order-details table table-bordered table-striped" id="order-details">
                                        <thead>
                                        <tr>
                                            <div class="col-sm-8">
                                                <th>Desired Outcome</th>
                                            </div>
                                            <div class="col-sm-4">
                                                <th>Monetory value (in Pounds Sterling, £) £</th>
                                            </div>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr>
                                            <div class="col-sm-8">
                                                <td>
                                                    <input class="description form-control input-lg" placeholder="EG.  No sea view as paid for " type="text" name="remedy[0][name]" size="72">
                                                </td>
                                            </div>
                                            <div class="col-sm-4">
                                                <td>
                                                    <input class="cost form-control input-lg" placeholder="20" type="number" size="40" name="remedy[0][cost]">
                                                </td>
                                            </div>
                                        </tr>
                                        </tbody>
                                    </table>
                                    <table class="table table-bordered table-striped">
                                        <tbody>
                                        <tr>
                                            <div class="col-sm-10">
                                                <td></td>
                                            </div>
                                            <div class="col-sm-4">
                                                <td style="float:right;">
                                                    <div class="wei-add-service"><a href="#" class="button-secondary wei-add-service-button"><strong>Add More</strong></a></div>

                                                </td>
                                            </div>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="row">
                                    <div class="col-sm-6">

                                    </div>
                                    <div class="col-sm-6">
                                        <h2>Total Claimed:</h2>
                                        <input style="margin-top: 15px;" class="form-control input-lg" name="" type="text" id="claim-subtotal" disabled="" />
                                        <input name="claim_cd_total" type="hidden" id="claim-subtotal-hidden" />
                                        <!--<div class="claim-subtotal"><h2><strong>&nbsp;&nbsp;0.00</strong></h2></div>
                                            <input class="form-control input-lg" placeholder="" type="hidden" name="total_cost" id="total_cost">
                                        -->
                                    </div>
                                </div>
                            </div>
                            <div id="step-5">
                                <div class="panel-tag">
                                    Dropzone does not handle your file uploads on the server. You have to implement the code to receive and store the file yourself. See the section Server side implementation for more information.
                                </div>
                                <div class="panel-tag hide" id="response-msg">

                                </div>
                                <div class="dropzone" id="files_dropzone">
                                    <div class="dz-message needsclick">
                                        <i class="fal fa-cloud-upload text-muted mb-3"></i> <br>
                                        <span class="text-uppercase">Drop files here or click to upload.</span>
                                        <br>
                                        <span class="fs-sm text-muted">This is just a demo dropzone. Selected files are <strong>not</strong> actually uploaded.</span>
                                    </div>
                                </div>
                                <br>
                                <table id="dt-evidence" class="table table-bordered table-hover table-striped w-100">
                                    <thead>
                                    <tr>
                                        <th>Name</th>
                                        <th>Uploaded At</th>
                                        <th>Actions</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>

                            </div>
                        </div>
                    </div>
                </form>


            </div>


        </div>
    </div>
@endsection
@section('scripts')
    <script src="{{ asset ("js/formplugins/smartwizard/smartwizard.js") }}"></script>
    <script src="{{ asset ("js/formplugins/dropzone/dropzone.js") }}"></script>
    <script src="{{ asset ("js/formplugins/jquery-validation/jquery.validate.min.js") }}"></script>
    <script src="{{ asset ("js/formplugins/bootstrap-datepicker/bootstrap-datepicker.js") }}"></script>

    <script>
        Dropzone.autoDiscover = false;
        (function()
        {
            'use strict';
            window.addEventListener('load', function()
            {
                // Fetch all the forms we want to apply custom Bootstrap validation styles to
                let forms = document.getElementsByClassName('needs-validation');
                let smartWizard = document.getElementById('smartWizard');
                // Loop over them and prevent submission
                let validation = Array.prototype.filter.call(forms, function(form)
                {
                    form.addEventListener('submit', function(event)
                    {
                        if (form.checkValidity() === false)
                        {
                            event.preventDefault();
                            event.stopPropagation();
                        }
                        form.classList.add('was-validated');
                    }, false);
                });

                let el_error = document.getElementById('el_error_message');
                let el_step1 = document.getElementById('el_step_1');
                let el_step2 = document.getElementById('el_step_2');
                let el_step3 = document.getElementById('el_step_3');
                let el_step4 = document.getElementById('el_step_4');
                let el_step5 = document.getElementById('el_step_5');
                let el_step6 = document.getElementById('el_step_6');
                let el_step7 = document.getElementById('el_step_7');
                let message = '';

                // Event Listeners
                el_step1.addEventListener('change', function(event){
                    let el_step1_value = el_step1.getElementsByTagName('select')[0].value;

                    if(el_step1_value === '0') {
                        // Show message
                        el_step2.classList.add('d-none');
                        if(!el_step3.classList.contains('d-none')) { el_step3.classList.add('d-none'); }
                        if(!el_step4.classList.contains('d-none')) { el_step4.classList.add('d-none'); }
                        if(!el_step5.classList.contains('d-none')) { el_step5.classList.add('d-none'); }
                        if(!el_step6.classList.contains('d-none')) { el_step6.classList.add('d-none'); }
                        if(!el_step7.classList.contains('d-none')) { el_step7.classList.add('d-none'); }
                    } else if(el_step1_value === '1') {
                        // Show next step
                        if(!el_error.classList.contains('d-none')) { el_error.classList.add('d-none'); }
                        el_step2.classList.remove('d-none');
                    } else {
                        if(!el_step2.classList.contains('d-none')) { el_step2.classList.add('d-none'); }
                        if(!el_error.classList.contains('d-none')) { el_error.classList.add('d-none'); }
                    }
                });

                el_step2.addEventListener('change', function(event){
                    let el_step2_value = el_step2.getElementsByTagName('select')[0].value;

                    if(el_step2_value === '0') {
                        if(el_step3.classList.contains('d-none')) { el_step3.classList.remove('d-none'); }
                        if(!el_step4.classList.contains('d-none')) { el_step4.classList.add('d-none'); }
                        if(el_step6.classList.contains('d-none')) { el_step6.classList.remove('d-none'); }
                        if(!el_step7.classList.contains('d-none')) { el_step7.classList.add('d-none'); }
                    } else if(el_step2_value === '1') {
                        // Show next step
                        if(!el_step3.classList.contains('d-none')) { el_step3.classList.add('d-none'); }
                        if(el_step4.classList.contains('d-none')) { el_step4.classList.remove('d-none'); }
                        if(!el_step6.classList.contains('d-none')) { el_step6.classList.add('d-none'); }
                    } else {
                        if(!el_step3.classList.contains('d-none')) { el_step3.classList.add('d-none'); }
                        if(!el_step4.classList.contains('d-none')) { el_step4.classList.add('d-none'); }
                        if(!el_step6.classList.contains('d-none')) { el_step6.classList.add('d-none'); }
                        if(!el_step7.classList.contains('d-none')) { el_step7.classList.add('d-none'); }
                    }
                });

                el_step4.addEventListener('change', function(event) {
                    let el_step4_value = el_step4.getElementsByTagName('select')[0].value;

                    if(el_step4_value === '1') {
                        if(el_step5.classList.contains('d-none')) { el_step5.classList.remove('d-none'); }
                    } else {
                        if(!el_step5.classList.contains('d-none')) { el_step5.classList.add('d-none'); }
                    }
                });

                el_step5.addEventListener('change', function(event) {
                    let el_step5_value = el_step5.getElementsByTagName('select')[0].value;

                    if(el_step5_value === '1') {
                        if(el_step6.classList.contains('d-none')) { el_step6.classList.remove('d-none'); }
                    } else {
                        if(!el_step6.classList.contains('d-none')) { el_step6.classList.add('d-none'); }
                    }
                });

                el_step6.addEventListener('change', function(event) {
                    let el_step6_value = el_step6.getElementsByTagName('select')[0].value;
                    let el_step2_value = el_step2.getElementsByTagName('select')[0].value;

                    if(el_step6_value === '1') {
                        if(!el_step7.classList.contains('d-none')) { el_step7.classList.add('d-none'); }
                    } else if(el_step6_value === '0') {
                        if(el_step2_value === '1') {
                            if(el_step7.classList.contains('d-none')) { el_step7.classList.remove('d-none'); }
                        } else {
                            if(!el_step7.classList.contains('d-none')) { el_step7.classList.add('d-none'); }
                        }
                    } else {
                        if(!el_step7.classList.contains('d-none')) { el_step7.classList.add('d-none'); }
                    }

                });

                let retailer_id = document.getElementById('retailer_id');
                let location = document.getElementById('location');
                let category = document.getElementById('category');
                let sub_category = document.getElementById('sub_category');

                retailer_id.addEventListener('change', function(e){
                    let xhttp = new XMLHttpRequest();

                    xhttp.onreadystatechange = function() {
                        if (this.readyState == 4 && this.status == 200) {
                            //document.getElementById("demo").innerHTML = this.responseText;
                            let locations = JSON.parse(this.responseText);
                            let options = '<option value="">Please Select</option>';
                            for (let i=0; i<locations.length; i++)
                            {
                                options += '<option value="'+locations[i]['id']+'">'+locations[i]['name']+'</option>';
                            }

                            location.innerHTML = options;

                        }
                    };
                    xhttp.open("POST", "location", true);
                    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                    xhttp.send("retailer_id="+this.value+ "&_token={{csrf_token()}}");

                    let xhttp2 = new XMLHttpRequest();

                    xhttp2.onreadystatechange = function() {
                        if (this.readyState == 4 && this.status == 200) {
                            //document.getElementById("demo").innerHTML = this.responseText;
                            let categories = JSON.parse(this.responseText);
                            let options = '<option value="">Please Select</option>';
                            for (let i=0; i<categories.length; i++)
                            {
                                options += '<option value="'+categories[i]['id']+'">'+categories[i]['name']+'</option>';
                            }

                            category.innerHTML = options;

                        }
                    };
                    xhttp2.open("POST", "category", true);
                    xhttp2.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                    xhttp2.send("retailer_id="+this.value+ "&_token={{csrf_token()}}");
                });

                category.addEventListener('change', function(e) {
                    let xhttp = new XMLHttpRequest();

                    xhttp.onreadystatechange = function() {
                        if (this.readyState == 4 && this.status == 200) {
                            //document.getElementById("demo").innerHTML = this.responseText;
                            let sub_categories = JSON.parse(this.responseText);
                            let options = '<option value="select">Please Select</option>';
                            for (let i=0; i<sub_categories.length; i++)
                            {
                                options += '<option value="'+sub_categories[i]['id']+'">'+sub_categories[i]['name']+'</option>';
                            }

                            sub_category.innerHTML = options;

                        }
                    };
                    xhttp.open("POST", "subcategory", true);
                    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                    xhttp.send("category_id="+this.value+ "&_token={{csrf_token()}}");
                });

            }, false);
        })();
    </script>
    <script>
        let counter = 1;

        jQuery('a.wei-add-service-button').click(function(event){
            event.preventDefault();
            counter++;
            var newRow = jQuery('<tr><div class="col-sm-8"><td><input class="description form-control input-lg" placeholder="EG.  No sea view as paid for " type="text" name="remedy['+counter+'][name]"></td></div><div class="col-sm-4"><td><input class="cost form-control input-lg" placeholder="25" type="number" name="remedy['+counter+'][cost]">&nbsp;<a href="#"><strong>Remove</strong></a></td></div></tr>');
            jQuery('table.order-details').append(newRow);
        });


        jQuery('table.order-details').on('click','tr a',function(e){
            e.preventDefault();
            jQuery(this).parents('tr').remove();
            var rowREMO = $(this).closest('tr').find('.cost').val();
            var grandTotalSU = $('#claim-subtotal').val();
            var grandTotalREMOV = (grandTotalSU - rowREMO);
            $('#claim-subtotal').val(grandTotalREMOV);
            $('#claim-subtotal-hidden').val(grandTotalREMOV);
        });

        jQuery('table.order-details').on("keyup", "tr", function() {
            var grandTotal = 0;
            $(this).parent().find('tr').each(function() {
                var row = jQuery(this);
                var value2 = +jQuery( ".cost", row ).val();
                grandTotal += value2;
            });
            //console.log(grandTotal);
            $('#claim-subtotal').val(grandTotal);
            $('#claim-subtotal-hidden').val(grandTotal);
        });

        let eventCounter = 1;

        jQuery('a.add-event-button').click(function(event){
            event.preventDefault();
            eventCounter++;
            var newRow = jQuery('<tr><div class="col-sm-8"><td><input class="event-date form-control input-lg" placeholder="12/10/2019" type="text" name="events['+eventCounter+'][occured_at]"></td></div><div class="col-sm-4"><td><input class="form-control input-lg" placeholder="My item was delivered late" type="text" name="events['+eventCounter+'][description]">&nbsp;<a href="#"><strong>Remove</strong></a></td></div></tr>');
            jQuery('table.event-details').append(newRow);
        });


        jQuery('table.event-details').on('click','tr a',function(e){
            e.preventDefault();
            jQuery(this).parents('tr').remove();
        });
    </script>
    <script>
        $(document).ready(function()
        {
            // Datepicker
            $('body').on('focus',".event-date", function(){
                $(this).datepicker({
                    endDate : "0d",
                    todayHighlight : true,
                    format: "dd/mm/yyyy",
                    orientation : 'bottom'
                });
            });

            $('#date_complained_to_company').datepicker({
                endDate : "0d",
                todayHighlight : true,
                format: "dd/mm/yyyy",
                orientation : 'bottom'
            });

            // jQuery Validate js
            var $validator = $("#webform").validate({
                rules: {
                    // Stage 1
                    /*agree_ind : {
                        required : true,
                    },*/

                    // Stage 2
                    /*retailer_id : {
                        required : true,
                        validate_select : true
                    },
                    complained_to_company_in_writing : {
                        validate_select : true,
                        validate_complained_direct:true
                    },
                    date_complained_to_company : {
                        required : true,
                        validate_date_complained : true
                    },
                    company_provide_final_response : {
                        validate_select : true,
                        validate_complained_direct: true,
                    },
                    company_reject_complain : {
                        validate_select : true,
                        validate_complained_direct: true
                    },
                    customer_reject_company_final_response : {
                        validate_select : true,
                        validate_complained_direct : true
                    },
                    complain_to_other_adr : {
                        validate_select : true,
                        validate_complained_direct : true
                    },
                    company_final_response : {
                        required : true
                    },*/

                    // Stage 3
                    /*location : {
                        validate_select : true
                    },
                    category : {
                        validate_select : true
                    },
                    sub_category : {
                        validate_select : true
                    }*/

                },
                highlight: function (element) {
                    $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
                },
                unhighlight: function (element) {
                    $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
                },
                errorElement: 'span',
                errorClass: 'help-block',
                errorPlacement: function (error, element) {
                    if (element.parent('.input-group').length) {
                        error.insertAfter(element.parent());
                    } else {
                        error.insertAfter(element);
                    }
                }

            });

            // Validator methods
            jQuery.validator.addMethod("validate_select", function(value, element) {
                return value !== '';
            }, "This field is required");

            var msg;
            var dynamicErrorMsg = function () { return msg; }
            jQuery.validator.addMethod("validate_complained_direct", function(value, element) {
                switch (element.name) {
                    case 'complained_to_company_in_writing':
                        msg = 'We are unable to take your complaint on at the moment. ' +
                            'You must first complain to the retailer in writing before bringing your complaint to Consumer Dispute Resolution Ltd.';
                        break;
                    case 'company_provide_final_response':
                        return true;
                        break;
                    case 'company_reject_complain':
                    case 'customer_reject_company_final_response':
                        msg = 'We are unable to take on your complaint as we can only deal with unresolved complaints';
                        break;
                    case 'complain_to_other_adr' :
                        msg = 'We are unable to take on your complaint as your complaint has already been investigated by another party';
                        return value !== '1';
                        break;
                }

                return value !== '0';
            }, dynamicErrorMsg);

            jQuery.validator.addMethod("validate_date_complained", function(value, element) {
                let d       = value.split("/");
                let day     = d[0];
                let month   = d[1]-1;
                let year    = d[2];
                let date    = new Date(year, month, day);
                let now     = new Date();
                let difference = weeksBetween(date, now);

                return difference >= 8;
            }, "We are unable to take your complaint on at the moment. You must give the retailer at least 8 weeks to respond before bringing your complaint to us");

            function weeksBetween(d1, d2) {
                return Math.round((d2 - d1) / (7 * 24 * 60 * 60 * 1000));
            }

            // Smart Wizard
            $('#smartwizard').smartWizard({

                selected: 0, // Initial selected step, 0 = first step
                keyNavigation: true, // Enable/Disable keyboard navigation(left and right keys are used if enabled)
                autoAdjustHeight: false, // Automatically adjust content height
                cycleSteps: false, // Allows to cycle the navigation of steps
                backButtonSupport: true, // Enable the back button support
                useURLhash: false, // Enable selection of the step based on url hash
                showStepURLhash: false,
                lang:
                    { // Language variables
                        next: 'Next',
                        previous: 'Previous'
                    },
                toolbarSettings:
                    {
                        toolbarPosition: 'bottom', // none, top, bottom, both
                        toolbarButtonPosition: 'right', // left, right
                        showNextButton: true, // show/hide a Next button
                        showPreviousButton: true, // show/hide a Previous button
                        toolbarExtraButtons: [
                    $('<button></button>').text('Finish')
                                  .addClass('btn btn-info')
                                  .on('click', function(){
                                alert('Finsih button click');
                                  }),
                    $('<button></button>').text('Cancel')
                                  .addClass('btn btn-danger')
                                  .on('click', function(){
                                      $('#smartwizard').smartWizard("reset");
                                      $('#myForm').find("input, textarea").val("");
                                  })
                        ]
                    },
                anchorSettings:
                    {
                        anchorClickable: true, // Enable/Disable anchor navigation
                        enableAllAnchors: false, // Activates all anchors clickable all times
                        markDoneStep: true, // add done css
                        enableAnchorOnDoneStep: true // Enable/Disable the done steps navigation
                    },
                contentURL: null, // content url, Enables Ajax content loading. can set as data data-content-url on anchor
                contentCache: true, //ajax content
                disabledSteps: [], // Array Steps disabled
                errorSteps: [], // Highlight step with errors
                theme: 'default', //dots, default, circles
                transitionEffect: 'fade', // Effect on navigation, none/slide/fade
                transitionSpeed: '500'
            });
            let claim_id;
            let evidenceTable;
            // Smart Wizard events
            $("#smartwizard").on("leaveStep", function(e, anchorObject, stepNumber, stepDirection) {

                if(stepNumber === 1 && stepDirection === 'backward') {
                    return false;
                }
                // stepDirection === 'forward' :- this condition allows to do the form validation
                // only on forward navigation, that makes easy navigation on backwards still do the validation when going next

                var $valid = $("#webform").valid();
                if (!$valid) {
                    $validator.focusInvalid();
                    return false;
                } else {

                    if(stepNumber === 0) {
                        let proceed;
                        let agree_ind = $('#agree').prop('checked');

                        $.ajax({
                            method : 'POST',
                            url : 'webform',
                            data : {stage: '1', _token: '{{csrf_token()}}', 'agree_ind' : agree_ind},
                            async:false,
                            success : function(response) {
                                //var data = JSON.parse(response);
                                if(response.status === 400)
                                {
                                    proceed=false;
                                    var validator = $( "#webform" ).validate();
                                    validator.showErrors( response.errors );
                                } else {
                                     //console.log(response.claim_id);
                                    $('<input>').attr({
                                        type: 'hidden',
                                        name: 'claim_id',
                                        value: response.claim_id
                                    }).appendTo('#webform #step-2');
                                }
                            },
                        });
                        if(proceed == false) { return false; }
                    }

                    if(stepNumber === 1) {
                        let proceed;
                        let fields = $('#webform #step-2').find("select, textarea, input").serialize();

                        $.ajax({
                            method : 'POST',
                            url : 'webform',
                            data : {stage: '2', _token: '{{csrf_token()}}', data : fields},
                            async:false,
                            success : function(response) {
                                //var data = JSON.parse(response);
                                if(response.status === 400)
                                {
                                    proceed=false;
                                    var validator = $( "#webform" ).validate();
                                    validator.showErrors( response.errors );
                                } else {
                                    $('<input>').attr({
                                        type: 'hidden',
                                        name: 'claim_id',
                                        value: response.claim_id
                                    }).appendTo('#webform #step-3');
                                }

                            },
                        });
                        if(proceed == false) { return false; }
                    }

                    if(stepNumber === 2) {
                        let proceed;
                        let fields = $('#webform #step-3').find("select, textarea, input").serialize();

                        $.ajax({
                            method : 'POST',
                            url : 'webform',
                            data : {stage: '3', _token: '{{csrf_token()}}', data : fields},
                            async:false,
                            success : function(response) {
                                //var data = JSON.parse(response);
                                if(response.status === 400)
                                {
                                    proceed=false;
                                    var validator = $( "#webform" ).validate();
                                    validator.showErrors( response.errors );
                                } else {
                                    $('<input>').attr({
                                        type: 'hidden',
                                        name: 'claim_id',
                                        value: response.claim_id
                                    }).appendTo('#webform #step-4');
                                }

                            },
                        });
                        if(proceed == false) { return false; }
                    }

                    if(stepNumber === 3) {
                        let proceed;
                        let fields = $('#webform #step-4').find("select, textarea, input").serialize();

                        $.ajax({
                            method : 'POST',
                            url : 'webform',
                            data : {stage: '4', _token: '{{csrf_token()}}', data : fields},
                            async:false,
                            success : function(response) {
                                //var data = JSON.parse(response);
                                if(response.status === 400)
                                {
                                    proceed=false;
                                    var validator = $( "#webform" ).validate();
                                    validator.showErrors( response.errors );
                                } else {
                                    $('<input>').attr({
                                        type: 'hidden',
                                        id: 'claim_id',
                                        name: 'claim_id',
                                        value: response.claim_id
                                    }).appendTo('#webform #step-5');

                                    claim_id = response.claim_id;

                                    evidenceTable = $('#dt-evidence').DataTable( {
                                        ajax: "jsonEvidenceFiles/"+claim_id,
                                        async:false,
                                        columns: [
                                            {
                                                targets: 0,
                                                data: "name",
                                                render: function ( data, type, row, meta ) {
                                                    var name;
                                                    name = '<div title="'+data+'" style="overflow: hidden;max-width: 200px; white-space: nowrap; text-overflow: ellipsis;">'+data+'</div>';
                                                    return name;
                                                }
                                            },
                                            { data: "created_at" },
                                            {
                                                targets: 2,
                                                data: "id",
                                                render: function ( data, type, row, meta ) {
                                                    var actions ;
                                                    console.log(row);
                                                    actions =
                                                        `<a href="download-file/${data}"` +
                                                        'class="btn btn-sm btn-link">' +
                                                        '<i class="fal fa-cloud-download"></i> Download'+
                                                        '</a>'


                                                    actions += `<a href="javascript:void(0);"` +
                                                        `id="js-sweetalert2-example-7"`+
                                                        ` onclick="deleteFile(${data})"`+
                                                        'class="btn btn-sm btn-link delete-file">' +
                                                        '<i class="fal fa-trash"></i> Delete'+
                                                        '</a>'

                                                    return actions;
                                                }
                                            },
                                        ],
                                    });
                                }

                            },
                        });
                        if(proceed == false) { return false; }
                    }

                    if(stepNumber === 4) {
                        console.log('This is step 4');
                        // Datatable

                    }


                }


            });


            // Dropzone
            $("#files_dropzone").dropzone({
                url: "upload",
                method: "POST",
                addRemoveLinks: true,
                clickable: true,
                maxFilesize: 30, // in mb
                maxThumbnailFilesize: 10, // 3MB
                parallelUploads: 10,
                //uploadMultiple : true,
                acceptedFiles: 'image/*,application/pdf, application/vnd.openxmlformats-officedocument.wordprocessingml.d, .xlsx, .xls, .docx, .doc, application/vnd.openxmlformats-officedocument.wordprocessingml.document',
                dictDefaultMessage: '<span class="text-center"><span class="font-lg visible-xs-block visible-sm-block visible-lg-block"><span class="font-lg"><i class="fa fa-caret-right text-danger"></i> Drop files <span class="font-xs">to upload</span></span><span>&nbsp&nbsp<h4 class="display-inline"> (Or Click to search for your files)</h4></span>',
                dictResponseError: 'Error uploading file!',
                dictInvalidFileType: 'Invalid File type',
                UploadCanceled: 'Your file upload was cancelled',
                dictFileTooBig: 'Sorry the file size too big to upload!',
                success: function (file, response) {
                    console.log(response);
                    selector = $("#response-msg");
                    selector.text(response.success).show();
                    selector.delay(5000).slideUp(300);
                    evidenceTable.ajax.reload();
                    //let newRow = $('<div class="dz-message">'+response+'</div>');
                    //$('#files_dropzone').append(newRow);
                },
                error: function () {

                   /* let newRow = $('<div class="dz-error-message">'+response+'</div>');
                    $('#files_dropzone').append(newRow);*/
                },
                sending: function (file, xhr, formData) {
                    formData.append("_token", "{{ csrf_token() }}");
                    formData.append("claim_id", claim_id);

                }

            });




        });
    </script>
@endsection