@extends('layouts.dashboard.layout')

@section('content')

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

/* select2 dropdown css */
.select2-container--default .select2-selection--single {
    border-radius: 8px !important;
    height: 40px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 37px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 38px !important;
    right: 10px !important;
}
</style>

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"
    integrity="sha512-2ImtlRlf2VVmiGZsjm9bEyhjGW4dU7B6TNwh/hx/iSByxNENtj3WVE6o/9Lj4TJeVXPi4bnOIMXFIJJAeufa0A=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- Customer Dropdown Searchable script -->
<script>
$(document).ready(function() {
    $('.customer').select2();
});
</script>

<!-- Content Header (Page header) -->
<section class="content-header">
    @if(Session::has('flash_message_error'))
    <div class="alert alert-error alert-danger alert-block">
        <button type="button" class="close" data-dismiss="alert">×</button>
        <strong>{!! session('flash_message_error') !!}</strong>
    </div>
    @endif
    @if(Session::has('flash_message_success'))
    <div class="alert alert-success alert-block">
        <button type="button" class="close" data-dismiss="alert">×</button>
        <strong>{!! session('flash_message_success') !!}</strong>
    </div>
    @endif
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-12">
                <h2 class="text-white">Create Claim</h2>
            </div>
        </div>
    </div>
</section>

<!-- Main content -->
<section class="content">
    <div class="container-fluid">
        <!-- SELECT2 EXAMPLE -->
        <div class="card card-primary">
            <form action="{{ route('createclaim') }}" method="post" enctype="multipart/form-data">
                {{ csrf_field() }}

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

                    <div class="row">
                        <div class="col-md-3">
                            <label>Work Order #</label>
                            <input name="workordernum" id="workordernum" value="{{ $newWorkOrdNo }}"
                                class="form-control">
                        </div>
                    </div>

                    <div class="row mt-3">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>Customer</label>
                                <select name="customerid" id="customerid" class="select2 customer form-control"
                                    style="height: 40px!important; border-radius: 10px!important">
                                    <option disabled selected>Select Customer</option>
                                    @foreach($customers as $item)
                                    <option value="{{ $item->id }}">{{ $item->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>Move Date</label>
                                <input disabled name="movedate" id="movedate" class="form-control">
                            </div>
                        </div>
                    </div>
                </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></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>
                                    "<span id="planname"></span>"
                                </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>
        </div>
        <!-- /.card -->
    </div>
</section>


<!-- <script src="https://code.jquery.com/jquery-3.1.1.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>


<script type="text/javascript">
$('#customerid').on('change', function() {
    var id = $(this).val();
    console.log(id);

    $.ajax({
        type: "GET",
        url: "/admin/user-planname/" + id,
        dataType: "json",

        success: function(response) {
            console.log(response);
            $('#planname').text(response.planname);
            $('#movedate').val(response.movedate);
        }
    });
})
</script>

<!-- Add Row Delete Row Functionalities -->
<script>
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-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();
            $('#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();
            $('#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();
            $('#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