@extends('layouts.app_rest')

@section('content')
    <div class="p-6">
        <div class="bg-white shadow-lg rounded-lg p-6">
            <ul class="flex space-x-2 rtl:space-x-reverse pb-4">
                <li>
                    <a href="{{ action('Auth\LoginController@dashboard') }}"
                        class="text-primary hover:underline">Dashboard</a>
                </li>
                <li class="before:content-['/'] ltr:before:mr-1 rtl:before:ml-1">
                    <span>Product Setting</span>
                </li>
            </ul>

            <div x-data="productActivitySettings">
                <div style="border: .5px solid lightgray; padding: 20px; border-radius: 5px; position: relative">
                    <h2 class="text-xl font-bold mb-4">Product Activity Settings</h2>
                    <form action="{{ route('update.activities') }}" method="POST">
                        @csrf
                        <table class="min-w-full table-auto border-collapse">
                            <thead>
                                <tr>
                                    <th class="px-4 py-2 border">Activity Name</th>
                                    <th class="px-4 py-2 border">Type</th>
                                    <th class="px-4 py-2 border">Status</th>
                                    <th class="px-4 py-2 border">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($activities as $activity)
                                    <tr>
                                        <td class="px-4 py-2 border">{{ $activity['name'] }}
                                        </td>
                                        <td class="px-4 py-2 border">{{ $activity['type'] }}
                                        </td>
                                        <td class="px-4 py-2 border flex items-center">
                                            <i class="{{ $activity['setup_status'] == 1 ? 'fas fa-check-circle text-green-500' : 'fas fa-times-circle text-red-500' }}"
                                                style="color: {{ $activity['setup_status'] == 1 ? 'green' : 'red' }}; background: none; border: none;"
                                                aria-hidden="true"></i>
                                            <span
                                                class="ml-2">{{ $activity['setup_status'] == 1 ? 'Active' : 'Inactive' }}</span>
                                        </td>
                                        <td class="px-4 py-2 border">
                                            <button @click.prevent="toggleStatus({{ $activity['setup_id'] }})"
                                                class="p-2 rounded-lg transition duration-300 hover:opacity-80 flex items-center">
                                                <span class="p-1">
                                                    <i id="icon-{{ $activity['setup_id'] }}"
                                                        class="{{ $activity['setup_status'] == 1 ? 'fas fa-toggle-on fa-2x' : 'fas fa-toggle-off fa-2x' }}"
                                                        style="color: {{ $activity['setup_status'] == 1 ? 'green' : 'red' }}; background: none; border: none;"
                                                        aria-hidden="true"></i>
                                                </span>
                                            </button>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                        <div class="flex justify-end mt-4">
                            <button @click.prevent="updateActivities()" class="btn btn-primary btn-lg">
                                Update
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('javascript')
    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('productActivitySettings', () => ({
                activities: @json($activities),
                updatedActivities: [],

                toggleStatus(setupId) {
                    const activity = this.activities.find(activity => activity.setup_id === setupId);

                    if (activity) {
                        activity.setup_status = activity.setup_status === 1 ? 0 : 1;

                        if (!this.updatedActivities.includes(setupId)) {
                            this.updatedActivities.push(setupId);
                        }

                        const icon = document.querySelector(`#icon-${setupId}`);
                        if (icon) {
                            icon.className = activity.setup_status === 1 ?
                                'fas fa-toggle-on fa-2x text-green-500' :
                                'fas fa-toggle-off fa-2x text-red-500';

                            icon.setAttribute('style', activity.setup_status === 1 ?
                                'color: green; background: none; border: none;' :
                                'color: red; background: none; border: none;'
                            );
                        }
                    } else {
                        console.error('Activity not found for ID:', setupId);
                    }
                },

                async updateActivities() {
                    const data = this.updatedActivities.map(id => {
                        const activity = this.activities.find(a => a.setup_id === id);
                        return {
                            id: activity.setup_id,
                            is_enable: activity.setup_status
                        };
                    });

                    console.log('Data to be sent to the server:', data);

                    try {
                        const response = await fetch("{{ route('update.activities') }}", {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': document.querySelector(
                                    'meta[name="csrf-token"]').getAttribute('content')
                            },
                            body: JSON.stringify(data)
                        });

                        const result = await response.json();

                        if (response.ok) {
                            console.log(result.message);
                            this
                                .updatedActivities = [];
                            location.reload();
                        } else {
                            console.error('Failed to update activities:', result
                                .error);
                        }
                    } catch (error) {
                        console.error('Error:', error);
                    }
                }
            }));
        });
    </script>
@endsection