@extends('layouts.portal.layout')

@section('content')


<style>
.itembutton {
    font-size: 15px;
    color: #000;
    background-color: #A6CE39;
    /* border: 2px solid #000; */
    border-radius: 10px;
    padding: 4px;
}
</style>


<div class="taglineBox">
    <p class="tagline mb-4">Your Claims <span>You Move Me!</span></p>
</div>
<!-- Claim -->
<div class="container">
    <div class="accordion accordion-flush" id="accordionFlushExample">
        <div class="card card-primary">

            @if($statement != "")
            <h4 class="text-danger text-center p-5" width="20px">{{ $statement }}</h4>

            <!-- Check (SLC Stepers - Move) Is Completed , if move is completed then form is enable -->
            @elseif($rowMove != "" && $rowWardrobe != "" && ($rowcoffeeOne != "" || $rowcoffeeTwo != ""))
            <form action="{{ route('claim') }}" method="post" enctype="multipart/form-data">
                {{ csrf_field() }}

                <div class="card-header">
                    <h4 class="text-center"><b>New Claim</b></h4>
                </div>

                <div class="card-body">

                    <div id="items">
                        <!-- <div class="row">
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <label><b>Item Name</b></label>  
                                        <input type="text" name="itemname" class="form-control">
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <label><b>Type</b></label>
                                        <select name="itemtype" id="itemtype" class="form-control">
                                            <option selected disabled>Please Select</option>
                                            <option value="Repair">Repair</option>
                                            <option value="Monetary">Monetary</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <label><b>Photo</b></label>  
                                        <input type="file" name="itemphoto" class="form-control">
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <label><b>Description</b></label>  
                                        <textarea type="text" rows="1" name="itemdescription" class="form-control"></textarea>
                                    </div>
                                </div>
                                <div class="col-md-2" id="iweight" style="display:none">
                                    <div class="form-group">
                                        <label><b>Weight</b></label>  
                                        <input hidden id="planprice" class="form-control">
                                        <input type="text" name="itemweight" id="itemweight" class="form-control">
                                    </div>
                                </div>
                                <div class="col-md-2" id="iamount" style="display:none">
                                    <div class="form-group">
                                        <label><b>Amount</b></label>  
                                        <input type="text" name="itemamount" id="itemamount" class="form-control">
                                    </div>
                                </div>
                                <div class="col-md-2" id="itotal" style="display:none">
                                    <div class="form-group">
                                        <label><b>Item Total</b></label>  
                                        <input readonly type="text" name="itemtotal" id="itemtotal" class="form-control">
                                    </div>
                                </div>
                                <div class="col-md-4" id="imessage" style="display:none">
                                    <div class="form-group">
                                        <label><b>Message</b></label>  
                                        <input class="form-control" type="text" name="message" id="message" value="Your experience manager will reach out asap" style="border:none; color: red">
                                    </div>
                                </div>
                            </div> -->
                    </div>

                    <div class="row mt-4">
                        <div class="col-4"></div>
                        <div class="col-2">
                            <input name="addFieldButton" type="button" value="Add Items" onclick="addField();"
                                class="form-control itembutton">
                        </div>
                        <div class="col-2">
                            <input name="delFieldButton" type="button" value="Remove Items" onclick="delField();"
                                class="form-control itembutton">
                        </div>
                    </div>

                    <div class="row" hidden>
                        <!-- show images before saving the DB -->
                        <div class="col-md-12">
                            <div class="user-image mb-3 text-center">
                                <div class="imgPreview">

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

                    <div class="row">
                        <div class="col-md-6" hidden>
                            <div class="form-group">
                                <label><b>Picture</b></label>
                                <input type="file" id="pictures" name="pictures[]" multiple="multiple"
                                    class="form-control">
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <label><b>Notes</b> <small>(Optional)</small></label>
                                <textarea name="notes" class="form-control" rows="4" class="txtarea" id="notes"
                                    style="height:50%; width:100%"></textarea>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <input type="checkbox" onchange="myfunction()" id="compensation" name="compensation">
                            <label>You understand that you selected our protection plan
                                <b>
                                    @foreach($plan as $item)
                                    @if($item->name == "VIP Protection")
                                    <span id="planname">VIP Protection</span>
                                    @elseif($item->name == "YMM Protection")
                                    <span id="planname">YMM Protection</span>
                                    @elseif($item->name == "Released Value")
                                    <span id="planname">Released Value</span>
                                    @else
                                    <span></span>
                                    @endif
                                    @endforeach
                                </b>
                                and you will be compensated according to its policy.
                            </label><br>
                        </div>
                        <div class="col-md-12">
                            <input type="checkbox" onchange="myfunction()" id="permission" name="permission">
                            <label>Agree to the terms and permissions , Admin will update through sms reagarding your
                                claim status</label><br>
                        </div>
                    </div>

                </div>
                <!-- /.card-body -->
                <div class="card-footer">
                    <button disabled type="submit" class="btn itembutton px-4 text-left claimbutton">Submit</button>
                </div>
            </form>

            @else
            <h4 class="text-danger text-center p-5" width="20px">If you want to create a claim , make sure your move is
                completed !
                <br>
                <small style="font-size: 15px">Once you have completed your move , Now you are eligible to create a
                    claim</small>
            </h4>
            @endif
        </div>
        <!-- /.card -->


        <div class="card mt-5">
            <!-- /.card-header -->
            <div class="card-header">
                <h4 class="text-center"><b>Recent Claims</b></h4>
            </div>
            <div class="card-body">
                <!-- Feedback From Admin Side "Pending" Status -->
                <table id="example2" class="table table-bordered table-striped">
                    <thead>
                        <tr style="text-align:center;">
                            <th hidden>Id</th>
                            <th>Claim Date</th>
                            <th style="width: 70%;">Notes</th>
                            <th>Detail</th>
                            <th>Offers</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($claim as $item)
                        <tr style="text-align: center;">
                            <td hidden>{{ $item->id }}</td>
                            <td><i class="far fa-calendar-alt"></i>
                                {{date('d-m-Y h:i A', strtotime($item->created_at))}}</td>
                            <td>{{ $item->note }}</td>
                            <td>
                                <a href="{{ route('claimitems', $item->id) }}">
                                    <i class="fa fa-eye text-success" aria-hidden="true"></i>
                                </a>
                            </td>
                            <td>
                                <a href="{{ route('offerdetails', $item->id) }}">
                                    <i class="fa fa-briefcase text-success" aria-hidden="true"></i>
                                </a>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>

            </div>
            <!-- /.card-body -->
        </div>
        <!-- /.card -->
        <br><br>
        <br><br>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>

