@extends('layouts.app')

@section('title', 'Edit Payment Method')

@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 Payment Method</h1>
         <p class="text-sm text-gray-500 mt-1">Update payment method information and fees</p>
      </div>
      
      <a href="{{ route('admin.payment-methods.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.payment-methods.update', $paymentMethod) }}" 
         enctype="multipart/form-data"
         class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
      
      @csrf
      @method('PUT')

      <div class="p-6 space-y-6">
         @include('pages.admin.payment_methods.partials.form')
      </div>

      {{-- Form Actions --}}
      <div class="bg-gray-50 px-6 py-4 border-t border-gray-200 flex items-center justify-end gap-3">
         <a href="{{ route('admin.payment-methods.index') }}"
            class="px-5 py-2.5 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">
            Cancel
         </a>
         <button type="submit"
            class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-medium bg-brand text-white rounded-lg hover:bg-brand/90 focus:ring-4 focus:ring-brand/20 transition-all shadow-sm hover:shadow">
            <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="M5 13l4 4L19 7"/>
            </svg>
            Update Payment Method
         </button>
      </div>
   </form>
</div>
@endsection