@extends('backend.layouts.app')
<style>
    .col-form-label {
        font-family: "Open Sans", sans-serif;
        font-size: .75rem !important;
        font-weight: 400 !important;
        line-height: 1.5 !important;
    }
</style>
@section('content')
<!-- Content wrapper -->
<div class="content-wrapper">
    <!-- Content -->
    <div class="container-xxl flex-grow-1 container-p-y">
        @if($rolename == 'Publisher')
        <div class="row">
            <div class="col-lg-3 col-sm-12">
                <div class="widget widget-stats bg-gradient-blue m-b-10">
                    <div class="stats-icon stats-icon-lg"><i class="fa fa-dollar-sign fa-fw"></i></div>
                    <div class="stats-content">
                        <div class="stats-title">TOTAL EARNED</div>
                        <div class="stats-number">$ {{ $totalRevenue }}</div>
                        <!-- <div class="stats-progress progress">
                            <div class="progress-bar" style="width: 40.5%;"></div>
                        </div>
                        <div class="stats-desc">Better than last week (40.5%)</div> -->
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-sm-12">
                <div class="widget widget-stats bg-gradient-teal m-b-10">
                    <div class="stats-icon stats-icon-lg"><i class="fa fa-globe fa-fw"></i></div>
                    <div class="stats-content">
                        <div class="stats-title">PENDING PAYMENT</div>
                        <div class="stats-number">$ {{ $totalRequested }}</div>
                        <!-- <div class="stats-progress progress">
                            <div class="progress-bar" style="width: 70.1%;"></div>
                        </div>
                        <div class="stats-desc">Better than last week (70.1%)</div> -->
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-sm-12">
                <div class="widget widget-stats bg-gradient-purple m-b-10">
                    <div class="stats-icon stats-icon-lg"><i class="fa fa-dollar-sign fa-fw"></i></div>
                    <div class="stats-content">
                        <div class="stats-title">AVAILABLE BALANCE</div>
                        <div class="stats-number">$ {{ $balanecPayment }}</div>
                        <!-- <div class="stats-progress progress">
                            <div class="progress-bar" style="width: 40.5%;"></div>
                        </div>
                        <div class="stats-desc">Better than last week (40.5%)</div> -->
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-sm-12">
                <div class="widget widget-stats bg-gradient-orange m-b-10">
                    <div class="stats-icon stats-icon-lg"><i class="fa fa-dollar-sign fa-fw"></i></div>
                    <div class="stats-content">
                        <div class="stats-title">TOTAL GAINS</div>
                        <div class="stats-number">$ {{ $totalApproved }}</div>
                        <!-- <div class="stats-progress progress">
                            <div class="progress-bar" style="width: 40.5%;"></div>
                        </div>
                        <div class="stats-desc">Better than last week (40.5%)</div> -->
                    </div>
                </div>
            </div>
        </div>
        @endif
        <div class="row">
            <!-- User Sidebar -->
            <div class="col-xl-4 col-lg-5 col-md-5 order-1 order-md-0">
                <!-- User Card -->
                <div class="card mb-6">
                    <div class="card-body pt-12">
                        <div class="user-avatar-section" id="user_name">
                            <div class=" d-flex align-items-center flex-column">
                                <!-- <img class="img-fluid rounded mb-4" src="{{asset('assets/img/avatars/10.png')}}" height="120" width="120" alt="User avatar" /> -->
                                @if ($user->avatar=='')
                                    <img src="{{ asset('assets/img/avatars/10.png')}}" alt="logo" class="d-block w-px-200 h-px-200 rounded" id="avatar_show">
                                @else
                                    <img src="{{ asset('storage/avatar/')}}/{{$user->avatar}}" alt="logo" class="d-block w-px-200 h-px-200 rounded" id="avatar_show">
                                @endif
                                <div class="user-info text-center">
                                    @if ($user)
                                    <h5>{{$user->fullname}}</h5>
                                        @foreach($user->roles as $role)
                                        <span class="badge bg-label-danger rounded-pill">{{ $role->name }}</span>
                                        @endforeach
                                    @endif
                                </div>
                            </div>
                        </div>
                        <h5 class="pb-4 border-bottom mb-4">@lang('messages.user-insights.details')</h5>
                        <div class="info-container">
                            @if ($user)
                            <ul class="list-unstyled mb-6" id="user_details">
                                <li class="mb-2">
                                    <span class="h6">@lang('messages.user-insights.username'):</span>
                                    <span>{{$user->username}}</span>
                                </li>
                                <li class="mb-2">
                                    <span class="h6">@lang('messages.user-insights.email'):</span>
                                    <span>{{$user->email}}</span>
                                </li>
                                <li class="mb-2">
                                    <span class="h6">@lang('messages.user-insights.skype_id'):</span>
                                    <span>{{$user->skype_id}}</span>
                                </li>
                                <li class="mb-2">
                                    <span class="h6">@lang('messages.user-insights.status'):</span>
                                    @if($user->status === 'Active')
                                    <span class="badge bg-label-success rounded-pill">{{ $user->status }}</span>
                                    @elseif($user->status === 'Inactive')
                                    <span class="badge bg-label-secondary rounded-pill">{{ $user->status }}</span>
                                    @else
                                    <span class="badge bg-label-primary rounded-pill">{{ $user->status }}</span>
                                    @endif
                                </li>
                                <li class="mb-2">
                                    <span class="h6">@lang('messages.user-insights.role'):</span>
                                    @foreach($user->roles as $role)
                                    <span>{{ $role->name }}</span>
                                    @endforeach
                                </li>
                                <li class="mb-2">
                                    <span class="h6">@lang('messages.user-insights.created_date'):</span>
                                    <span>{{ date('d-M-Y', strtotime($user->created_at)) }}</span>
                                </li>
                                <li class="mb-2">
                                    <div class="d-flex justify-content-center">
                                        <a href="javascript:;" class="btn btn-primary me-4" data-target="#editUser" data-toggle="modal"><i class="fa fa-edit"></i> @lang('messages.user-insights.edit')</a>
                                    </div>
                                </li>
                                @if($rolename === 'Publisher')
                                    <hr>
                                    <li class="mb-2">
                                        <span class="h6">@lang('messages.user-insights.payment_methods'):</span>
                                    </li>
                                    <hr>
                                    <li class="mb-2">
                                        <span class="h6">@lang('messages.user-insights.usdt'):</span>
                                        <span>{{ @$paymentMethod->usdt_address }}</span>
                                    </li>
                                    <li class="mb-2">
                                        <span class="h6">@lang('messages.user-insights.btc'):</span>
                                        <span>{{ @$paymentMethod->btc_address }}</span>
                                    </li>
                                    <li class="mb-2">
                                        <span class="h6">@lang('messages.user-insights.payoneer'):</span>
                                        <span>{{ @$paymentMethod->payoneer_email }}</span>
                                    </li>
                                    <li class="mb-2">
                                        <span class="h6">@lang('messages.user-insights.paypal'):</span>
                                        <span>{{ @$paymentMethod->paypal_email }}</span>
                                    </li>
                                    <li class="mb-2">
                                        <span class="h6">@lang('messages.user-insights.bank_name'):</span>
                                        <span>{{ @$paymentMethod->bank_name }}</span>
                                    </li>
                                    <li class="mb-2">
                                        <span class="h6">@lang('messages.user-insights.account_number'):</span>
                                        <span>{{ @$paymentMethod->account_number }}</span>
                                    </li>
                                    <li class="mb-2">
                                        <span class="h6">@lang('messages.user-insights.payee_name'):</span>
                                        <span>{{ @$paymentMethod->payee_name }}</span>
                                    </li>
                                    <li class="mb-2">
                                        <span class="h6">@lang('messages.user-insights.bank_address'):</span>
                                        <span>{{ @$paymentMethod->bank_address }}</span>
                                    </li>
                                    <li class="mb-2">
                                        <span class="h6">@lang('messages.user-insights.bank_city'):</span>
                                        <span>{{ @$paymentMethod->bank_city }}</span>
                                    </li>
                                @endif
                            </ul>
                            @endif
                            <div class="d-flex justify-content-center">
                                @if(auth()->user()->hasRole('Super Admin') || auth()->user()->hasPermissionTo('Create Payment Method') || auth()->user()->hasPermissionTo('Update Payment Method'))
                                    <a href="javascript:;" class="btn btn-primary me-4 px-4" data-target="#paymentMethodModel" data-toggle="modal"><i class="fa fa-plus-circle"></i> @lang('messages.payments.payment_method')</a>
                                @endif                            
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /User Card -->
            </div>
            <!--/ User Sidebar -->
            @if($rolename == 'Publisher')
                <div class="col-xl-8 col-lg-7 col-md-7">
                    <h1 class="page-header">
                        @lang('messages.payments.payments_list')
                    </h1>
                    <div class="panel panel-inverse">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                @lang('messages.payments.payments_list')
                            </h4>
                            <div class="panel-heading-btn">
                                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a>
                                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success reload" data-id="dataTablePaymentList"><i class="fa fa-redo"></i></a>
                                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-warning" data-click="panel-collapse"><i class="fa fa-minus"></i></a>
                                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-danger" data-click="panel-remove"><i class="fa fa-times"></i></a>
                            </div>
                        </div>
                        <div class="panel-body">
                            <table class="datatables-menus table" id="dataTablePaymentList">
                                <thead>
                                    <tr>
                                        <th>@lang('messages.payments.inv_no')</th>
                                        <th>@lang('messages.payments.payment_method')</th>
                                        <th>@lang('messages.payments.amount')</th>
                                        <th>@lang('messages.payments.requested')</th>
                                        <th>@lang('messages.payments.approved')</th>
                                        <th>@lang('messages.payments.status')</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- Table body content goes here -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="col-xl-12 col-lg-12 col-md-12 mt-4 mb-4">
                    <h1 class="page-header mb-0">
                        <div class="row">
                            <div class="col-md-9 col-12">
                                @lang('messages.revenue.revenue_list')
                            </div>
                            <div class="col-md-3 col-12">
                                <div class="form-group">
                                    <label for="bs-rangepicker-range-revenue" class="col-form-label">Ranges :</label>
                                    <div class="input-group" id="default-daterange">
                                        <input type="text" name="bs-rangepicker-range" id="bs-rangepicker-range-revenue" class="form-control">
                                        <span class="input-group-append">
                                        <span class="input-group-text"><i class="fa fa-calendar"></i></span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </h1>
                    <div class="panel panel-inverse">
                        <div class="panel-heading">
                            <h4 class="panel-title">@lang('messages.revenue.revenue_list')</h4>
                            <div class="panel-heading-btn">
                                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a>
                                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success reload" data-id="dataTableRevenueList"><i class="fa fa-redo"></i></a>
                                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-warning" data-click="panel-collapse"><i class="fa fa-minus"></i></a>
                                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-danger" data-click="panel-remove"><i class="fa fa-times"></i></a>
                            </div>
                        </div>
                        <div class="panel-body">
                            <table class="datatables-menus table" id="dataTableRevenueList">
                                <thead>
                                    <tr>
                                        <th>@lang('messages.revenue.sr_no')</th>
                                        <th>@lang('messages.revenue.date')</th>
                                        <th>@lang('messages.revenue.conversion')</th>
                                        <th>@lang('messages.revenue.revenue')</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- Table body content goes here -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="col-xl-12 col-lg-12 col-md-12">
                    <h1 class="page-header">
                        @lang('messages.websites.websites_list')
                    </h1>
                    <div class="panel panel-inverse">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                @lang('messages.websites.websites_list')
                            </h4>
                            <div class="panel-heading-btn">
                                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a>
                                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success reload" data-id="dataTableWebsiteList"><i class="fa fa-redo"></i></a>
                                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-warning" data-click="panel-collapse"><i class="fa fa-minus"></i></a>
                                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-danger" data-click="panel-remove"><i class="fa fa-times"></i></a>
                            </div>
                        </div>
                        <div class="panel-body">
                            <table class="datatables-menus table" id="dataTableWebsiteList">
                                <thead>
                                    <tr>
                                        <th>@lang('messages.websites.sr_no')</th>
                                        <th>@lang('messages.websites.category')</th>
                                        <th>@lang('messages.websites.protocol')</th>
                                        <th>@lang('messages.websites.website_url')</th>
                                        <th>@lang('messages.websites.website_title')</th>
                                        <th>@lang('messages.websites.keywords')</th>
                                        <th>@lang('messages.websites.status')</th>
                                        <th>@lang('messages.websites.date')</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- Table body content goes here -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="col-xl-12 col-lg-12 col-md-12 mt-4 mb-4">
                    <h1 class="page-header mb-0">
                        <div class="row">
                            <div class="col-md-6 col-12">
                                @lang('messages.stats.stats')
                            </div>
                            <div class="col-md-6 col-12">
                                <div class="row">
                                    <div class="col-md-6 col-12">
                                        <div class="form-group">
                                            <label for="id_site" class="col-form-label">@lang('messages.codes.website_url')</label>
                                            <select id="id_site" name="id_site" class="form-control" aria-label="Default select example">
                                                <option value="">Select site</option>
                                                @foreach($websites as $website)
                                                <option value="{{ $website->id }}">{{ $website->website_url }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-12">
                                        <div class="form-group">
                                            <label for="bs-rangepicker-range" class="col-form-label">Ranges :</label>
                                            <div class="input-group" id="default-daterange">
                                                <input type="text" name="bs-rangepicker-range" id="bs-rangepicker-range" class="form-control" name="date_range">
                                                <span class="input-group-append">
                                                <span class="input-group-text"><i class="fa fa-calendar"></i></span>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </h1>
                    <div class="panel panel-inverse">
                        <div class="panel-heading">
                            <h4 class="panel-title">@lang('messages.stats.stats')</h4>
                            <div class="panel-heading-btn">
                                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a>
                                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success reload" data-id="dataTableStatsList"><i class="fa fa-redo"></i></a>
                                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-warning" data-click="panel-collapse"><i class="fa fa-minus"></i></a>
                                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-danger" data-click="panel-remove"><i class="fa fa-times"></i></a>
                            </div>
                        </div>
                        <div class="panel-body">
                            <table class="datatables-users table" id="dataTableStatsList">
                                <thead>
                                    <tr>
                                        <th>@lang('messages.stats.sr_no')</th>
                                        <th>@lang('messages.stats.windows')</th>
                                        <th>@lang('messages.stats.mac')</th>
                                        <th>@lang('messages.stats.android')</th>
                                        <th>Linux</th>
                                        <th>@lang('messages.stats.bot')</th>
                                        <th>@lang('messages.stats.other')</th>
                                        <th>@lang('messages.stats.total')</th>
                                        <th data-sort="{{ date('d-m-Y') }}">@lang('messages.stats.date')</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- Table body content goes here -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="col-xl-12 col-lg-12 col-md-12 mt-4 mb-4">
                    <h1 class="page-header mb-0">
                        <div class="row">
                            <div class="col-md-6 col-12">
                                @lang('messages.stats.stats')
                            </div>
                            <div class="col-md-6 col-12">
                                <div class="row">
                                    <div class="col-md-6 col-12">
                                        <div class="form-group">
                                            <label for="id_site_unique" class="col-form-label">@lang('messages.codes.website_url')</label>
                                            <select id="id_site_unique" name="id_site_unique" class="form-control" aria-label="Default select example">
                                                <option value="">Select site</option>
                                                @foreach($websites as $website)
                                                <option value="{{ $website->id }}">{{ $website->website_url }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-12">
                                        <div class="form-group">
                                            <label for="bs-rangepicker-range" class="col-form-label">Ranges :</label>
                                            <div class="input-group" id="dafault-range">
                                                <input type="text" name="bs-rangepicker-unique" id="bs-rangepicker-unique" class="form-control">
                                                <span class="input-group-append">
                                                <span class="input-group-text"><i class="fa fa-calendar"></i></span>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </h1>
                    <div class="panel panel-inverse">
                        <div class="panel-heading">
                            <h4 class="panel-title">@lang('messages.stats.unique')</h4>
                            <div class="panel-heading-btn">
                                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a>
                                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success reload" data-id="dataTableStatsUniqueList"><i class="fa fa-redo"></i></a>
                                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-warning" data-click="panel-collapse"><i class="fa fa-minus"></i></a>
                                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-danger" data-click="panel-remove"><i class="fa fa-times"></i></a>
                            </div>
                        </div>
                        <div class="panel-body">
                            <table class="datatables-users table" id="dataTableStatsUniqueList">
                                <thead>
                                    <tr>
                                        <th>@lang('messages.stats.sr_no')</th>
                                        <th>@lang('messages.stats.windows')</th>
                                        <th>@lang('messages.stats.mac')</th>
                                        <th>@lang('messages.stats.android')</th>
                                        <th>Linux</th>
                                        <th>@lang('messages.stats.bot')</th>
                                        <th>@lang('messages.stats.other')</th>
                                        <th>@lang('messages.stats.total')</th>
                                        <th data-sort="{{ date('d-m-Y') }}">@lang('messages.stats.date')</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- Table body content goes here -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            @endif
        </div>
        @include('backend.payments.paymentMethod',['user_id' => $user_id, 'paymentMethod' => $paymentMethod])
        <!-- Modals -->
        <!-- Edit User Modal -->
        <div class="modal fade" id="editUser" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">@lang('messages.user-insights.edit_user_info')</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    </div>
                        @if ($user)
                        <form id="editUserForm" method="POST" action="{{route('users.update', $user_id)}}" enctype="multipart/form-data" >
                            @csrf
                            @method('PUT')
                            <div class="modal-body">
                                <div class="row">
                                    <div class="col-12 col-md-6">
                                        <div class="form-group">
                                            <label for="first_name">@lang('messages.user-insights.first_name')</label>
                                            <input type="text" id="first_name" name="first_name" class="form-control" value="{{$user->first_name}}" placeholder="@lang('messages.user-insights.first_nameplaceholder')" />
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-6">
                                        <div class="form-group">
                                            <label for="last_name">@lang('messages.user-insights.last_name')</label>
                                            <input type="text" id="last_name" name="last_name" class="form-control" placeholder="@lang('messages.user-insights.last_name_placeholder')" value="{{$user->last_name}}" />
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12 col-md-6">
                                        <div class="form-group">
                                            <label for="username">@lang('messages.user-insights.username')</label>
                                            <input type="text" id="username" name="username" class="form-control" value="{{$user->username}}" placeholder="@lang('messages.user-insights.username_placeholder')" />
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-6">
                                        <div class="form-group">
                                            <label for="email">@lang('messages.user-insights.email')</label>
                                            <input type="text" id="email" name="email" class="form-control" value="{{$user->email}}" placeholder="@lang('messages.user-insights.email_placeholder')" />
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12 col-md-6">
                                        <div class="form-group">
                                            <label for="password">@lang('messages.register.password')</label>
                                            <input type="password" id="password" class="form-control" name="password" placeholder="*********" aria-describedby="password" autocomplete="new-password" />
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-6">
                                        <div class="form-group">
                                            <label for="confirm_password"> @lang('messages.register.confirm_password')</label>
                                            <input type="password" id="confirm_password" class="form-control" name="confirm_password" placeholder="*********" aria-describedby="confirm_password" />
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12 col-md-6">
                                        <div class="form-group">
                                            <label for="id_country">@lang('messages.user-insights.country')</label>
                                            <select id="id_country" name="id_country" class="form-control">
                                                <option value="" selected>@lang('messages.user-insights.select_country')</option>
                                                @foreach($countries as $country)
                                                    <option value="{{ @$country->id }}" @if($user->id_country == $country->id) selected @endif>{{ @$country->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-6">
                                        <div class="form-group">
                                            <label for="id_city">@lang('messages.user-insights.city')</label>
                                            <select id="id_city" name="id_city" class="form-control">
                                                <option value="">@lang('messages.user-insights.select_city')</option>
                                                @foreach($cities as $city)
                                                <option value="{{ @$user->id_city }}" @if($user->id_city == $city->id) selected @endif>{{ @$city->name}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12 col-md-6">
                                        <div class="form-group">
                                            <label for="status">@lang('messages.user-insights.suspended')</label>
                                            <select id="status" name="status" class="form-control" aria-label="Default select example">
                                                <option value="ACTV" @if($user->status == 'ACTV') selected @endif>@lang('messages.users.active')</option>
                                                <option value="NACT" @if($user->status == 'NACT') selected @endif>@lang('messages.users.inactive')</option>
                                                <option value="3"  @if($user->status == '3') selected @endif>@lang('messages.users.suspended')</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-6">
                                        <div class="form-group">
                                            <label for="country-select">@lang('messages.user-insights.role')</label>
                                            <select id="country-select" name="role_id" class="form-control">
                                                @if ($role)
                                                <option value="{{ $role->id }}" selected>{{$role->name}}</option>
                                                @else
                                                <option value="" selected>@lang('messages.user-insights.select_role')</option>
                                                @endif
                                                @foreach($roles as $role)
                                                <option value="{{ $role->id }}">{{ $role->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12 col-md-6">
                                        <div class="form-group">
                                            <label for="avatar">@lang('messages.user-insights.avatar')</label>
                                            <input type="file" id="avatar" class="form-control" name="avatar" aria-describedby="avatar" />
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-6">
                                        <div class="form-group">
                                            <label for="skype_id">@lang('messages.users.skype_id')</label>
                                            <input type="text" id="skype_id" name="skype_id" value="{{$user->skype_id}}" class="form-control" placeholder="@lang('messages.users.skype_id_placeholder')"/>
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="reset" class="btn btn-white" data-dismiss="modal">@lang('messages.user-insights.cancel')</button>
                                    <button type="submit" class="btn btn-success">@lang('messages.user-insights.submit')</button>
                                </div>
                        </form>
                        @endif
                    </div>
                </div>
            </div>
        </div>
        <!--/ Edit User Modal -->
    </div>
    <!-- / Content -->
    @endsection

    @section('footer_scripts')
    <script>
        $(document).ready(function() {
            $('#id_country').change(function() {
                var countryId = $(this).val();

                // Make an AJAX request to fetch cities based on the selected country
                $.ajax({
                    url: '/cities/' + countryId,
                    type: 'GET',
                    success: function(data) {
                        // Populate the city dropdown with fetched cities
                        $('#id_city').empty();
                        $.each(data.cities, function(key, value) {
                            $('#id_city').append('<option value="' + value.id + '">' + value.name + '</option>');
                        });
                    },
                    error: function(xhr, status, error) {
                        console.error(error);
                    }
                });
            });

            $("#editUserForm").submit(function(e) {
                e.preventDefault();
            }).validate({
                rules: {
                    first_name: 'required',
                    last_name: 'required',
                    email: {
                        required: true,
                        email: true,
                    },
                },
                messages: {
                    first_name: 'Please enter your first name',
                    last_name: 'Please enter your last name',
                    email: {
                        required: 'Please enter your email address',
                        email: 'Please enter a valid email address',
                    },
                },
                errorElement: 'span',
                submitHandler: function(form) {
                    var formData = new FormData(form);

                    $.ajax({
                        url: $(form).attr('action'),
                        data: formData,
                        type: 'POST',
                        dataType: 'json',
                        processData: false,
                        contentType: false,
                        success: function(data) {
                            if (data.status) {
                                Swal.fire({
                                    title: data.title,
                                    text: data.message,
                                    icon: 'success',
                                });
                                $("#editUser").modal('hide');
                                setTimeout(() => {
                                    location.reload();
                                }, 3000);
                            }
                        },
                        error: function(xhr, status, error) {
                            var jsonResponse = JSON.parse(xhr.responseText);
                            var errorMessage = "Validation failed";

                            if (jsonResponse.errors) {
                                errorMessage += ": ";
                                errorMessage += Object.values(jsonResponse.errors).join(", ");
                                Swal.fire('', errorMessage, 'error')
                            }
                        }
                    });
                    return false;
                }
            });
            
            var revenueUrl = "{{ route('revenue.index') }}";
            var tableRevenue = $("#dataTableRevenueList").DataTable({
                processing: true,
                serverSide: false,
                order: [[0, 'desc']],
                ajax: {
                    "url": revenueUrl, // Assuming the route for talent index
                    "type": "GET",
                    "data": function(d) {
                        d.id_user = '{{ $user->id }}';
                    }
                },
                columns: [
                    {data: "DT_RowIndex", name: "id"},
                    {data: "created_at"},
                    {data: "conversion"},
                    {data: "revenue"},
                ]
            });

            $("#bs-rangepicker-range-revenue").on("change", function() {
                var date = $(this).val();
                tableRevenue.ajax.url( revenueUrl+'?date_range='+date ).load();
            });

            var statsUrl = "{{ route('stats.index') }}";
            var tableStats = $("#dataTableStatsList").DataTable({
                processing: true,
                serverSide: true,
                order: [[0, 'desc']],
                ajax: {
                    "url": statsUrl, // Assuming the route for talent index
                    "type": "GET",
                    "data": function(d) {
                        d.id_user = '{{ $user->id }}';
                    }
                },
                columns: [
                    { data: "DT_RowIndex", name: "id" },
                    { data: "windows_total"},
                    { data: "mac_total"},
                    { data: "android_total"},
                    { data: "linux_total"},
                    { data: "bot_total"},
                    { data: "other_total"},
                    { data: "total_count"},
                    { data: "created_at_nice", name: 'created_at', type: 'date'},
                ],
                columnDefs : [
                    {"targets":8, "type":"date-eu"}
                ],
            });

            $("#bs-rangepicker-range, #id_site").on("change", function() {
                var date = $("#bs-rangepicker-range").val();
                var id_site = '';
                if($("#id_site").val())
                    id_site = $("#id_site").val();

                tableStats.ajax.url( statsUrl+'?date_range='+date+'&id_site='+id_site).load();
            });

            var statsUniqueUrl = "{{ url('stats/unique') }}";
            var tableStatsUnique = $("#dataTableStatsUniqueList").DataTable({
                processing: true,
                serverSide: true,
                order: [[0, 'desc']],
                ajax: {
                    "url": statsUniqueUrl, // Assuming the route for talent index
                    "type": "GET",
                    "data": function(d) {
                        d.id_user = '{{ $user->id }}';
                        d.type = 'unique';
                    }
                },
                columns: [
                    { data: "DT_RowIndex", name: "id" },
                    { data: "windows_total"},
                    { data: "mac_total"},
                    { data: "android_total"},
                    { data: "linux_total"},
                    { data: "bot_total"},
                    { data: "other_total"},
                    { data: "total_count"},
                    { data: "created_at_nice", name: 'created_at', type: 'date'},
                ],
                columnDefs : [
                    {"targets":8, "type":"date-eu"}
                ],
            });

            $("#bs-rangepicker-unique, #id_site_unique").on("change", function() {
                var date = $("#bs-rangepicker-unique").val();
                var id_site = '';
                if($("#id_site_unique").val())
                    id_site = $("#id_site_unique").val();
                tableStatsUnique.ajax.url( statsUniqueUrl+'?date_range='+date+'&id_site='+id_site ).load();
            });

            var table2 = $("#dataTableWebsiteList").DataTable({
                processing: true,
                serverSide: false,
                order: [[0, 'desc']],
                ajax: {
                    "url": "{{ route('websites.index') }}",
                    "type": "GET",
                    "data": function(d) {
                        d.id_user = '{{$user->id}}';
                    }
                },
                columns: [
                    {data: "DT_RowIndex"},
                    {data: "category.category_name"},
                    {data: "protocol"},
                    {data: "website_url"},
                    {data: "website_title"},
                    {data: "keywords"},
                    {data: "website_status"},
                    {data: "created_at"},
                ]
            });

            var table3 = $("#dataTablePaymentList").DataTable({
                processing: true,
                serverSide: false,
                order: [[0, 'desc']],
                ajax: {
                    "url": "{{ route('payments.index') }}",
                    "type": "GET",
                    "data": function(d) {
                        d.id_user = '{{$user->id}}';
                    }
                },
                columns: [
                    {data: "DT_RowIndex"},
                    {data: "payment_method"},
                    {data: "amount"},
                    {data: "created_at"},
                    {data: "approved_at"},
                    {data: "payment_status"},
                ]
            });


            $("#paymentMethodModelForm").submit(function(e) {
                e.preventDefault();
            }).validate({
                rules: {
                    payoneer: {
                        email: true,
                    },
                    payppal: {
                        email: true,
                    }
                },
                errorElement: 'span',
                submitHandler: function(form) {
                    var formData = new FormData(form);
                    $.ajax({
                        url: $(form).attr('action'),
                        data: formData,
                        type: 'POST',
                        dataType: 'json',
                        processData: false,
                        contentType: false,
                        success: function(data) {
                            if (data.status) {
                                $("#paymentMethodModel").modal('hide');
                                Swal.fire({
                                    title: data.title,
                                    text: data.message,
                                    icon: 'success',
                                });
                                setTimeout(() => {
                                    window.location.reload();
                                }, 1500);
                            }
                        },
                        error: function(xhr, status, error) {
                            var jsonResponse = JSON.parse(xhr.responseText);
                            var locale = '{{ app()->getLocale() }}'; // Get the current application locale
                            $("#paymentMethodModel").modal('hide');
                            if (locale == 'en') {
                                // English error messages
                                var errorMessage = "Validation failed";
                            } else if (locale == 'ro') {
                                // Romanian error messages
                                errorMessage = "Validarea a eșuat";
                            } else if (locale == 'ar') {
                                // Arabic error messages
                                errorMessage = "فشل التحقق من الصحة";
                            } else {
                                // Default to English
                                // errorMessage += Object.values(errors).join(", ");
                            }
                            if (jsonResponse.errors) {
                                errorMessage += ":<br> ";
                                errorMessage += Object.values(jsonResponse.errors).join(
                                    "<br>");
                                Swal.fire('', errorMessage, 'error')
                            }
                        }
                    });
                    return false;
                }
            });
        });
    </script>
    @endsection