<!-- show multiple images before saving the DB -->
<script>
$(function() {
    // Multiple images preview with JavaScript
    var multiImgPreview = function(input, imgPreviewPlaceholder) {
        if (input.files) {
            var filesAmount = input.files.length;
            for (i = 0; i < filesAmount; i++) {
                var reader = new FileReader();
                reader.onload = function(event) {
                    $($.parseHTML(
                        '<img style="width:100px; height: 70px; margin-left: 5px; border:2px solid #000">'
                    )).attr('src', event.target.result).appendTo(
                        imgPreviewPlaceholder);
                }
                reader.readAsDataURL(input.files[i]);
            }
        }
    };
    $('#pictures').on('change', function() {
        multiImgPreview(this, 'div.imgPreview');
    });
});
</script>


<!-- Add Row Delete Row Functionalities -->
<script>
var counter = -1;
var contract_selected = -1;

function addField() {
    counter++;

    var content = '';
    content += '<div class="row" id="ClaimItem_row_' + counter + '" name="ClaimItem_rows">';
    content += '    <div class="col-md-3">';
    content += '        <div class="form-group">';
    content += '            <label><b>Item Name</b></label>';
    content += '            <input type="text" name="itemname[]" class="form-control">';
    content += '        </div>';
    content += '    </div>';
    content += '    <div class="col-md-3">';
    content += '        <div class="form-group">';
    content += '            <label><b>Type</b></label>';
    content += '            <select class="form-control itemtype" name="itemtype[]" id="itemtype' + counter + '">';
    content += '                <option selected disabled>Please Select</option>';
    content += '                <option value="Repair">Repair</option>';
    content += '                <option value="Monetary">Monetary</option>';
    content += '            </select>';
    content += '        </div>';
    content += '    </div>';
    content += '    <div class="col-md-6">';
    content += '        <div class="form-group">';
    content += '            <label><b>Photo</b></label>';
    content += '            <input type="file" name="itemphoto[]" class="form-control">';
    content += '        </div>';
    content += '    </div>';
    content += '    <div class="col-md-6">';
    content += '        <div class="form-group">';
    content += '            <label><b>Description</b></label>';
    content += '            <textarea type="text" rows="1" name="itemdescription[]" class="form-control"></textarea>';
    content += '        </div>';
    content += '    </div>';
    content += '    <div class="col-md-3" id="ipurdate' + counter + '" style="display:none">';
    content += '        <div class="form-group">';
    content += '            <label><b>Date oF Purchase</b></label>';
    content += '            <input type="date" name="dateofpurchase[]" class="form-control">';
    content += '        </div>';
    content += '    </div>';
    content += '    <div class="col-md-3" id="ipurprice' + counter + '" style="display:none">';
    content += '        <div class="form-group">';
    content += '            <label><b>Purchase Price</b></label>';
    content += '            <input type="text" name="purchaseprice[]" class="form-control">';
    content += '        </div>';
    content += '    </div>';
    content += '    <div class="col-md-3" id="imake' + counter + '" style="display:none">';
    content += '        <div class="form-group">';
    content += '            <label><b>Manufacture Name</b></label>';
    content += '            <input type="text" name="make[]" id="make' + counter + '" class="form-control">';
    content += '        </div>';
    content += '    </div>';
    content += '    <div class="col-md-3" id="imodel' + counter + '" style="display:none">';
    content += '        <div class="form-group">';
    content += '            <label><b>Model #</b></label>';
    content += '            <input type="text" name="model[]" id="model' + counter + '" class="form-control">';
    content += '        </div>';
    content += '    </div>';
    content += '    <div class="col-md-6" id="ireceiptphoto' + counter + '" style="display:none">';
    content += '        <div class="form-group">';
    content += '            <label><b>Receipt Photo</b></label>';
    content += '            <input type="file" name="itemreceiptphoto[]" class="form-control">';
    content += '        </div>';
    content += '    </div>';
    content += '    <div class="col-md-2" id="iweight' + counter + '" style="display:none">';
    content += '        <div class="form-group">';
    content += '            <label><b>Weight</b></label>';
    content += '            <input hidden name="planprice[]" id="planprice' + counter + '" class="form-control">';
    content += '            <input type="text" name="itemweight[]" id="itemweight' + counter +
        '" class="form-control itemweight">';
    content += '        </div>';
    content += '    </div>';
    content += '    <div class="col-md-3" id="iamount' + counter + '" style="display:none">';
    content += '        <div class="form-group">';
    content += '            <label><b>Amount</b></label>';
    content += '            <input type="text" name="itemamount[]" id="itemamount' + counter +
        '" class="form-control itemamount">';
    content += '        </div>';
    content += '    </div>';
    content += '    <div class="col-md-2" id="itotal' + counter + '" style="display:none">';
    content += '        <div class="form-group">';
    content += '            <label><b>Item Total</b></label>';
    content += '            <input readonly type="text" name="itemtotal[]" id="itemtotal' + counter +
        '" class="form-control">';
    content += '        </div>';
    content += '    </div>';
    content += '    <div class="col-md-12" id="imessage' + counter + '" style="display:none">';
    content += '        <div class="form-group">';
    content += '            <label><b>Message</b></label>';
    content += '            <input type="text" name="message[]" id="message' + counter +
        '" class="form-control" value="" style="border:none; color: red; font-size:12px">';
    content += '        </div>';
    content += '    </div>';
    content += '  <hr/>';
    content += '</div>';
    $('#items').append(content);

    // console.log(contract_selected);

    // submit claim button disabled work , atleast one row insert in claim 
    if (counter == 0 || counter >= 0) {

        // When compensation checkbox, Permission checkbox field is not check then submit button Disable
        var compensation = $('#compensation').is(':checked');
        var permission = $('#permission').is(':checked');
        console.log(compensation);
        console.log(permission);

        if (compensation === false || permission === false) {
            $(".claimbutton").prop("disabled", true);
        } else {
            $(".claimbutton").prop("disabled", false);
        }

        // $(".claimbutton").prop("disabled", false);
    }
}

