@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")}}">
    <link rel="stylesheet" media="screen, print" href="{{asset("css/formplugins/summernote/summernote.css")}}">
    <link rel="stylesheet" media="screen, print" href="{{asset("css/notifications/sweetalert2/sweetalert2.bundle.css")}}">
    <style>

        .list-group-item {
            cursor: pointer;"
        }
        .help-block {
            color: #ff0000;
        }
    </style>
@endsection

@section('content')
    <main id="js-page-content" role="main" class="page-content">

        <ol class="breadcrumb page-breadcrumb bg-white">

            <li class="position-absolute pos-top pos-right d-none d-sm-block"><span class="js-get-date"></span></li>
        </ol>

        <div class="row">
            <div class="col-lg-6 col-xl-3 order-lg-1 order-xl-1">
                <!-- profile summary -->
                <div class="card mb-g rounded-top">
                    <div class="row no-gutters row-grid">
                        <div class="col-12">
                            <div class="d-flex flex-column align-items-center justify-content-center p-4">
                                <img src="../img/demo/avatars/avatar-admin-lg.png" class="rounded-circle shadow-2 img-thumbnail" alt="">
                                <h5 class="mb-0 fw-700 text-center mt-3">
                                    {{$rep->first_name}} {{$rep->last_name}}
                                    <small class="text-muted mb-0">{{ $rep->city }}, {{$rep->country}}</small>
                                </h5>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="text-center py-3">
                                <h5 class="mb-0 fw-700">
                                    {{ count($rep->claims) }}
                                    <small class="text-muted mb-0">Cases</small>
                                </h5>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="text-center py-3">
                                <h5 class="mb-0 fw-700">
                                    {{ count($rep->notifications) }}
                                    <small class="text-muted mb-0">Messages</small>
                                </h5>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="accordion accordion-outline accordion-hover" id="js_demo_accordion-2">
                    <div class="card">
                        <div class="card-header">
                            <a href="javascript:void(0);" class="card-title collapsed" data-toggle="collapse" data-target="#js_demo_accordion-2a" aria-expanded="false">
                                <i class="fal fa-info-circle width-2 fs-xl"></i>
                                Your Details
                            </a>
                        </div>
                        <div id="js_demo_accordion-2a" class="collapse" data-parent="#js_demo_accordion-2" style="">
                            <div class="card-body">
                                <form class="needs-validation" id="update_user_details" novalidate>
                                    <div class="form-row">
                                        <div class="form-group col-md-6">
                                            <label for="first_name">First Name</label>
                                            <input value="{{ Auth::user()->first_name }}"
                                                   required
                                                   type="text"
                                                   class="form-control"
                                                   id="first_name"
                                                   placeholder="First Name">
                                            <div class="invalid-feedback">
                                                First Name is required
                                            </div>
                                        </div>
                                        <div class="form-group col-md-6">
                                            <label for="last_name">Last Name</label>
                                            <input value = "{{ Auth::user()->last_name}}"
                                                   required
                                                   type="text"
                                                   class="form-control"
                                                   id="last_name"
                                                   placeholder="Last Name">
                                            <div class="invalid-feedback">
                                                Last Name is required
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-row">
                                        <div class="form-group col-md-6">
                                            <label for="email">Email</label>
                                            <input value="{{Auth::user()->email}}"
                                                   required
                                                   type="email"
                                                   class="form-control"
                                                   id="email"
                                                   placeholder="Email">
                                        </div>
                                    </div>

                                    <div class="form-row">
                                        <div class="form-group col-md-6">
                                            <label for="home_phone">Home Phone</label>
                                            <input value="{{Auth::user()->home_phone}}"
                                                   type="tel"
                                                   class="form-control"
                                                   id="home_phone"
                                                   placeholder="Home Phone">
                                        </div>
                                        <div class="form-group col-md-6">
                                            <label for="mobile_phone">Mobile Phone</label>
                                            <input type="tel"
                                                   value="{{Auth::user()->mobile_phone}}"
                                                   name="user[mobile_phone]"
                                                   autocomplete="new-password"
                                                   class="form-control"
                                                   id="mobile_phone"
                                                   placeholder="Mobile Phone">
                                        </div>
                                    </div>
                                    <div class="border-top my-3"></div>
                                    <div class="alert alert-success">
                                    </div>
                                    <div class="alert alert-danger">
                                    </div>
                                    <button type="submit" id="update_user_details" class="btn btn-outline-success btn-sm">Update</button>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-header">
                            <a href="javascript:void(0);" class="card-title collapsed" data-toggle="collapse" data-target="#js_demo_accordion-2b" aria-expanded="false">
                                <i class="fal fa-address-book width-2 fs-xl"></i>
                                Your Address
                            </a>
                        </div>
                        <div id="js_demo_accordion-2b" class="collapse" data-parent="#js_demo_accordion-2">
                            <div class="card-body">
                                <form class="needs-validation" id="update_user_address" novalidate>
                                    <div class="form-row">
                                        <div class="form-group col-md-6">
                                            <label for="address_first_line">First Line Of Address</label>
                                            <input type="text"
                                                   value="{{Auth::user()->first_line_of_address}}"
                                                   class="form-control"
                                                   id="address_first_line"
                                                   placeholder="First Line of Address">
                                        </div>
                                        <div class="form-group col-md-6">
                                            <label for="address_second_line">Second Line Of Address</label>
                                            <input type="text"
                                                   value="{{Auth::user()->second_line_of_address}}"
                                                   class="form-control"
                                                   id="address_second_line"
                                                   placeholder="Second Line of Address">
                                        </div>
                                    </div>
                                    <div class="form-row">
                                        <div class="form-group col-md-4">
                                            <label for="city">City/Town</label>
                                            <input type="text"
                                                   value="{{Auth::user()->city}}"
                                                   class="form-control"
                                                   id="city">
                                        </div>
                                        <div class="form-group col-md-4">
                                            <label for="country">Country</label>
                                            <select class="form-control"
                                                    id="country">
                                                @foreach ( $countries as $country)
                                                    <option {{ $country->name == Auth::user()->country ? "selected" : "" }}>
                                                        {{ $country->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="form-group col-md-4">
                                            <label for="post_code">Post Code</label>
                                            <div class="input-group-prepend">
                                                <input type="text"
                                                       value="{{Auth::user()->post_code}}"
                                                       class="form-control"
                                                       id="post_code">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="border-top my-3"></div>
                                    <div class="alert alert-success">
                                    </div>
                                    <div class="alert alert-danger">
                                    </div>
                                    <button type="submit" class="btn btn-outline-success btn-sm">Update</button>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-header">
                            <a href="javascript:void(0);" class="card-title collapsed" data-toggle="collapse" data-target="#js_demo_accordion-2c" aria-expanded="false">
                                <i class="fal fa-lock-open width-2 fs-xl"></i>
                                Password
                            </a>
                        </div>
                        <div id="js_demo_accordion-2c" class="collapse" data-parent="#js_demo_accordion-2">
                            <div class="card-body">
                                <form class="needs-validation" id="update_user_password" novalidate>
                                    <div class="form-row">
                                        <div class="form-group col-md-6">
                                            <label for="password">New Password</label>
                                            <input value = ""
                                                   type="password"
                                                   autocomplete="new-password"
                                                   pattern='^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$'
                                                   class="form-control"
                                                   id="password"
                                                   required
                                                   placeholder="Password"
                                            >
                                            <span class="invalid-feedback" role="alert">
                                                                        The password must contain minimum eight characters, at least one uppercase letter,
                                                                        one lowercase letter, one number and one special character.
                                                                    </span>
                                            @error('password')
                                            <div class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </div>
                                            @enderror
                                        </div>
                                        <div class="form-group col-md-6">
                                            <label for="password_confirmation">Confirm Password</label>
                                            <input value = ""
                                                   type="password"
                                                   autocomplete="new-password"
                                                   class="form-control"
                                                   required
                                                   id="password_confirmation"
                                                   placeholder="Password">
                                            <span class="invalid-feedback" role="alert">
                                                                        The password don't match.
                                                                    </span>
                                        </div>
                                    </div>
                                    <div class="border-top my-3"></div>
                                    <button type="submit" class="btn btn-outline-primary btn-sm">Update</button>
                                </form>
                            </div>
                        </div>
                    </div>
                    @if( count($rep->claims) > 0)
                        <div class="card">
                            <button class="btn btn-primary" id="create-new-case-btn">Create New Case</button>
                        </div>
                    @else

                    @endif


                </div>

            </div>
            <div class="col-lg-12 col-xl-6 order-lg-3 order-xl-2">
            {{--<div class="card border mb-g">
                <div class="card-body pl-4 pt-4 pr-4 pb-0">
                    <div class="d-flex flex-column">
                        <div class="border-0 flex-1 position-relative shadow-top">
                            <div class="pt-2 pb-1 pr-0 pl-0 rounded-0 position-relative" tabindex="-1">
                                <span class="profile-image rounded-circle d-block position-absolute" style="background-image:url('../img/demo/avatars/avatar-admin.png'); background-size: cover;"></span>
                                <div class="pl-5 ml-5">
                                    <textarea class="form-control border-0 p-0 fs-xl" rows="4" placeholder="What's on your mind Codex?..."></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="height-8 d-flex flex-row align-items-center flex-wrap flex-shrink-0">
                            <a href="javascript:void(0);" class="btn btn-icon fs-xl width-1 mr-1" data-toggle="tooltip" data-original-title="More options" data-placement="top">
                                <i class="fal fa-ellipsis-v-alt color-fusion-300"></i>
                            </a>
                            <a href="javascript:void(0);" class="btn btn-icon fs-xl mr-1" data-toggle="tooltip" data-original-title="Attach files" data-placement="top">
                                <i class="fal fa-paperclip color-fusion-300"></i>
                            </a>
                            <a href="javascript:void(0);" class="btn btn-icon fs-xl mr-1" data-toggle="tooltip" data-original-title="Insert photo" data-placement="top">
                                <i class="fal fa-camera color-fusion-300"></i>
                            </a>
                            <button class="btn btn-info shadow-0 ml-auto">Post</button>
                        </div>
                    </div>
                </div>
            </div>--}}
            <!-- post comment -->
                @if( count($rep->claims) > 0)

                    <div class="card mb-g">
                        <div class="card-header bg-white d-flex pr-2 align-items-center flex-wrap">
                            <h4>Your Latest Claim</h4>
                        </div>
                        <div class="card-body pb-0 px-4">
                            <div class="row">
                                <div class="col-sm-12">

                                    <br>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6 col-md-4 col-xl-4">
                                    <div class="p-3 bg-primary-300 rounded overflow-hidden position-relative text-white mb-g">
                                        <div class="">
                                            <h5 class="display-6 d-block l-h-n m-0 fw-500">
                                                {{ $latestClaim->id }}
                                                <small class="m-0 l-h-n">Case ID</small>
                                            </h5>
                                        </div>
                                        <i class="fal fa-user position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n1" style="font-size:6rem"></i>
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-4 col-xl-4">
                                    <div class="p-3 bg-warning-400 rounded overflow-hidden position-relative text-white mb-g">
                                        <div class="">
                                            <h5 class="display-6 d-block l-h-n m-0 fw-500">
                                                {{ !empty($latestClaim->retailer->name) ? $latestClaim->retailer->name : ''}}
                                                <small class="m-0 l-h-n">Retailer</small>
                                            </h5>
                                        </div>
                                        <i class="fal fa-gem position-absolute pos-right pos-bottom opacity-15  mb-n1 mr-n4" style="font-size: 6rem;"></i>
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-4 col-xl-4">
                                    <div class="p-3 bg-success-200 rounded overflow-hidden position-relative text-white mb-g">
                                        <div class="">
                                            <h5 class="display-6 d-block l-h-n m-0 fw-500">
                                                {{ $latestClaim->claim_status->name }}
                                                <small class="m-0 l-h-n">Status</small>
                                            </h5>
                                        </div>
                                        <i class="fal fa-lightbulb position-absolute pos-right pos-bottom opacity-15 mb-n5 mr-n6" style="font-size: 8rem;"></i>
                                    </div>
                                </div>

                            </div>
                            <div class="row case-overview">
                                <div class="col-sm-12 py-3">
                                    <button class="btn btn-info view-claim" data-claim_id="{{$latestClaim->id}}"">View</button>
                                </div>
                            </div>

                        </div>

                    </div>

                    <div class="card mb-g" id="older-cases">
                        <div class="row row-grid no-gutters">
                            <div class="col-12">
                                <div class="p-3">
                                    <h2 class="mb-0 fs-xl case-overview">
                                        Older Cases
                                    </h2>
                                    <h2 class="mb-0 fs-xl d-none case-detail">
                                        Case Detail
                                    </h2>
                                </div>
                            </div>

                            <div class="col-12">
                                <div class="row d-none" style="height: 300px;" id="spinner-case-overview">
                                    <div class="spinner-border text-success"  role="status" style="position: absolute; z-index: 1031; top: 50%; left: 50%;">
                                        <span class="sr-only">Loading...</span>
                                    </div>
                                </div>
                                <div class="row case-overview">
                                    @foreach($rep->claims as $claim)
                                        <div class="col-lg-4 col-sm-6">
                                            <a href="javascript:void(0);" class="text-center p-3 d-flex flex-column hover-highlight view-claim" data-claim_id="{{ $claim->id }}">
                                                <div class="col-12">
                                                    <div class="p-3 rounded">
                                                        <div class="">
                                                            <h3 class="display-5 text-left d-block l-h-n m-0 fw-500 color-success-800">
                                                                {{$claim->id}}
                                                                <small class="m-0 l-h-n">click to view</small>
                                                            </h3>
                                                        </div>
                                                        @php
                                                            $ran = [
                                                                'envelope',
                                                                /*'envelope',
                                                                'camera',
                                                                'arrow-alt-circle-right',
                                                                'burn',
                                                                'asterisk',*/
                                                            ];
                                                        @endphp
                                                        <i class="fal fa-{{ Arr::random($ran) }} color-danger-800 position-absolute pos-right pos-bottom opacity-20 mb-n1 mr-n1" style="font-size:5rem"></i>
                                                    </div>
                                                </div>

                                            </a>
                                        </div>
                                    @endforeach
                                </div>

                                <div class="row d-none case-detail">
                                    <div class="col-12">
                                        <div class="panel-container show">
                                            <div class="panel-content">
                                                <div class="row" style="padding: 20px;">
                                                    <div class="col-auto">
                                                        <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                                                            <a class="nav-link active" id="v-pills-complainant-tab" data-toggle="pill" href="#v-pills-complainant" role="tab" aria-controls="v-pills-complainant" aria-selected="true">
                                                                <i class="fal fa-user"></i>
                                                                <span class="hidden-sm-down ml-1">Complainant</span>
                                                            </a>
                                                            <a class="nav-link" id="v-pills-respondent-tab" data-toggle="pill" href="#v-pills-respondent" role="tab" aria-controls="v-pills-respondent" aria-selected="false">
                                                                <i class="fal fa-user-alt"></i>
                                                                <span class="hidden-sm-down ml-1">Respondent</span>
                                                            </a>
                                                            <a class="nav-link" id="v-pills-arbitrator-tab" data-toggle="pill" href="#v-pills-arbitrator" role="tab" aria-controls="v-pills-arbitrator" aria-selected="false">
                                                                <i class="fal fa-cog"></i>
                                                                <span class="hidden-sm-down ml-1">Arbitrator</span>
                                                            </a>
                                                            <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">
                                                                <i class="fal fa-envelope"></i>
                                                                <span class="hidden-sm-down ml-1">Messages</span>
                                                            </a>
                                                        </div>
                                                    </div>
                                                    <div class="col">
                                                        <div class="tab-content" id="v-pills-tabContent">
                                                            <div class="tab-pane fade show active" id="v-pills-complainant" role="tabpanel" aria-labelledby="v-pills-complainant">
                                                                <div class="panel-container show">
                                                                    <div class="panel-content">
                                                                        <div class="panel-tag">
                                                                            <h3>Complainant</h3>
                                                                        </div>
                                                                        <ul class="nav nav-pills nav-justified" role="tablist">
                                                                            <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#tab-overview" role="tab">Overview</a></li>
                                                                            <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-events" role="tab">Events</a></li>
                                                                            <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-remedies" role="tab">Remedies</a></li>
                                                                            <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-files" role="tab">Files</a></li>
                                                                            <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-final-comment" role="tab">Final Comment</a></li>
                                                                        </ul>
                                                                        <div class="tab-content p-3">
                                                                            <div class="tab-pane fade show active" id="tab-overview" role="tabpanel" aria-labelledby="tab-overview">

                                                                            </div>
                                                                            <div class="tab-pane fade" id="tab-events" role="tabpanel" aria-labelledby="tab-events">

                                                                            </div>
                                                                            <div class="tab-pane fade" id="tab-remedies" role="tabpanel" aria-labelledby="tab-remedies">

                                                                            </div>
                                                                            <div class="tab-pane fade" id="tab-files" role="tabpanel" aria-labelledby="tab-files">

                                                                            </div>
                                                                            <div class="tab-pane fade" id="tab-final-comment" role="tabpanel" aria-labelledby="tab-final-comment">

                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="tab-pane fade" id="v-pills-respondent" role="tabpanel" aria-labelledby="v-pills-profile-tab">
                                                                <div class="panel-tag">
                                                                    <h3>Respondent</h3>
                                                                </div>
                                                            </div>
                                                            <div class="tab-pane fade" id="v-pills-arbitrator" role="tabpanel" aria-labelledby="v-pills-arbitrator-tab">
                                                                <div class="panel-tag">
                                                                    <h3>Arbitrator</h3>
                                                                </div>
                                                                <div class="alert alert-success">
                                                                    <strong>
                                                                        Settings saved
                                                                    </strong>
                                                                    <p class="m-0">
                                                                        All your settings changes have been saved!
                                                                    </p>
                                                                </div>
                                                            </div>
                                                            <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">

                                                            </div>

                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="p-3 text-center">
                                    <a href="javascript:void(0);" class="btn-link font-weight-bold d-none case-detail" id="claim-back-button">Return</a>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif

                @if( count($rep->claims) > 0)
                    <div class="card mb-g" id="new-case" style="display:none;">
                        @else
                            <div class="card mb-g" id="new-case">
                                @endif

                                <form action="#" id="webform" method="post" accept-charset="utf-8">
                                    <input type="hidden" name="claim_id" id="claim_id" value="{{ $repDraft ? $repDraft->id : '' }}">
                                    @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>
                                            <li><a href="#step-6">Step 6<br /><small>Next Action</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 overflow-auto" style="height: 400px;">
                                                            <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 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" @if(($repDraft ? $repDraft->eligibility->agree_ind : '') === 1) checked @else @endif/>
                                                                    </div>
                                                                </div>
                                                                </p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row">

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

                                            <div id="step-2" class="">
                                                <div id="form-step-1">
                                                    <div class="form-group">
                                                        <label for="name">Please tell us about the scheme</label>
                                                        <select class="form-control" name="scheme_id" id="scheme_id">
                                                            <option value="">Please Select</option>
                                                            @foreach ( $schemes as $scheme)

                                                                @if(($repDraft ? $repDraft->scheme_id : '') === $scheme->id)
                                                                    <option value=" {{ $scheme->id }}" selected>
                                                                        {{ $scheme->name }}
                                                                    </option>
                                                                @else
                                                                    <option value=" {{ $scheme->id }}">
                                                                        {{ $scheme->name }}
                                                                    </option>
                                                                @endif

                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    <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)
                                                                @if(isset($repDraft->retailer_id) && $repDraft->retailer_id === $retailer->id)
                                                                    <option value=" {{ $retailer->id }}" selected>
                                                                        {{ $retailer->name }}
                                                                    </option>
                                                                @else
                                                                    <option value=" {{ $retailer->id }}">
                                                                        {{ $retailer->name }}
                                                                    </option>
                                                                @endif

                                                            @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" @if(($repDraft ? $repDraft->eligibility->complained_to_company_in_writing : '') === 1) {{ 'selected' }} @else @endif >Yes</option>
                                                            <option value="0" @if(($repDraft ? $repDraft->eligibility->complained_to_company_in_writing : '') === 0) {{ 'selected' }} @else @endif >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" @if(($repDraft ? $repDraft->eligibility->company_provide_final_response : '') === 1) {{ 'selected' }} @else @endif >Yes</option>
                                                            <option value="0" @if(($repDraft ? $repDraft->eligibility->company_provide_final_response : '') === 0) {{ 'selected' }} @else @endif >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" @if(($repDraft ? $repDraft->eligibility->company_reject_complain : '') === 1) {{ 'selected' }} @else @endif >Yes</option>
                                                            <option value="0" @if(($repDraft ? $repDraft->eligibility->company_reject_complain : '') === 0) {{ 'selected' }} @else @endif >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" @if(($repDraft ? $repDraft->eligibility->customer_reject_company_final_response : '') === 1) {{ 'selected' }} @else @endif>Yes</option>
                                                            <option value="0" @if(($repDraft ? $repDraft->eligibility->customer_reject_company_final_response : '') === 0) {{ 'selected' }} @else @endif >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" @if(($repDraft ? $repDraft->eligibility->complain_to_other_adr : '') === 1) {{ 'selected' }} @else @endif >Yes</option>
                                                            <option value="0" @if(($repDraft ? $repDraft->eligibility->complain_to_other_adr : '') === 0) {{ 'selected' }} @else @endif>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">
                                                @if(($repDraft ? $repDraft->eligibility->company_final_response : '')) {{$repDraft->eligibility->company_final_response}} @else @endif
                                            </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" id="location_id">
                                                        <option value="">Please Select</option>
                                                        {{--@foreach ( $locations as $location)
                                                            @if($repDraft->claim_issue->location_id === $location->id)
                                                                <option value=" {{ $location->id }}" selected>
                                                                    {{ $location->name }}
                                                                </option>
                                                            @endif
                                                        @endforeach--}}
                                                    </select>
                                                </div>
                                                <div class="form-group">
                                                    <label for="name">What did you purchase?:</label>
                                                    <select class="form-control" name="category_id" id="category_id">
                                                        <option value="">Please Select</option>retailer_id
                                                        @foreach ( $categories as $category)
                                                            @if(isset($repDraft->claim_issue->category_id) && $repDraft->claim_issue->category_id === $category->id)
                                                                <option value=" {{ $category->id }}" selected>
                                                                    {{ $category->name }}
                                                                </option>
                                                            @endif
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="form-group">
                                                    <label for="name">What is your complaint about?:</label>
                                                    <select class="form-control" name="sub_category_id" id="sub_category_id">
                                                        <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">
                                             @if(($repDraft ? $repDraft->description : '')) {{$repDraft->description}} @else @endif
                                        </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 id="step-6">

                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <!-- post comment - end -->
                    </div>
                    <div class="col-lg-6 col-xl-3 order-lg-2 order-xl-3">
                        <!-- add : -->
                        <div class="card mb-2 ">
                            <div class="card-header bg-trans-gradient py-2 pr-2 d-flex align-items-center flex-wrap">
                                <strong class="text-white">
                                    Action Required & Information
                                </strong>
                            </div>
                            <div class="card-body">
                                <a href="javascript:void(0);" class="d-flex flex-row align-items-center">

                                    <div class='icon-stack display-3 flex-shrink-0'>
                                        <i class="fal fa-circle icon-stack-3x opacity-100 color-primary-400"></i>
                                        <i class="fas fa-angle-double-up icon-stack-3x opacity-100 color-primary-500"></i>
                                    </div>

                                    <div class="ml-3">

                                        <br>
                                        @foreach( $rep->claims as $claim )
                                            @if($claim->claim_status->name == 'Waiting File Submission')
                                                <p class="breadcrumb bg-primary-300"><h3>{{$claim->id}}</h3> : Finish uploading files</p>
                                            @endif
                                            @if($claim->claim_status->name == 'New')
                                                <p class="panel-tag bg-primary-300">{{$claim->id}} : Our admin is checking your case right now. We'll give you an update soon.</p>

                                            @endif
                                        @endforeach

                                    </div>
                                </a>
                            </div>
                        </div>
                    {{--<div class="card mb-g">
                        <div class="card-body">
                            <a href="javascript:void(0);" class="d-flex flex-row align-items-center">
                                <div class="icon-stack display-3 flex-shrink-0">
                                    <i class="fal fa-circle icon-stack-3x opacity-100 color-danger-400"></i>
                                    <i class="fas fa-envelope icon-stack-1x opacity-100 color-danger-500" ></i>
                                </div>
                                <div class="ml-3">
                                    <strong>
                                        Latest Message
                                    </strong>
                                    <br>
                                </div>
                            </a>
                        </div>
                        <div class="card-body pb-0 px-4">
                            <div class="d-flex flex-row pb-3 pt-2  border-top-0 border-left-0 border-right-0">

                                <h5 class="mb-0 flex-1 text-dark fw-500">
                                    Admin
                                    <small class="m-0 l-h-n">
                                        Chief of Surgery
                                    </small>
                                </h5>
                                <span class="text-muted fs-xs opacity-70">
                                                    2 days
                                                </span>
                            </div>
                            <div class="pb-3 pt-2 border-top-0 border-left-0 border-right-0 text-muted">
                                <p>Hi There</p>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
                                <!-- URL post -->
                                <div class="d-flex overflow-hidden rounded w-100 border">

                                </div>
                            </div>
                            --}}{{--<div class="d-flex align-items-center demo-h-spacing py-3">
                                <a href="javascript:void(0);" class="d-inline-flex align-items-center text-dark">
                                    <i class="fal fa-heart fs-xs mr-1"></i> <span>1 Likes</span>
                                </a>
                                <a href="javascript:void(0);" class="d-inline-flex align-items-center text-dark">
                                    <i class="fal fa-comment fs-xs mr-1"></i> <span>0 Comments</span>
                                </a>
                            </div>--}}{{--
                        </div>
                        <div class="card-body py-0 px-4 border-faded border-right-0 border-bottom-0 border-left-0">
                            <div class="d-flex flex-column align-items-center">
                                <!-- add comment -->
                                <div class="py-3 w-100">
                                    <textarea class="form-control border-0 p-0" rows="2" placeholder="add a reply..."></textarea>
                                </div>
                                <!-- add comment end -->
                            </div>
                        </div>
                    </div>--}}
                    <!-- rating -->
                        <div class="card mb-g">
                            @if(!null == $rep->ratings)
                                <h2 class="card-header mb-0 fs-xl">Rate your experience</h2>
                                <div class="card-body">
                                    Thank you for submitting your feedback
                                </div>
                            @else
                                <div class="row row-grid no-gutters">
                                    <div class="col-12">
                                        <div class="p-3">
                                            <h2 class="mb-0 fs-xl">
                                                Rate your experience
                                            </h2>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="p-3">
                                            <div class="fw-500 fs-xs">Response time</div>
                                            <div class="p-3 d-flex text-primary align-items-center fs-xl response-time">
                                                <i class="fal fa-star mr-1" data-value="1"></i>
                                                <i class="fal fa-star mr-1" data-value="2"></i>
                                                <i class="fal fa-star mr-1" data-value="3"></i>
                                                <i class="fal fa-star mr-1" data-value="4"></i>
                                                <i class="fal fa-star mr-1" data-value="5"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="p-3">
                                            <div class="fw-500 fs-xs">Customer service</div>
                                            <div class="p-3 d-flex text-primary align-items-center fs-xl customer-service">
                                                <i class="fal fa-star mr-1" data-value="1"></i>
                                                <i class="fal fa-star mr-1" data-value="2"></i>
                                                <i class="fal fa-star mr-1" data-value="3"></i>
                                                <i class="fal fa-star mr-1" data-value="4"></i>
                                                <i class="fal fa-star mr-1" data-value="5"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="p-3">
                                            <div class="fw-500 fs-xs">Ease of use</div>
                                            <div class="p-3 d-flex text-primary align-items-center fs-xl ease-of-use">
                                                <i class="fal fa-star mr-1" data-value="1"></i>
                                                <i class="fal fa-star mr-1" data-value="2"></i>
                                                <i class="fal fa-star mr-1" data-value="3"></i>
                                                <i class="fal fa-star mr-1" data-value="4"></i>
                                                <i class="fal fa-star mr-1" data-value="5"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="p-3">
                                            <div class="fw-500 fs-xs">Knowledge</div>
                                            <div class="p-3 d-flex text-primary align-items-center fs-xl knowledge">
                                                <i class="fal fa-star mr-1" data-value="1"></i>
                                                <i class="fal fa-star mr-1" data-value="2"></i>
                                                <i class="fal fa-star mr-1" data-value="3"></i>
                                                <i class="fal fa-star mr-1" data-value="4"></i>
                                                <i class="fal fa-star mr-1" data-value="5"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="p-3">
                                            <div class="fw-500 fs-xs">Staff interaction</div>
                                            <div class="p-3 d-flex text-primary align-items-center fs-xl staff-interaction">
                                                <i class="fal fa-star mr-1" data-value="1"></i>
                                                <i class="fal fa-star mr-1" data-value="2"></i>
                                                <i class="fal fa-star mr-1" data-value="3"></i>
                                                <i class="fal fa-star mr-1" data-value="4"></i>
                                                <i class="fal fa-star mr-1" data-value="5"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="p-3">
                                            <textarea class="form-control border-0 p-0 fs-xl" rows="4" id="rating-comments" placeholder="Your Comments"></textarea>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="p-3 text-right">
                                            <button class="btn btn-info shadow-0 ml-auto waves-effect waves-themed" id="submit-rating">Submit</button>
                                        </div>
                                    </div>
                                </div>
                            @endif
                        </div>

                    </div>
            </div>
    </main>
    {{--<div class="container">
        <div class="row justify-content-center">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">Dashboard</div>

                    <div class="card-body">
                        @if (session('status'))
                            <div class="alert alert-success" role="alert">
                                {{ session('status') }}
                            </div>
                        @endif

                        <p class="text-success">Welcome {{ Auth::user()->first_name }}</p>
                        <section>
                            <div class="container">
                                <div class="row text-center mb-4">
                                    <div class="col">
                                        <span class="h1">Your Latest Claim</span>
                                    </div>
                                </div>

                                <div class="row justify-content-center">
                                    <div class="col-lg-11 col-xl-10">
                                        <div class="row">
                                            <div class="col-6 col-md d-flex">
                                                <a href="" class="card text-center flex-fill hover-effect">
                                                    <div class="card-body d-flex flex-column align-items-center justify-content-center py-2">
                                                        <svg width="58" height="58" viewBox="0 0 58 58" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon mt-2 mb-3">
                                                            <path d="M52 22.977V42C52 43.0609 51.5786 44.0783 50.8284 44.8284C50.0783 45.5786 49.0609 46 48 46H4C2.93913 46 1.92172 45.5786 1.17157 44.8284C0.421428 44.0783 0 43.0609 0 42V23.023V12C0 10.9391 0.421428 9.92172 1.17157 9.17157C1.92172 8.42143 2.93913 8 4 8H48C49.0609 8 50.0783 8.42143 50.8284 9.17157C51.5786 9.92172 52 10.9391 52 12V22.977V22.977ZM50 22.284V12C50 11.4696 49.7893 10.9609 49.4142 10.5858C49.0391 10.2107 48.5304 10 48 10H4C3.46957 10 2.96086 10.2107 2.58579 10.5858C2.21071 10.9609 2 11.4696 2 12V22.284L20 28.404V27C20 26.2044 20.3161 25.4413 20.8787 24.8787C21.4413 24.3161 22.2044 24 23 24H29C29.7956 24 30.5587 24.3161 31.1213 24.8787C31.6839 25.4413 32 26.2044 32 27V28.404L50 22.284ZM50 24.396L32 30.516V33C32 33.7956 31.6839 34.5587 31.1213 35.1213C30.5587 35.6839 29.7956 36 29 36H23C22.2044 36 21.4413 35.6839 20.8787 35.1213C20.3161 34.5587 20 33.7956 20 33V30.516L2 24.396V42C2 42.5304 2.21071 43.0391 2.58579 43.4142C2.96086 43.7893 3.46957 44 4 44H48C48.5304 44 49.0391 43.7893 49.4142 43.4142C49.7893 43.0391 50 42.5304 50 42V24.396ZM23 26C22.7348 26 22.4804 26.1054 22.2929 26.2929C22.1054 26.4804 22 26.7348 22 27V33C22 33.2652 22.1054 33.5196 22.2929 33.7071C22.4804 33.8946 22.7348 34 23 34H29C29.2652 34 29.5196 33.8946 29.7071 33.7071C29.8946 33.5196 30 33.2652 30 33V27C30 26.7348 29.8946 26.4804 29.7071 26.2929C29.5196 26.1054 29.2652 26 29 26H23ZM1 48H51C51.2652 48 51.5196 48.1054 51.7071 48.2929C51.8946 48.4804 52 48.7348 52 49C52 49.2652 51.8946 49.5196 51.7071 49.7071C51.5196 49.8946 51.2652 50 51 50H1C0.734784 50 0.480429 49.8946 0.292892 49.7071C0.105356 49.5196 0 49.2652 0 49C0 48.7348 0.105356 48.4804 0.292892 48.2929C0.480429 48.1054 0.734784 48 1 48ZM27.01 29C27.556 29 28 29.464 28 30C28 30.552 27.568 31 27.01 31H24.99C24.444 31 24 30.536 24 30C24 29.448 24.432 29 24.99 29H27.01ZM19.893 5.45C19.7725 5.68489 19.5641 5.86261 19.3131 5.9444C19.0621 6.0262 18.7889 6.00544 18.5532 5.88664C18.3175 5.76785 18.1383 5.56066 18.0547 5.31027C17.9711 5.05987 17.9899 4.78658 18.107 4.55C19.624 1.535 22.309 0 26 0C29.69 0 32.376 1.534 33.893 4.55C33.9532 4.66738 33.9896 4.79552 34.0001 4.92702C34.0105 5.05853 33.9949 5.19081 33.954 5.31624C33.9131 5.44167 33.8478 5.55777 33.7619 5.65786C33.6759 5.75794 33.571 5.84003 33.4532 5.8994C33.3354 5.95877 33.207 5.99424 33.0754 6.00377C32.9439 6.01329 32.8117 5.99669 32.6866 5.95492C32.5614 5.91315 32.4458 5.84703 32.3463 5.76037C32.2469 5.67371 32.1655 5.56823 32.107 5.45C30.94 3.131 28.959 2 26 2C23.04 2 21.06 3.132 19.893 5.45V5.45Z" transform="translate(3 5)" fill="#333333"></path>
                                                        </svg>

                                                        <span class="h6 mb-2">Claim ID: 100</span>
                                                    </div>
                                                </a>
                                            </div>
                                            <div class="col-6 col-md d-flex">
                                                <a href="" class="card text-center flex-fill hover-effect">
                                                    <div class="card-body d-flex flex-column align-items-center justify-content-center py-2">
                                                        <svg width="58" height="58" viewBox="0 0 58 58" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon mt-2 mb-3">
                                                            <path d="M43.6203 23.001H35.7783C35.8563 23.731 35.9143 24.412 35.9533 25.035C35.9823 25.479 35.9953 25.8 36.0003 25.976C36.0069 26.2412 35.9079 26.4982 35.7251 26.6904C35.5422 26.8827 35.2905 26.9944 35.0253 27.001C34.7601 27.0076 34.5031 26.9086 34.3109 26.7258C34.1187 26.5429 34.0069 26.2912 34.0003 26.026C33.9911 25.7378 33.9767 25.4497 33.9573 25.162C33.911 24.4402 33.8473 23.7197 33.7663 23.001H32.0003C31.7351 23.001 31.4807 22.8956 31.2932 22.7081C31.1057 22.5206 31.0003 22.2662 31.0003 22.001C31.0003 21.7358 31.1057 21.4814 31.2932 21.2939C31.4807 21.1064 31.7351 21.001 32.0003 21.001H33.5003C33.2346 19.239 32.8497 17.497 32.3483 15.787C30.6453 10.073 27.9233 6.567 24.0003 6.064V21.001H26.0003C26.2655 21.001 26.5199 21.1064 26.7074 21.2939C26.895 21.4814 27.0003 21.7358 27.0003 22.001C27.0003 22.2662 26.895 22.5206 26.7074 22.7081C26.5199 22.8956 26.2655 23.001 26.0003 23.001H24.0003V46.986C24.0003 48.3121 23.4735 49.5838 22.5358 50.5215C21.5982 51.4592 20.3264 51.986 19.0003 51.986C17.6742 51.986 16.4025 51.4592 15.4648 50.5215C14.5271 49.5838 14.0003 48.3121 14.0003 46.986V43.013C14.0003 42.454 14.4643 42.001 15.0003 42.001C15.5523 42.001 16.0003 42.462 16.0003 43.013V46.986C16.0003 47.7816 16.3164 48.5447 16.879 49.1073C17.4416 49.6699 18.2047 49.986 19.0003 49.986C19.796 49.986 20.559 49.6699 21.1216 49.1073C21.6842 48.5447 22.0003 47.7816 22.0003 46.986V23.001H12.2343C12.1473 23.781 12.0843 24.507 12.0433 25.162C12.0163 25.579 12.0033 25.874 12.0003 26.026C11.9937 26.2912 11.882 26.5429 11.6897 26.7258C11.4975 26.9086 11.2405 27.0076 10.9753 27.001C10.7101 26.9944 10.4584 26.8827 10.2755 26.6904C10.0927 26.4982 9.99368 26.2412 10.0003 25.976C10.0053 25.8 10.0183 25.479 10.0473 25.036C10.0873 24.412 10.1443 23.73 10.2223 23.001H2.38031C2.24024 23.7274 2.13346 24.4598 2.06031 25.196C2.02031 25.602 2.00331 25.885 2.00031 26.026C1.99368 26.2912 1.88197 26.5429 1.68974 26.7258C1.49752 26.9086 1.24053 27.0076 0.975313 27.001C0.710097 26.9944 0.458376 26.8827 0.275528 26.6904C0.09268 26.4982 -0.00631759 26.2412 0.000312825 25.976C0.00531283 25.789 0.0243131 25.457 0.0693131 25.001C0.142313 24.253 0.260312 23.422 0.435312 22.528C0.933312 19.975 1.78031 17.421 3.06231 15.028C6.62231 8.388 12.7773 4.29 22.0003 4.016V0.981C22.0003 0.439 22.4643 5.49316e-07 23.0003 5.49316e-07C23.5523 5.49316e-07 24.0003 0.43 24.0003 0.981V4.015C33.2233 4.289 39.3783 8.387 42.9383 15.028C44.2203 17.42 45.0683 19.974 45.5653 22.528C45.7403 23.421 45.8583 24.252 45.9313 25C45.9763 25.456 45.9953 25.788 46.0003 25.975C46.0069 26.2402 45.9079 26.4972 45.7251 26.6894C45.5422 26.8817 45.2905 26.9934 45.0253 27C44.7601 27.0066 44.5031 26.9076 44.3109 26.7248C44.1187 26.5419 44.0069 26.2902 44.0003 26.025C43.9973 25.884 43.9803 25.601 43.9403 25.195C43.8763 24.533 43.7723 23.795 43.6203 23V23.001ZM43.1573 21.001C42.6885 19.2556 42.0236 17.5688 41.1753 15.973C38.7553 11.46 35.0533 8.263 29.7853 6.836C31.7263 8.777 33.2013 11.644 34.2653 15.216C34.8207 17.1122 35.2407 19.0454 35.5223 21.001H43.1573V21.001ZM10.4773 21.001C10.7592 19.045 11.1796 17.1115 11.7353 15.215C12.7993 11.644 14.2743 8.777 16.2153 6.836C10.9473 8.264 7.24531 11.46 4.82531 15.973C3.977 17.5688 3.3121 19.2556 2.84331 21.001H10.4783H10.4773ZM12.5013 21.001H22.0003V6.064C18.0773 6.567 15.3553 10.073 13.6523 15.787C13.1509 17.497 12.7661 19.239 12.5003 21.001H12.5013Z" transform="translate(5.99976 2.99902)" fill="#333333"></path>
                                                        </svg>

                                                        <span class="h6 mb-2">Claim Status</span>
                                                    </div>
                                                </a>
                                            </div>
                                            <div class="col-6 col-md d-flex">
                                                <a href="" class="card text-center flex-fill hover-effect">
                                                    <div class="card-body d-flex flex-column align-items-center justify-content-center py-2">
                                                        <svg width="58" height="58" viewBox="0 0 58 58" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon mt-2 mb-3">
                                                            <path d="M47.732 29.0099C46.839 32.9399 44.319 36.3749 40.211 39.2789L42.43 45.1949C42.5434 45.4975 42.5818 45.823 42.542 46.1437C42.5021 46.4644 42.3851 46.7707 42.201 47.0363C42.0168 47.3018 41.7711 47.5189 41.4848 47.6688C41.1985 47.8186 40.8802 47.8969 40.557 47.8969H33.677C33.2773 47.8969 32.8868 47.7771 32.5558 47.5531C32.2248 47.329 31.9685 47.011 31.82 46.6399L30.38 43.0399L26.196 43.8779C26.0672 43.9036 25.9345 43.9037 25.8057 43.8782C25.6768 43.8527 25.5542 43.802 25.4449 43.7291C25.3356 43.6562 25.2418 43.5625 25.1687 43.4534C25.0956 43.3442 25.0447 43.2217 25.019 43.0929C24.9933 42.964 24.9931 42.8314 25.0187 42.7025C25.0442 42.5737 25.0948 42.4511 25.1677 42.3418C25.315 42.1211 25.5438 41.9678 25.804 41.9159L29.988 41.0799C30.4463 40.988 30.9222 41.0595 31.3332 41.282C31.7443 41.5045 32.0644 41.8639 32.238 42.2979L33.676 45.8969H40.556L38.337 39.9809C38.1817 39.5668 38.1681 39.1129 38.2981 38.6903C38.4282 38.2676 38.6948 37.9 39.056 37.6449C44.325 33.9209 46.606 29.4109 46.008 24.0289C44.754 14.6169 36.889 9.89686 22 9.89686H21.532L21.232 9.53686C18.16 5.85186 15.602 4.71386 13.447 5.79086C12.925 6.05286 12.81 6.23086 12.827 6.54886C12.847 6.92186 12.882 7.02186 13.502 8.57286C14.897 12.0579 14.718 14.5929 11.707 17.6039C9.257 20.0539 6.269 21.7079 2.764 22.5569C2.54612 22.6098 2.35235 22.7344 2.21379 22.9107C2.07524 23.0869 1.99994 23.3047 2 23.5289V31.8969C2 32.1621 2.10536 32.4164 2.29289 32.604C2.48043 32.7915 2.73478 32.8969 3 32.8969H14C14.2652 32.8969 14.5196 33.0022 14.7071 33.1898C14.8946 33.3773 15 33.6316 15 33.8969C15 34.1621 14.8946 34.4164 14.7071 34.604C14.5196 34.7915 14.2652 34.8969 14 34.8969H7.977C8.007 36.0579 8.263 36.8059 8.707 37.1899C9.105 37.5879 10.598 38.1299 13.034 38.6719C13.321 38.7356 13.5905 38.8618 13.8232 39.0415C14.0559 39.2213 14.2461 39.4501 14.3802 39.7118C14.5144 39.9734 14.5892 40.2614 14.5994 40.5553C14.6095 40.8491 14.5548 41.1416 14.439 41.4119L12.517 45.8969H19.219L20.029 42.6539C20.0934 42.3965 20.2575 42.1752 20.4851 42.0388C20.7127 41.9024 20.9851 41.8619 21.2425 41.9264C21.4999 41.9908 21.7211 42.1549 21.8576 42.3824C21.994 42.61 22.0344 42.8825 21.97 43.1399L21.16 46.3819C21.0518 46.8145 20.8022 47.1987 20.4507 47.4732C20.0992 47.7477 19.666 47.8968 19.22 47.8969H12.517C12.186 47.897 11.8601 47.8149 11.5685 47.6581C11.277 47.5012 11.029 47.2744 10.8467 46.9981C10.6644 46.7218 10.5536 46.4045 10.5241 46.0747C10.4947 45.745 10.5476 45.4131 10.678 45.1089L12.6 40.6239C9.78 39.9979 8.062 39.3739 7.35 38.6559C6.443 37.8799 6.011 36.6179 5.977 34.8969H3C2.20435 34.8969 1.44129 34.5808 0.878679 34.0182C0.31607 33.4556 0 32.6925 0 31.8969V23.5289C0.000166878 22.8561 0.226441 22.203 0.642477 21.6743C1.05851 21.1457 1.64016 20.7722 2.294 20.6139C5.444 19.8499 8.105 18.3779 10.293 16.1899C12.652 13.8309 12.771 12.1299 11.645 9.31586C10.886 7.41786 10.867 7.36286 10.83 6.65386C10.77 5.50686 11.347 4.60586 12.553 4.00286C15.643 2.45786 18.979 3.85886 22.464 7.89886C37.951 8.00186 46.594 13.2819 47.994 23.7869C48.094 24.6869 48.124 25.5669 48.082 26.4269L48.094 26.4499C48.578 27.4169 49.49 27.8969 51 27.8969C51.2652 27.8969 51.5196 28.0022 51.7071 28.1898C51.8946 28.3773 52 28.6316 52 28.8969C52 29.1621 51.8946 29.4164 51.7071 29.604C51.5196 29.7915 51.2652 29.8969 51 29.8969C49.691 29.8969 48.59 29.6009 47.732 29.0099ZM45.692 12.0789C45.6471 12.2023 45.5783 12.3157 45.4896 12.4126C45.4008 12.5094 45.2939 12.5878 45.1749 12.6434C45.0558 12.6989 44.927 12.7304 44.7958 12.7362C44.6645 12.7419 44.5334 12.7218 44.41 12.6769C44.2866 12.632 44.1732 12.5632 44.0763 12.4744C43.9795 12.3857 43.901 12.2788 43.8455 12.1597C43.79 12.0407 43.7584 11.9118 43.7527 11.7806C43.7469 11.6494 43.7671 11.5183 43.812 11.3949C44.1346 10.5293 44.2827 9.6084 44.2478 8.6853C44.2129 7.76221 43.9956 6.85515 43.6084 6.01644C43.2213 5.17772 42.672 4.42392 41.9921 3.79849C41.3123 3.17307 40.5154 2.68839 39.6474 2.37239C38.7794 2.05639 37.8574 1.91532 36.9346 1.95732C36.0118 1.99931 35.1064 2.22355 34.2707 2.61708C33.4349 3.01062 32.6853 3.56569 32.0651 4.25028C31.4449 4.93487 30.9664 5.73545 30.657 6.60586C30.6121 6.7293 30.5433 6.84269 30.4546 6.93955C30.3658 7.03641 30.2589 7.11484 30.1399 7.17037C30.0208 7.2259 29.892 7.25744 29.7608 7.26319C29.6295 7.26893 29.4984 7.24877 29.375 7.20386C29.2516 7.15895 29.1382 7.09016 29.0413 7.00143C28.9445 6.9127 28.866 6.80576 28.8105 6.68671C28.755 6.56767 28.7234 6.43885 28.7177 6.30762C28.7119 6.17638 28.7321 6.0453 28.777 5.92186C29.5935 3.67879 31.2676 1.85194 33.431 0.843178C35.5944 -0.16558 38.0699 -0.273607 40.313 0.542862C42.5561 1.35933 44.3829 3.03342 45.3917 5.19684C46.4004 7.36025 46.5085 9.83579 45.692 12.0789V12.0789ZM16 21.8969C15.4696 21.8969 14.9609 21.6861 14.5858 21.3111C14.2107 20.936 14 20.4273 14 19.8969C14 19.3664 14.2107 18.8577 14.5858 18.4826C14.9609 18.1076 15.4696 17.8969 16 17.8969C16.5304 17.8969 17.0391 18.1076 17.4142 18.4826C17.7893 18.8577 18 19.3664 18 19.8969C18 20.4273 17.7893 20.936 17.4142 21.3111C17.0391 21.6861 16.5304 21.8969 16 21.8969ZM0.5 49.8969H51.5C51.6326 49.8969 51.7598 49.9495 51.8536 50.0433C51.9473 50.1371 52 50.2643 52 50.3969V51.3969C52 51.5295 51.9473 51.6566 51.8536 51.7504C51.7598 51.8442 51.6326 51.8969 51.5 51.8969H0.5C0.367392 51.8969 0.240214 51.8442 0.146446 51.7504C0.052678 51.6566 0 51.5295 0 51.3969V50.3969C0 50.2643 0.052678 50.1371 0.146446 50.0433C0.240214 49.9495 0.367392 49.8969 0.5 49.8969Z" transform="translate(3 3.10303)" fill="#333333"></path>
                                                        </svg>

                                                        <span class="h6 mb-2">Claim With</span>
                                                    </div>
                                                </a>
                                            </div>
                                            <div class="col-6 col-md d-flex">
                                                <a href="" class="card text-center flex-fill hover-effect">
                                                    <div class="card-body d-flex flex-column align-items-center justify-content-center py-2">
                                                        <svg width="58" height="58" viewBox="0 0 58 58" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon mt-2 mb-3">
                                                            <path d="M41.61 25.961L27.593 11.944L25.653 13.884C27.238 19.027 25.996 24.854 21.926 28.925L21.216 29.635L14.872 23.251C12.512 25.611 8.713 25.611 6.37 23.268C5.24487 22.1428 4.61278 20.6167 4.61278 19.0255C4.61278 17.4343 5.24487 15.9082 6.37 14.783C6.377 14.776 5.733 14.112 4.44 12.791L-7.47681e-07 8.42499L0.713 7.71199C4.783 3.64199 10.61 2.39899 15.753 3.98499L17.683 2.05499C18.8707 0.865005 20.4471 0.142257 22.1238 0.0188824C23.8006 -0.104492 25.4657 0.379751 26.8148 1.38308C28.1639 2.3864 29.1068 3.84178 29.4711 5.48312C29.8355 7.12445 29.5969 8.84209 28.799 10.322L42.819 24.342C43.5167 23.7217 44.3742 23.3091 45.2943 23.151C46.2145 22.9929 47.1605 23.0956 48.0253 23.4474C48.89 23.7993 49.639 24.3862 50.1875 25.1417C50.7359 25.8973 51.0618 26.7913 51.1283 27.7225C51.1949 28.6537 50.9994 29.585 50.5639 30.4108C50.1285 31.2367 49.4705 31.9241 48.6646 32.3953C47.8586 32.8665 46.9368 33.1026 46.0035 33.0769C45.0703 33.0512 44.1628 32.7648 43.384 32.25L31.555 44.078H40.141C40.9366 44.078 41.6997 44.3941 42.2623 44.9567C42.8249 45.5193 43.141 46.2823 43.141 47.078V50.078H51.141C51.4062 50.078 51.6606 50.1833 51.8481 50.3709C52.0356 50.5584 52.141 50.8128 52.141 51.078C52.141 51.3432 52.0356 51.5976 51.8481 51.7851C51.6606 51.9726 51.4062 52.078 51.141 52.078H1.141C0.875784 52.078 0.621429 51.9726 0.433892 51.7851C0.246356 51.5976 0.141 51.3432 0.141 51.078C0.141 50.8128 0.246356 50.5584 0.433892 50.3709C0.621429 50.1833 0.875784 50.078 1.141 50.078H15.141V47.078C15.141 46.2823 15.4571 45.5193 16.0197 44.9567C16.5823 44.3941 17.3454 44.078 18.141 44.078H28.727L41.969 30.835C41.4275 30.0176 41.1394 29.0585 41.141 28.078C41.141 27.321 41.309 26.604 41.61 25.961ZM26.169 10.541C27.1068 9.60332 27.6337 8.33151 27.6338 7.00534C27.6339 5.67918 27.1072 4.4073 26.1695 3.46949C25.2318 2.53168 23.96 2.00478 22.6339 2.00468C21.3077 2.00459 20.0358 2.53132 19.098 3.46899L17.788 4.77899C19.284 5.49499 20.687 6.47199 21.926 7.71199C23.1316 8.91491 24.1231 10.3146 24.858 11.851L26.168 10.541H26.169ZM10.433 18.784L7.814 16.165L7.784 16.197C7.41393 16.5699 7.12094 17.012 6.92174 17.4981C6.72255 17.9842 6.62105 18.5048 6.62304 19.0302C6.62504 19.5555 6.73049 20.0753 6.93338 20.5599C7.13626 21.0445 7.43261 21.4844 7.8055 21.8545C8.17839 22.2246 8.62052 22.5176 9.10664 22.7167C9.59276 22.9159 10.1134 23.0174 10.6387 23.0154C11.1641 23.0135 11.6839 22.908 12.1685 22.7051C12.653 22.5022 13.0929 22.2059 13.463 21.833L10.433 18.784V18.784ZM27.848 41.785C27.6594 41.9671 27.4068 42.0679 27.1446 42.0657C26.8824 42.0634 26.6316 41.9582 26.4462 41.7728C26.2608 41.5874 26.1556 41.3366 26.1533 41.0744C26.151 40.8122 26.2518 40.5596 26.434 40.371L37.434 29.371C37.6226 29.1888 37.8752 29.088 38.1374 29.0903C38.3996 29.0926 38.6504 29.1978 38.8358 29.3832C39.0212 29.5686 39.1264 29.8194 39.1287 30.0816C39.131 30.3438 39.0302 30.5964 38.848 30.785L27.848 41.785ZM42.848 18.371C43.0302 18.5596 43.131 18.8122 43.1287 19.0744C43.1264 19.3366 43.0212 19.5874 42.8358 19.7728C42.6504 19.9582 42.3996 20.0634 42.1374 20.0657C41.8752 20.0679 41.6226 19.9671 41.434 19.785L32.434 10.785C32.2518 10.5964 32.151 10.3438 32.1533 10.0816C32.1556 9.81939 32.2608 9.56858 32.4462 9.38317C32.6316 9.19776 32.8824 9.09259 33.1446 9.09031C33.4068 9.08804 33.6594 9.18883 33.848 9.37099L42.848 18.371ZM41.141 50.078V47.078C41.141 46.8128 41.0356 46.5584 40.8481 46.3709C40.6606 46.1833 40.4062 46.078 40.141 46.078H18.141C17.8758 46.078 17.6214 46.1833 17.4339 46.3709C17.2464 46.5584 17.141 46.8128 17.141 47.078V50.078H41.141ZM46.141 31.078C46.535 31.078 46.9251 31.0004 47.289 30.8496C47.653 30.6989 47.9837 30.4779 48.2623 30.1993C48.5409 29.9207 48.7619 29.59 48.9126 29.226C49.0634 28.8621 49.141 28.472 49.141 28.078C49.141 27.684 49.0634 27.2939 48.9126 26.9299C48.7619 26.566 48.5409 26.2352 48.2623 25.9567C47.9837 25.6781 47.653 25.4571 47.289 25.3064C46.9251 25.1556 46.535 25.078 46.141 25.078C45.3453 25.078 44.5823 25.3941 44.0197 25.9567C43.4571 26.5193 43.141 27.2823 43.141 28.078C43.141 28.8736 43.4571 29.6367 44.0197 30.1993C44.5823 30.7619 45.3453 31.078 46.141 31.078V31.078ZM5.848 11.371L11.848 17.371L21.194 26.774C25.578 21.667 25.35 13.964 20.512 9.12599C15.675 4.28899 7.975 4.05999 2.868 8.43999L5.848 11.37V11.371Z" transform="translate(2.85889 2.92212)" fill="#333333"></path>
                                                        </svg>

                                                        <span class="h6 mb-2">Respondent</span>
                                                    </div>
                                                </a>
                                            </div>
                                        </div>

                                    </div>
                                </div>

                                <!--<div class="row">
                                    <div class="col">
                                        <div class="d-md-flex justify-content-center align-items-center">
                                            <span class="d-block mx-md-2">Also popular:</span>
                                            <ul class="list-unstyled d-flex flex-wrap mb-0">
                                                <li class="mr-2 mb-2 mb-md-0"><a href="#" class="btn btn-sm btn-light">Travel Protection</a></li>
                                                <li class="mr-2 mb-2 mb-md-0"><a href="#" class="btn btn-sm btn-light">Home Insurance</a></li>
                                                <li class="mr-2 mb-2 mb-md-0"><a href="#" class="btn btn-sm btn-light">Pet Insurance</a></li>
                                                <li class="mr-2 mb-2 mb-md-0"><a href="#" class="btn btn-sm btn-light">Natural Disaster Cover</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>-->
                            </div>
                        </section>
                        <hr class="my-4">
                        <section class="pt-4">
                            <div class="container">
                                <div class="row">
                                    <div class="col-lg-4 d-flex mb-3 mb-lg-0">
                                        <div class="row">

                                            <div class=" col-md-6 col-lg-12 mb-2 mb-md-0 align-items-end">
                                                <div class="list-group flex-fill menu">
                                                    <a data-menu-item="manage_claim"  class="list-group-item list-group-item-action d-flex justify-content-between align-items-center mb-lg-0">
                                                        <div data-menu-item="manage_claim" class="d-flex align-items-center">
                                                            <span data-menu-item="manage_claim" class="mb-0 text-primary py-1 font-weight-bold">Manage an existing claims&nbsp&nbsp&nbsp</span>
                                                        </div>
                                                        <i data-menu-item="manage_claim" class="material-icons d-block">keyboard_arrow_right</i>
                                                    </a>
                                                    <a data-menu-item="new_claim" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center mb-lg-0">
                                                        <div data-menu-item="new_claim" class="d-flex align-items-center">
                                                            <span data-menu-item="new_claim" class="mb-0 text-primary py-1 font-weight-bold">Lodge a new claim</span>
                                                        </div>
                                                        <i data-menu-item="new_claim" class="material-icons d-block">keyboard_arrow_right</i>
                                                    </a>
                                                    <a data-menu-item = "user_details" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center mb-lg-0">
                                                        <div data-menu-item = "user_details" class="d-flex align-items-center">
                                                            <span data-menu-item = "user_details" class="mb-0 text-primary py-1 font-weight-bold">Manage your details</span>
                                                        </div>
                                                        <i data-menu-item = "user_details" class="material-icons d-block">keyboard_arrow_right</i>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>


                                    <div id="new_claim" class="menu-tabs col-lg-8 ">

                                        <br />
                                        <a class="btn btn-primary" href="{{ url('customer/webform') }}" id="lodge_claim">Click here to lodge a claim</a>

                                        <!--<ul class="nav nav-tabs" id="myTab" role="tablist">
                                            <li class="nav-item">
                                                <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Your Details</a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Your Address</a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Password</a>
                                            </li>
                                        </ul>
                                        <div class="tab-content" id="myTabContent">
                                            <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">some</div>
                                            <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
                                            <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
                                        </div>-->
                                    </div>
                                    <div id="manage_claim" class="menu-tabs col-lg-8 ">
                                        <div class="card card-body bg-light">
                                            <p ><strong>Manage your claims</strong></p>
                                            <hr class="my-3">
                                            <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                                                <div class="row">
                                                    @foreach($customer->claims as $claim)
                                                        <div class="card mb-3 ml-3" style="width: 18rem;">
                                                            <div class="card-body">
                                                                <h5 class="card-title">Claim Staus: <span class="float-right badge badge-success">{{$claim->status}}</span></h5>
                                                                <h6 class="card-subtitle mb-2 text-muted">Message: <span class="float-right badge badge-danger">2 new</span></h6>
                                                                <div class="border-top my-3"></div>
                                                                <a href="{{ url ('/claim/'.$claim->id) }}" class="btn btn-outline-primary btn-sm">View Case</a>
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div  id="user_details" class="menu-tabs col-lg-8 ">
                                        <ul class="nav nav-tabs" id="myTab" role="tablist">
                                            <li class="nav-item">
                                                <a class="nav-link active"
                                                   id="user-personal-tab"
                                                   data-toggle="tab"
                                                   href="#user-personal"
                                                   role="tab"
                                                   aria-controls="user-personal"
                                                   aria-selected="true">
                                                    Your Details
                                                </a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link"
                                                   id="user-address-tab"
                                                   data-toggle="tab"
                                                   href="#user-address"
                                                   role="tab"
                                                   aria-controls="user-address"
                                                   aria-selected="false">
                                                    Your Address
                                                </a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link"
                                                   id="user-passsword-tab"
                                                   data-toggle="tab"
                                                   href="#user-passsword"
                                                   role="tab"
                                                   aria-controls="user-passsword"
                                                   aria-selected="false">
                                                    Update Password</a>
                                            </li>
                                        </ul>
                                        <div class="tab-content" id="myTabContent">
                                            <div class="tab-pane fade show active" id="user-personal" role="tabpanel" aria-labelledby="user-personal-tab">
                                                <div class="card card-body bg-light">
                                                    <form class="needs-validation" id="update_user_details" novalidate>
                                                        <div class="form-row">
                                                            <div class="form-group col-md-6">
                                                                <label for="first_name">First Name</label>
                                                                <input value="{{ Auth::user()->first_name }}"
                                                                       required
                                                                       type="text"
                                                                       class="form-control"
                                                                       id="first_name"
                                                                       placeholder="First Name">
                                                                <div class="invalid-feedback">
                                                                    First Name is required
                                                                </div>
                                                            </div>
                                                            <div class="form-group col-md-6">
                                                                <label for="last_name">Last Name</label>
                                                                <input value = "{{ Auth::user()->last_name}}"
                                                                       required
                                                                       type="text"
                                                                       class="form-control"
                                                                       id="last_name"
                                                                       placeholder="Last Name">
                                                                <div class="invalid-feedback">
                                                                    Last Name is required
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="form-row">
                                                            <div class="form-group col-md-6">
                                                                <label for="email">Email</label>
                                                                <input value="{{Auth::user()->email}}"
                                                                       required
                                                                       type="email"
                                                                       class="form-control"
                                                                       id="email"
                                                                       placeholder="Email">
                                                            </div>
                                                        </div>

                                                        <div class="form-row">
                                                            <div class="form-group col-md-6">
                                                                <label for="home_phone">Home Phone</label>
                                                                <input value="{{Auth::user()->home_phone}}"
                                                                       type="tel"
                                                                       class="form-control"
                                                                       id="home_phone"
                                                                       placeholder="Home Phone">
                                                            </div>
                                                            <div class="form-group col-md-6">
                                                                <label for="mobile_phone">Mobile Phone</label>
                                                                <input type="tel"
                                                                       value="{{Auth::user()->mobile_phone}}"
                                                                       name="user[mobile_phone]"
                                                                       autocomplete="new-password"
                                                                       class="form-control"
                                                                       id="mobile_phone"
                                                                       placeholder="Mobile Phone">
                                                            </div>
                                                        </div>
                                                        <div class="border-top my-3"></div>
                                                        <div class="alert alert-success">
                                                        </div>
                                                        <div class="alert alert-danger">
                                                        </div>
                                                        <button type="submit" id="update_user_details" class="btn btn-outline-success btn-sm">Update</button>
                                                    </form>
                                                </div> <!-- end jumbotron -->

                                            </div>
                                            <div class="tab-pane fade" id="user-address" role="tabpanel" aria-labelledby="user-address-tab">
                                                <div class="card card-body bg-light">
                                                    <form class="needs-validation" id="update_user_address" novalidate>
                                                        <div class="form-row">
                                                            <div class="form-group col-md-6">
                                                                <label for="address_first_line">First Line Of Address</label>
                                                                <input type="text"
                                                                       value="{{Auth::user()->first_line_of_address}}"
                                                                       class="form-control"
                                                                       id="address_first_line"
                                                                       placeholder="First Line of Address">
                                                            </div>
                                                            <div class="form-group col-md-6">
                                                                <label for="address_second_line">Second Line Of Address</label>
                                                                <input type="text"
                                                                       value="{{Auth::user()->second_line_of_address}}"
                                                                       class="form-control"
                                                                       id="address_second_line"
                                                                       placeholder="Second Line of Address">
                                                            </div>
                                                        </div>
                                                        <div class="form-row">
                                                            <div class="form-group col-md-4">
                                                                <label for="city">City/Town</label>
                                                                <input type="text"
                                                                       value="{{Auth::user()->city}}"
                                                                       class="form-control"
                                                                       id="city">
                                                            </div>
                                                            <div class="form-group col-md-4">
                                                                <label for="country">Country</label>
                                                                <select class="form-control"
                                                                        id="country"
                                                                >
                                                                    @foreach ( $countries as $country)
                                                                        <option {{ $country->name == Auth::user()->country ? "selected" : "" }}>
                                                                            {{ $country->name }}
                                                                        </option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                            <div class="form-group col-md-4">
                                                                <label for="post_code">Post Code</label>
                                                                <div class="input-group-prepend">
                                                                    <input type="text"
                                                                           value="{{Auth::user()->post_code}}"
                                                                           class="form-control"
                                                                           id="post_code">
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="border-top my-3"></div>
                                                        <button type="submit" class="btn btn-outline-success btn-sm">Update</button>
                                                    </form>
                                                </div> <!-- end jumbotron -->
                                            </div>
                                            <div class="tab-pane fade" id="user-passsword" role="tabpanel" aria-labelledby="user-passsword-tab">
                                                <div class="card card-body bg-light">
                                                    <form class="needs-validation" id="update_user_password" novalidate>
                                                        <div class="form-row">
                                                            <div class="form-group col-md-6">
                                                                <label for="password">New Password</label>
                                                                <input value = ""
                                                                       type="password"
                                                                       autocomplete="new-password"
                                                                       pattern='^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$'
                                                                       class="form-control"
                                                                       id="password"
                                                                       required
                                                                       placeholder="Password"
                                                                >
                                                                <span class="invalid-feedback" role="alert">
                                                                        The password must contain minimum eight characters, at least one uppercase letter,
                                                                        one lowercase letter, one number and one special character.
                                                                    </span>
                                                                @error('password')
                                                                <div class="invalid-feedback" role="alert">
                                                                    <strong>{{ $message }}</strong>
                                                                </div>
                                                                @enderror
                                                            </div>
                                                            <div class="form-group col-md-6">
                                                                <label for="password_confirmation">Confirm Password</label>
                                                                <input value = ""
                                                                       type="password"
                                                                       autocomplete="new-password"
                                                                       class="form-control"
                                                                       required
                                                                       id="password_confirmation"
                                                                       placeholder="Password">
                                                                <span class="invalid-feedback" role="alert">
                                                                        The password don't match.
                                                                    </span>
                                                            </div>
                                                        </div>
                                                        <div class="border-top my-3"></div>
                                                        <button type="submit" class="btn btn-outline-primary btn-sm">Update</button>
                                                    </form>
                                                </div> <!-- end jumbotron -->
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </section>
                    </div>
                </div>
            </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 src="{{ asset ("js/formplugins/summernote/summernote.js") }}"></script>
    <script src="{{ asset("js/notifications/sweetalert2/sweetalert2.bundle.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
                var forms = document.getElementsByClassName('needs-validation');
                // Loop over them and prevent submission
                var validation = Array.prototype.filter.call(forms, function (form) {
                    form.addEventListener('submit', function (event) {
                        if (form.checkValidity() === false) {
                            event.preventDefault();
                            event.stopPropagation();
                        } else {
                            event.preventDefault();
                            var data = {
                                _token: "{{ csrf_token() }}",
                                id: "{{ Auth::user()->id }}"
                            };
                            var url;
                            if (event.target.id === "update_user_details") {

                                data.first_name = $('#first_name').val();
                                data.last_name = $('#last_name').val();
                                data.email = $('#email').val();
                                data.home_phone = $('#home_phone').val();
                                data.mobile_phone = $('#mobile_phone').val()
                                url = "update-details";
                            } else if (event.target.id === "update_user_address") {

                                data.first_line_of_address = $('#address_first_line').val();
                                data.second_line_of_address = $('#address_second_line').val();
                                data.city = $('#city').val();
                                data.country = $('#country').val();
                                data.post_code = $('#post_code').val();
                                url = "update-address";
                            } else if (event.target.id === "update_user_password") {
                                data.password = $('#password').val();
                                data.password_confirmation = $('#password_confirmation').val();
                                url = "update-password";
                            }

                            var request = $.ajax({
                                url: url,
                                type: "POST",
                                data: data,
                                dataType: "json"
                            });

                            request.done(function (msg) {
                                form.classList.remove('was-validated');
                                if (msg.success) {
                                    $(".alert-success").html(msg.success).delay(500).slideDown(300).delay(5000).slideUp(300);
                                } else if (msg.error) {
                                    $(".alert-danger").html("").delay(500).slideDown(300).delay(5000).slideUp(300);
                                }
                            });

                            request.fail(function (jqXHR, textStatus) {
                                form.classList.remove('was-validated');
                                $(".alert-danger").html("An error occurred, your details weren't updated.")
                                    .delay(500).slideDown(300).delay(5000).slideUp(300);
                            });
                        }
                        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 = '';

                // Step 1
                let el_step1_value = el_step1.getElementsByTagName('select')[0].value;
                if (el_step1_value === '1') {
                    if (el_step2.classList.contains('d-none')) {
                        el_step2.classList.remove('d-none');
                    }
                } else {
                    if (!el_step2.classList.contains('d-none')) {
                        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');
                    }
                }

                // Step 2
                let el_step2_value = el_step2.getElementsByTagName('select')[0].value;
                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_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_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');
                    }
                }

                // Step 4
                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');
                    }
                }

                // Step 5
                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');
                    }
                }

                // Step 6
                let el_step6_value = el_step6.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');
                    }
                }

                // Event Listeners
                el_step1.addEventListener('change', function (event) {

                    let el_step1_value = el_step1.getElementsByTagName('select')[0].value;
                    if (el_step1_value === '1') {
                        // Show next step
                        if (el_step2.classList.contains('d-none')) {
                            el_step2.classList.remove('d-none');
                        }
                    } else {
                        if (!el_step2.classList.contains('d-none')) {
                            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');
                        }
                    }
                });

                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 scheme_id = document.getElementById('scheme_id');
                let retailer_id = document.getElementById('retailer_id');
                let location_id = document.getElementById('location_id');
                let category_id = document.getElementById('category_id');
                let sub_category_id = document.getElementById('sub_category_id');
                let scheme_value = scheme_id.value;
                let retailer_value = retailer_id.value;
                let location_value = location_id.value;
                let category_value = category_id.value;

                /*if (scheme_value && retailer_value && !location_value) {
                    sendRequest("POST", "location", "retailer_id="+retailer_value+ "&_token={{csrf_token()}}", location_id);
                    sendRequest("POST", "category", "retailer_id="+retailer_value+ "&_token={{csrf_token()}}", category_id);
                } else if(scheme_value && !retailer_value) {
                    sendRequest("POST", "retailer", "scheme_id=" + scheme_value + "&_token={{csrf_token()}}", retailer_id);
                }*/
                if(scheme_value) {
                    sendRequest("POST", "retailer", "scheme_id=" + scheme_value + "&_token={{csrf_token()}}", retailer_id, {{ $repDraft->retailer_id ?? ''}});
                }

                if(retailer_value) {
                    sendRequest("POST", "location", "retailer_id="+retailer_value+ "&_token={{csrf_token()}}", location_id, {{ $repDraft->claim_issue->location_id ?? ''}});
                    sendRequest("POST", "category", "retailer_id="+retailer_value+ "&_token={{csrf_token()}}", category_id, {{ $repDraft->claim_issue->category_id ?? ''}});
                }

                if(category_value) {
                    sendRequest("POST", "subcategory", "category_id="+category_value+ "&_token={{csrf_token()}}", sub_category_id, {{  $repDraft->claim_issue->sub_category_id ?? '' }});
                }

                scheme_id.addEventListener('change', function(e){
                    sendRequest("POST", "retailer", "scheme_id="+this.value+ "&_token={{csrf_token()}}", retailer_id);
                });

                retailer_id.addEventListener('change', function(e){
                    sendRequest("POST", "location", "retailer_id="+this.value+ "&_token={{csrf_token()}}", location_id);
                    sendRequest("POST", "category", "retailer_id="+this.value+ "&_token={{csrf_token()}}", category_id);
                });

                category_id.addEventListener('change', function(e) {
                    sendRequest("POST", "subcategory", "category_id="+this.value+ "&_token={{csrf_token()}}", sub_category_id);
                });

                function sendRequest(requestType, requestURL, requestParams, element, dbValue=null)
                {
                    let xhttp = new XMLHttpRequest();

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

                            }

                            element.innerHTML = options;
                        } else {
                            return ['There was some error'];
                        }
                    };

                    xhttp.open(requestType, requestURL, true);
                    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                    xhttp.send(requestParams);
                }

            }, false);
        })();

        $(document).ready(function() {

            $(".alert-success").hide();
            $(".alert-danger").hide();
            $(".menu-tabs").hide();
            $("#manage_claim").show();
            $('.menu').click( function ( event ) {
                item = $(event.target).attr('data-menu-item');
                $(".menu-tabs").hide();
                $(`#${item}`).show();
            });

            let claimTable = $('#dt_claims').DataTable( {
                //dom: "Bfrtip",
            });

            $('#create-new-case-btn').on('click', function(e){
                e.preventDefault();

                $('#older-cases, #new-case').toggle();
            });
        } );

    </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_id : {
                        validate_select : true
                    },
                    category_id : {
                        validate_select : true
                    },
                    sub_category_id : {
                        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());
                        element.focus();
                    } else {
                        error.insertAfter(element);
                        element.focus();
                    }
                }

            });

            // 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:{{ $repDraft ? $repDraft->stage : 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;
                }
                if (stepNumber === 6 && 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);
                                    $('#claim_id').val(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,
                                'claim_id': $('#claim_id').val()
                            },
                            async: false,
                            success: function (response) {
                                //var data = JSON.parse(response);
                                if (response.status === 400) {
                                    proceed = false;
                                    var validator = $("#webform").validate();
                                    validator.showErrors(response.errors);
                                }

                            },
                        });
                        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,
                                'claim_id': $('#claim_id').val()
                            },
                            async: false,
                            success: function (response) {
                                //var data = JSON.parse(response);
                                if (response.status === 400) {
                                    proceed = false;
                                    var validator = $("#webform").validate();
                                    validator.showErrors(response.errors);
                                }

                            },
                        });
                        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,
                                'claim_id': $('#claim_id').val()
                            },
                            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 {

                                    claim_id = $('#claim_id').val();

                                }

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

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

                        $.ajax({
                            method: 'POST',
                            url: 'webform',
                            data: {
                                stage: '5',
                                _token: '{{csrf_token()}}',
                                data: fields,
                                'claim_id': $('#claim_id').val()
                            },
                            async: false,
                            success: function (response) {
                                //var data = JSON.parse(response);
                                if (response.status === 400) {
                                    proceed = false;
                                    var validator = $("#webform").validate();
                                    validator.showErrors(response.errors);
                                }

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

                    }


                }


            });

            claim_id = claim_id ? claim_id : $('#claim_id').val();

            if (claim_id > 0) {
                evidenceTable = $('#dt-evidence').DataTable({
                    ajax: "jsonEvidenceFiles/" + claim_id,
                    async: false,
                    "bDestroy": true,
                    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;
                                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;
                            }
                        },
                    ],
                });
            }

            // 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);

                }

            });


            // Others

            $('.view-claim').on('click', function(e) {
                e.preventDefault();
                $('#spinner-case-overview').removeClass('d-none');
                $('.case-overview').addClass('d-none');
                let claim_id = $(this).data('claim_id');

                $.ajax({
                    method : 'POST',
                    url : 'claim/'+claim_id,
                    data : {_token: '{{csrf_token()}}'},
                    async:true,
                    success : function(response) {
                        setTimeout(function () {
                            $('#spinner-case-overview').addClass('d-none');
                            $('.case-detail').removeClass('d-none');
                            // $('#claim-back-button').removeClass('d-none');
                        }, 1000);
                        let claim = response.data;

                        let overview = $('#tab-overview');
                        let events = $('#tab-events');
                        let remedies = $('#tab-remedies');
                        let files = $('#tab-files');
                        let finalComment = $('#tab-final-comment');
                        let overviewDiv;
                        let eventDiv;
                        let remedyDiv;
                        let fileDiv;
                        let finalCommentDiv;
                        let evidenceTable2;


                        // displaying overview section

                        overview.html('');
                        overviewDiv = '<ul class="notification">';
                        for (const prop in claim.claim) {
                            value = claim.claim[prop];
                            overviewDiv += '<li>';
                            overviewDiv += '<a href="javascript:void(0);" class="d-flex align-items-center py-2 px-0">' +
                                '<span class="d-flex flex-column flex-1">' +
                                `<span class="name">${prop}</span>` +
                                `<span class="msg-a fs-sm">${value}</span>` +
                                '</span>' +
                                '</a>';
                            overviewDiv += '</li>';
                        }
                        overviewDiv += '</ul>';

                        events.html('');
                        eventDiv = '<table class="table table-bordered table-hover table-striped w-100">';
                        eventDiv += '<thead><tr><th>Date</th><th>Description</th></tr></thead>';
                        claim.events.forEach(function (item, index) {
                            eventDiv += '<tbody>' +
                                '<tr>' +
                                `<td>${item.occured_at}</td>` +
                                `<td>${item.description}</td>` +
                                '</tr>' +
                                '</tbody>';
                        });
                        eventDiv += '</table>';

                        remedies.html('');
                        remedyDiv = '<table class="table table-bordered table-hover table-striped w-100">';
                        remedyDiv += '<thead><tr><th>Name</th><th>Cost</th></tr></thead>';
                        claim.remedies.forEach(function (item, index) {
                            remedyDiv += '<tbody>' +
                                '<tr>' +
                                `<td>${item.name}</td>` +
                                `<td>${item.cost}</td>` +
                                '</tr>' +
                                '</tbody>';
                        });
                        remedyDiv += '</table>';

                        //console.log(claim.files);
                        files.html('');
                        fileDiv = '<div class="panel-tag d-none" id="response-msg"></div>';
                        if(claim.claim_status == 'Waiting File Submission') {
                            fileDiv +=
                                '           <div class="dropzone" id="s_dropzone">\n' +
                                '               <div class="dz-message needsclick">\n' +
                                '                   <i class="fal fa-cloud-upload text-muted mb-3"></i> <br>\n' +
                                '                       <span class="text-uppercase">Drop files here or click to upload.</span>\n' +
                                '                        <br>\n' +
                                '                       <span class="fs-sm text-muted">This is just a demo dropzone. Selected files are <strong>not</strong> actually uploaded.</span>\n' +
                                '               </div>\n' +
                                '           </div><br>';
                        }

                        fileDiv += '<table class="table table-bordered table-hover table-striped w-100" id="dt-evidence-detail">';
                        fileDiv += '<thead><tr><th>Name</th><th>Uploaded At</th><th>Action</th></tr></thead><tbody></tbody>';

                        /*claim.files.forEach(function (item, index) {
                            fileDiv += '<tbody>' +
                                '<tr>' +
                                `<td>${item.name}</td>` +
                                `<td>${item.created_at}</td>` +
                                '</tr>' +
                                '</tbody>';
                        });*/

                        fileDiv += '</table>';
                        if(claim.claim_status == 'Waiting File Submission') {
                            fileDiv += '<div class="row mt-5">' +
                                '           <div class="col-6 custom-control custom-checkbox">\n' +
                                '               <input type="checkbox" class="custom-control-input" checked="">\n' +
                                '               <label class="custom-control-label" for="defaultChecked">I can confirm I have uploaded all files</label>\n' +
                                '           </div>' +
                                '           <div class="col-6" style="text-align: right;">' +
                                '               <button class="btn btn-primary pull-right" id="files-submitted">All Files Uploaded</button>' +
                                '           </div> ' +
                                '       </div>';
                        }


                        let finalCommentMsg;
                        let canComment = false;

                        if (claim.final_comment['customer_comment_ind'] == 1) {
                            if (claim.final_comment['customer_comment_final_ind'] === 1) {
                                finalCommentMsg = 'You cannot add comments any more';
                            } else {
                                canComment = true;
                                finalCommentMsg = 'Please add your final comments';
                            }
                        } else {
                            finalCommentMsg = 'This section is not open yet';
                        }

                        finalComment.html('');
                        finalCommentDiv = `<div class="panel-tag"><p>${finalCommentMsg}</p></div>`;

                        if (canComment === true) {
                            finalCommentDiv += '<ul class="notification">';
                            finalCommentDiv += '<li>';
                            finalCommentDiv += '<a href="#" class="d-flex align-items-center py-2 px-0">';
                            finalCommentDiv += '<span class="d-flex flex-column flex-1">';
                            finalCommentDiv+='<span class="name">Expiry Date</span>'+
                                `<span class="msg-a fs-sm">${claim.final_comment['customer_comment_expiry_date']}</span>`;
                            finalCommentDiv += '</span>';
                            finalCommentDiv += '</a>';
                            finalCommentDiv += '</li>';

                            finalCommentDiv += '<li>';
                            finalCommentDiv += '<a href="#" class="d-flex align-items-center py-2 px-0">';
                            finalCommentDiv += '<span class="d-flex flex-column flex-1">';
                            finalCommentDiv+='<span class="name">Is Complainant Final Comment</span>'+
                                '<span class="msg-a fs-sm">'+
                                `<span class='badge badge-${claim.final_comment['customer_comment_final_ind'] ? "success" : "danger"}'>`+
                                `${claim.final_comment['customer_comment_final_ind'] ? "Yes" : "No"}</span>`+
                                '</span>';
                            finalCommentDiv += '</span>';
                            finalCommentDiv += '</a>';
                            finalCommentDiv += '</li>';

                            finalCommentDiv += '<li>';
                            finalCommentDiv += '<a href="#" class="d-flex align-items-center py-2 px-0">';
                            finalCommentDiv += '<span class="d-flex flex-column flex-1">';
                            finalCommentDiv+='<span class="name">Complainant final comments </span>';
                            finalCommentDiv += '</span>';
                            finalCommentDiv += '</a>';
                            finalCommentDiv += '<div class="panel-content">';
                            finalCommentDiv += `<textarea class="js-summernote" id="customer-final-comments-content">${claim.final_comment['customer_comment'] !== null ? claim.final_comment['customer_comment'] : ''}</textarea>`;
                            finalCommentDiv += '</div>';
                            finalCommentDiv += '<div class="mt-3">';
                            if(!claim.final_comment['customer_comment_final_ind']) {
                                finalCommentDiv +='<div id="customer-final-comments-save-buttons">';
                                finalCommentDiv += `<button value="${claim.final_comment['id']}" type="button" id="save-customer-final-comment" class="btn btn-sm btn-success waves-effect waves-themed">`;
                                finalCommentDiv += '<span class="fal fa-download mr-1"></span>' +
                                    'Save';
                                finalCommentDiv += '</button>';
                                finalCommentDiv += `<button value="${claim.final_comment['id']}"` +
                                    'id="mark-customer-final-comment-as-final"' +
                                    'type="button"' +
                                    'class="float-right btn btn-sm btn-warning waves-effect waves-themed">';
                                finalCommentDiv +='<span class="fal fa-exclamation-triangle mr-1"></span>' +
                                    'Mark final comment as final.';
                                finalCommentDiv += '</button>';
                                finalCommentDiv +='</div>';
                            }
                            finalCommentDiv += '</div>';
                            finalCommentDiv += '</li>';
                            finalCommentDiv += '</ul>';
                        }

                        overview.append(overviewDiv);
                        events.append(eventDiv);
                        remedies.append(remedyDiv);
                        files.append(fileDiv);
                        finalComment.append(finalCommentDiv);


                        // Respondent
                        let respondent = $('#v-pills-respondent');
                        let respondentDiv='';
                        let respondentMsg;
                        let respondentCommentMsg;
                        let respondentHasComment=false;

                        // Logic
                        if(claim.defence['final_ind'] !== 1) {
                            respondentMsg = 'Respondent has not provided defence yet';
                        }

                        if (claim.defence_comment['respondent_comment_ind'] === 1)
                        {
                            if (claim.defence_comment['respondent_comment_final_ind'] === 1) {
                                respondentHasComment=true;
                                respondentCommentMsg = 'Please review below';
                            } else {
                                //canComment = true;
                                respondentCommentMsg = 'Respondent is currently in the process of adding final comments';
                            }
                        } else {
                            respondentCommentMsg = 'This section is not open yet for respondent';
                        }

                        // Respondent content
                        respondentDiv += '<div class="accordion accordion-outline" id="accordion-3">';
                        respondentDiv += '<div class="card">';

                        // Defence
                        respondentDiv += '<div class="card-header">';
                        respondentDiv += '<a href="javascript:void(0);" class="card-title collapsed" data-toggle="collapse" data-target="#accordion-3a" aria-expanded="false">';
                        respondentDiv += '<i class="fal fa-file-medical-alt width-2 fs-xl"></i>';
                        respondentDiv += 'Respondent Defence';
                        respondentDiv += '<span class="ml-auto">';
                        respondentDiv += '<span class="collapsed-reveal"><i class="fal fa-minus fs-xl"></i></span>';
                        respondentDiv += '<span class="collapsed-hidden"><i class="fal fa-plus fs-xl"></i></span>';
                        respondentDiv += '</span>';
                        respondentDiv += '</a>';
                        respondentDiv += '</div>';

                        respondentDiv += '<div id="accordion-3a" class="collapse" data-parent="#accordion-3" style="">';
                        respondentDiv += '<div class="card-body">';
                        if(claim.defence['final_ind'] === 1) {
                            respondentDiv += claim.defence['content'];
                        } else {
                            respondentDiv += `<div class="panel-tag"><p>${respondentMsg}</p></div>`;
                        }
                        respondentDiv += '</div>';
                        respondentDiv += '</div>';
                        // End Defence
                        respondentDiv += '</div>';

                        respondentDiv += '<div class="card">';
                        respondentDiv += '<div class="card-header">';
                        respondentDiv += '<a href="javascript:void(0);" class="card-title collapsed" data-toggle="collapse" data-target="#accordion-3b" aria-expanded="false">';
                        respondentDiv += '<i class="fal fa-file-medical-alt width-2 fs-xl"></i>';
                        respondentDiv += 'Respondent Final Comments';
                        respondentDiv += '<span class="ml-auto">';
                        respondentDiv += '<span class="collapsed-reveal"><i class="fal fa-minus fs-xl"></i></span>';
                        respondentDiv += '<span class="collapsed-hidden"><i class="fal fa-plus fs-xl"></i></span>';
                        respondentDiv += '</span>';
                        respondentDiv += '</a>';
                        respondentDiv += '</div>';

                        respondentDiv += '<div id="accordion-3b" class="collapse" data-parent="#accordion-3" style="">';
                        respondentDiv += '<div class="card-body">';
                        respondentDiv += `<div class="panel-tag"><p>${respondentCommentMsg}</p></div>`;
                        if(respondentHasComment === true)
                        {
                            respondentDiv += claim.defence_comment['respondent_comment'];
                        }
                        respondentDiv += '</div>';
                        respondentDiv += '</div>';

                        respondentDiv += '</div>';
                        respondentDiv += '</div>';
                        // End Respondent content


                        respondent.html('<div class="panel-tag"><h3>Respondent</h3></div>');
                        respondent.append(respondentDiv);

                        // Decision
                        let decision = $('#v-pills-arbitrator');
                        let decisionDiv;
                        let decisionMessage;
                        let decisionIsFinal;

                        if(claim.decision['final_ind'] === 1) {
                            decisionMessage = claim.decision['content'];
                        } else {
                            decisionMessage = 'No decision published yet, please check back later';
                        }

                        decisionDiv = `<div class="panel-tag"><p>${decisionMessage}</p></div>`;
                        decision.html('<div class="panel-tag"><h3>Arbitrator</h3></div>');
                        decision.append(decisionDiv);

                        // Messages
                        //let messages = $('#v-pills-messages');
                        let messagesDiv='';
                        displayReceivedMessages(claim.messages, 'list', );

                        function displayReceivedMessages(messageArray, messageType='list', messageContainer)
                        {
                            $(messageContainer).html('');
                            let messages = $('#v-pills-messages');
                            let messageDiv='';

                            if (messageType == 'list') {
                                messageDiv += '' +
                                    '<div class="flex-grow-0">\n' +
                                    '    <div class="d-flex align-items-center pl-2 pr-3 py-3 pl-sm-3 pr-sm-4 py-sm-4 px-lg-5 py-lg-4  border-faded border-top-0 border-left-0 border-right-0 flex-shrink-0">\n' +
                                    '        <div class="btn-group">\n' +
                                    '            <button type="button" class="btn btn-primary dropdown-toggle bg-trans-gradient waves-effect waves-themed" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">\n' +
                                    '                           Inbox\n' +
                                    '                           </button>\n' +
                                    '            <div class="dropdown-menu dropdown-menu-animated" x-placement="bottom-start" style="position: absolute; top: 37px; left: 0px; will-change: top, left;">\n' +
                                    '                <button class="dropdown-item sent-items" type="button" >Sent</button>\n' +
                                    '                <button class="dropdown-item" type="button" id="compose-message">Compose</button>\n' +
                                    '            </div>\n' +
                                    '        </div>\n' +
                                    '    </div>\n' +
                                    '</div>\n' +
                                    '\n' +
                                    '<div class="flex-wrap align-items-center flex-grow-1 position-relative bg-gray-50" style="height:300px;">\n' +
                                    '    <div class="position-absolute pos-top pos-bottom w-100 custom-scroll">\n' +
                                    '        <div class="d-flex h-100 flex-column">\n' +
                                    '            <ul id="js-emails" class="notification notification-layout-2">\n' +
                                    '\n';
                                for (const prop in messageArray) {
                                    let messageData = JSON.parse(messageArray[prop]['data']);

                                    if (messageData.sender != claim.claim['customer_id']) {
                                        messageDiv += '                 <li class="unread">\n' +
                                            '                               <div class="d-flex align-items-center px-3 px-sm-4 px-lg-5 py-1 py-lg-0 height-4 height-mobile-auto">\n' +
                                            '                                    <div class="d-flex flex-row flex-wrap flex-1 align-items-stretch align-self-stretch order-2 order-lg-3">\n' +
                                            '                                        <div class="row w-100">\n' +
                                            `                                            <a href="#" class="name d-flex width-sm align-items-center pt-1 pb-0 py-lg-1 col-12 col-lg-auto open-message" data-id="${messageArray[prop]['id']}">${messageData.sender_name}</a>\n` +
                                            `                                            <a href="#" class="name d-flex align-items-center pt-0 pb-1 py-lg-1 flex-1 col-12 col-lg-auto open-message">${messageData.subject}</a>\n` +
                                            '                                        </div>\n' +
                                            '                                    </div>\n' +
                                            '\n' +
                                            // Time Message sent
                                            '                                    <div class="fs-sm text-muted ml-auto hide-on-hover-parent order-4 position-on-mobile-absolute pos-top pos-right mt-2 mr-3 mr-sm-4 mt-lg-0 mr-lg-0">\n' +
                                            '                                    </div>' +
                                            '                                </div>\n' +
                                            '                           </li>\n';
                                    }
                                }

                                messageDiv += '            </ul>\n' +
                                    '        </div>\n' +
                                    '    </div>\n' +
                                    '</div>';
                            } else if(messageType == 'single') {
                                // Single
                                let messageData = JSON.parse(messageArray[0]['data']);
                                messageDiv += '<div class="flex-grow-0">\n' +
                                    '    <!-- inbox button shortcut -->\n' +
                                    '    <div class="d-flex flex-wrap align-items-center pl-2 pr-3 py-2 px-sm-4 pr-lg-5 pl-lg-0 border-faded border-top-0 border-left-0 border-right-0">\n' +
                                    '        <div class="flex-1 d-flex align-items-center">\n' +
                                    '            <a href="javascript:void(0);" class="btn btn-icon rounded-circle mr-2 mr-lg-3 waves-effect waves-themed message-list">\n' +
                                    '                <i class="fas fa-arrow-left fs-lg"></i>\n' +
                                    '            </a>\n' +
                                    '        </div>\n' +
                                    '        <div class="text-muted mr-1 mr-lg-3 ml-auto">\n' +
                                    '            <span class="hidden-lg-down"> 1 - 50 of 135 </span>\n' +
                                    '            <div class="btn-group hidden-lg-up" role="group">\n' +
                                    '                <button type="button" class="btn btn-default waves-effect waves-themed">Reply</button>\n' +
                                    '                <div class="btn-group" role="group">\n' +
                                    '                    <button id="dropdown-reply" type="button" class="btn btn-default dropdown-toggle px-2 js-waves-off" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>\n' +
                                    '                    <div class="dropdown-menu p-0" aria-labelledby="dropdown-reply">\n' +
                                    '                        <a class="dropdown-item" href="#">Reply to all</a>\n' +
                                    '                        <a class="dropdown-item" href="#">Forward</a>\n' +
                                    '                        <div class="dropdown-divider m-0"></div>\n' +
                                    '                        <a class="dropdown-item" href="#">\n' +
                                    '                            Move to...</a>\n' +
                                    '                    </div>\n' +
                                    '                </div>\n' +
                                    '            </div>\n' +
                                    '        </div>\n' +
                                    '        <div class="d-flex flex-wrap hidden-lg-down">\n' +
                                    '            <button class="btn btn-icon rounded-circle waves-effect waves-themed"><i class="fal fa-chevron-left fs-md"></i></button>\n' +
                                    '            <button class="btn btn-icon rounded-circle waves-effect waves-themed"><i class="fal fa-chevron-right fs-md"></i></button>\n' +
                                    '        </div>\n' +
                                    '    </div>\n' +
                                    '    <!-- end inbox button shortcut -->\n' +
                                    '</div>';

                                messageDiv += '<div class="flex-wrap align-items-center flex-grow-1 position-relative bg-white" style="height:300px;">\n' +
                                    '    <div class=" position-absolute pos-top pos-bottom w-100 custom-scroll">\n' +
                                    '        <div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 100%;"><div class="d-flex h-100 flex-column" style="overflow: hidden; width: auto; height: 100%;">\n' +
                                    '            <!-- inbox title -->\n' +
                                    '            <div class="d-flex align-items-center pl-2 pr-3 py-3 pl-sm-3 pr-sm-4 py-sm-4 px-lg-5 py-lg-3 flex-shrink-0">\n' +
                                    '                <!-- button for mobile -->\n' +
                                    '                <a href="javascript:void(0);" class="pl-3 pr-3 py-2 d-flex d-lg-none align-items-center justify-content-center mr-2 btn waves-effect waves-themed" data-action="toggle" data-class="slide-on-mobile-left-show" data-target="#js-inbox-menu">\n' +
                                    '                    <i class="fal fa-ellipsis-v h1 mb-0 "></i>\n' +
                                    '                </a>\n' +
                                    '                <!-- end button for mobile -->\n' +
                                    '                <h1 class="subheader-title mb-0 ml-2 ml-lg-0">\n' +
                                    `                 ${messageData.subject} ` +
                                    '                </h1>\n' +
                                    '                <span class="badge badge-primary ml-2 hidden-sm-down">INBOX</span>\n' +
                                    '                <div class="d-flex position-relative ml-auto">\n' +
                                    '                    <a href="javascript:void(0);" class="btn btn-icon ml-1 fs-lg waves-effect waves-themed" data-toggle="collapse" data-target=".js-collapse" aria-expanded="true">\n' +
                                    '                        <i class="fas fa-arrows-v"></i>\n' +
                                    '                    </a>\n' +
                                    '                    <a href="javascript:void(0);" class="btn btn-icon ml-1 fs-lg hidden-lg-down waves-effect waves-themed">\n' +
                                    '                        <i class="fas fa-print"></i>\n' +
                                    '                    </a>\n' +
                                    '                </div>\n' +
                                    '            </div>\n' +
                                    '            <!-- end inbox title -->\n' +
                                    '            <!-- message -->\n' +
                                    '            <div id="msg-01" class="d-flex flex-column border-faded border-top-0 border-left-0 border-right-0 py-3 px-3 px-sm-4 px-lg-0 mr-0 mr-lg-5 flex-shrink-0">\n' +
                                    '                <div class="d-flex align-items-center flex-row">\n' +
                                    '<div class="ml-0 mr-3 mx-lg-3">' +
                                    '</div>' +
                                    '                    <div class="fw-500 flex-1 d-flex flex-column cursor-pointer" data-toggle="collapse" data-target="#msg-01 > .js-collapse" aria-expanded="true">\n' +
                                    '                        <div class="fs-lg">\n' +
                                    `                            ${messageData.sender_name} ` +
                                    '                        </div>\n' +
                                    '                        <div class="fs-nano">\n' +
                                    `                            to ${messageData.receiver_name} ` +
                                    '                        </div>\n' +
                                    '                    </div>\n' +
                                    '                    <div class="color-fusion-200 fs-sm">\n' +
                                    '                        1:00 AM <span class="hidden-sm-down">(12 hours ago)</span>\n' +
                                    '                    </div>\n' +
                                    '                </div>\n' +
                                    '                <div class="js-collapse collapse show" style="">\n' +
                                    '                    <div class="pl-lg-5 ml-lg-0 pt-3 pb-4">\n' +
                                    `                              ${messageData.message}` +
                                    '                    </div>\n' +
                                    '                </div>\n' +
                                    '            </div>\n' +
                                    '            <!-- end message -->\n' +
                                    '        </div><div class="slimScrollBar" style="background: rgba(0, 0, 0, 0.6); width: 4px; position: absolute; top: 0px; opacity: 0.4; display: none; border-radius: 7px; z-index: 99; right: 4px; height: 718px;"></div><div class="slimScrollRail" style="width: 4px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 7px; background: rgb(250, 250, 250); opacity: 0.2; z-index: 90; right: 4px;"></div></div>\n' +
                                    '    </div>\n' +
                                    '</div>';
                            } else if(messageType === 'single-sent') {
                                // Single
                                let messageData = JSON.parse(messageArray[0]['data']);
                                messageDiv += '<div class="flex-grow-0">\n' +
                                    '    <!-- inbox button shortcut -->\n' +
                                    '    <div class="d-flex flex-wrap align-items-center pl-2 pr-3 py-2 px-sm-4 pr-lg-5 pl-lg-0 border-faded border-top-0 border-left-0 border-right-0">\n' +
                                    '        <div class="flex-1 d-flex align-items-center">\n' +
                                    '            <a href="javascript:void(0);" class="btn btn-icon rounded-circle mr-2 mr-lg-3 waves-effect waves-themed sent-items">\n' +
                                    '                <i class="fas fa-arrow-left fs-lg"></i>\n' +
                                    '            </a>\n' +
                                    '        </div>\n' +
                                    '        <div class="text-muted mr-1 mr-lg-3 ml-auto">\n' +
                                    '            <span class="hidden-lg-down"> 1 - 50 of 135 </span>\n' +
                                    '            <div class="btn-group hidden-lg-up" role="group">\n' +
                                    '                <button type="button" class="btn btn-default waves-effect waves-themed">Reply</button>\n' +
                                    '                <div class="btn-group" role="group">\n' +
                                    '                    <button id="dropdown-reply" type="button" class="btn btn-default dropdown-toggle px-2 js-waves-off" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>\n' +
                                    '                    <div class="dropdown-menu p-0" aria-labelledby="dropdown-reply">\n' +
                                    '                        <a class="dropdown-item" href="#">Reply to all</a>\n' +
                                    '                        <a class="dropdown-item" href="#">Forward</a>\n' +
                                    '                        <div class="dropdown-divider m-0"></div>\n' +
                                    '                        <a class="dropdown-item" href="#">\n' +
                                    '                            Move to...</a>\n' +
                                    '                    </div>\n' +
                                    '                </div>\n' +
                                    '            </div>\n' +
                                    '        </div>\n' +
                                    '        <div class="d-flex flex-wrap hidden-lg-down">\n' +
                                    '            <button class="btn btn-icon rounded-circle waves-effect waves-themed"><i class="fal fa-chevron-left fs-md"></i></button>\n' +
                                    '            <button class="btn btn-icon rounded-circle waves-effect waves-themed"><i class="fal fa-chevron-right fs-md"></i></button>\n' +
                                    '        </div>\n' +
                                    '    </div>\n' +
                                    '    <!-- end inbox button shortcut -->\n' +
                                    '</div>';

                                messageDiv += '<div class="flex-wrap align-items-center flex-grow-1 position-relative bg-white" style="height:300px;">\n' +
                                    '    <div class=" position-absolute pos-top pos-bottom w-100 custom-scroll">\n' +
                                    '        <div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 100%;"><div class="d-flex h-100 flex-column" style="overflow: hidden; width: auto; height: 100%;">\n' +
                                    '            <!-- inbox title -->\n' +
                                    '            <div class="d-flex align-items-center pl-2 pr-3 py-3 pl-sm-3 pr-sm-4 py-sm-4 px-lg-5 py-lg-3 flex-shrink-0">\n' +
                                    '                <!-- button for mobile -->\n' +
                                    '                <a href="javascript:void(0);" class="pl-3 pr-3 py-2 d-flex d-lg-none align-items-center justify-content-center mr-2 btn waves-effect waves-themed" data-action="toggle" data-class="slide-on-mobile-left-show" data-target="#js-inbox-menu">\n' +
                                    '                    <i class="fal fa-ellipsis-v h1 mb-0 "></i>\n' +
                                    '                </a>\n' +
                                    '                <!-- end button for mobile -->\n' +
                                    '                <h1 class="subheader-title mb-0 ml-2 ml-lg-0">\n' +
                                    `                 ${messageData.subject} ` +
                                    '                </h1>\n' +
                                    '                <span class="badge badge-primary ml-2 hidden-sm-down">SENT</span>\n' +
                                    '                <div class="d-flex position-relative ml-auto">\n' +
                                    '                    <a href="javascript:void(0);" class="btn btn-icon ml-1 fs-lg waves-effect waves-themed" data-toggle="collapse" data-target=".js-collapse" aria-expanded="true">\n' +
                                    '                        <i class="fas fa-arrows-v"></i>\n' +
                                    '                    </a>\n' +
                                    '                    <a href="javascript:void(0);" class="btn btn-icon ml-1 fs-lg hidden-lg-down waves-effect waves-themed">\n' +
                                    '                        <i class="fas fa-print"></i>\n' +
                                    '                    </a>\n' +
                                    '                </div>\n' +
                                    '            </div>\n' +
                                    '            <!-- end inbox title -->\n' +
                                    '            <!-- message -->\n' +
                                    '            <div id="msg-01" class="d-flex flex-column border-faded border-top-0 border-left-0 border-right-0 py-3 px-3 px-sm-4 px-lg-0 mr-0 mr-lg-5 flex-shrink-0">\n' +
                                    '                <div class="d-flex align-items-center flex-row">\n' +
                                    '<div class="ml-0 mr-3 mx-lg-3">' +
                                    '</div>' +
                                    '                    <div class="fw-500 flex-1 d-flex flex-column cursor-pointer" data-toggle="collapse" data-target="#msg-01 > .js-collapse" aria-expanded="true">\n' +
                                    '                        <div class="fs-lg">\n' +
                                    `                            ${messageData.sender_name} ` +
                                    '                        </div>\n' +
                                    '                        <div class="fs-nano">\n' +
                                    `                            to ${messageData.receiver_name} ` +
                                    '                        </div>\n' +
                                    '                    </div>\n' +
                                    '                    <div class="color-fusion-200 fs-sm">\n' +
                                    '                        1:00 AM <span class="hidden-sm-down">(12 hours ago)</span>\n' +
                                    '                    </div>\n' +
                                    '                </div>\n' +
                                    '                <div class="js-collapse collapse show" style="">\n' +
                                    '                    <div class="pl-lg-5 ml-lg-0 pt-3 pb-4">\n' +
                                    `                              ${messageData.message}` +
                                    '                    </div>\n' +
                                    '                </div>\n' +
                                    '            </div>\n' +
                                    '            <!-- end message -->\n' +
                                    '        </div><div class="slimScrollBar" style="background: rgba(0, 0, 0, 0.6); width: 4px; position: absolute; top: 0px; opacity: 0.4; display: none; border-radius: 7px; z-index: 99; right: 4px; height: 718px;"></div><div class="slimScrollRail" style="width: 4px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 7px; background: rgb(250, 250, 250); opacity: 0.2; z-index: 90; right: 4px;"></div></div>\n' +
                                    '    </div>\n' +
                                    '</div>';
                            } else if(messageType == 'compose') {

                                messageDiv += '<div class="d-flex flex-column flex-grow-1 bg-white">\n' +
                                    '    <!-- inbox header -->\n' +
                                    '    <div class="flex-grow-0">\n' +
                                    '        <!-- inbox title -->\n' +
                                    '        <div class="flex-1 d-flex align-items-center">\n' +
                                    '            <a href="javascript:void(0);" class="btn btn-icon rounded-circle mr-2 mr-lg-3 waves-effect waves-themed message-list">\n' +
                                    '                <i class="fas fa-arrow-left fs-lg"></i>\n' +
                                    '            </a>\n' +
                                    '            <a href="javascript:void(0);" class="btn btn-icon rounded-circle mr-2 mr-lg-3 waves-effect waves-themed">\n' +
                                    '                <i class="fas fa-reply fs-lg"></i>\n' +
                                    '            </a>\n' +
                                    '        </div>\n' +
                                    '        <div class="d-flex align-items-center pl-2 pr-3 py-3 pl-sm-3 pr-sm-4 py-sm-4 px-lg-5 py-lg-4  border-faded border-top-0 border-left-0 border-right-0 flex-shrink-0">\n' +
                                    '            <h1 class="subheader-title">\n' +
                                    '                New message\n' +
                                    '            </h1>\n' +
                                    '        </div>\n' +
                                    '        <!-- end inbox title -->\n' +
                                    '    </div>\n' +
                                    '    <!-- end inbox header -->\n' +
                                    '    <!-- inbox message -->\n' +
                                    '    <div class="flex-wrap align-items-center flex-grow-1 position-relative bg-white mx-lg-3" style="height:400px;">\n' +
                                    '        <div class=" position-absolute pos-top pos-bottom w-100">\n' +
                                    '             <form action="#" method="POST" id="send-message-form"> ' +
                                    '            <div class="d-flex h-100 flex-column">\n' +
                                    '                <div class="px-3">\n' +
                                    '                    <input type="text" placeholder="Subject" id="subject" name="subject" class="form-control border-top-0 border-left-0 border-right-0 px-0 rounded-0 fs-md mt-2" tabindex="4">\n' +
                                    '                </div>\n' +
                                    '                <div class="flex-1" style="overflow-y: auto;">\n' +
                                    '                    <textarea class="form-control" id="message" name="message" cols="5" rows="10"></textarea>' +
                                    '                </div>\n' +
                                    '                <div class="px-3 py-4 d-flex flex-row align-items-center flex-wrap flex-shrink-0">\n' +
                                    '                    <input type="submit" id="send-message" value="Send" class="btn btn-info mr-3 waves-effect waves-themed"/>\n' +
                                    '                    <div class="ml-auto">\n' +
                                    '                        <a href="javascript:void(0);" class="btn btn-icon fs-xl waves-effect waves-themed" data-toggle="tooltip" data-original-title="Disregard draft" data-placement="top">\n' +
                                    '                            <i class="fas fa-trash color-fusion-300"></i>\n' +
                                    '                        </a>\n' +
                                    '                    </div>\n' +
                                    '                </div>\n' +
                                    '            </div>\n' +
                                    '           </form>' +
                                    '        </div>\n' +
                                    '    </div>\n' +
                                    '    <!-- end inbox message -->\n' +
                                    '</div>';
                            } else {
                                messageDiv += '' +
                                    '<div class="flex-grow-0">\n' +
                                    '    <div class="d-flex align-items-center pl-2 pr-3 py-3 pl-sm-3 pr-sm-4 py-sm-4 px-lg-5 py-lg-4  border-faded border-top-0 border-left-0 border-right-0 flex-shrink-0">\n' +
                                    '        <div class="btn-group">\n' +
                                    '            <button type="button" class="btn btn-primary dropdown-toggle bg-trans-gradient waves-effect waves-themed" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">\n' +
                                    '                           Sent\n' +
                                    '                           </button>\n' +
                                    '            <div class="dropdown-menu dropdown-menu-animated" x-placement="bottom-start" style="position: absolute; top: 37px; left: 0px; will-change: top, left;">\n' +
                                    '                <button class="dropdown-item message-list" type="button" id="inbox-items">Inbox</button>\n' +
                                    '                <button class="dropdown-item" type="button" id="compose-message">Compose</button>\n' +
                                    '            </div>\n' +
                                    '        </div>\n' +
                                    '    </div>\n' +
                                    '</div>\n' +
                                    '\n' +
                                    '<div class="flex-wrap align-items-center flex-grow-1 position-relative bg-gray-50" style="height:300px;">\n' +
                                    '    <div class="position-absolute pos-top pos-bottom w-100 custom-scroll">\n' +
                                    '        <div class="d-flex h-100 flex-column">\n' +
                                    '            <ul id="js-emails" class="notification notification-layout-2">\n' +
                                    '\n';
                                for (const prop in messageArray) {
                                    let messageData = JSON.parse(messageArray[prop]['data']);

                                    if (messageData.sender == claim.claim['customer_id']) {
                                        messageDiv += '                 <li class="unread">\n' +
                                            '                               <div class="d-flex align-items-center px-3 px-sm-4 px-lg-5 py-1 py-lg-0 height-4 height-mobile-auto">\n' +
                                            '                                    <div class="d-flex flex-row flex-wrap flex-1 align-items-stretch align-self-stretch order-2 order-lg-3">\n' +
                                            '                                        <div class="row w-100">\n' +
                                            `                                            <a href="#" class="name d-flex width-sm align-items-center pt-1 pb-0 py-lg-1 col-12 col-lg-auto open-message-sent" data-id="${messageArray[prop]['id']}">${messageData.receiver_name ? messageData.receiver_name : 'No receiver'}</a>\n` +
                                            `                                            <a href="#" class="name d-flex align-items-center pt-0 pb-1 py-lg-1 flex-1 col-12 col-lg-auto open-message-sent">${messageData.subject}</a>\n` +
                                            '                                        </div>\n' +
                                            '                                    </div>\n' +
                                            '\n' +
                                            // Time Message sent
                                            '                                    <div class="fs-sm text-muted ml-auto hide-on-hover-parent order-4 position-on-mobile-absolute pos-top pos-right mt-2 mr-3 mr-sm-4 mt-lg-0 mr-lg-0">\n' +
                                            '                                    </div>' +
                                            '                                </div>\n' +
                                            '                           </li>\n';
                                    }
                                }

                                messageDiv += '            </ul>\n' +
                                    '        </div>\n' +
                                    '    </div>\n' +
                                    '</div>';
                            }

                            messages.html('');
                            messages.append(messageDiv);

                            $('#compose-message').on('click', function(e){
                                e.preventDefault();

                                let messageId = $(this).data('id');

                                const result = claim.messages.filter(it => it.id.includes(messageId));

                                displayReceivedMessages(result, 'compose');
                            });

                            // jQuery Validate js
                            var $sendMessageValidator = $("#send-message-form").validate({
                                rules: {
                                    // Stage 1
                                    subject : {
                                        required : true,
                                    },
                                    message : {
                                        required: 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());
                                        element.focus();
                                    } else {
                                        error.insertAfter(element);
                                        element.focus();
                                    }
                                }

                            });

                            $('#send-message').on('click', function(e){
                                e.preventDefault();

                                var $valid = $("#send-message-form").valid();
                                if (!$valid) {
                                    $sendMessageValidator.focusInvalid();
                                    return false;
                                } else {
                                    $.ajax({
                                        url:"{{action('CustomerController@sendMessage')}}",
                                        type: 'post',
                                        data: {
                                            "claim_id": claim.claim['id'],
                                            "subject" : $('#subject').val(),
                                            "message": $('#message').val(),
                                            "_token": "{{ csrf_token() }}",
                                        },
                                        success: function ( response )
                                        {
                                            let messages = response.data['messages'];

                                            displayReceivedMessages(messages, 'sent');

                                            claim.messages = messages;

                                            Swal.fire(
                                                {
                                                    type: "success",
                                                    title: "Your work has been saved",
                                                    showConfirmButton: false,
                                                    timer: 1500
                                                });
                                        }
                                    });
                                }
                            });

                            $('.message-list').on('click', function(e) {
                                e.preventDefault();
                                console.log('clicked list');

                                displayReceivedMessages(claim.messages, 'list');
                            });

                            $('.open-message').on('click', function(e) {
                                e.preventDefault();

                                let messageId = $(this).data('id');

                                const result = claim.messages.filter(it => it.id.includes(messageId));

                                displayReceivedMessages(result, 'single');
                            });

                            $('.open-message-sent').on('click', function(e) {
                                e.preventDefault();

                                let messageId = $(this).data('id');

                                const result = claim.messages.filter(it => it.id.includes(messageId));

                                displayReceivedMessages(result, 'single-sent');
                            });

                            $('.sent-items').on('click', function(e) {
                                e.preventDefault();

                                displayReceivedMessages(claim.messages, 'sent');
                            });

                        }

                        // Others
                        $('#customer-final-comments-content').summernote({
                            toolbar: [
                                // [groupName, [list of button]]
                                ['style', ['bold', 'italic', 'underline', 'clear']],
                                ['font', ['strikethrough', 'superscript', 'subscript']],
                                ['fontsize', ['fontsize']],
                                ['color', ['color']],
                                ['para', ['ul', 'ol', 'paragraph']],
                                ['height', ['height']],
                            ],
                            height: 250,
                            focus: false,
                            tabsize: 2
                        });

                        $("#save-customer-final-comment").on('click', function () {
                            $.ajax({
                                url:"{{action('CustomerController@saveCustomerFinalComments')}}",
                                type: 'post',
                                data: {
                                    "id": $(this).attr("value"),
                                    "content": $("#customer-final-comments-content").val(),
                                    "_token": "{{ csrf_token() }}",
                                },
                                success: function ( response )
                                {
                                    console.log(claim.messages);
                                    //selector = $(".alert-success");
                                    //selector.text( response.success).show();
                                    //selector.delay(5000).slideUp(300);
                                }
                            });
                        });

                        $('#send-message').on('click', function(e) {
                            e.preventDefault();

                            $.ajax({
                                url:"{{action('CustomerController@sendMessage')}}",
                                type: 'post',
                                data: {
                                    "claim_id": claim.claim['id'],
                                    "message": $('#msg-input').text(),
                                    "_token": "{{ csrf_token() }}",
                                },
                                success: function ( response )
                                {
                                    //selector = $(".alert-success");
                                    //selector.text( response.success).show();
                                    //selector.delay(5000).slideUp(300);
                                }
                            });
                        });


                        evidenceTable2 = $('#dt-evidence-detail').DataTable({
                            ajax: "jsonEvidenceFiles/" + claim.claim['id'],
                            async: false,
                            "bDestroy": true,
                            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;
                                        actions =
                                            `<a href="download-file/${data}"` +
                                            'class="btn btn-sm btn-link">' +
                                            '<i class="fal fa-cloud-download"></i> Download' +
                                            '</a>'

                                        if(claim.claim_status == 'Waiting File Submission') {
                                            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;
                                    }
                                },
                            ],
                        });

                        $("#s_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(evidenceTable2);
                                //selector = $("#response-msg");
                                //selector.text(response.success).show();
                                //selector.delay(5000).slideUp(300);
                                evidenceTable2.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);

                            }

                        });

                        $('#files-submitted').on('click', function(e) {
                            e.preventDefault();

                            Swal.fire(
                                {
                                    title: "Are you sure?",
                                    text: "You won't be able to revert this!",
                                    type: "warning",
                                    showCancelButton: true,
                                    confirmButtonText: "Yes"
                                }).then(function(result)
                            {
                                if (result.value)
                                {
                                    $.ajax({
                                        url:"{{action('CustomerController@allFilesUploaded')}}",
                                        type: 'post',
                                        data: {
                                            "claim_id": claim.claim['id'],
                                            "_token": "{{ csrf_token() }}",
                                        },
                                        success: function ( response )
                                        {
                                            if(response.success) {
                                                Swal.fire(
                                                    {
                                                        type: "success",
                                                        title: "Your work has been saved",
                                                        showConfirmButton: false,
                                                        timer: 1500
                                                    });

                                                location.reload(4000);
                                            }

                                        }
                                    });
                                }
                            });
                        });

                    },
                });
            });

            $('#claim-back-button').on('click', function(e){
                e.preventDefault();
                $('.case-detail').addClass('d-none');
                $(this).addClass('d-none');
                $('.case-overview').removeClass('d-none');
            });

            /*$('.staff i').on('mouseover', function() {
                let onStar = parseInt($(this).data('value'), 10);

                $(this).parent().children('i.fa-star').each(function(e){
                    if (e < onStar) {
                        $(this).addClass('fas');
                    }
                    else {
                        $(this).removeClass('fas');
                    }
                });
            }).on('mouseout', function(){
                $(this).parent().children('i.fa-star').each(function(e){
                    $(this).removeClass('fas');
                });
            });*/
            let onStarRT=0;
            let onStarSI=0;
            let onStarK=0;
            let onStarEU=0;
            let onStarCS=0;

            $('.response-time i').on('click', function() {
                onStarRT = parseInt($(this).data('value'), 10);
                let stars = $(this).parent().children('i.fa-star');

                for (i = 0; i < stars.length; i++) {
                    $(stars[i]).removeClass('fas');
                }

                for (i = 0; i < onStarRT; i++) {
                    $(stars[i]).addClass('fas');
                }
            });

            $('.staff-interaction i').on('click', function() {
                onStarSI = parseInt($(this).data('value'), 10);
                let stars = $(this).parent().children('i.fa-star');

                for (i = 0; i < stars.length; i++) {
                    $(stars[i]).removeClass('fas');
                }

                for (i = 0; i < onStarSI; i++) {
                    $(stars[i]).addClass('fas');
                }
            });

            $('.knowledge i').on('click', function() {
                onStarK = parseInt($(this).data('value'), 10);
                let stars = $(this).parent().children('i.fa-star');

                for (i = 0; i < stars.length; i++) {
                    $(stars[i]).removeClass('fas');
                }

                for (i = 0; i < onStarK; i++) {
                    $(stars[i]).addClass('fas');
                }
            });

            $('.ease-of-use i').on('click', function() {
                onStarEU = parseInt($(this).data('value'), 10);
                let stars = $(this).parent().children('i.fa-star');

                for (i = 0; i < stars.length; i++) {
                    $(stars[i]).removeClass('fas');
                }

                for (i = 0; i < onStarEU; i++) {
                    $(stars[i]).addClass('fas');
                }
            });

            $('.customer-service i').on('click', function() {
                onStarCS = parseInt($(this).data('value'), 10);
                let stars = $(this).parent().children('i.fa-star');

                for (i = 0; i < stars.length; i++) {
                    $(stars[i]).removeClass('fas');
                }

                for (i = 0; i < onStarCS; i++) {
                    $(stars[i]).addClass('fas');
                }


            });

            $('#submit-rating').on('click', function(e){
                e.preventDefault();

                if(onStarSI == 0 || onStarK == 0 || onStarEU == 0 || onStarCS == 0 || onStarRT == 0)
                {
                    Swal.fire(
                        {
                            type: "warning",
                            title: "Please choose all options",
                            showConfirmButton: false,
                            timer: 1500
                        });
                } else {
                    $.ajax({
                        url:"{{action('CustomerController@submitRating')}}",
                        type: 'post',
                        data: {
                            "response_time" : onStarRT,
                            "customer_service" : onStarCS,
                            "ease_of_use" : onStarEU,
                            "knowledge" : onStarK,
                            "staff_interaction" : onStarSI,
                            "comments" : $('#rating-comments').val(),
                            "customer_id" : {{ Auth::id() }},
                            "_token": "{{ csrf_token() }}",
                        },
                        success: function ( response )
                        {
                            if(response.success) {
                                Swal.fire(
                                    {
                                        type: "success",
                                        title: "Your work has been saved",
                                        showConfirmButton: false,
                                        timer: 1500
                                    });

                                location.reload(4000);
                            }

                        }
                    });
                }
            });

        });
    </script>
@endsection