@extends('layouts.app')

@section('title', 'Payment Methods')

@section('content')
<div class="space-y-6">

    {{-- Header Section --}}
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">Payment Methods</h1>
            <p class="text-sm text-gray-500 mt-1">Manage payment gateway & manual methods</p>
        </div>

        <div class="flex flex-wrap items-center gap-3">
            <a href="{{ route('admin.payment-methods.create') }}"
                class="inline-flex items-center gap-2 px-4 py-2.5 bg-brand text-white text-sm font-medium rounded-lg hover:bg-brand/90 focus:ring-4 focus:ring-brand/20 transition-all duration-200 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="M12 4v16m8-8H4"/>
                </svg>
                Add Method
            </a>
        </div>
    </div>

    {{-- Filters --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4">
        <form method="GET" class="flex flex-wrap items-end gap-4">
            <div class="flex-1 min-w-[200px]">
                <label class="block text-xs font-medium text-gray-700 mb-1.5">Search</label>
                <input type="text" name="search" value="{{ request('search') }}"
                    placeholder="Search name or code..."
                    class="w-full px-4 py-2.5 text-sm border border-gray-200 rounded-lg focus:ring-2 focus:ring-brand/20 focus:border-brand">
            </div>

            <div class="min-w-[160px]">
                <label class="block text-xs font-medium text-gray-700 mb-1.5">Provider</label>
                <select name="provider"
                    class="w-full px-4 py-2.5 text-sm border border-gray-200 rounded-lg bg-white focus:ring-2 focus:ring-brand/20">
                    <option value="">All</option>
                    <option value="tripay" @selected(request('provider')=='tripay')>Tripay</option>
                    <option value="duitku" @selected(request('provider')=='duitku')>Duitku</option>
                    <option value="internal" @selected(request('provider')=='internal')>Internal</option>
                </select>
            </div>

            <div class="flex gap-2">
                <button class="px-5 py-2.5 text-sm font-medium bg-brand text-white rounded-lg">Apply</button>
                @if(request()->hasAny(['search','provider']))
                    <a href="{{ route('admin.payment-methods.index') }}"
                        class="px-5 py-2.5 text-sm bg-gray-100 rounded-lg">Reset</a>
                @endif
            </div>
        </form>
    </div>

    @include('pages.admin.products.partials.message')

    {{-- Table --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-4 py-3 text-xs text-gray-600">#</th>
                        <th class="px-4 py-3 text-xs text-gray-600">Name</th>
                        <th class="px-4 py-3 text-xs text-gray-600">Code</th>
                        <th class="px-4 py-3 text-xs text-gray-600">Group</th>
                        <th class="px-4 py-3 text-xs text-gray-600">Provider</th>
                        <th class="px-4 py-3 text-xs text-gray-600">Fee</th>
                        <th class="px-4 py-3 text-xs text-gray-600">Status</th>
                        <th class="px-4 py-3 text-xs text-right text-gray-600">Action</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    @forelse($paymentMethods as $index => $method)
                        <tr class="hover:bg-gray-50">
                            <td class="px-4 py-3 text-sm text-gray-500">{{ $paymentMethods->firstItem()+$index }}</td>
                            <td class="px-4 py-3 text-sm font-medium text-gray-900">{{ $method->name }}</td>
                            <td class="px-4 py-3 text-sm text-gray-700">{{ $method->code }}</td>
                            <td class="px-4 py-3 text-sm text-gray-700">{{ ucfirst($method->group) }}</td>
                            <td class="px-4 py-3 text-sm text-gray-700">{{ ucfirst($method->provider) }}</td>
                            <td class="px-4 py-3 text-sm">
                                Rp {{ number_format($method->fee_flat) }} + {{ $method->fee_percent }}%
                            </td>
                            <td class="px-4 py-3">
                                <span class="px-2 py-1 text-xs rounded-full
                                    {{ $method->is_active ? 'bg-emerald-100 text-emerald-700' : 'bg-gray-200 text-gray-600' }}">
                                    {{ $method->is_active ? 'Active' : 'Inactive' }}
                                </span>
                            </td>
                            <td class="px-4 py-3 text-right">
                                <div class="flex justify-end gap-2">
                                    <a href="{{ route('admin.payment-methods.edit',$method) }}"
                                        class="px-3 py-1.5 text-xs bg-blue-100 text-blue-700 rounded-lg">Edit</a>

                                                                        <button type="button"
                                        onclick="openDeleteModal('delete-modal-{{ $method->id }}')"
                                        class="inline-flex items-center px-3 py-1.5 text-xs font-medium text-red-700 bg-red-50 rounded-lg hover:bg-red-100 focus:ring-4 focus:ring-red-200 transition-all">
                                        <svg class="w-3.5 h-3.5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                                        </svg>
                                        Delete
                                    </button>
                                </div>

                                {{-- Delete Modal --}}
                                <div id="delete-modal-{{ $method->id }}" 
                                    class="hidden fixed inset-0 z-50 overflow-y-auto"
                                    aria-labelledby="modal-title" 
                                    role="dialog" 
                                    aria-modal="true">
                                    <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
                                        {{-- Background overlay --}}
                                        <div class="fixed inset-0 bg-gray-900/75 transition-opacity" 
                                            aria-hidden="true"
                                            onclick="closeDeleteModal('delete-modal-{{ $method->id }}')"></div>

                                        {{-- Center modal --}}
                                        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>

                                        {{-- Modal panel --}}
                                        <div class="inline-block align-bottom bg-white rounded-2xl text-left overflow-hidden shadow-2xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full z-50 relative">
                                            <div class="bg-white px-6 pt-6 pb-4">
                                                <div class="sm:flex sm:items-start">
                                                    <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
                                                        <svg class="h-6 w-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                                                        </svg>
                                                    </div>
                                                    <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left flex-1">
                                                        <h3 class="text-lg font-semibold text-gray-900" id="modal-title">
                                                            Delete Payment Methods
                                                        </h3>
                                                        <div class="mt-2">
                                                            <p class="text-sm text-gray-600 text-wrap">
                                                                Are you sure you want to delete 
                                                                <span class="font-semibold text-gray-900">{{ $method->name }}</span>? 
                                                                This action cannot be undone.
                                                            </p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="bg-gray-50 px-6 py-4 sm:flex sm:flex-row-reverse gap-3">
                                                <form method="POST" action="{{ route('admin.payment-methods.destroy', $method) }}" class="w-full sm:w-auto">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit"
                                                        class="w-full inline-flex justify-center rounded-lg border border-transparent shadow-sm px-4 py-2.5 bg-red-600 text-sm font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-4 focus:ring-red-200 transition-all sm:w-auto">
                                                        Yes, Delete
                                                    </button>
                                                </form>
                                                <button type="button"
                                                    onclick="closeDeleteModal('delete-modal-{{ $method->id }}')"
                                                    class="mt-3 w-full inline-flex justify-center rounded-lg border border-gray-300 shadow-sm px-4 py-2.5 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-4 focus:ring-gray-200 transition-all sm:mt-0 sm:w-auto">
                                                    Cancel
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="px-4 py-10 text-center text-gray-500">
                                No payment methods found
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($paymentMethods->hasPages())
            <div class="border-t px-4 py-3 bg-gray-50">
                {{ $paymentMethods->links('vendor.pagination.tailwind') }}
            </div>
        @endif
    </div>

</div>

@endsection