@extends('layouts.portal.layout')

@section('content')

<style>
.accordion .card-header:after {
    font-family: 'FontAwesome';
    content: "\f068";
    float: right;
}

.accordion .card-header.collapsed:after {
    /* symbol for "collapsed" panels */
    content: "\f067";
}
</style>

<!-- Claim -->
<div class="container">
    <div class="card mt-2">
        <div class="card-body">

            <!-- Claim Offers Section -->
            <h2 class="text-center"><b><u>Claim Offers</u></b></h2>

            <div class="container">

                <div id="accordion" class="accordion">
                    <div class="card mt-4" style="border:0.5px solid #d6d8d8">
                        <div class="card-header collapsed bg-dark text-light p-3" data-toggle="collapse"
                            href="#collapseOne" style="border-radius: 5px;">
                            <a class="card-title text-light">
                                <i class="fas fa-reply"></i> <b>Reply an Offer</b>
                            </a>
                        </div>
                        <div class="card-body collapse" id="collapseOne" data-parent="#accordion">

                            @if($offer != "")

                            <div class="row">
                                <div class="col-md-12">
                                    <div class="p-3 pb-2 mb-3"
                                        style="background-color: #e9ecef; border-radius: 5px; display:inline-block">

                                        <p><b>Admin</b> created an<b> {{ $abbreviation }} offer
                                                ${{ $offer->amount }}</b>
                                        </p>
                                        <img src="{{ asset('img/team-3.jpg') }}" class="rounded-circle" width=40>
                                        <span style="display:flex; margin-left: 62px; margin-top: -34px;">
                                            {{ $offer->description }}
                                        </span>
                                        <span style="float:right">
                                            <small>{{ $offer->created_at }}</small>
                                        </span>
                                    </div>
                                </div>
                            </div>

                            <form action="{{ route('offerreply') }}" method="post">
                                {{ csrf_field() }}
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <input type="text" name="claimId" value="{{ $data->id }}" hidden>
                                            <label><b>Remarks</b></label>
                                            <textarea name="remarks" class="form-control" rows="4" class="txtarea"
                                                style="height:50%; width:100%"></textarea>
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <label><b>Status</b></label><br>
                                        <label class="radio-inline">
                                            <input type="radio" name="status" class="statcheckbox" value="Accepted">
                                            Accept
                                            the Offer
                                        </label>
                                        <label class="radio-inline ml-2">
                                            <input type="radio" name="status" class="statcheckbox" value="Rejected">
                                            Request a Call
                                        </label>
                                    </div>

                                    <div class="col-md-12 mt-4" id="compensationcheckbox" style="display:none">
                                        <label>
                                            <input type="checkbox" onchange="myfunction()" id="compensation"
                                                name="compensation">
                                            This acceptance is in full and final
                                            compensation and upon such payment you hereby release us from any further
                                            obligations that may have occurred
                                            during the execution of services on your move.
                                        </label><br>
                                    </div>

                                    <div class="col-md-12 mt-4">
                                        <button type="submit" class="btn btn-primary px-4 btnsubmit">Submit</button>
                                    </div>
                                </div>
                            </form>
                            @else
                            <h6>No new offer available in this claim</h6>
                            @endif
                        </div>
                    </div>
                </div>

                <div class="row mt-5">
                    <div class="col-md-12">
                        <div class="card mb-5" style="border: 1.5px solid #d6d8d8">
                            <div class="card-header bg-dark">
                                <h6 class="text-light"><b><i class="fas fa-ticket"></i> Recent Chat</b></h6>
                            </div>
                            <div class="card-body">

                                @foreach($offerChatArray as $item)
                                <div class="p-3 pb-2 mb-3"
                                    style="background-color: #e9ecef; border-radius: 5px; display:inline-block">

                                    <p>
                                        @if($item['name'] == 'Admin')
                                        <b>{{ $item['name'] }}</b> created an <b>{{ $item['abbreviation'] }} offer
                                            ${{ $item['amount'] }}
                                        </b>
                                        @else
                                        <b>{{ $item['name'] }}</b> has {{ $item['status'] }} to <b> Admin offer

                                        </b>
                                        @endif
                                    </p>

                                    @if($item['name'] == 'Admin')
                                    <img src="{{ asset('img/team-3.jpg') }}" class="rounded-circle" width=40>
                                    @else
                                    <img src="{{ asset('img/team-4.jpg') }}" class="rounded-circle" width=40>
                                    @endif

                                    <span style="display:flex; margin-left: 62px; margin-top: -34px;">
                                        @if($item['name'] == 'Admin')
                                        {{ $item['description'] }}
                                        @else
                                        {{ $item['remarks'] }}
                                        @endif
                                    </span>

                                    <span style="float:right">
                                        <small>{{ $item['created_at'] }}</small>
                                    </span>
                                </div>
                                <br>
                                @endforeach

                                <!-- <div class="p-3 pb-2 mb-3"
                                    style="background-color: #e9ecef; border-radius: 5px; display:inline-block">
                                    <p><b>Mir Maaz Ali</b> has rejected to <b>Admin offer $20</b></p>
                                    <img src="{{ asset('img/team-3.jpg') }}" class="rounded-circle" width=40>
                                    <span style="display:flex; margin-left: 62px; margin-top: -34px;">
                                        It is a long established fact that a reader will
                                        be distracted by the readable content of a page when looking at its layout.
                                    </span>
                                    <span style="float:right">
                                        <small>2022-08-31 04:30:07</small>
                                    </span>
                                </div>

                                <div class="p-3 pb-2 mb-3"
                                    style="background-color: #e9ecef; border-radius: 5px; display:inline-block">
                                    <p><b>Admin</b> created an <b>2nd offer $15</b></p>
                                    <img src="{{ asset('img/team-4.jpg') }}" class="rounded-circle" width=40>
                                    <span style="display:flex; margin-left: 62px; margin-top: -34px;">
                                        All the Lorem Ipsum generators on the Internet tend to repeat predefined
                                        chunks as necessary.
                                    </span>
                                    <span style="float:right">
                                        <small>2022-08-31 04:52:44</small>
                                    </span>
                                </div> -->

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

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


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

<!-- Onchange status radio button script -->
<script>
$('.statcheckbox').on('click', function() {

    var acceptoffer = $(this).is(':checked');
    var acceptval = $(this).val();
    // console.log(acceptoffer);
    // console.log(acceptval);

    if (acceptoffer == true && acceptval == "Accepted") {
        $("#compensationcheckbox").show()
        $(".btnsubmit").prop("disabled", true);
    } else {
        $("#compensationcheckbox").hide();
        $(".btnsubmit").prop("disabled", false);
    }
})
</script>

<!-- Onchange checkbox button script -->
<script>
function myfunction() {
    var compensation = $('#compensation').is(':checked');
    // console.log(compensation);

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

@endsection