@extends('layouts.admin_layout')

@section('content')



<main class="h-full pb-16 overflow-y-auto">
  <div class="container px-6 mx-auto grid">
    <h2
      class="my-6 text-2xl font-semibold text-gray-700 dark:text-gray-200">
      <span class="text-blue-500">Trade</span> Info
    </h2>
    <!-- CTA -->
    <a
      class="flex items-center bg-blue-600 justify-between p-4 mb-8 text-sm font-semibold shadow-md focus:outline-none focus:shadow-outline-green"
      href="{{ url('/') }}" style="color: #fff;">
      <div class="flex items-center">
        <svg
          class="w-5 h-5 mr-2"
          fill="currentColor"
          viewBox="0 0 20 20">
          <path
            d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
        </svg>
        <span>Go to main website</span>
      </div>
      <span>View &RightArrow;</span>
    </a>
    
    <x-alert />

    <!-- Big section cards -->
    <h4
      class="mb-4 text-lg font-semibold text-gray-600 dark:text-gray-300">
      {{ $investment->plan->name }}
    </h4>
    <div class="flex flex-col md:flex-row md:justify-between md:items-center px-4 py-3 mb-8 bg-white shadow-md dark:bg-gray-800">
        <div>
            <p class="text-sm text-gray-600 dark:text-gray-400">
                {{ $investment->user?->first_name }}
                traded with the
                {{ $investment->plan->name }} Bot
            </p>
        </div>
    
        <div class="mt-4 md:mt-0">
            <form 
                method="POST" 
                action="{{ route('admin.toggle_bot_status', $investment->id) }}" 
                id="toggle-bot-form"
            >
                @csrf
                <input type="hidden" name="action" value="{{ $investment->is_paused ? 'resume' : 'pause' }}">
    
                @if($investment->is_paused == 0)
                    <button
                        class="px-5 py-3 font-medium leading-5 text-white transition-colors duration-150 bg-blue-600 border border-transparent rounded-lg hover:bg-green-700 focus:outline-none focus:shadow-outline-green"
                        type="button"
                        onclick="confirmBotToggle('pause')"
                    >
                        Pause Bot
                    </button>
                @else
                    <p class="text-sm text-gray-600 dark:text-gray-400"><i>BOT PAUSED:</i></p>
                    <button
                        class="px-5 py-3 font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-green-700 focus:outline-none focus:shadow-outline-green"
                        type="button"
                        onclick="confirmBotToggle('resume')"
                    >
                        Resume Bot
                    </button>
                @endif
            </form>
        </div>
    </div>



    <!-- Responsive cards -->
    <h4
      class="mb-4 text-lg font-semibold text-gray-600 dark:text-gray-300">
      Trade Details
    </h4>
    <div class="grid gap-6 mb-8 md:grid-cols-2 xl:grid-cols-4">
      <div
        class="flex items-center p-4 bg-white shadow-xs dark:bg-gray-800">
        <div
          class="p-3 mr-4 text-orange-500 bg-orange-100 rounded-full dark:text-orange-100 dark:bg-orange-500">
          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
            <path
              fill-rule="evenodd"
              d="M4 4a2 2 0 00-2 2v4a2 2 0 002 2V6h10a2 2 0 00-2-2H4zm2 6a2 2 0 012-2h8a2 2 0 012 2v4a2 2 0 01-2 2H8a2 2 0 01-2-2v-4zm6 4a2 2 0 100-4 2 2 0 000 4z"
              clip-rule="evenodd"></path>
          </svg>
        </div>
        <div>
          <p
            class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
            Entry Capital
          </p>
          <p
            class="text-lg font-semibold text-gray-700 dark:text-gray-200">
            USDT {{ number_format($investment->amount, 2) }}
          </p>
        </div>
      </div>

      <div
        class="flex items-center p-4 bg-white shadow-xs dark:bg-gray-800">
        <div
          class="p-3 mr-4 text-orange-500 bg-orange-100 rounded-full dark:text-orange-100 dark:bg-orange-500">
          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
            <path
              fill-rule="evenodd"
              d="M4 4a2 2 0 00-2 2v4a2 2 0 002 2V6h10a2 2 0 00-2-2H4zm2 6a2 2 0 012-2h8a2 2 0 012 2v4a2 2 0 01-2 2H8a2 2 0 01-2-2v-4zm6 4a2 2 0 100-4 2 2 0 000 4z"
              clip-rule="evenodd"></path>
          </svg>
        </div>
        <div>
          <p
            class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
            Current Capital
          </p>
          <p
            class="text-lg font-semibold text-gray-700 dark:text-gray-200">
            USDT {{ number_format($investment->amount + $investment->balance, 2) }}
          </p>
        </div>
      </div>

      <div
        class="flex items-center p-4 bg-white shadow-xs dark:bg-gray-800">
        <div>
          <p
            class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
            Start Date
          </p>
          <p
            class="text-lg font-semibold text-gray-700 dark:text-gray-200">
            {{ date('M j Y', strtotime($investment->buy_date)) }}
          </p>
        </div>
      </div>


      <div
        class="flex items-center p-4 bg-white shadow-xs dark:bg-gray-800">
        <div>
          <p
            class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
            End Date
          </p>
          <p
            class="text-lg font-semibold text-gray-700 dark:text-gray-200">
            {{ date('M j Y', strtotime($investment->end_date)) }}
          </p>
        </div>
      </div>


      <div
        class="flex items-center p-4 bg-white shadow-xs dark:bg-gray-800">
        <div
          class="p-3 mr-4 text-orange-500 bg-orange-100 rounded-full dark:text-orange-100 dark:bg-orange-500">
          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
            <path
              fill-rule="evenodd"
              d="M4 4a2 2 0 00-2 2v4a2 2 0 002 2V6h10a2 2 0 00-2-2H4zm2 6a2 2 0 012-2h8a2 2 0 012 2v4a2 2 0 01-2 2H8a2 2 0 01-2-2v-4zm6 4a2 2 0 100-4 2 2 0 000 4z"
              clip-rule="evenodd"></path>
          </svg>
        </div>
        <div>
          <p
            class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
            Bot Profit
          </p>
          <p
            class="text-lg font-semibold text-gray-700 dark:text-gray-200">
            $ {{ $investment->pfit }}
          </p>
        </div>
      </div>


      <div
        class="flex items-center p-4 bg-white shadow-xs dark:bg-gray-800">
        <div
          class="p-3 mr-4 text-orange-500 bg-orange-100 rounded-full dark:text-orange-100 dark:bg-orange-500">
          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
            <path
              fill-rule="evenodd"
              d="M4 4a2 2 0 00-2 2v4a2 2 0 002 2V6h10a2 2 0 00-2-2H4zm2 6a2 2 0 012-2h8a2 2 0 012 2v4a2 2 0 01-2 2H8a2 2 0 01-2-2v-4zm6 4a2 2 0 100-4 2 2 0 000 4z"
              clip-rule="evenodd"></path>
          </svg>
        </div>
        <div>
          <p
            class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
            Mod Bot Profit
          </p>
          <p
            class="text-lg font-semibold text-gray-700 dark:text-gray-200">
            $ {{ $investment->f_pfit }}
          </p>
        </div>
      </div>

      <!-- Card -->
      <div
        class="flex items-center p-4 bg-white shadow-xs dark:bg-gray-800">
        <div>
          <p
            class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
            Trade Status
          </p>
          <p
            class="text-lg font-semibold text-gray-700 dark:text-gray-200">
            @if($investment->status == 1)
            <span
              class="px-2 py-1 font-semibold leading-tight text-red-700 bg-red-100 rounded-full dark:bg-red-700 dark:text-red-100">
              Pending..
            </span>
            @elseif($investment->status == 2)
            <span
              class="px-2 py-1 font-semibold leading-tight bg-orange-200 rounded-full dark:bg-orange-700 dark:text-orange-200"
              style="color:green;">
              Ongoing
            </span>
            @elseif($investment->status == 3)
            <span
              class="px-2 py-1 font-semibold leading-tight text-green-700 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-100">
              Completed
            </span>
            @endif
          </p>
        </div>
      </div>
    </div>

    <br>

    <h4
      class="mb-4 text-lg font-semibold text-gray-600 dark:text-gray-300">
      Modify Bot Parameters
    </h4>
    <!-- New Table -->
    <div class="w-full overflow-hidden rounded-lg shadow-xs">
      <div class="w-full overflow-x-auto">
        <div class="p-6 text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800">
          <form method="post" action="{{ route('admin.investment_f_profit_update', $investment->id) }}" class="mt-4" enctype="multipart/form-data">
            @csrf
            <label class="block w-full mb-5 mr-3 text-sm">
              <span class="font-semibold text-gray-700 dark:text-gray-400">Bot Final Profit</span>
              <input
                class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 focus:border-green-400 focus:outline-none focus:shadow-outline-green dark:text-gray-300 dark:focus:shadow-outline-gray form-input" name="f_pfit" required type="number" step=".0001"
                value="{{ $investment->f_pfit }}" />
            </label>
            <br>
            
            <label class="block w-full mb-5 mr-3 text-sm">
              <span class="font-semibold text-gray-700 dark:text-gray-400">Min Trading Profit</span>
              <input
                class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 focus:border-green-400 focus:outline-none focus:shadow-outline-green dark:text-gray-300 dark:focus:shadow-outline-gray form-input" name="trade_min" required type="number" step=".0001"
                value="{{ $investment->trade_min }}" />
            </label>
            <br>
            
            <label class="block w-full mb-5 mr-3 text-sm">
              <span class="font-semibold text-gray-700 dark:text-gray-400">Max Trading Profit</span>
              <input
                class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 focus:border-green-400 focus:outline-none focus:shadow-outline-green dark:text-gray-300 dark:focus:shadow-outline-gray form-input" name="trade_max" required type="number" step=".0001"
                value="{{ $investment->trade_max }}" />
            </label>
            <br>
            
            <br>
            
            <div class="mx-auto">
              <button
                class="px-5 py-3 font-medium leading-5 text-white transition-colors duration-150 bg-blue-600 border border-transparent rounded-lg hover:bg-green-700 focus:outline-none focus:shadow-outline-green"
                type="submit" style="color: #fff;">
                Modify Parameters
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>


    <br><br>


    <!-- Cards with title -->
    <h4
      class="mb-4 text-lg font-semibold text-gray-600 dark:text-gray-300">
      Profit Records
    </h4>
    <!-- New Table -->
    <div class="w-full overflow-hidden rounded-lg shadow-xs">
      <div class="w-full overflow-x-auto">
        <table class="w-full whitespace-no-wrap">
          <thead>
            <tr
              class="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800">
              <th class="px-4 py-3">Model</th>
              <th class="px-4 py-3">Profit</th>
              <th class="px-4 py-3">Profit Percentage</th>
              <th class="px-4 py-3">Date Received</th>
            </tr>
          </thead>
          <tbody
            class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">

            @forelse($investment->inTransaction as $transaction)
            <tr class="text-gray-700 dark:text-gray-400">
              <td class="px-3 py-3 text-sm">
                {{ $investment->plan->name }}
              </td>
              <td class="px-4 py-3 text-sm text-green-500">
                + USDT {{ number_format($transaction->amount, 2) }}
              </td>
              <td class="px-4 py-3 text-sm text-green-500">
                {{ $investment->plan->percent_profit }}%
              </td>
              <td class="px-4 py-3 text-sm">
                {{ date('M j Y', strtotime($transaction->created_at)) }}
              </td>
            </tr>
            @empty
            <div align="center" class="my-3">
              <p class="lead text-gray-700 dark:text-gray-200">No Trading Profits Received.</p>
            </div>
            <br><br><br>
            @endforelse


          </tbody>
        </table>
      </div>
    </div>
    
    
    <br><br>
    
    <h4 class="mb-4 text-lg font-semibold text-gray-600 dark:text-gray-300">
      Moved Profit History
    </h4>
    
    <div class="w-full overflow-hidden rounded-lg shadow-xs">
      <div class="w-full overflow-x-auto">
        <table class="w-full whitespace-no-wrap">
          <thead>
            <tr class="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800">
              <th class="px-4 py-3">Date</th>
              <th class="px-4 py-3">Amount Moved (USDT)</th>
            </tr>
          </thead>
          <tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
            @if($investment->moved_record)
            @forelse($investment->moved_record as $record)
            <tr class="text-gray-700 dark:text-gray-400">
              <td class="px-4 py-3 text-sm">
                {{ \Carbon\Carbon::parse($record['date'])->format('M j, Y') }}
              </td>
              <td class="px-4 py-3 text-sm text-red-500">
                - USDT {{ number_format($record['amount'], 2) }}
              </td>
            </tr>
            @empty
            <tr>
              <td colspan="2" class="px-4 py-3 text-center text-sm text-gray-500 dark:text-gray-300">
                No profit has been moved yet.
              </td>
            </tr>
            @endforelse
            @endif
          </tbody>
        </table>
      </div>
    </div>

    
  </div>
</main>

@endsection