function delField() {
    $("#ClaimItem_row_" + counter).remove();
    counter--;


    // submit claim button disabled work , atleast one row insert in claim 
    // if(counter < 0){

    // When compensation checkbox, Permission checkbox field is not check then submit button Disable
    var compensation = $('#compensation').is(':checked');
    var permission = $('#permission').is(':checked');
    console.log(compensation);
    console.log(permission);

    if (compensation === false || permission === false || counter < 0) {
        $(".claimbutton").prop("disabled", true);
    } else {
        $(".claimbutton").prop("disabled", false);
    }

    // $(".claimbutton").prop("disabled", true);
    // }
}
</script>


<!-- "itemtype" onchange Calculation -->
<script>
$(document).on('change', '.itemtype', function() {
    var id = $(this).attr('id').split('itemtype')[1];
    // console.log(id);

    var itemtype = $(this).val();
    var name = $('#planname').text();

    if (itemtype == "Monetary") {
        if (name == "VIP Protection") {
            var price = 250;
            $('#planprice' + id).val(price);
            // -----------------------------

            $('#ipurdate' + id).show();
            $('#ipurprice' + id).show();
            $('#imake' + id).show();
            $('#imodel' + id).show();
            $('#ireceiptphoto' + id).show();
            $('#iweight' + id).hide();
            $('#iamount' + id).hide();
            $('#imessage' + id).show();
            $('#message' + id).val(
                'Your experience manager will reach out as soon as possible. You will be recompensated as per your policy.'
            );

        } else if (name == "YMM Protection") {
            var price = 50;
            $('#planprice' + id).val(price);
            // -----------------------------

            $('#ipurdate' + id).show();
            $('#ipurprice' + id).show();
            $('#imake' + id).show();
            $('#imodel' + id).show();
            $('#ireceiptphoto' + id).show();
            $('#iweight' + id).hide();
            $('#imessage' + id).hide();
            $('#iamount' + id).hide();
            // $('#itotal'+ id).show();
            $('#itotal' + id).hide();

        } else {
            var price = 0.60;
            $('#planprice' + id).val(price);
            // -----------------------------

            $('#iweight' + id).show();
            $('#itotal' + id).show();
            $('#ipurdate' + id).hide();
            $('#ipurprice' + id).hide();
            $('#imake' + id).hide();
            $('#imodel' + id).hide();
            $('#ireceiptphoto' + id).hide();
            $('#iamount' + id).hide();
            $('#imessage' + id).hide();
        }

    } else {
        $('#planprice' + id).val('');
        $('#imessage' + id).hide();

        $('#itemweight' + id).val('');
        $('#iweight' + id).hide();

        $('#itemamount' + id).val('');
        $('#iamount' + id).hide();

        $('#itemtotal' + id).val('');
        $('#itotal' + id).hide();

        $('#make' + id).val('');
        $('#imake' + id).hide();

        $('#model' + id).val('');
        $('#imodel' + id).hide();

    }
})
</script>


