@extends('backend.layouts.app')

@section('title', $rule->rule_name)

@section('content')
    @php
        $pageTitle = $rule->rule_name;
        $indexRoute = 'theme-rule.index';
        $indexLabel = 'Theme Rules';
    @endphp
    @include('backend.layouts.partials._page_header')

    <div class="space-y-5 sm:space-y-6">
        <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
            <div class="px-5 py-4 sm:px-6 sm:py-5 border-b border-gray-100 dark:border-gray-800">
                <div class="flex items-center justify-between">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">Rule Details</h3>
                    <div class="flex items-center gap-2">
                        @can('theme-rule.update')
                            <a href="{{ route('theme-rule.edit', $rule->rule_id) }}"
                                class="inline-flex items-center justify-center rounded-lg bg-warning-50 p-2 text-warning-500 hover:bg-warning-100 dark:bg-warning-500/10 dark:text-warning-400"
                                title="Edit">
                                <svg class="fill-current" width="18" height="18" viewBox="0 0 18 18" fill="none">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M13.5 2.5L15.5 4.5L5 15H3V13L13.5 2.5ZM14.5 1.5L12.5 3.5L14.5 5.5L16.5 3.5L14.5 1.5Z" fill=""></path>
                                </svg>
                            </a>
                        @endcan
                        @can('theme-rule.delete')
                            <form action="{{ route('theme-rule.destroy') }}" method="POST" class="inline delete-form">
                                @csrf
                                <input type="hidden" name="id" value="{{ $rule->rule_id }}">
                                <button type="submit"
                                    class="inline-flex items-center justify-center rounded-lg bg-error-50 p-2 text-error-500 hover:bg-error-100 dark:bg-error-500/10 dark:text-error-400"
                                    title="Delete">
                                    <svg class="fill-current" width="18" height="18" viewBox="0 0 18 18" fill="none">
                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M6 2.5H12L13 3.5H16V5H2V3.5H5L6 2.5ZM3.5 6H14.5L14 15.5H4L3.5 6ZM6.5 8.5H8V13.5H6.5V8.5ZM10 8.5H11.5V13.5H10V8.5Z" fill=""></path>
                                    </svg>
                                </button>
                            </form>
                        @endcan
                    </div>
                </div>
            </div>
            <div class="px-5 py-6 sm:px-6 space-y-6">
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                    <div>
                        <label class="text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Rule Name</label>
                        <p class="mt-1 text-sm text-gray-800 dark:text-white/90">{{ $rule->rule_name }}</p>
                    </div>
                    <div>
                        <label class="text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Status</label>
                        <p class="mt-1">
                            @if($rule->rule_status)
                                <span class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium bg-success-50 text-success-600 dark:bg-success-500/10 dark:text-success-400">Active</span>
                            @else
                                <span class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium bg-error-50 text-error-600 dark:bg-error-500/10 dark:text-error-400">Inactive</span>
                            @endif
                        </p>
                    </div>
                    @if($rule->rule_description)
                        <div class="sm:col-span-2">
                            <label class="text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Description</label>
                            <p class="mt-1 text-sm text-gray-800 dark:text-white/90">{{ $rule->rule_description }}</p>
                        </div>
                    @endif
                </div>

                <div>
                    <label class="text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">CSS Template</label>
                    <pre class="mt-1 rounded-lg border border-gray-200 bg-gray-50 p-4 text-sm text-gray-800 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 overflow-x-auto"><code>{{ $rule->rule_content }}</code></pre>
                </div>

                @if($rule->rule_params)
                    <div>
                        <label class="text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Parameters</label>
                        <div class="mt-2 max-w-full overflow-x-auto">
                            <table class="w-full min-w-[400px]">
                                <thead>
                                    <tr class="border-b border-gray-100 dark:border-gray-800">
                                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400">Name</th>
                                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400">Default</th>
                                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400">Type</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
                                    @foreach($rule->rule_params as $param)
                                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50">
                                            <td class="px-4 py-2 text-sm text-gray-800 dark:text-white/90">{{ $param['param_name'] ?? '-' }}</td>
                                            <td class="px-4 py-2 text-sm text-gray-600 dark:text-gray-400">
                                                @if(($param['param_type'] ?? '') === 'unit' && is_object($param['param_default'] ?? ''))
                                                    {{ $param['param_default']->value ?? '' }}{{ $param['param_default']->unit ?? '' }}
                                                @else
                                                    {{ $param['param_default'] ?? '-' }}
                                                @endif
                                            </td>
                                            <td class="px-4 py-2">
                                                <span class="inline-flex items-center rounded-md bg-brand-50 px-2 py-1 text-xs font-medium text-brand-600 dark:bg-brand-500/10 dark:text-brand-400">
                                                    {{ $param['param_type'] ?? '-' }}
                                                </span>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                @endif

                <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 pt-4 border-t border-gray-100 dark:border-gray-800">
                    <div>
                        <label class="text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Created At</label>
                        <p class="mt-1 text-sm text-gray-800 dark:text-white/90">{{ $rule->created_at ? $rule->created_at->format('d M Y, H:i') : '-' }}</p>
                    </div>
                    <div>
                        <label class="text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Updated At</label>
                        <p class="mt-1 text-sm text-gray-800 dark:text-white/90">{{ $rule->updated_at ? $rule->updated_at->format('d M Y, H:i') : '-' }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            document.querySelectorAll('.delete-form').forEach(form => {
                form.addEventListener('submit', function (e) {
                    e.preventDefault();
                    Swal.fire({
                        title: 'Are you sure?',
                        text: "You won't be able to revert this!",
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#ef4444',
                        cancelButtonColor: '#6b7280',
                        confirmButtonText: 'Yes, delete it!',
                        width: '380px',
                    }).then((result) => {
                        if (result.isConfirmed) form.submit();
                    });
                });
            });
        });
    </script>
@endsection