@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">
            <div class="col-sm-9">
                <h2 class="text-white">Add Claim Items</h2>
            </div>
            <div class="col-md-3">
                <a href="{{ route('claimdetail', $data->id) }}" class="btn btn-dark" style="margin-left:70px">
                    <i class="fa fa-eye"></i> Claim Detail
                </a>
            </div>
        </div>
    </div>
</section>

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

                <div class="card-header">
                    <p><b>Customer Name :</b> <span>{{ $user->name }}</span></p>
                    <p><b>Plan Name :</b> <span id="planname">{{ $plan->name }}</span></p>
                    <input type="text" name="claimId" value="{{ $data->id }}" hidden>
                </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">
                        <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>
                <!-- /.card-body -->
                <div class="card-footer">
                    <button type="submit" class="btn itembutton px-4 text-left">Submit</button>
                </div>
            </form>
        </div>
        <!-- /.card -->
    </div>
</section>


<!-- 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);
}

function delField() {
    $("#ClaimItem_row_" + counter).remove();
    counter--;
}
</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();
    console.log(itemtype);
    console.log(name);

    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 = parseFlo at(amount) * parseFloat(price);
    $('#itemtotal' + id).val(total);
})
</script>


@endsection