@extends('layouts.admin')

@section('content')
<!-- Main Content -->
        <div class="flex-1 p-4 lg:p-6 w-full lg:w-auto">
            <!-- Header Section -->
            <div class="flex flex-col lg:flex-row lg:justify-between lg:items-center mb-6">
                <h1 class="text-xl lg:text-2xl font-bold text-gray-800 mb-4 lg:mb-0">Returns & Refunds Management</h1>
                <div class="flex flex-col sm:flex-row gap-2">
                    <a href="{{ route('admin.returns.create') }}"
                       class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center justify-center">
                        <i class="fas fa-plus mr-2"></i> Process Return
                    </a>
                    <a href="{{ route('admin.reports.returns') }}"
                       class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg flex items-center justify-center">
                        <i class="fas fa-chart-bar mr-2"></i> Returns Reports
                    </a>
                </div>
            </div>

            @if(session('success'))
                <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
                    {{ session('success') }}
                </div>
            @endif

            @if(session('error'))
                <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
                    {{ session('error') }}
                </div>
            @endif

            <!-- Filter Options -->
            <div class="bg-white rounded-lg shadow-lg p-4 lg:p-6 mb-6">
                <div class="flex flex-col sm:flex-row gap-3">
                    <select id="statusFilter" class="border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm lg:text-base">
                        <option value="">All Statuses</option>
                        <option value="pending">Pending</option>
                        <option value="approved">Approved</option>
                        <option value="rejected">Rejected</option>
                    </select>
                    <select id="refundStatusFilter" class="border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm lg:text-base">
                        <option value="">All Refund Statuses</option>
                        <option value="pending">Pending</option>
                        <option value="processed">Processed</option>
                        <option value="failed">Failed</option>
                    </select>
                    <button onclick="clearFilters()" class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-lg text-sm lg:text-base">
                        Clear Filters
                    </button>
                </div>
            </div>

            <!-- Desktop Table View (hidden on mobile) -->
            <div class="hidden lg:block bg-white rounded-lg shadow-lg overflow-hidden">
                <div class="table-container overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-4 lg:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    Return Code
                                </th>
                                <th class="px-4 lg:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    Sale & Product
                                </th>
                                <th class="px-4 lg:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    Quantity
                                </th>
                                <th class="px-4 lg:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    Refund Amount
                                </th>
                                <th class="px-4 lg:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    Reason
                                </th>
                                <th class="px-4 lg:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    Status
                                </th>
                                <th class="px-4 lg:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    Actions
                                </th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            @forelse($returns as $return)
                                <tr class="return-item hover:bg-gray-50" data-status="{{ $return->status }}" data-refund-status="{{ $return->refund_status }}">
                                    <td class="px-4 lg:px-6 py-4 whitespace-nowrap">
                                        <div class="text-sm font-medium text-gray-900">{{ $return->return_code }}</div>
                                        <div class="text-xs text-gray-500">{{ $return->created_at->format('M d, Y') }}</div>
                                    </td>
                                    <td class="px-4 lg:px-6 py-4">
                                        <div class="text-sm text-gray-900">
                                            <strong>Sale:</strong> {{ $return->sale->sale_code }}
                                        </div>
                                        <div class="text-sm text-gray-600">
                                            <strong>Product:</strong> {{ $return->product->product_name }}
                                        </div>
                                        <div class="text-xs text-gray-500">
                                            Cashier: {{ $return->cashier->name }}
                                        </div>
                                    </td>
                                    <td class="px-4 lg:px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                        {{ $return->quantity_returned }} {{ $return->product->unit }}
                                    </td>
                                    <td class="px-4 lg:px-6 py-4 whitespace-nowrap text-sm font-semibold text-red-600">
                                        Rs.{{ number_format($return->refund_amount, 2) }}
                                    </td>
                                    <td class="px-4 lg:px-6 py-4 text-sm text-gray-900">
                                        <div class="max-w-xs truncate" title="{{ $return->reason }}">
                                            {{ Str::limit($return->reason, 50) }}
                                        </div>
                                    </td>
                                    <td class="px-4 lg:px-6 py-4 whitespace-nowrap">
                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                                            {{ $return->status === 'approved' ? 'bg-green-100 text-green-800' :
                                               ($return->status === 'pending' ? 'bg-yellow-100 text-yellow-800' : 'bg-red-100 text-red-800') }}">
                                            {{ ucfirst($return->status) }}
                                        </span>
                                        <div class="mt-1 text-xs text-gray-500">
                                            Refund:
                                            <span class="{{ $return->refund_status === 'processed' ? 'text-green-600' :
                                                           ($return->refund_status === 'pending' ? 'text-yellow-600' : 'text-red-600') }}">
                                                {{ ucfirst($return->refund_status) }}
                                            </span>
                                        </div>
                                    </td>
                                    <td class="px-4 lg:px-6 py-4 whitespace-nowrap text-sm font-medium">
                                        <div class="flex flex-col space-y-2">
                                            <button onclick="showReturnDetails({{ $return->id }})"
                                                    class="text-blue-600 hover:text-blue-900 flex items-center text-left">
                                                <i class="fas fa-eye mr-1"></i> View
                                            </button>

                                            @if($return->status === 'pending')
                                                <div class="flex space-x-2">
                                                    <button onclick="updateReturnStatus({{ $return->id }}, 'approved')"
                                                            class="text-green-600 hover:text-green-900 flex items-center">
                                                        <i class="fas fa-check mr-1"></i> Approve
                                                    </button>
                                                    <button onclick="updateReturnStatus({{ $return->id }}, 'rejected')"
                                                            class="text-red-600 hover:text-red-900 flex items-center">
                                                        <i class="fas fa-times mr-1"></i> Reject
                                                    </button>
                                                </div>
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7" class="px-4 lg:px-6 py-4 text-center text-sm text-gray-500">
                                        <div class="text-center py-8">
                                            <i class="fas fa-undo text-4xl text-gray-400 mb-4"></i>
                                            <p class="text-gray-500">No returns found</p>
                                            <p class="text-gray-400 text-sm mt-2">Process a return to get started</p>
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                @if(method_exists($returns, 'hasPages') && $returns->hasPages())
                    <div class="px-4 lg:px-6 py-4 border-t border-gray-200">
                        {{ $returns->links() }}
                    </div>
                @endif
            </div>

            <!-- Mobile Card View (hidden on desktop) -->
            <div class="lg:hidden space-y-4">
                @forelse($returns as $return)
                    <div class="return-card bg-white rounded-lg shadow-md p-4" data-status="{{ $return->status }}" data-refund-status="{{ $return->refund_status }}">
                        <!-- Header -->
                        <div class="flex justify-between items-start mb-3">
                            <div>
                                <h3 class="font-semibold text-gray-800">{{ $return->return_code }}</h3>
                                <p class="text-sm text-gray-500">{{ $return->created_at->format('M d, Y') }}</p>
                            </div>
                            <div class="text-right">
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                                    {{ $return->status === 'approved' ? 'bg-green-100 text-green-800' :
                                       ($return->status === 'pending' ? 'bg-yellow-100 text-yellow-800' : 'bg-red-100 text-red-800') }}">
                                    {{ ucfirst($return->status) }}
                                </span>
                                <p class="text-xs text-gray-500 mt-1">
                                    Refund:
                                    <span class="{{ $return->refund_status === 'processed' ? 'text-green-600' :
                                                   ($return->refund_status === 'pending' ? 'text-yellow-600' : 'text-red-600') }}">
                                        {{ ucfirst($return->refund_status) }}
                                    </span>
                                </p>
                            </div>
                        </div>

                        <!-- Sale & Product Info -->
                        <div class="mb-3">
                            <div class="flex justify-between text-sm mb-1">
                                <span class="text-gray-600">Sale:</span>
                                <span class="font-medium">{{ $return->sale->sale_code }}</span>
                            </div>
                            <div class="flex justify-between text-sm mb-1">
                                <span class="text-gray-600">Product:</span>
                                <span class="font-medium text-right">{{ $return->product->product_name }}</span>
                            </div>
                            <div class="flex justify-between text-sm">
                                <span class="text-gray-600">Cashier:</span>
                                <span class="text-gray-700">{{ $return->cashier->name }}</span>
                            </div>
                        </div>

                        <!-- Quantity & Amount -->
                        <div class="flex justify-between items-center mb-3">
                            <div>
                                <span class="text-sm text-gray-600">Quantity:</span>
                                <span class="text-sm font-medium ml-1">{{ $return->quantity_returned }} {{ $return->product->unit }}</span>
                            </div>
                            <div class="text-right">
                                <span class="text-sm text-gray-600">Refund:</span>
                                <span class="text-sm font-semibold text-red-600 ml-1">Rs.{{ number_format($return->refund_amount, 2) }}</span>
                            </div>
                        </div>

                        <!-- Reason -->
                        <div class="mb-3">
                            <p class="text-sm text-gray-600 mb-1">Reason:</p>
                            <p class="text-sm text-gray-800 line-clamp-2">{{ $return->reason }}</p>
                        </div>

                        <!-- Actions -->
                        <div class="flex justify-between pt-3 border-t border-gray-200">
                            <button onclick="showReturnDetails({{ $return->id }})"
                                    class="text-blue-600 hover:text-blue-800 flex items-center text-sm">
                                <i class="fas fa-eye mr-1"></i> View
                            </button>

                            @if($return->status === 'pending')
                                <div class="flex space-x-3">
                                    <button onclick="updateReturnStatus({{ $return->id }}, 'approved')"
                                            class="text-green-600 hover:text-green-800 flex items-center text-sm">
                                        <i class="fas fa-check mr-1"></i> Approve
                                    </button>
                                    <button onclick="updateReturnStatus({{ $return->id }}, 'rejected')"
                                            class="text-red-600 hover:text-red-800 flex items-center text-sm">
                                        <i class="fas fa-times mr-1"></i> Reject
                                    </button>
                                </div>
                            @endif
                        </div>
                    </div>
                @empty
                    <div class="bg-white rounded-lg shadow-md p-6 text-center">
                        <i class="fas fa-undo text-4xl text-gray-400 mb-3"></i>
                        <p class="text-gray-500">No returns found</p>
                        <p class="text-gray-400 text-sm mt-2">Process a return to get started</p>
                    </div>
                @endforelse
            </div>

            <!-- Pagination for Mobile -->
            @if(method_exists($returns, 'hasPages') && $returns->hasPages())
                <div class="lg:hidden mt-6 bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 rounded-lg shadow-sm">
                    <div class="flex-1 flex justify-between">
                        @if($returns->onFirstPage())
                            <span class="relative inline-flex items-center px-3 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-300 bg-white">
                                Previous
                            </span>
                        @else
                            <a href="{{ $returns->previousPageUrl() }}" class="relative inline-flex items-center px-3 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                                Previous
                            </a>
                        @endif

                        @if($returns->hasMorePages())
                            <a href="{{ $returns->nextPageUrl() }}" class="ml-3 relative inline-flex items-center px-3 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                                Next
                            </a>
                        @else
                            <span class="ml-3 relative inline-flex items-center px-3 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-300 bg-white">
                                Next
                            </span>
                        @endif
                    </div>
                </div>
            @endif
        </div>
    </div>

    <!-- Return Details Modal -->
    <div id="returnDetailsModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50 hidden">
        <div class="bg-white rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
            <div class="p-4 lg:p-6">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-lg font-semibold text-gray-800">Return Details</h3>
                    <button onclick="closeModal()" class="text-gray-400 hover:text-gray-600 text-xl">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div id="returnDetailsContent">
                    <!-- Content will be loaded via AJAX -->
                </div>
            </div>
        </div>
    </div>

    <!-- Update Status Modal -->
    <div id="statusModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50 hidden">
        <div class="bg-white rounded-lg shadow-xl max-w-md w-full mx-4">
            <div class="p-4 lg:p-6">
                <h3 class="text-lg font-semibold text-gray-800 mb-4">Update Return Status</h3>
                <form id="statusForm" method="POST">
                    @csrf
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Status</label>
                        <select name="status" class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm lg:text-base">
                            <option value="pending">Pending</option>
                            <option value="approved">Approved</option>
                            <option value="rejected">Rejected</option>
                        </select>
                    </div>
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Admin Notes</label>
                        <textarea name="admin_notes" rows="3"
                                class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm lg:text-base"
                                placeholder="Add any notes or comments..."></textarea>
                    </div>
                    <div class="flex flex-col sm:flex-row sm:justify-end space-y-2 sm:space-y-0 sm:space-x-3">
                        <button type="button" onclick="closeStatusModal()"
                                class="px-4 py-2 text-gray-600 hover:text-gray-800 border border-gray-300 rounded-lg order-2 sm:order-1">
                            Cancel
                        </button>
                        <button type="submit"
                                class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg order-1 sm:order-2">
                            Update Status
                        </button>
                    </div>
                </form>
            </div>
        </div>
