@extends('layouts.master')
@section('content')
    <main class="flex-1 overflow-y-auto p-6">
        <div class="bg-dash-surface rounded-xl border border-dash-border overflow-hidden shadow-sm mb-6">
            <div class="p-6 border-b border-dash-border flex items-center justify-between">
                <h3 class="text-lg font-semibold">Service List</h3>
                <button onclick="openServiceModal()"
                    class="px-5 py-2.5 bg-dash-primary hover:bg-dash-primary-hover text-white rounded-xl text-sm font-medium transition-all shadow-md">
                    Create Service
                </button>
            </div>
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-dash-border">
                    <thead class="bg-dash-surface-hover">
                        <tr>
                            <th
                                class="px-6 py-4 text-left text-xs font-medium text-dash-text-muted uppercase tracking-wider">
                                ID</th>
                            <th
                                class="px-6 py-4 text-left text-xs font-medium text-dash-text-muted uppercase tracking-wider">
                                Service Name</th>
                            <th
                                class="px-6 py-4 text-left text-xs font-medium text-dash-text-muted uppercase tracking-wider">
                                Email</th>
                            <th
                                class="px-6 py-4 text-left text-xs font-medium text-dash-text-muted uppercase tracking-wider">
                                Domain</th>
                            <th
                                class="px-6 py-4 text-left text-xs font-medium text-dash-text-muted uppercase tracking-wider">
                                SMS Provider</th>
                            <th
                                class="px-6 py-4 text-left text-xs font-medium text-dash-text-muted uppercase tracking-wider">
                                API Key</th>
                            <th
                                class="px-6 py-4 text-left text-xs font-medium text-dash-text-muted uppercase tracking-wider">
                                Secret Key</th>
                            <th
                                class="px-6 py-4 text-left text-xs font-medium text-dash-text-muted uppercase tracking-wider">
                                Status</th>

                            <th
                                class="px-6 py-4 text-right text-xs font-medium text-dash-text-muted uppercase tracking-wider">
                                Actions</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-dash-border">
                        @forelse($services as $service)
                            <tr class="hover:bg-dash-surface-hover transition-colors cursor-pointer" onclick="openModal()">
                                <td class="px-6 py-4 whitespace-nowrap text-sm">{{ $service->id }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">{{ $service->name }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm">{{ $service->email }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-dash-text-muted">{{ $service->domain }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                    {{ $service->smsGateway?->provider_name }}
                                </td>

                                <td class="px-6 py-4 whitespace-nowrap text-sm">
                                    <div class="flex items-center gap-2">
                                        <span class="text-dash-text-muted font-mono">
                                            {{ substr($service->api_key, 0, 4) . '****' . substr($service->api_key, -4) }}
                                        </span>
                                        <button type="button" onclick="copyToken('{{ $service->api_key }}', this)"
                                            class="text-dash-text-muted hover:text-dash-primary transition"
                                            title="Copy Api Key">
                                            <i class="fas fa-copy"></i>
                                        </button>

                                    </div>
                                </td>

                                <td class="px-6 py-4 whitespace-nowrap text-sm">
                                    <div class="flex items-center gap-2">
                                        <span class="text-dash-text-muted font-mono">
                                            {{ substr($service->secret_key, 0, 4) . '****' . substr($service->secret_key, -4) }}
                                        </span>
                                        <button type="button" onclick="copyToken('{{ $service->secret_key }}', this)"
                                            class="text-dash-text-muted hover:text-dash-primary transition"
                                            title="Copy Secret Key">
                                            <i class="fas fa-copy"></i>
                                        </button>

                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    @if($service->status == 'active')
                                        <span
                                            class="px-2.5 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-dash-success/20 text-dash-success">
                                            Active
                                        </span>
                                    @else
                                        <span
                                            class="px-2.5 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-dash-danger/20 text-dash-danger">
                                            Inactive
                                        </span>
                                    @endif
                                </td>

                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm space-x-2">
                                    <button type="button"
                                        onclick="showRevokeConfirm({{ $service->id }}, '{{ $service->name }}')" class="inline-flex items-center justify-center p-2 rounded-lg
                                                               text-dash-danger hover:bg-dash-danger/10 transition"
                                        title="{{ $service->status === 'active' ? 'Revoke / Deactivate Service' : 'Already Revoked' }}"
                                        {{ $service->status !== 'active' ? 'disabled' : '' }} @class([
                                            'bg-dash-surface-hover',
                                            'text-dash-danger hover:text-white hover:bg-dash-danger' => $service->status === 'active',
                                            'text-dash-text-muted cursor-not-allowed opacity-60' => $service->status !== 'active',
                                        ])>
                                        <i class="fas fa-ban text-base"></i>
                                    </button>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="9" class="px-6 py-4 whitespace-nowrap text-sm text-center">No services found</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </main>

    <div id="serviceModal" class="fixed inset-0 z-50 hidden items-center justify-center p-4 overflow-hidden">
        <div class="absolute inset-0 bg-black/70 backdrop-blur-sm" onclick="closeModal()"></div>
        <div
            class="relative bg-dash-surface rounded-2xl border border-dash-border shadow-2xl max-w-md w-full mx-auto overflow-hidden">
            <div id="serviceSuccess" class="hidden p-6 text-center space-y-4">
                <div
                    class="w-16 h-16 bg-dash-success/20 text-dash-success rounded-full flex items-center justify-center mx-auto">
                    <svg class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                    </svg>
                </div>
                <h3 class="text-xl font-semibold text-dash-text">Service Created!</h3>
                <p class="text-dash-text-muted">The service has been successfully created.</p>
                <button onclick="closeServiceModal()"
                    class="px-5 py-2.5 bg-dash-surface-hover hover:bg-dash-surface text-dash-text rounded-lg transition-colors">Close</button>
            </div>

            <form id="serviceForm" action="{{  route('create.service') }}" method="POST" class="p-6 space-y-5">
                @csrf
                <div>
                    <label class="block text-sm text-dash-text-muted mb-1.5">Service Name</label>
                    <input type="text"
                        class="w-full px-4 py-2.5 bg-dash-surface-hover border border-dash-border rounded-lg focus:outline-none focus:border-dash-primary focus:ring-1 focus:ring-dash-primary text-dash-text"
                        placeholder="Service Name" name="service_name">
                    <p id="error-service_name" class="text-dash-danger text-xs mt-1 hidden"></p>
                </div>

                <div>
                    <label class="block text-sm text-dash-text-muted mb-1.5">Email</label>
                    <input type="email"
                        class="w-full px-4 py-2.5 bg-dash-surface-hover border border-dash-border rounded-lg focus:outline-none focus:border-dash-primary focus:ring-1 focus:ring-dash-primary text-dash-text"
                        placeholder="john@example.com" name="email">
                    <p id="error-email" class="text-dash-danger text-xs mt-1 hidden"></p>
                </div>

                <div>
                    <label class="block text-sm text-dash-text-muted mb-1.5">Domain</label>
                    <input type="text"
                        class="w-full px-4 py-2.5 bg-dash-surface-hover border border-dash-border rounded-lg focus:outline-none focus:border-dash-primary focus:ring-1 focus:ring-dash-primary text-dash-text"
                        placeholder="Domain" name="domain">
                    <p id="error-domain" class="text-dash-danger text-xs mt-1 hidden"></p>
                </div>

                <div class="space-y-3">
                    @foreach($gateways as $gateway)
                        <label
                            class="flex items-center justify-between bg-dash-surface-hover p-4 rounded-xl border border-dash-border cursor-pointer">
                            <div>
                                <p class="text-dash-text font-medium">
                                    {{ $gateway->provider_name }}
                                </p>
                                <p class="text-xs text-dash-text-muted">
                                    {{ $gateway->provider_name }}
                                </p>
                            </div>

                            <input type="radio" name="sms_gateway_id" value="{{ $gateway->id }}"
                                class="w-4 h-4 text-dash-primary border-dash-primary">
                        </label>
                    @endforeach
                </div>
                <p id="error-sms_gateway_id" class="text-dash-danger text-xs mt-1 hidden"></p>


                <div class="flex justify-end space-x-3 pt-4 border-t border-dash-border">
                    <button type="button" onclick="closeModal()"
                        class="px-5 py-2.5 bg-dash-surface-hover hover:bg-dash-surface text-dash-text rounded-lg transition-colors">
                        Cancel
                    </button>
                    <button type="submit"
                        class="px-5 py-2.5 bg-dash-primary hover:bg-dash-primary-hover text-white rounded-lg transition-colors shadow-md">
                        Submit
                    </button>
                </div>
            </form>
        </div>
    </div>
    <div id="confirmModal" class="fixed inset-0 z-50 hidden items-center justify-center p-4 overflow-hidden">
        <div class="absolute inset-0 bg-black/70 backdrop-blur-sm" onclick="closeModal()"></div>
        <div
            class="relative bg-dash-surface rounded-2xl border border-dash-border shadow-2xl max-w-md w-full mx-auto overflow-hidden transform transition-all">
            <div class="p-6 border-b border-dash-border flex items-center space-x-3">
                <div class="flex-shrink-0">
                    <svg class="h-8 w-8 text-dash-danger" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <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>
                <h3 class="text-xl font-semibold text-dash-text">Confirm Revoke</h3>
            </div>
            <div class="p-6">
                <p id="confirmMessage" class="text-dash-text mb-6"></p>

                <div class="flex justify-end space-x-3">
                    <button onclick="closeModal()"
                        class="px-5 py-2.5 bg-dash-surface-hover hover:bg-dash-surface text-dash-text rounded-lg transition-colors">
                        Cancel
                    </button>
                    <button id="confirmYesBtn"
                        class="px-5 py-2.5 bg-dash-danger hover:bg-red-700 text-white rounded-lg transition-colors shadow-md">
                        Yes, Revoke
                    </button>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('script')
    <script>
        function openServiceModal() {
            document.getElementById('serviceModal').classList.remove('hidden');
            document.getElementById('serviceModal').classList.add('flex');
            document.getElementById('serviceForm').classList.remove('hidden');
            document.getElementById('serviceSuccess').classList.add('hidden');
        }

        function closeServiceModal() {
            document.getElementById('serviceModal').classList.add('hidden');
            document.getElementById('serviceModal').classList.remove('flex');
            location.reload();
        }


        document.getElementById('serviceForm').addEventListener('submit', function (e) {
            e.preventDefault();
            document.querySelectorAll('[id^="error-"]').forEach(el => {
                el.classList.add('hidden');
                el.textContent = '';
            });

            const formData = new FormData(this);
            fetch(this.action, {
                method: 'POST',
                body: formData,
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'Accept': 'application/json'
                }
            }).then(response => response.json().then(data => ({
                status: response.status,
                body: data
            })))
                .then(({
                    status,
                    body
                }) => {
                    if (status === 422) {
                        Object.keys(body.errors).forEach(field => {
                            const errorElement = document.getElementById('error-' + field);
                            if (errorElement) {
                                errorElement.textContent = body.errors[field][0];
                                errorElement.classList.remove('hidden');
                            }
                        });
                    } else if (body.success) {
                        document.getElementById('serviceSuccess').classList.remove('hidden');
                        document.getElementById('serviceForm').classList.add('hidden');
                    }
                });
        });

        function showConfirmModal(message, onConfirm) {
            document.getElementById('confirmMessage').textContent = message;
            document.getElementById('confirmModal').classList.remove('hidden');
            document.getElementById('confirmModal').classList.add('flex');

            const yesBtn = document.getElementById('confirmYesBtn');
            yesBtn.onclick = function () {
                closeModal();
                if (onConfirm) onConfirm();
            };

            confirmCallback = onConfirm;
        }

        function closeModal() {
            const modals = document.querySelectorAll('#serviceModal, #confirmModal');
            modals.forEach(modal => {
                modal.classList.add('hidden');
                modal.classList.remove('flex');
            });
        }

        function showRevokeConfirm(serviceId, serviceName) {
            const message = `Are you sure you want to revoke "${serviceName}"?`;

            showConfirmModal(message, function () {
                fetch(`/revoke/${serviceId}/service`, {
                    method: 'GET'
                }).then(() => location.reload());
            });
        }
    </script>
@endpush