@extends('backend.layouts.app')
@section('content')
    <div class="page-content">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <div class="row">
                            <div class="col-2 card-title"><h4>{{$page_title}}</h4></div>
                            <div class="col-10 card-title">
                                <div class="row">
                                    <div class="col-4">
                                        <h4>User Info</h4>
                                        <b>Name:</b> {{$fund->name}}
                                        <a href="{{imageUrl($fund->staff_image)}}" target="_blank">
                                            <img src="{{imageUrl($fund->staff_image)}}" height="50px" width="50px">
                                        </a> <br>
                                        <b>Father / Husband Name:</b> {{$fund->husband_father_name}} <br>
                                        <b>Contact Number:</b> {{$fund->contact_number}} <br>
                                        <b>Address:</b> {{$fund->address}} <br>
                                        <b>DMM Name:</b> {{$fund->dmm_name}} <br>
                                        <b>DSM Name:</b> {{$fund->dsm_name}}
                                    </div>
                                    <div class="col-4">
                                        <h4>Amount Info</h4>
                                        <b>Requested Amount:</b> ₹ {{$fund->amount}} <br>
                                        <b>Approved Amount:</b> ₹ {{$fund->approved_amount??'0'}} <br>
                                        <b>File Charge:</b> ₹ {{$fund->filing_charge??'0'}} <br>
                                        <b>Duration:</b> {{$fund->duration??'0'}} Month<br>
                                    </div>
                                    <div class="col-4">
                                        <h4>Added By</h4>
                                        {{$fund->addedBy?$fund->addedBy->name:"--"}} <br>
                                        <b>Sakhi Name:</b> {{$fund->sakhi_name}}
                                        <a href="{{imageUrl($fund->member_image)}}" target="_blank">
                                            <img src="{{imageUrl($fund->member_image)}}" height="50px" width="50px">
                                        </a>
                                        <br>
                                        <b>Sakhi Phone:</b> {{$fund->sakhi_phone}} <br>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th class="text-center">#</th>
                                        <th class="text-center">Date</th>
                                        <th class="text-center">Amount</th>
                                        <th class="text-center">Extra Amount</th>
                                        <th class="text-center">Final Amount</th>
                                        <th class="text-center">Late Fine</th>
                                        <th class="text-center">Payment Status</th>
                                        <th class="text-center">Payment Detail</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($fund->emi as $key=> $emi)
                                        <tr>
                                            <td class="text-center">{{$key+1}}</td>
                                            <td class="text-center">{{$emi->date}}</td>
                                            <td class="text-center">{{$emi->amount}}</td>
                                            <td class="text-center">{{$emi->extra_amount}}</td>
                                            <td class="text-center">{{$emi->final_amount}}</td>
                                            <td class="text-center">
                                                @if($emi->payment_status == 'pending')
                                                    <input type="number" class="form-control" id="late_fine_{{$emi->id}}" value="{{$emi->late_fine??'0'}}">
                                                @else
                                                    {{$emi->late_fine}}
                                                @endif
                                            </td>
                                            <td class="text-center">
                                                @if($emi->payment_status == 'pending')
                                                    <select id="status_{{$emi->id}}" class="form-select" onchange="changeEmiStatus('{{$emi->id}}')">
                                                        <option value="pending">Pending</option>
                                                        <option value="approved">Approved</option>
                                                    </select>
                                                @else
                                                    {{ucfirst($emi->payment_status)}}
                                                @endif
                                            </td>
                                            <td class="text-center">
                                                @isset($emi->payment_detail['changed_by'])
                                                    {{App\Models\User::where('id',$emi->payment_detail['changed_by'])->first()?->name}} <br>
                                                @endisset
                                                @isset($emi->payment_detail['changed_at'])
                                                    {{date('d-m-Y h:i A',strtotime($emi->payment_detail['changed_at']))}} <br>
                                                @endisset
                                            </td>
                                        </tr>
                                    @empty

                                        <tr>
                                            <td colspan="10" class="text-center text-danger">
                                                <i class="link-icon" data-feather="frown" style="width: 50px; height:50px;"></i><br>
                                                Opps!! There Are No Data Found..
                                            </td>
                                        </tr>

                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>

        function changeEmiStatus(emi_id){
            var late_fine = $('#late_fine_'+emi_id).val();
            $.ajax({
                url: "{{route('fund.emi.status')}}",
                type: "POST",
                data: {
                    _token: "{{csrf_token()}}",
                    emi_id: emi_id,
                    late_fine: late_fine,
                    status: $('#status_'+emi_id).val()
                },
                success: function(response){
                    location.reload();
                }
            });
        }

    </script>

@endsection