@extends('layouts.admin')

@section('content')

@php
    $environment_data = getEnvironmentData();
    $id_verification_section = $environment_data['ID_VERIFICATION_SECTION'];
@endphp

<div class="card">
    <div class="card-header d-flex justify-content-sm-between">
        <p>{{ trans('global.show') }} {{ trans('cruds.user.title') }}</p>

        {{-- <a class="btn btn-default" href="{{ route('admin.users.index') }}">{{ trans('global.back_to_list') }}</a> --}}
    </div>
    
    <div class="card-body">
        <ul class="nav nav-tabs" id="userTab" role="tablist">
            <li class="nav-item" role="presentation">
                <a class="nav-link {{ request('tab') == 'personal' || !request('tab') ? 'active' : '' }}" id="personal-tab" data-bs-toggle="tab" href="#personal" role="tab">{{ trans('global.tabbing.personal_info') }}</a>
            </li>
            @if($user->kyc_status != 0)
                @if($id_verification_section == 'enable')
                    <li class="nav-item" role="presentation">
                        <a class="nav-link {{ request('tab') == 'kyc' ? 'active' : '' }}" id="kyc-tab" data-bs-toggle="tab" href="#kyc" role="tab">{{ trans('global.tabbing.address_kyc') }}</a>
                    </li>
                @else
                    <li class="nav-item" role="presentation">
                        <a class="nav-link {{ request('tab') == 'kyc' ? 'active' : '' }}" id="kyc-tab" data-bs-toggle="tab" href="#kyc" role="tab">{{ trans('global.tabbing.address') }}</a>
                    </li>
                @endif
            @endif
            @if($user->seller_status != '')
                <li class="nav-item" role="presentation">
                    <a class="nav-link {{ request('tab') == 'seller' ? 'active' : '' }}" id="seller-tab" data-bs-toggle="tab" href="#seller" role="tab">{{ trans('global.tabbing.became_a_seller_profile') }}</a>
                </li>
            @endif
        </ul>
        <div class="tab-content" id="userTabContent">
            <!-- Personal Info Tab -->
            <div class="tab-pane fade {{ request('tab') == 'personal' || !request('tab') ? 'show active' : '' }}" id="personal" role="tabpanel">
                <table class="table table-bordered">
                    {{-- <tr>
                        <th>{{ trans('cruds.user.fields.roles') }}</th>
                        <td>
                            @foreach($user->roles as $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>{{ ucfirst($user->first_name) }}</td>
                    </tr>
                    <tr>
                        <th>{{ trans('cruds.user.fields.last_name') }}</th>
                        <td>{{ ucfirst($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>
                        @php $country_details = getCountrydetailsById($user->country_id); @endphp
                        <td>
                            @if(isset($country_details->top_level_domain))
                                <span class="d-flex">
                                    <img class="mr-1" src="{{ env('app_url') }}/uploads/flags/{{ $country_details->top_level_domain }}.png"> {{ $country_details->country_name }} (+{{ $country_details->phone_code }}) 
                                </span>
                            @endif
                        </td>
                    </tr>
                    <tr>
                        <th>{{ trans('cruds.user.fields.phone') }}</th>
                        <td>{{ $user->phone }}</td>
                    </tr>
                </table>
            </div>
            
            <!-- Address & KYC Tab -->
            <div class="tab-pane fade {{ request('tab') == 'kyc' ? 'show active' : '' }}" id="kyc" role="tabpanel">
                <table class="table table-bordered">
                    @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>
                                {{ $user->document_type == 1 ? 'Passport' : ($user->document_type == 2 ? 'Driving Licence' : 'Any Government ID') }}
                            </td>
                        </tr>
                    @endif

                    @if($user->document_picture != '')
                        <tr>
                            <th>{{ trans('cruds.user.fields.document_picture') }}</th>
                            <td>
                                <a href="{{ asset($user->document_picture) }}" class="fancybox-popup">
                                    <img src="{{ asset($user->document_picture) }}" style="width: 150px; height: 150px;">
                                </a>
                            </td>
                        </tr>
                    @endif

                    <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" name="kyc_status" id="kyc_status" required>
                                        <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 kyc_status_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">{{ trans('global.approved') }}</span>
                                @elseif($user->kyc_status == 3)
                                    <span class="text-danger">{{ trans('global.rejected') }}</span>
                                @endif
                            @endif
                        </td>
                    </tr>
                </table>
            </div>
            
            <!-- Became a Seller Profile Tab -->
            <div class="tab-pane fade {{ request('tab') == 'seller' ? 'show active' : '' }}" id="seller" role="tabpanel">
                <table class="table table-bordered">
                    <tr>
                        <th>{{ trans('cruds.user.fields.bank_name') }}</th>
                        <td>{{ $user->seller_bank_name }}</td>
                    </tr>
                    <tr>
                        <th>{{ trans('cruds.user.fields.iban') }}</th>
                        <td>{{ $user->seller_iban }}</td>
                    </tr>
                    <tr>
                        <th>{{ trans('cruds.user.fields.profile_image') }}</th>
                        <td>
                            @if($user->seller_profile_image)
                                <a href="{{ asset($user->seller_profile_image) }}" class="fancybox-popup">
                                    <img src="{{ asset($user->seller_profile_image) }}" style="width: 150px; height: 150px;">
                                </a>
                            @endif
                        </td>
                    </tr>
                    <tr>
                        <th>{{ trans('cruds.user.fields.cover_image') }}</th>
                        <td>
                            @if($user->seller_cover_image)
                                <a href="{{ asset($user->seller_cover_image) }}" class="fancybox-popup">
                                    <img src="{{ asset($user->seller_cover_image) }}" style="width: 150px; height: 150px;">
                                </a>
                            @endif
                        </td>
                    </tr>
                    <tr>
                        <th>{{ trans('cruds.user.fields.description') }}</th>
                        <td>{{ $user->seller_description }}</td>
                    </tr>
                    <tr>
                        <th>{{ trans('cruds.user.fields.seller_status') }}</th>
                        <td>
                            @if($user->seller_status == 1)
                                <div class="form-group seller_status_div">
                                    <select class="form-control" name="seller_status" id="seller_status" required>
                                        <option value disabled {{ old('seller_status', null) === null ? 'selected' : '' }}>{{ trans('global.pleaseSelect') }}</option>
                                        <option value="2" {{ old('seller_status', $user->seller_status) === 2 ? 'selected' : '' }}>Approved</option>
                                        <option value="3" {{ old('seller_status', $user->seller_status) === 3 ? 'selected' : '' }}>Rejected</option>
                                    </select>
                                </div>
                                <div class="submit_btn_div">
                                    <button class="btn btn-danger create-submit-btn seller_status_btn" type="submit">
                                        {{ trans('global.save') }}
                                    </button>
                                </div>
                                <div class="d-flex justify-content-between">
                                    <span class="seller_status_text text-success d-none"></span> 
                                    <span class="reject_reason_success text-success"></span>
                                </div>
                            @else
                                @if($user->seller_status == 2)
                                    <span class="text-success">{{ trans('global.approved') }}</span>
                                @elseif($user->seller_status == 3)
                                    <span class="text-danger">{{ trans('global.rejected') }}</span>
                                @endif
                            @endif
                        </td>
                        <tr>
                            <th>{{ trans('cruds.user.fields.seller_commission_percentage') }}</th>
                            <td>{{ $user->seller_commission_percentage }}</td>
                        </tr>
                    </tr>
                </table>
            </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">{{ trans('global.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="KYCrejectReason" 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>
                            {{ trans('global.submit') }}
                        </button>
                        <button type="button" class="btn btn-secondary cancel_btn" data-bs-dismiss="modal">{{ trans('global.cancel') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="sellerRejectModal" tabindex="-1" aria-labelledby="sellerRejectModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="sellerRejectModalLabel">{{ trans('global.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="sellerRejectForm">
                    <textarea id="sellerRejectReason" 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>
                            {{ trans('global.submit') }}
                        </button>
                        <button type="button" class="btn btn-secondary cancel_btn" data-bs-dismiss="modal">{{ trans('global.cancel') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            let tabs = document.querySelectorAll(".nav-link");
            
            tabs.forEach(tab => {
                tab.addEventListener("click", function (event) {
                    event.preventDefault();
                    let newTab = this.getAttribute("href").substring(1);
                    
                    let url = new URL(window.location.href);
                    url.searchParams.set("tab", newTab);
                    window.history.pushState({}, "", url); // Update the URL without reloading
                    
                    // Activate the selected tab
                    document.querySelectorAll(".tab-pane").forEach(pane => pane.classList.remove("show", "active"));
                    document.getElementById(newTab).classList.add("show", "active");

                    // Set active class on nav links
                    tabs.forEach(t => t.classList.remove("active"));
                    this.classList.add("active");
                });
            });
        });

        $(document).ready(function() {
            // KYC Status Change Code Start
            $('#kyc_status').change(function() {
                let selectedStatus = $(this).val();

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

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

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

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

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

                updateKYCStatus(3, kyc_rejection_reason);
            });

            function updateKYCStatus(kyc_status, kyc_rejection_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(),
                        kyc_status: kyc_status,
                        kyc_rejection_reason: kyc_rejection_reason,
                        _token: "{{ csrf_token() }}"
                    },
                    success: function(response) {
                        $('.kyc_status_div').addClass('d-none');
                        $('.submit_btn_div').addClass('d-none');

                        if (kyc_status == 2) {
                            $('.kyc_status_text').text('Approved').addClass('text-success').removeClass('d-none');
                        } else if (kyc_status == 3) {
                            $('.kyc_status_text').text('Rejected').addClass('text-danger').removeClass('d-none');
                            $('#kycRejectModal').modal('hide');
                            $('#KYCrejectReason').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');

                $('#seller_status').val('');
                $('#sellerRejectModal').modal('hide');
            });

            // Seller Status Change Code Start
            $('#seller_status').change(function() {
                let selectedStatus = $(this).val();

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

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

            $('.seller_status_btn').click(function(e) {
                var seller_status = $('#seller_status').val();
                if(seller_status != ''){
                    updateSellerStatus(2, '');
                }
            });

            $('#sellerRejectForm').submit(function(e) {
                e.preventDefault();
                let seller_rejection_reason = $('#sellerRejectReason').val();

                if (seller_rejection_reason == '') {
                    $('.reject_reason_error').text("{{ trans('global.seller_reject_reason') }}");
                    return;
                }

                updateSellerStatus(3, seller_rejection_reason);
            });

            function updateSellerStatus(seller_status, seller_rejection_reason) {
                let submitBtn = $('.submit-btn');
                let spinner = submitBtn.find('.spinner-border');

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

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

                        if (seller_status == 2) {
                            $('.seller_status_text').text('Approved').addClass('text-success').removeClass('d-none');
                        } else if (seller_status == 3) {
                            $('.seller_status_text').text('Rejected').addClass('text-danger').removeClass('d-none');
                            $('#sellerRejectModal').modal('hide');
                            $('#sellerRejectReason').val('');
                        }

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

                        spinner.addClass('d-none');
                        submitBtn.prop('disabled', false);
                    },
                    error: function(xhr) {
                        alert("{{ trans('global.something_went_wrong') }}");
                        
                        spinner.addClass('d-none');
                        submitBtn.prop('disabled', false);
                    }
                });
            }
        });
    </script>
@endsection