@extends('layouts.master')
@section('title')
    @lang('translation.verify-user')
@endsection

@section('css')
    <!-- Select2 css-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css"
          integrity="sha512-nMNlpuaDPrqlEls3IX/Q56H36qvBASwb3ipuo3MxeWbsQB1881ox0cRv7UPTgBlriqoynt35KjEwgGUeUXIPnw==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
@endsection

@section('content')
    <!-- Breadcrumb Trail -->
    @component('components.breadcrumb')
        @slot('li_1')
            @lang('translation.user')
        @endslot
        @slot('title')
            @lang('translation.verify')
        @endslot
    @endcomponent

    <!-- Session Messages -->
    @include('partials.session')

    <!-- Personal Information -->
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                    <h1 class="card-title mb-0">Personal Information</h1>
                </div>
                @if($user->email_verified_at == null)
                    <div class="alert alert-warning fade show" role="alert">
                        <span>The user's email address has not been verified yet.</span>
                    </div>
                @endif
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="First Name" class="form-label">First Name</label>
                            <input disabled type="text" class="form-control" name="first_name" placeholder="John" value="{{ $user->first_name }}">
                        </div>

                        <div class="col-md-6 mb-3">
                            <label for="Last Name" class="form-label">Last Name</label>
                            <input disabled type="text" class="form-control" name="last_name" placeholder="Doe" value="{{ $user->last_name }}">
                        </div>

                        <div class="col-md-6 mb-3 form-group">
                            <label for="Username" class="form-label">Username</label>
                            <div class="form-icon">
                                <input disabled type="text" class="form-control form-control-icon" name="username" id="iconInput" placeholder="johndoe7"
                                       value="{{ $user->username }}">
                                <i class="ri-user-line"></i>
                            </div>
                        </div>
                        @if(auth()->user()->hasRole(App\Models\User::SuperAdmin))
                            <div class="col-md-6 mb-3 form-group">
                                <label for="iconInput" class="form-label">Email</label>
                                <div class="form-icon">
                                    <input disabled type="email" class="form-control form-control-icon" name="email" id="iconInput" placeholder="johndoe@gmail.com"
                                           value="{{ $user->email }}">
                                    <i class="ri-mail-unread-line"></i>
                                </div>
                            </div>
                        @endif
                        <div class="col-md-6 mb-3 form-group">
                            <label for="iconInput" class="form-label">Welcome Notes</label>
                            <div class="form-icon">
                                <select name="welcome_note" id="welcome_note" class="form-control form-control-icon">
                                    @foreach ($welcome_notes as $welcome_note)
                                        <option
                                            value="{{$welcome_note->note}}" @selected($welcome_note->note == get_settings('default_welcome_note'))>{{mb_strimwidth($welcome_note->note, 0, 50, "...")}}</option>
                                    @endforeach
                                </select>
                                <i class="ri-article-fill"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Verification Documents -->
    <div class="row">
        <div class="col-xxl-4">
            <div class="card">
                <div class="card-body">
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <h5 class="card-title">Verification Documents</h5>
                        </div>
                        <div class="col-md-6">
                            <!-- Buttons for suspend or approve actions could be added here if required -->
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-bordered mb-2">
                            <tbody>
                            <tr>
                                <th class="ps-0" scope="row">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Selfie :</th>
                                <td class="text-muted text-center">
                                    @if($user->detail && $user->detail->selfie)
                                        <a href="{{ url('/user/verify/account/download/selfie/'.encrypt($user->id)) }}">Preview</a>
                                    @else
                                        <span>File not available</span>
                                    @endif
                                </td>
                            </tr>
                            <tr>
                                <th class="ps-0" scope="row">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ID Card (Front) :</th>
                                <td class="text-muted text-center">
                                    @if($user->detail && $user->detail->idCardFront)
                                        <a href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#idCardFrontModal" id="idCardFrontLink">Preview</a>
                                    @else
                                        <span>File not available</span>
                                    @endif
                                </td>
                            </tr>
                            <tr>
                                <th class="ps-0" scope="row">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ID Card (Back) :</th>
                                <td class="text-muted text-center">
                                    @if($user->detail && $user->detail->idCardBack)
                                        <a href="{{ url('/user/verify/account/download/idCardBack/'.encrypt($user->id)) }}">Preview</a>
                                    @else
                                        <span>File not available</span>
                                    @endif
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <!-- Approve Modal -->
                    <div class="modal fade" id="approveModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog"
                         aria-labelledby="staticBackdropLabel" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered" role="document">
                            <div class="modal-content">
                                <div class="modal-body text-center p-5">
                                    <lord-icon
                                        src="https://cdn.lordicon.com/lupuorrc.json"
                                        trigger="loop"
                                        colors="primary:#121331,secondary:#08a88a"
                                        style="width:120px;height:120px">
                                    </lord-icon>

                                    <div class="mt-4">
                                        <h4 class="mb-3">Approve Account</h4>
                                        <p class="text-muted mb-4">Are you sure you want to approve this account?</p>
                                        <div class="hstack gap-2 justify-content-center">
                                            <form action="{{ url('/user/verify/account/approve/'.encrypt($user->id)) }}" method="POST" enctype="multipart/form-data">
                                                @csrf
                                                <input type="hidden" id="welcome_note_input" name="welcome_note" value="">
                                                <a href="javascript:void(0);" class="btn btn-light" data-bs-dismiss="modal">Close</a>
                                                <input type="submit" class="btn btn-success" value="Approve" onclick="$(this).parents('form').submit()" id="approvebtn">
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Suspend Modal -->
                    <div id="suspendModal" class="modal fade" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
                        <div class="modal-dialog modal-dialog-centered">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="myModalLabel">Suspend Account</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <form action="{{ url('/user/verify/account/suspend/'.encrypt($user->id)) }}" method="POST" enctype="multipart/form-data">
                                    @csrf
                                    <div class="modal-body">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <textarea required class="form-control" name="suspension_reason" cols="30" rows="3"
                                                          placeholder="Enter the reason why user account got suspended."></textarea>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                                        <button type="submit" class="btn btn-danger">Suspend</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <!-- ID Card Front Modal -->
                    <div class="modal fade" id="idCardFrontModal" tabindex="-1" aria-labelledby="idCardFrontModalLabel" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered modal-lg">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="idCardFrontModalLabel">ID Card (Front)</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body text-center">
                                    <img src="{{ url('/user/verify/account/download/idCardFront/'.encrypt($user->id)) }}" id="idCardFrontImage" class="img-fluid"
                                         alt="ID Card Front Image">
                                </div>
                                <form id="verificationForm" action="{{ url('/user/verify/account/approve/'.encrypt($user->id)) }}" method="POST">
                                    @csrf
                                    <div class="card">
                                        <div class="card-header">
                                            <h5 class="card-title">Verification Details</h5>
                                        </div>
                                        <div class="card-body">
                                            <div class="form-group">
                                                <label for="id" class="form-label">ID Number</label>
                                                <input type="text" class="form-control" name="id_number" value="{{old('id_number', $user->id_number ?? '') }}" required>
                                                @error('id_number')
                                                <div class="error text-danger">{{ $message }}</div>
                                                @enderror
                                            </div>
                                            <div class="form-group mt-2">
                                                <label for="state" class="form-label">State</label>
                                                <select name="state" class="form-control select2" required>
                                                    <option value="">--Select State--</option>
                                                    @foreach($states as $state)
                                                        <option value="{{$state->id}}" {{$state->id == $user->state ? 'selected' : '' }}>{{$state->name}}</option>
                                                    @endforeach
                                                </select>
                                                @error('state')
                                                <div class="error text-danger">{{ $message }}</div>
                                                @enderror
                                            </div>
                                            <div class="form-group mt-2">
                                                <label for="date_of_birth" class="form-label">Date of Birth</label>
                                                <input type="date" class="form-control" id="date_of_birth" name="date_of_birth"
                                                       value="{{old('date_of_birth', $user->date_of_birth ?? '') }}">
                                                @error('date_of_birth')
                                                <div class="error text-danger">{{ $message }}</div>
                                                @enderror
                                            </div>
                                            <div class="form-group mt-2">
                                                <label for="id_card_expire" class="form-label">ID Card Expiry Date</label>
                                                <input type="date" class="form-control" id="id_card_expire" name="id_card_expire"
                                                       value="{{old('id_card_expire',  $user->id_card_expire ?? '') }}">
                                                @error('id_card_expire')
                                                <div class="error text-danger">{{ $message }}</div>
                                                @enderror
                                            </div>
                                            @if ($user->account_verification == \App\Models\User::Suspended)
                                                <hr>
                                                <div class="form-group mt-2">
                                                    <label for="suspension_reason" class="form-label">Suspend Reason</label>
                                                    <textarea class="form-control" name="suspension_reason"
                                                              id="suspension_reason">{{ $user->suspension_reason ?? '' }}</textarea>
                                                </div>
                                            @endif
                                        </div>
                                        <div class="card-footer">
                                            @if ($user->account_verification == \App\Models\User::Approved)
                                                <div class="d-flex justify-content-between">
                                                    <input type="hidden" id="action" name="action" value="edit">
                                                    <a style="float: right;margin-left:5px;" type="button" data-bs-toggle="modal" data-bs-target="#suspendModal"
                                                       class="btn btn-danger btn-sm">Suspend</a>
                                                    <button type="submit" id="approveButton" class="btn btn-sm btn-primary">Save</button>
                                                </div>
                                            @endif
                                            @if ($user->account_verification == \App\Models\User::UnderReview)
                                                <button type="submit" id="approveButton" class="btn btn-sm btn-primary float-end">Approve</button>
                                            @endif
                                            @if ($user->account_verification == \App\Models\User::Suspended)
                                                <div class="d-flex justify-content-between">
                                                    <input type="hidden" id="action" name="action" value="edit">
                                                    <button type="submit" id="approveButton" class="btn btn-sm btn-primary">Approve</button>
                                                    <button type="submit" id="suspendButton" class="btn btn-sm btn-danger">Save</button>
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-footer">
                    @if ($user->account_verification == \App\Models\User::UnderReview || $user->account_verification == \App\Models\User::Approved)
                        <a style="float: right;margin-left:5px;" type="button" data-bs-toggle="modal" data-bs-target="#suspendModal" class="btn btn-danger btn-sm">Suspend</a>
                    @endif
                </div>
            </div>
        </div>
        @if ($user->account_verification == 'Under Review' || $user->account_verification == 'Suspended')
            <div class="col-xxl-4">
                <form action="{{url('/user/verify/account/approve/'.encrypt($user->id))}}" method="POST">
                    @csrf
                    <div class="card">
                        <div class="card-header">
                            <h1 class="card-title">Verification Details</h1>
                        </div>
                        <div class="card-body">
                            <div class="form-group">
                                <label for="id" class="form-label">ID Number</label>
                                <input type="text" class="form-control" name="id_number" value="{{old('id_number', $user->id_number ?? '') }}" required>
                                @error('id_number')
                                <div class="error text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="form-group mt-2">
                                <label for="state" class="form-label">State</label>
                                <select name="state" class="form-control select2" required>
                                    <option value="">--Select State--</option>
                                    @foreach($states as $state)
                                        <option value="{{$state->id}}" {{$state->id == $user->state ? 'selected' : '' }}>{{$state->name}}</option>
                                    @endforeach
                                </select>
                                @error('state')
                                <div class="error text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="form-group mt-2">
                                <label for="date_of_birth" class="form-label">Date of Birth</label>
                                <input type="date" class="form-control" id="date_of_birth" name="date_of_birth" value="{{old('date_of_birth', $user->date_of_birth ?? '') }}">
                                @error('date_of_birth')
                                <div class="error text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="form-group mt-2">
                                <label for="id_card_expire" class="form-label">ID Card Expiry Date</label>
                                <input type="date" class="form-control" id="id_card_expire" name="id_card_expire"
                                       value="{{old('id_card_expire',  $user->id_card_expire ?? '') }}">
                                @error('id_card_expire')
                                <div class="error text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="card-footer">
                            <button class="btn btn-sm btn-primary float-end">Approve</button>
                        </div>
                    </div>
                </form>
            </div>
        @endif
    </div>
