@extends('layouts.app')


@php
    $mainClass = 'w-[80%] flex flex-col pt-12'
@endphp

@section('title', 'مدیریت تبلیغات | نیکس فایل')

@section('aside-content')
    <aside class=" w-full lg:w-[20%] flex flex-col mb-4">
        <div class="bg-primary-color text-white text-left py-8">
            @include('components.header')
        </div>
        @include('components.admin-panel-sidebar')
    </aside>
@endsection

@section('content')
    <div class="w-[90%] mx-auto">

        <div class="flex justify-between items-center bg-white shadow-custom py-2 px-4 rounded-md my-8">
            <p>
                جدول کاربران
            </p>

            <a href="{{route('user.create')}}"
               class=" py-2 text-white rounded-md bg-primary-color hover:text-white transition-all px-8
                text-center hover:border-white hover:cursor-pointer hover:bg-primary-color/90 logout-button">
                افزودن کاربر جدید
            </a>
        </div>

        <table id="datatables"
               class="bg-white w-full border border-gray-300 rounded-lg shadow-md overflow-hidden text-start mb-8">
            <thead>
            <tr class="bg-[#eb4334] text-white">
                <th class="py-3 px-2 !text-center text-sm font-semibold uppercase">آیدی کاربر</th>
                <th class="py-3 px-2 !text-center text-sm font-semibold uppercase">نام کاربر</th>
                <th class="py-3 px-2 !text-center text-sm font-semibold uppercase">عملیات</th>
                <th class="py-3 px-2 !text-center text-sm font-semibold uppercase">نقش کاربر</th>
                <th class="py-3 px-2 !text-center text-sm font-semibold uppercase">تاریخ ساخت کاربر</th>
                <th class="py-3 px-2 !text-center text-sm font-semibold uppercase">شماره کاربر</th>
                <th class="py-3 px-2 !text-center text-sm font-semibold uppercase">حجم آپلود شده (mb)</th>
                <th class="py-3 px-2 !text-center text-sm font-semibold uppercase">تعداد فایل ها</th>
            </tr>
            </thead>
            <tbody class="bg-gray-50">
            @foreach($users as $user)
                <tr class="border-b transition duration-300 ease-in-out hover:bg-gray-100 !text-center">
                    <td class="py-3 px-6 text-sm text-gray-800 !text-center">{{ $user->id }}</td>
                    <td class="py-3 px-6 text-sm text-gray-800 !text-center">
                        {{ $user->name ? $user->name : '' }}
                        @unless($user->name)
                            <span class="bg-red-100 text-red-600 px-2 py-1 rounded">ثبت نشده</span>
                        @endunless
                    </td>

                    <td class="py-3 px-4 text-sm text-gray-800 !text-center">
                        <form action="{{ route('user.setStatus', $user->id) }}" method="POST">
                            @csrf
                            <div class="relative inline-block">
                                <select name="is_blocked" onchange="this.form.submit()"
                                        class="block w-full px-2 py-1 cursor-pointer  text-white rounded-lg focus:outline-none transition duration-200 appearance-none
                                        {{ $user->is_blocked ? 'bg-primary-color border border-primary-color' : 'bg-[#00bc7b]' }} hover:text-white hover:bg-primary-color">
                                    <option class="text-center text-gray-800"
                                            value="0" {{ $user->is_blocked ? '' : 'selected' }}>unblock
                                    </option>
                                    <option class="text-center text-gray-800"
                                            value="1" {{ $user->is_blocked ? 'selected' : '' }}>block
                                    </option>
                                </select>
                            </div>
                        </form>
                    </td>
                    <td class="py-3 px-2 text-sm text-gray-800 !text-center">
                        <form action="{{ route('user.setRole', $user->id) }}" method="POST">
                            @csrf
                            <div class="relative inline-block">
                                <select name="role" onchange="this.form.submit()"
                                        class="block w-full px-2 py-1 cursor-pointer rounded-lg focus:outline-none transition duration-200 appearance-none bg-white text-primary-color border border-primary-color">

                                    <!-- Option for Legend -->
                                    <option class="text-center text-gray-800"
                                            value="legend" {{ $user->role == 'legend' ? 'selected' : '' }}>مدیر کل
                                    </option>

                                    <!-- Option for Admin -->
                                    <option class="text-center text-gray-800"
                                            value="admin" {{ $user->role == 'admin' ? 'selected' : '' }}>مدیر
                                    </option>

                                    <option class="text-center text-gray-800"
                                            value="plusing" {{ $user->role == 'plusing' ? 'selected' : '' }}>پلاسینگ
                                    </option>

                                    <option class="text-center text-gray-800"
                                            value="premium" {{ $user->role == 'premium' ? 'selected' : '' }}>
                                        ویژه
                                    </option>

                                    <option class="text-center text-gray-800"
                                            value="premium_gold" {{ $user->role == 'premium_gold' ? 'selected' : '' }}>
                                        طلایی
                                    </option>

                                    <option class="text-center text-gray-800"
                                            value="premium_diamond" {{ $user->role == 'premium_diamond' ? 'selected' : '' }}>
                                        الماس
                                    </option>

                                    <option class="text-center text-gray-800"
                                            value="subscriber" {{ $user->role == 'subscriber' ? 'selected' : '' }}>
                                        کاربر معمولی
                                    </option>

                                </select>
                            </div>
                        </form>
                    </td>
                    <td class="py-3 px-2 text-sm text-gray-800 !text-center">{{ jDate($user->created_at)->format('%A, %d %B %y') }}</td>
                    <td class="py-3 px-2 text-sm text-gray-800 !text-center">{{$user->phone}}</td>
                    <td class="py-3 px-2 text-sm text-gray-800 !text-center">
                        {{ number_format($user->total_file_size / 1048576, 2) }} MB
                    </td>
                    <td class="py-3 px-2 text-sm text-gray-800 !text-center">
                        {{ $user->files_count }}
                    </td>
                </tr>
            @endforeach
            </tbody>
        </table>


        @if(session('success'))
            <div class="bg-green-200 text-green-800 py-3 px-2 rounded-md my-4">
                {{ session('success') }}
            </div>
        @endif
        @if(session('error'))
            <div class="text-red-500 bg-red-100 rounded-md text-sm my-1 p-4">
                {{ session('error') }}
            </div>
        @endif
    </div>
@endsection