<!-- "itemweight" onchange Calculation -->
<script>
$(document).on('change', '.itemweight', function() {
    var id = $(this).attr('id').split('itemweight')[1];
    // console.log(id);

    var weight = $(this).val();
    var price = $('#planprice' + id).val();

    var total = parseFloat(weight) * parseFloat(price);
    $('#itemtotal' + id).val(total);
})
</script>


<!-- "itemamount" onchange Calculation -->
<script>
$(document).on('change', '.itemamount', function() {
    var id = $(this).attr('id').split('itemamount')[1];
    // console.log(id);

    var amount = $(this).val();
    var price = $('#planprice' + id).val();

    var total = parseFloat(amount) * parseFloat(price);
    $('#itemtotal' + id).val(total);
})
</script>


<!-- When notes field is not fill then submit button Disable -->
<script>
// $('#notes').on('change', function() {
//     var note = $(this).val();
//     // console.log(note);

//     if(note == ''){
//         $(".claimbutton").prop("disabled", true);
//     }
//     else{
//         $(".claimbutton").prop("disabled", false);
//     }
// })
</script>

<!-- When compensation checkbox field is not check then submit button Disable -->
<script>
// $('#compensation').on('change', function() {
//     var compensation = $('#compensation').is(':checked'); 
//     // console.log(compensation);

//     if(compensation === false){
//         $(".claimbutton").prop("disabled", true);
//     }
//     else{
//         $(".claimbutton").prop("disabled", false);
//     }
// })
</script>

<!-- When compensation checkbox, Permission checkbox field is not check & note field is not filled then submit button Disable -->
<script>
function myfunction() {
    // var note = $('#notes').val();
    var compensation = $('#compensation').is(':checked');
    var permission = $('#permission').is(':checked');
    // console.log(note);
    // console.log(compensation);
    // console.log(permission);

    if (compensation === false || permission === false || counter < 0) {
        $(".claimbutton").prop("disabled", true);
    } else {
        $(".claimbutton").prop("disabled", false);
    }
}
</script>

@endsection