@extends('admin.layouts.app')

@section('title', __('dashboard.user_details'))

@section('content')
<x-admin.page-header title="{{ __('dashboard.user_details') }}" :breadcrumbs="[__('dashboard.users') => route('admin.users.index'), __('dashboard.details') => '']" />

<div class="row justify-content-center">
    <div class="col-xl-12">
        <!-- Header Card -->
        <div class="card bg-primary bg-gradient mb-4">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="d-flex align-items-center">
                        <!-- User Image -->
                        <div class="avatar-lg bg-white bg-opacity-25 rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 80px; height: 80px;">
                            @if($user->image)
                                <img src="{{ viewImage($user->image) }}" class="rounded-circle" style="width: 70px; height: 70px; object-fit: cover;">
                            @else
                                <i class="ri-user-line text-white fs-1"></i>
                            @endif
                        </div>
                    </div>
                    <div>
                        <h3 class="mb-1 text-white">{{ $user->name }}</h3>
                        <p class="text-white-50 mb-1"><i class="ri-mail-line me-1"></i> {{ $user->email ?? '--' }}</p>
                        <p class="text-white-50 mb-0"><i class="ri-phone-line me-1"></i> {{ $user->phone ?? '--' }}</p>
                    </div>

                    <div class="ms-auto text-end">
                        <span class="badge bg-{{ $user->is_active ? 'success' : 'danger' }} px-3 py-2 fs-12 mb-2 d-block">
                            {{ $user->is_active ? __('dashboard.active') : __('dashboard.inactive') }}
                        </span>
                        @if($user->email_verified_at)
                            <span class="badge bg-success-subtle text-success px-3 py-2 fs-12">
                                <i class="ri-checkbox-circle-line me-1"></i> {{ __('dashboard.verified') }}
                            </span>
                        @else
                            <span class="badge bg-warning-subtle text-warning px-3 py-2 fs-12">
                                <i class="ri-error-warning-line me-1"></i> {{ __('dashboard.not_verified') }}
                            </span>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <!-- Info Card -->
        <div class="card mb-4">
            <div class="card-header d-flex align-items-center">
                <h5 class="card-title mb-0 flex-grow-1">{{ __('dashboard.general_info') }}</h5>
                <div class="flex-shrink-0 d-flex gap-2">
                    <a href="{{ route('admin.users.edit', $user) }}" class="btn btn-primary btn-sm">
                        <i class="ri-pencil-line align-middle me-1"></i> {{ __('dashboard.edit') }}
                    </a>
                    <form action="{{ route('admin.users.destroy', $user) }}" method="POST" class="d-inline">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-danger btn-sm" data-confirm-delete>
                            <i class="ri-delete-bin-line align-middle me-1"></i> {{ __('dashboard.delete') }}
                        </button>
                    </form>
                </div>
            </div>
            <div class="card-body">
                <div class="row">
                    <x-view-col label="{{ __('dashboard.id') }}" :value="$user?->id"/>
                    <x-view-col label="{{ __('dashboard.name') }}" :value="$user?->name"/>
                    <x-view-col label="{{ __('dashboard.phone') }}" :value="$user?->phone"/>
                    <x-view-col label="{{ __('dashboard.email') }}" :value="$user?->email"/>
                    <x-view-col label="{{ __('dashboard.created_at') }}" :value="$user?->created_at"/>
                    <x-view-col label="{{ __('dashboard.updated_at') }}" :value="$user?->updated_at"/>
                </div>
            </div>
        </div>

        <!-- Tabs -->
        <div class="card">
            <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" data-bs-toggle="tab" href="#orders-tab" role="tab">
                            <i class="ri-shopping-cart-line me-1"></i> {{ __('dashboard.orders') }}
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-bs-toggle="tab" href="#reviews-tab" role="tab">
                            <i class="ri-star-line me-1"></i> {{ __('dashboard.reviews') }}
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-bs-toggle="tab" href="#wishlists-tab" role="tab">
                            <i class="ri-heart-line me-1"></i> {{ __('dashboard.wishlists') }}
                        </a>
                    </li>
                </ul>
            </div>
            <div class="card-body">
                <div class="tab-content">
                    <!-- Orders Tab -->
                    <div class="tab-pane fade show active" id="orders-tab" role="tabpanel">
                        <div class="row mb-3">
                            <div class="col-md-12">
                                <div class="d-flex flex-wrap gap-2 align-items-center">
                                    <x-report name="orders-report" />
                                    <x-status-filter name="order-status-filter" :options="\App\Enums\OrderStatusEnum::options()" :allLabel="__('dashboard.all_statuses')" />
                                    <x-status-filter name="payment-status-filter" :options="\App\Enums\PaymentStatusEnum::options()" :allLabel="__('dashboard.all_payment_statuses')" />
                                </div>
                            </div>
                        </div>
                        {{ $ordersDataTable->table(['class' => 'table table-bordered table-striped dt-responsive nowrap w-100']) }}
                    </div>

                    <!-- Reviews Tab -->
                    <div class="tab-pane fade" id="reviews-tab" role="tabpanel">
                        <div class="row mb-3">
                            <div class="col-md-12">
                                <div class="d-flex flex-wrap gap-2 align-items-center">
                                    <x-report name="reviews-report" />
                                    <x-status-filter name="review-status-filter" :options="\App\Enums\ReviewStatusEnum::options()" :allLabel="__('dashboard.all_statuses')" />
                                    <x-status-filter name="rating-filter" :options="[
                                        ['value' => 5, 'label' => '5 ' . __('dashboard.stars')],
                                        ['value' => 4, 'label' => '4 ' . __('dashboard.stars')],
                                        ['value' => 3, 'label' => '3 ' . __('dashboard.stars')],
                                        ['value' => 2, 'label' => '2 ' . __('dashboard.stars')],
                                        ['value' => 1, 'label' => '1 ' . __('dashboard.star')],
                                    ]" :allLabel="__('dashboard.all_ratings')" />
                                </div>
                            </div>
                        </div>
                        {{ $reviewsDataTable->table(['class' => 'table table-bordered table-striped dt-responsive nowrap w-100']) }}
                    </div>

                    <!-- Wishlists Tab -->
                    <div class="tab-pane fade" id="wishlists-tab" role="tabpanel">
                        <div class="row mb-3">
                            <div class="col-md-12">
                                <div class="d-flex flex-wrap gap-2 align-items-center">
                                    <x-report name="wishlists-report" />
                                </div>
                            </div>
                        </div>
                        {{ $wishlistsDataTable->table(['class' => 'table table-bordered table-striped dt-responsive nowrap w-100']) }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
{{ $ordersDataTable->scripts() }}
{{ $reviewsDataTable->scripts() }}
{{ $wishlistsDataTable->scripts() }}

<script>
$(document).ready(function() {
    // Orders tab filters
    $('.orders-report').on('click', '.report', function() {
        $('.orders-report .report').removeClass('active');
        $(this).addClass('active');
        window.LaravelDataTables['user-orders-table'].ajax.reload();
    });

    $('.order-status-filter').on('click', '.status-filter', function() {
        $('.order-status-filter .status-filter').removeClass('active');
        $(this).addClass('active');
        window.LaravelDataTables['user-orders-table'].ajax.reload();
    });

    $('.payment-status-filter').on('click', '.status-filter', function() {
        $('.payment-status-filter .status-filter').removeClass('active');
        $(this).addClass('active');
        window.LaravelDataTables['user-orders-table'].ajax.reload();
    });

    // Reviews tab filters
    $('.reviews-report').on('click', '.report', function() {
        $('.reviews-report .report').removeClass('active');
        $(this).addClass('active');
        window.LaravelDataTables['user-reviews-table'].ajax.reload();
    });

    $('.review-status-filter').on('click', '.status-filter', function() {
        $('.review-status-filter .status-filter').removeClass('active');
        $(this).addClass('active');
        window.LaravelDataTables['user-reviews-table'].ajax.reload();
    });

    $('.rating-filter').on('click', '.status-filter', function() {
        $('.rating-filter .status-filter').removeClass('active');
        $(this).addClass('active');
        window.LaravelDataTables['user-reviews-table'].ajax.reload();
    });

    // Wishlists tab filters
    $('.wishlists-report').on('click', '.report', function() {
        $('.wishlists-report .report').removeClass('active');
        $(this).addClass('active');
        window.LaravelDataTables['user-wishlists-table'].ajax.reload();
    });

    // Reload DataTable when tab is shown
    $('a[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) {
        var target = $(e.target).attr('href');
        if (target === '#orders-tab') {
            window.LaravelDataTables['user-orders-table'].columns.adjust();
        } else if (target === '#reviews-tab') {
            window.LaravelDataTables['user-reviews-table'].columns.adjust();
        } else if (target === '#wishlists-tab') {
            window.LaravelDataTables['user-wishlists-table'].columns.adjust();
        }
    });
});
</script>
@endpush