@endsection

@section('script')
    <!-- jQuery CDN -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <!-- Modal JS -->
    <script src="{{ URL::asset('assets/js/pages/modal.init.js') }}"></script>
    <!-- App JS -->
    <script src="{{ URL::asset('/assets/js/app.min.js') }}"></script>
    <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>
    <script>
        $('.select2').select2();
        $('#welcome_note_input').val($('#welcome_note').val());
        $('#welcome_note').change(function () {
            $('#welcome_note_input').val($(this).val());
        })

        const idNumberField = document.getElementById('id_number');
        const stateField = document.getElementById('state');
        const suspensionReasonField = document.getElementById('suspension_reason');
        const approveButton = document.getElementById('approveButton');
        const suspendButton = document.getElementById('suspendButton');

        function setRequiredFields(isApprove) {
            if (isApprove) {
                idNumberField.setAttribute('required', 'required');
                stateField.setAttribute('required', 'required');
                suspensionReasonField && suspensionReasonField.removeAttribute('required');
            } else {
                idNumberField.removeAttribute('required');
                stateField.removeAttribute('required');
                suspensionReasonField && suspensionReasonField.setAttribute('required', 'required');
            }
        }

        approveButton.addEventListener('click', function (event) {
            setRequiredFields(true)
            document.getElementById('verificationForm').action = "{{ url('/user/verify/account/approve/' . encrypt($user->id)) }}";
        });

        suspendButton.addEventListener('click', function (event) {
            setRequiredFields(false);
            document.getElementById('verificationForm').action = "{{ url('/user/verify/account/suspend/' . encrypt($user->id)) }}";
        });
    </script>
@endsection