@extends('agentportal.layouts.layout')

@section('title', 'Transaction Cancellation Details')

@section('page_style')
    <link rel="stylesheet" type="text/css" href="{{ url('dist/assets/plugins/custom/datatables/datatables.bundle.css') }}">
@endsection

@section('content')
<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
    <div class="d-flex flex-column-fluid">
        <!--begin::Container-->
        <div class="container">
            <!--begin::Card-->
            <div class="card card-custom">
                <div class="card-header">
                    <div class="card-title">
                        <h3 class="card-label">Cancellation Request Details - {{ $transaction->reference_no }}</h3>
                    </div>
                    <div class="card-toolbar">
                        <a href="{{ url()->previous() }}" role="button" class="btn btn-primary mx-2">{{ __('message_lang.BTN_BACK') }}</a>
                    </div>
                </div>

                <div class="card-body">

                    <div class="row mb-3">

                        {{-- cancellation request details  --}}
                        <div class="col-12 col-sm-6">
                            <div class="p-4 m-1 shadow-sm">
                                <div class="mb-2 border-bottom">
                                    <h5>Request Details</h5>
                                </div>

                                <table class="table table-hover table-borderless">
                                    <tr>
                                        <th>Created On:</th>
                                        <td>{{ $cancellationRequest->created_at }}</td>
                                    </tr>
                                    <tr>
                                        <th>Status:</th>
                                        <td>{{ $cancellationRequest->status }}</td>
                                    </tr>
                                    <tr>
                                        <th>Created By:</th>
                                        <td>
                                            <span class="mr-2"> {{ $createdBy->user->first_name ?? '' }}</span>
                                            <span> {{ $createdBy->user->last_name ?? '' }}</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>Reason for Cancellation:</th>
                                        <td>
                                            {{ $createdBy->comments ?? '' }}
                                        </td>
                                    </tr>
                                </table>

                                @if ($cancellationRequest->status === 'pending')
                                    <div class="mb-2">
                                        <button type="button" onclick="showTxnUpdateForm({{ $cancellationRequest->id }})" class="btn btn-sm btn-primary">
                                            update status
                                        </button>
                                    </div>
                                @endif
                            </div>
                        </div>
                        {{-- end of cancellation request details --}}

                        {{-- status update logs  --}}
                        <div class="col-12 col-sm-6">
                            <div class="p-4 m-1 shadow-sm">
                                <div class="mb-2 border-bottom">
                                    <h5>Request Action Log</h5>
                                </div>

                                <table class="table table-hover table-bordered">
                                    <thead>
                                        <tr>
                                            <th>Updated By</th>
                                            <th>Updated On</th>
                                            <th>Action</th>
                                            <th>Reason</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($cancellationRequest->logs as $log)
                                            <tr>
                                                <td> 
                                                    <span class="mr-2"> {{ $log->user->first_name ?? '' }}</span>
                                                    <span> {{ $log->user->last_name ?? '' }}</span>
                                                </td>
                                                <td>{{ $log->created_at }}</td>
                                                <td>{{ $log->action }}</td>
                                                <td>{{ $log->comments }}</td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        {{-- end of status update logs --}}
                    </div>
                    
                    <div class="row">

                        {{-- transaction detils  --}}
                        <div class="col-12 col-sm-6">

                            <div class="m-1 p-4 shadow-sm">
                                <div class="mb-2 border-bottom">
                                    <h5>Transaction Details</h5>
                                </div>

                                <table class="table table-hover table-borderless">
                                    <tr>
                                        <th>Reference No:</th>
                                        <td>
                                            <a href="{{ route('agentportal.direct_deposit_transactions.show', ['id' => base64_encode($transaction->id)]) }}">
                                                {{ $transaction->reference_no }}
                                            </a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>Amount:</th>
                                        <td>{{ $transaction->receiving_amount }}</td>
                                    </tr>
                                    <tr>
                                        <th>Status:</th>
                                        <td>{{ $transaction->txn_status }}</td>
                                    </tr>
                                    <tr>
                                        <th>Created At:</th>
                                        <td>{{ $transaction->created_at }}</td>
                                    </tr>
                                </table>
                            </div>

                        </div>
                        {{-- end of transaction details --}}

                    </div>

                </div>
            </div>
            <!--end::Card-->
        </div>
        <!--end::Container-->
    </div>
    <!--end::Entry-->
</div>


{{-- a modal to show transaction update form --}}
<div class="modal fade" id="txnUpdateModal" tabindex="-1" role="dialog" aria-labelledby="txnUpdateModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="txnUpdateModalLabel">Update Cancellation Request</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Please add a reason for the stateus change and submit the request</p>
                <form action="{{ route('agentportal.txn_cancellation_request.update-cancellation-request', ['id' => $cancellationRequest->id]) }}" method="POST">
                    <div class="form-group">
                        <label for="newStatus">New Status</label>
                        <select class="form-control" id="newStatus" name="newStatus" required>
                            <option value="">Select Status</option>
                            <option value="completed">Completed</option>
                            <option value="rejected">Rejected</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="comment">Reason</label>
                        <textarea class="form-control" id="comment" name="comment" rows="3" required></textarea>
                    </div>
                    <input type="hidden" name="_token" value="{{ csrf_token() }}">
                    <button type="submit" class="btn btn-primary mr-2">Submit</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                </form>
            </div>
        </div>
    </div>
</div>
<!--end: Modal-->

@endsection


@section('page_script')
<script type="text/javascript">
    
    function showTxnUpdateForm (id = null) {
        $('#txnUpdateModal').modal('show');
    }

</script>
@endsection