@extends('back.layout')

@section('title')
{{ __('a15') }} - {{ __('n1') }}
@endsection

@php
    $submits = \App\Models\Submit::where('user_id', '=', auth()->user()->id)->where('status', '=', 'Pending')->get();

    $pending_balance = 0;
    foreach ($submits as $submit) {
        $pending_balance += \App\Models\Task::find($submit->task_id)->price;
    }
@endphp

@section('css')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css" />
@endsection

@section('content')
    <div class="content-wrapper content-wrapper--with-bg">
        <div class="d-flex justify-content-between" style="flex-direction: row-reverse">
            <div>
                <h1 class="page-title fw-bold dir">{{ __('a16') }}</h1>
            </div>
            <div>
                <a href="" data-bs-toggle="modal" data-bs-target="#editModal" class="btn btn-success">
                    <i class="fa-solid fa-edit"></i>
                </a>
            </div>
        </div>
        <div class="page-content dir" style="overflow-x: scroll;">
            <table class="table">
                <thead>
                    <tr>
                        <th class="fw-bold text-center fs-6">{{ __('a17') }}</th>
                        <th class="fw-bold text-center fs-6">{{ auth()->user()->name }}</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="fw-bold text-center fs-6">{{ __('a18') }}</td>
                        <td class="fw-bold text-center fs-6">{{ auth()->user()->email }}</td>
                    </tr>
                    <tr>
                        <td class="fw-bold text-center fs-6">{{ __('a19') }}</td>
                        <td class="fw-bold text-center fs-6">{{ auth()->user()->phone }}</td>
                    </tr>
                    <tr>
                        <td class="fw-bold text-center fs-6">{{ __('a20') }}</td>
                        <td class="fw-bold text-center fs-6">{{ auth()->user()->wallet }}</td>
                    </tr>
                    <tr>
                        <td class="fw-bold text-center fs-6">{{ __('a21') }}</td>
                        <td class="fw-bold text-center fs-6">{{ $pending_balance + auth()->user()->balance }} Trx</td>
                    </tr>
                    <tr>
                        <td class="fw-bold text-center fs-6">{{ __('a22') }}</td>
                        <td class="fw-bold text-center fs-6">{{ auth()->user()->balance }} TRX</td>
                    </tr>
                    <tr>
                        <td class="fw-bold text-center fs-6">{{ __('a23') }}</td>
                        <td class="fw-bold text-center fs-6">{{ $pending_balance }} TRX</td>
                    </tr>
                    <tr>
                        <td class="fw-bold text-center fs-6">{{ __('a24') }}</td>
                        <td class="fw-bold text-center fs-6">{{ auth()->user()->created_at }}</td>
                    </tr>
                    <tr>
                        <td class="fw-bold text-center fs-6">{{ __('a25') }}</td>
                        <td class="fw-bold text-center fs-6">{{ auth()->user()->updated_at }}</td>
                    </tr>
                    <tr>
                        <td class="fw-bold text-center fs-6">{{ __('a26') }}</td>
                        <td class="fw-bold text-center fs-6">{{ auth()->user()->ip }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    {{-- Modals --}}

    {{-- Edit User Data --}}
    <div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header" style="flex-direction: row-reverse;">
                    <h1 class="modal-title fs-6 fw-bold" id="editModalLabel">{{ __('a27') }}</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body dir">
                    <form action="{{ route('editUser') }}" method="POST">

                        @csrf
                        @method('POST')

                        <input type="hidden" name="id" value="{{ auth()->user()->id }}">

                        @if (auth()->user()->id != 1)
                            @if (auth()->user()->edit > 0)
                                <p class="fw-bold text-dark">
                                    <span class="text-danger">*</span>
                                    {{ __('a28') }}
                                </p>
                            @else
                                <p class="fw-bold text-dark">
                                    <span class="text-danger">*</span>
                                    {{ __('a29') }}
                                </p>
                            @endif

                            @if (auth()->user()->edit1 > 0)
                                <p class="fw-bold text-dark">
                                    <span class="text-danger">*</span>
                                    {{ __('a30') }}
                                </p>
                            @else
                                <p class="text-dark fw-bold">
                                    <span class="text-danger">*</span>
                                    {{ __('a31') }}
                                </p>
                            @endif
                        @endif

                        <div class="mb-3">
                            <label for="name" class="fw-bold fs-6 mb-1">{{ __('a32') }}</label>
                            <input type="text" class="form-control shadow-none fw-bold dir" name="name" id="name"
                                value="{{ auth()->user()->name }}" required
                                @if (auth()->user()->id != 1)
                                    @if (auth()->user()->edit == 0)
                                        readonly
                                    @endif
                                @endif
                                >
                        </div>

                        <div class="mb-3">
                            <label for="email" class="fw-bold fs-6 mb-1">{{ __('a33') }}</label>
                            <input type="email" class="form-control shadow-none fw-bold dir" name="email" id="email"
                                value="{{ auth()->user()->email }}" required
                                @if (auth()->user()->id != 1)
                                    @if (auth()->user()->edit1 == 0)
                                        readonly
                                    @endif
                                @endif
                                >
                        </div>

                        <div class="mb-3">
                            <label for="phoneInt" class="fw-bold fs-6 mb-1">{{ __('a34') }}</label>
                            <input type="text" class="form-control shadow-none fw-bold dir" name="phone" id="phoneInt"
                                value="{{ auth()->user()->phone }}" required>
                        </div>

                        <div class="mb-3">
                            <label for="wallet" class="fw-bold fs-6 mb-1">{{ __('a35') }}</label>
                            <input type="text" class="form-control shadow-none fw-bold dir" name="wallet" id="wallet"
                                value="{{ auth()->user()->wallet }}" 
                                @if (auth()->user()->id != 1)
                                readonly
                                @endif
                                required>
                        </div>

                        <hr>
                        <a href="" class="w-100 d-block btn btn-primary fw-bold"
                            data-bs-target="#exampleModalToggle2" data-bs-toggle="modal" data-bs-dismiss="modal">
                            {{ __('a36') }}</a>
                        <hr>

                        <button type="submit" class="btn btn-success submitForm">{{ __('a37') }}</button>

                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('a38') }}</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {{-- Change Password Modal --}}
    <div class="modal fade" id="exampleModalToggle2" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header" style="flex-direction: row-reverse;">
                    <h1 class="modal-title fs-6 fw-bold" id="editModalLabel">{{ __('a39') }}</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body dir">
                    <form action="{{ route('changePassword') }}" method="POST">

                        @csrf
                        @method('POST')

                        <div class="mb-3">
                            <label for="password2" class="fw-bold fs-6 mb-1">{{ __('a40') }}</label>
                            <input type="password" class="form-control  shadow-none fw-bold dir" name="password" autoComplete="new-password" onkeyup="checkPass2($(this).val())"
                                id="password2" pattern="^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$" required>
                                <p class="p-more-8 fw-bold text-danger mb-1" style="display: none;font-size: 13px;">
                                {{ __('a41') }}
                                </p>
                                <p class="p-must-number fw-bold text-danger mb-1" style="display: none;font-size: 13px;">
                                {{ __('a42') }}
                                </p>
                                <p class="p-must-spical fw-bold text-danger mb-1" style="display: none;font-size: 13px;">
                                {{ __('a43') }}
                                </p>
                                <p class="p-must-ca fw-bold text-danger mb-1" style="display: none;font-size: 13px;">
                                {{ __('a44') }}
                                </p>
                                <p class="p-must-lo fw-bold text-danger mb-1" style="display: none;font-size: 13px;">
                                {{ __('a45') }}
                                </p>
                        </div>

                        <div class="mb-3">
                            <label for="password_confirmation2" class="fw-bold fs-6 mb-1">{{ __('a46') }}</label>
                            <input type="password" class="form-control shadow-none fw-bold dir" name="password_confirmation"
                                id="password_confirmation2" required>
                                <small class="text-danger fw-bold passwordError2" style="display: none;">{{ __('a47') }}</small>
                        </div>

                        <button type="submit" class="btn btn-success submitForm signUp">{{ __('a48') }}</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('a49') }}</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('jss')
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
<script>
        const phoneInputField = document.querySelector("#phoneInt");
        const phoneInput = window.intlTelInput(phoneInputField, {
            utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
            initialCountry: "sa",
            separateDialCode: true,
            autoHideDialCode: true,
            autoPlaceholder: "OFF",
            nationalMode: true,
            separateDialCode: true
        });
        
        $(function() {
            $('.iti.iti--allow-dropdown').addClass('w-100');
            $('.iti.iti--allow-dropdown').addClass('shadow-none');
            $('.iti__country-list').css({
                'left': '0',
                'textAlign': 'right'
            });
        });
        
        $('#password_confirmation2').on('keyup', function () {
            if ($('#password_confirmation2').val() != $('#password2').val()) {
                $('.passwordError2').slideDown();
                $('.signUp').addClass('disabled');
            } else {
                $('.passwordError2').slideUp();
                $('.signUp').removeClass('disabled');
            }
        });

        function checkPass2(password) {
            var xx = 0;
            
            // 8 Or More
            if (password.length > 2) {
                if (password.length < 8) {
                    $('.p-more-8').slideDown();
                    xx = 0;
                } else {
                    $('.p-more-8').slideUp();
                    xx = 1;
                }
            }
            
            // Number
            if (password.length > 4) {
                var matches = password.match(/\d+/g);
                if (matches == null) {
                    $('.p-must-number').slideDown();
                    xx = 0;
                } else {
                    $('.p-must-number').slideUp();
                    xx = 1;
                }
            }
            
            // Special char
            if (password.length > 4) {
                var matches2 = password.match(/\W|_/g);
                if (matches2 == null) {
                    $('.p-must-spical').slideDown();
                    xx = 0;
                } else {
                    $('.p-must-spical').slideUp();
                    xx = 1;
                }
            }
            
            // Capital char
            if (password.length > 4) {
                var matches3 = password.match(/[A-Z]/g);
                if (matches3 == null) {
                    $('.p-must-ca').slideDown();
                    xx = 0;
                } else {
                    $('.p-must-ca').slideUp();
                    xx = 1;
                }
            }
            
            
            // Lower char
            if (password.length > 4) {
                var matches4 = password.match(/[a-z]/g);
                if (matches4 == null) {
                    $('.p-must-lo').slideDown();
                    xx = 0;
                } else {
                    $('.p-must-lo').slideUp();
                    xx = 1;
                }
            }
            
            if (password.length == 0) {
                $('.p-must-number').slideUp();
                $('.p-more-8').slideUp();
                $('.p-must-spical').slideUp();
                $('.p-must-ca').slideUp();
                $('.p-must-lo').slideUp();
            }
            
            if (xx == 0) {
                $('.signUp').addClass('disabled');
            } else {
                $('.signUp').removeClass('disabled');
            }
            
        }
</script>
@endsection