@endsection

@push('scripts')
<script>
 // Filter functionality
        const statusFilter = document.getElementById('statusFilter');
        const refundStatusFilter = document.getElementById('refundStatusFilter');

        if (statusFilter) {
            statusFilter.addEventListener('change', filterReturns);
        }
        if (refundStatusFilter) {
            refundStatusFilter.addEventListener('change', filterReturns);
        }

        function filterReturns() {
            const statusFilterValue = document.getElementById('statusFilter')?.value || '';
            const refundStatusFilterValue = document.getElementById('refundStatusFilter')?.value || '';

            // Desktop table rows
            const desktopRows = document.querySelectorAll('.return-item');
            // Mobile cards
            const mobileCards = document.querySelectorAll('.return-card');

            const items = [...desktopRows, ...mobileCards];

            items.forEach(item => {
                const status = item.getAttribute('data-status');
                const refundStatus = item.getAttribute('data-refund-status');

                const statusMatch = !statusFilterValue || status === statusFilterValue;
                const refundStatusMatch = !refundStatusFilterValue || refundStatus === refundStatusFilterValue;

                if (statusMatch && refundStatusMatch) {
                    item.style.display = '';
                } else {
                    item.style.display = 'none';
                }
            });
        }

        function clearFilters() {
            if (statusFilter) statusFilter.value = '';
            if (refundStatusFilter) refundStatusFilter.value = '';
            filterReturns();
        }

        // Modal functions
        function showReturnDetails(returnId) {
            fetch(`/admin/returns/${returnId}`)
                .then(response => response.json())
                .then(data => {
                    document.getElementById('returnDetailsContent').innerHTML = data.html;
                    document.getElementById('returnDetailsModal').classList.remove('hidden');
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('Error loading return details');
                });
        }

        function closeModal() {
            document.getElementById('returnDetailsModal').classList.add('hidden');
        }

        let currentReturnId = null;

        function updateReturnStatus(returnId, status) {
            currentReturnId = returnId;
            const form = document.getElementById('statusForm');
            form.action = `/admin/returns/${returnId}/status`;
            form.querySelector('[name="status"]').value = status;
            document.getElementById('statusModal').classList.remove('hidden');
        }

        function closeStatusModal() {
            document.getElementById('statusModal').classList.add('hidden');
            currentReturnId = null;
        }

        // Handle form submission
        const statusForm = document.getElementById('statusForm');
        if (statusForm) {
            statusForm.addEventListener('submit', function(e) {
                e.preventDefault();

                const formData = new FormData(this);

                fetch(this.action, {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        location.reload();
                    } else {
                        alert('Error updating status');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('Error updating status');
                });
            });
        }

        // Close modals on outside click
        const returnDetailsModal = document.getElementById('returnDetailsModal');
        const statusModal = document.getElementById('statusModal');

        if (returnDetailsModal) {
            returnDetailsModal.addEventListener('click', function(e) {
                if (e.target === this) {
                    closeModal();
                }
            });
        }

        if (statusModal) {
            statusModal.addEventListener('click', function(e) {
                if (e.target === this) {
                    closeStatusModal();
                }
            });
        }

        // Close modals on Escape key
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                closeModal();
                closeStatusModal();
            }
        });
</script>
@endpush