@extends('layouts.admin')
@section('content')

<div class="card">
    <div class="card-header">
        {{ trans('global.show') }} {{ trans('cruds.user.title') }}
    </div>

    <div class="card-body">
        <div class="form-group">
            <div class="form-group">
                <a class="btn btn-default" href="{{ route('admin.users.index') }}">
                    {{ trans('global.back_to_list') }}
                </a>
            </div>
            <table class="table table-bordered table-striped">
                <tbody>
                    <tr>
                        <th>
                            {{ trans('cruds.user.fields.roles') }}
                        </th>
                        <td>
                            @foreach($user->roles as $key => $roles)
                                <span class="label label-info">{{ $roles->title }}</span>
                            @endforeach
                        </td>
                    </tr>
                    <tr>
                        <th>
                            {{ trans('cruds.user.fields.id') }}
                        </th>
                        <td>
                            {{ $user->id }}
                        </td>
                    </tr>
                    <tr>
                        <th>
                            {{ trans('cruds.user.fields.first_name') }}
                        </th>
                        <td>
                            {{ $user->first_name }}
                        </td>
                    </tr>
                    <tr>
                        <th>
                            {{ trans('cruds.user.fields.last_name') }}
                        </th>
                        <td>
                            {{ $user->last_name }}
                        </td>
                    </tr>
                    <tr>
                        <th>
                            {{ trans('cruds.user.fields.email') }}
                        </th>
                        <td>
                            {{ $user->email }}
                        </td>
                    </tr>
                    <tr>
                        <th>
                            {{ trans('cruds.user.fields.phone_code') }}
                        </th>
                        <td>
                            {{ App\Models\User::PHONE_CODE_SELECT[$user->phone_code] ?? '' }}
                        </td>
                    </tr>
                    <tr>
                        <th>
                            {{ trans('cruds.user.fields.phone') }}
                        </th>
                        <td>
                            {{ $user->phone }}
                        </td>
                    </tr>
                    @if($user->address != '')
                        <tr>
                            <th>
                                {{ trans('cruds.user.fields.address') }}
                            </th>
                            <td>
                                {{ $user->address }}
                            </td>
                        </tr>
                    @endif
                    @if($user->document_type != '')
                        <tr>
                            <th>
                                {{ trans('cruds.user.fields.document_type') }}
                            </th>
                            <td>
                                @if($user->document_type == 1)
                                    Passport
                                @elseif($user->document_type == 2)
                                    Driving Licence
                                @elseif($user->document_type == 3)
                                    Any Government ID
                                @endif
                            </td>
                        </tr>
                    @endif
                    @if($user->document_picture != '')
                        <tr>
                            <th>
                                {{ trans('cruds.user.fields.document_picture') }}
                            </th>
                            <td>
                                <img src="{{ $user->document_picture ? asset($user->document_picture) : '' }}" alt="Document Preview" style="width: 150px; height: 150px; margin-bottom: 10px;">
                            </td>
                        </tr>
                        <tr>
                            <th>
                                {{ trans('cruds.user.fields.kyc_status') }}
                            </th>
                            <td>
                                @if($user->kyc_status == 1)
                                    <div class="form-group kyc_status_div">
                                        <select class="form-control {{ $errors->has('kyc_status') ? 'is-invalid' : '' }}" name="kyc_status" id="kyc_status">
                                            <option value disabled {{ old('kyc_status', null) === null ? 'selected' : '' }}>{{ trans('global.pleaseSelect') }}</option>
                                            <option value="2" {{ old('kyc_status', $user->kyc_status) === 2 ? 'selected' : '' }}>Approved</option>
                                            <option value="3" {{ old('kyc_status', $user->kyc_status) === 3 ? 'selected' : '' }}>Rejected</option>
                                        </select>
                                    </div>
                                    <div class="submit_btn_div">
                                        <button class="btn btn-danger create-submit-btn" type="submit">
                                            {{ trans('global.save') }}
                                        </button>
                                    </div>
                                    <div class="d-flex justify-content-between">
                                        <span class="kyc_status_text text-success d-none"></span> 
                                        <span class="reject_reason_success text-success"></span>
                                    </div>
                                @else
                                    @if($user->kyc_status == 2)
                                        <span class="text-success">Approved</span>
                                    @elseif($user->kyc_status == 3)
                                        <span class="text-danger">Rejected</span>
                                    @endif
                                @endif
                            </td>
                        </tr>
                    @endif
                </tbody>
            </table>
            <div class="form-group">
                <a class="btn btn-default" href="{{ route('admin.users.index') }}">
                    {{ trans('global.back_to_list') }}
                </a>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="kycRejectModal" tabindex="-1" aria-labelledby="kycRejectModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="kycRejectModalLabel">Enter Rejection Reason</h5>
                <button type="button" class="btn-close cancel_btn" data-bs-dismiss="modal" aria-label="Close">X</button>
            </div>
            <div class="modal-body">
                <form id="kycRejectForm">
                    <textarea id="rejectReason" class="form-control" placeholder="Enter reason for rejection..."></textarea>
                    <input type="hidden" id="rejectUserId" value="{{ $user->id }}">
                    <span class="reject_reason_error text-danger"></span>
                    <div class="mt-3 text-right">
                        <button type="submit" class="btn btn-success submit-btn">
                            <span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
                            Submit
                        </button>
                        <button type="button" class="btn btn-secondary cancel_btn" data-bs-dismiss="modal">Cancel</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            $('#kyc_status').change(function() {
                let selectedStatus = $(this).val();

                if (selectedStatus == "3") {
                    $('.reject_reason_error').text('');
                    $('#kycRejectModal').modal('show');
                }

                $('.reject_reason_success').text('');
            });

            $('.create-submit-btn').click(function(e) {
                var kyc_status = $('#kyc_status').val();
                if(kyc_status != ''){
                    updateKYCStatus(2, '');
                }
            });

            $('#kycRejectForm').submit(function(e) {
                e.preventDefault();
                let reason = $('#rejectReason').val();

                if (reason == '') {
                    $('.reject_reason_error').text('Please enter KYC reject reason');
                    return;
                }

                updateKYCStatus(3, reason);
            });

            function updateKYCStatus(status, reason) {
                let submitBtn = $('.submit-btn');
                let spinner = submitBtn.find('.spinner-border');

                spinner.removeClass('d-none');
                submitBtn.prop('disabled', true);

                $.ajax({
                    url: "{{ route('admin.users.kyc_status_update') }}",
                    type: "POST",
                    data: {
                        user_id: $('#rejectUserId').val(),
                        status: status,
                        reason: reason,
                        _token: "{{ csrf_token() }}"
                    },
                    success: function(response) {
                        $('.kyc_status_div').addClass('d-none');
                        $('.submit_btn_div').addClass('d-none');

                        if (status == 2) {
                            $('.kyc_status_text').text('Approved').addClass('text-success').removeClass('d-none');
                        } else if (status == 3) {
                            $('.kyc_status_text').text('Rejected').addClass('text-danger').removeClass('d-none');
                            $('#kycRejectModal').modal('hide');
                            $('#rejectReason').val('');
                        }

                        $('.reject_reason_success').text(response.message);

                        spinner.addClass('d-none');
                        submitBtn.prop('disabled', false);
                    },
                    error: function(xhr) {
                        alert('Error updating KYC status. Please try again.');
                        spinner.addClass('d-none');
                        submitBtn.prop('disabled', false);
                    }
                });
            }

            $('.cancel_btn').click(function(e) {
                $('#kyc_status').val('');
                $('#kycRejectModal').modal('hide');
            });
        });
    </script>
@endsection