@extends('layouts.app')

@section('title', 'Edit Transaksi')

@section('content')
<div class="max-w-4xl mx-auto space-y-6">
   
   {{-- Header Section --}}
   <div class="flex items-center justify-between">
      <div>
         <h1 class="text-2xl font-bold text-gray-900">Edit Transaksi</h1>
         <p class="text-sm text-gray-500 mt-1">Update status and monitor transaction details</p>
      </div>
      
      <a href="{{ route('admin.transactions.index') }}"
         class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 focus:ring-4 focus:ring-gray-200 transition-all">
         <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
         </svg>
         Back to List
      </a>
   </div>

   {{-- Form Section --}}
   <form method="POST" action="{{ route('admin.transactions.update', $transaction) }}" 
         class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
      
      @csrf
      @method('PUT')

      <div class="p-6 space-y-6">
         
         {{-- Status Management Section --}}
         <div class="space-y-6">
            <h3 class="text-base font-semibold text-gray-900 mb-4">Transaction Status</h3>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
               
               {{-- Status Selection --}}
               <div>
                  <label for="trx_status" class="block text-xs font-medium text-gray-700 mb-1.5">
                     Update Status <span class="text-red-500">*</span>
                  </label>
                  <select id="trx_status" name="trx_status" required
                          class="w-full px-4 py-2.5 text-sm border border-gray-200 rounded-lg focus:border-brand focus:ring-2 focus:ring-brand/20 focus:outline-none transition-colors bg-white">
                     <option value="Sukses" @selected(old('trx_status', $transaction->trx_status) == 'Sukses')>Sukses</option>
                     <option value="Pending" @selected(old('trx_status', $transaction->trx_status) == 'Pending')>Pending</option>
                     <option value="Gagal" @selected(old('trx_status', $transaction->trx_status) == 'Gagal')>Gagal</option>
                  </select>
                  @error('trx_status')
                     <p class="mt-1.5 text-xs text-red-600 flex items-center gap-1">
                        <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>
                        {{ $message }}
                     </p>
                  @enderror
               </div>

               {{-- Transaction ID (ReadOnly Display) --}}
               <div>
                  <label class="block text-xs font-medium text-gray-500 mb-1.5">Transaction ID</label>
                  <div class="px-4 py-2.5 text-sm bg-gray-50 border border-gray-100 rounded-lg text-gray-600 font-mono">
                     {{ $transaction->trx_id }}
                  </div>
               </div>
            </div>
         </div>

         {{-- Divider --}}
         <div class="border-t border-gray-200"></div>

         {{-- Summary Information (Read Only) --}}
         <div>
            <h3 class="text-base font-semibold text-gray-900 mb-4">Transaction Summary</h3>
            <div class="grid grid-cols-1 sm:grid-cols-3 gap-6">
               <div>
                  <p class="text-[10px] uppercase tracking-wider font-bold text-gray-400">User</p>
                  <p class="text-sm font-medium text-gray-900 mt-0.5">{{ $transaction->user->name }}</p>
               </div>
               <div>
                  <p class="text-[10px] uppercase tracking-wider font-bold text-gray-400">Product Code</p>
                  <p class="text-sm font-medium text-gray-900 mt-0.5">{{ $transaction->code_product }}</p>
               </div>
               <div>
                  <p class="text-[10px] uppercase tracking-wider font-bold text-gray-400">Total Amount</p>
                  <p class="text-sm font-bold text-brand mt-0.5">Rp {{ number_format($transaction->total_price, 0, ',', '.') }}</p>
               </div>
            </div>

            {{-- Info Tip --}}
            <div class="mt-6 p-3 bg-blue-50 border border-blue-100 rounded-lg">
               <p class="text-xs text-blue-800 flex items-start gap-2">
                  <svg class="w-4 h-4 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                     <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/>
                  </svg>
                  <span>
                     <strong>Important:</strong> Changing status to <strong>Gagal</strong> should only be done if the service provider rejected the request. Make sure to check the provider's dashboard first.
                  </span>
               </p>
            </div>
         </div>
      </div>

      {{-- Form Actions --}}
      <div class="px-6 py-4 bg-gray-50 border-t border-gray-100 flex items-center justify-end gap-3">
         <a href="{{ route('admin.transactions.index') }}"
            class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-all">
            Cancel
         </a>
         <button type="submit"
                 class="px-6 py-2 text-sm font-semibold text-white bg-brand rounded-lg hover:bg-brand-dark focus:ring-4 focus:ring-brand/20 transition-all">
            Update Transaction
         </button>
      </div>

   </form>
</div>
@endsection
