@extends('layouts.app')

@section('title', 'Manage Request Types')

@section('content')
<div class="space-y-6" x-data="{ showAddModal: false, editItem: null }">

    <!-- Header -->
    <div class="flex items-center justify-between pb-4 border-b border-slate-200">
        <div>
            <h1 class="text-2xl font-bold text-slate-900 tracking-tight">Request Types Management</h1>
            <p class="text-xs text-slate-500 mt-1">Configure marketing request categories, URL requirements, and campaign fields.</p>
        </div>
        <button @click="showAddModal = true" class="px-4 py-2 bg-harcourts-blue hover:bg-blue-800 text-white font-bold text-xs uppercase tracking-wider rounded shadow">
            + New Request Type
        </button>
    </div>

    <!-- Request Types Table -->
    <div class="bg-white rounded-lg border border-slate-200 shadow-sm overflow-hidden">
        <table class="w-full text-left text-xs text-slate-700">
            <thead class="bg-slate-50 text-slate-500 uppercase tracking-wider font-semibold border-b border-slate-200">
                <tr>
                    <th class="px-6 py-3">Order</th>
                    <th class="px-6 py-3">Category Name</th>
                    <th class="px-6 py-3">Slug</th>
                    <th class="px-6 py-3">Requires Listing URL?</th>
                    <th class="px-6 py-3">Supports Paid Campaign Fields?</th>
                    <th class="px-6 py-3">Status</th>
                    <th class="px-6 py-3 text-right">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-200">
                @foreach($requestTypes as $type)
                    <tr class="hover:bg-slate-50 transition-colors">
                        <td class="px-6 py-4 font-bold text-slate-500">{{ $type->sort_order }}</td>
                        <td class="px-6 py-4 font-bold text-slate-900">{{ $type->name }}</td>
                        <td class="px-6 py-4 text-slate-500 font-mono text-[11px]">{{ $type->slug }}</td>
                        <td class="px-6 py-4">
                            @if($type->requires_property_url)
                                <span class="px-2 py-0.5 bg-blue-100 text-blue-800 rounded font-bold text-[10px]">YES</span>
                            @else
                                <span class="px-2 py-0.5 bg-slate-100 text-slate-600 rounded text-[10px]">NO</span>
                            @endif
                        </td>
                        <td class="px-6 py-4">
                            @if($type->supports_campaign_fields)
                                <span class="px-2 py-0.5 bg-purple-100 text-purple-800 rounded font-bold text-[10px]">YES (Campaign Fields Enabled)</span>
                            @else
                                <span class="px-2 py-0.5 bg-slate-100 text-slate-600 rounded text-[10px]">NO</span>
                            @endif
                        </td>
                        <td class="px-6 py-4">
                            @if($type->active)
                                <span class="px-2 py-0.5 bg-emerald-100 text-emerald-800 rounded font-bold text-[10px]">Active</span>
                            @else
                                <span class="px-2 py-0.5 bg-rose-100 text-rose-800 rounded text-[10px]">Inactive</span>
                            @endif
                        </td>
                        <td class="px-6 py-4 text-right">
                            <button @click="editItem = {{ json_encode($type) }}" class="px-3 py-1 bg-slate-100 hover:bg-slate-200 text-slate-700 font-semibold rounded text-xs">
                                Edit
                            </button>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    <!-- ADD MODAL -->
    <div x-show="showAddModal" x-cloak class="fixed inset-0 z-50 bg-slate-900/60 backdrop-blur-sm flex items-center justify-center p-4">
        <div class="bg-white rounded-lg max-w-md w-full p-6 shadow-2xl space-y-4">
            <h3 class="text-base font-bold text-slate-900">Add New Request Type</h3>
            <form method="POST" action="{{ route('admin.request-types.store') }}" class="space-y-4">
                @csrf
                <div>
                    <label class="block text-xs font-bold text-slate-700 uppercase mb-1">Category Name *</label>
                    <input type="text" name="name" required placeholder="e.g. Social Media Reel" class="w-full px-3 py-2 text-xs border border-slate-300 rounded">
                </div>

                <div>
                    <label class="block text-xs font-bold text-slate-700 uppercase mb-1">Sort Order</label>
                    <input type="number" name="sort_order" value="10" class="w-full px-3 py-2 text-xs border border-slate-300 rounded">
                </div>

                <div class="space-y-2 pt-2 text-xs">
                    <label class="flex items-center space-x-2 font-bold text-slate-700 cursor-pointer">
                        <input type="checkbox" name="requires_property_url" value="1" checked class="rounded text-harcourts-blue">
                        <span>Requires Property Listing URL</span>
                    </label>

                    <label class="flex items-center space-x-2 font-bold text-slate-700 cursor-pointer">
                        <input type="checkbox" name="supports_campaign_fields" value="1" class="rounded text-harcourts-blue">
                        <span>Enable Paid Advertising Campaign Fields</span>
                    </label>
                </div>

                <div class="flex items-center justify-end space-x-3 pt-3 border-t border-slate-100">
                    <button type="button" @click="showAddModal = false" class="px-3 py-1.5 text-xs text-slate-600">Cancel</button>
                    <button type="submit" class="px-4 py-1.5 bg-harcourts-blue text-white font-bold text-xs uppercase rounded">Save Category</button>
                </div>
            </form>
        </div>
    </div>

    <!-- EDIT MODAL -->
    <div x-show="editItem !== null" x-cloak class="fixed inset-0 z-50 bg-slate-900/60 backdrop-blur-sm flex items-center justify-center p-4">
        <div class="bg-white rounded-lg max-w-md w-full p-6 shadow-2xl space-y-4" x-if="editItem">
            <h3 class="text-base font-bold text-slate-900">Edit Request Type</h3>
            <form :action="'{{ url('/admin/request-types') }}/' + editItem.id" method="POST" class="space-y-4">
                @csrf
                @method('PUT')
                <div>
                    <label class="block text-xs font-bold text-slate-700 uppercase mb-1">Category Name *</label>
                    <input type="text" name="name" :value="editItem.name" required class="w-full px-3 py-2 text-xs border border-slate-300 rounded">
                </div>

                <div>
                    <label class="block text-xs font-bold text-slate-700 uppercase mb-1">Sort Order</label>
                    <input type="number" name="sort_order" :value="editItem.sort_order" class="w-full px-3 py-2 text-xs border border-slate-300 rounded">
                </div>

                <div class="space-y-2 pt-2 text-xs">
                    <label class="flex items-center space-x-2 font-bold text-slate-700 cursor-pointer">
                        <input type="checkbox" name="requires_property_url" value="1" :checked="editItem.requires_property_url" class="rounded text-harcourts-blue">
                        <span>Requires Property Listing URL</span>
                    </label>

                    <label class="flex items-center space-x-2 font-bold text-slate-700 cursor-pointer">
                        <input type="checkbox" name="supports_campaign_fields" value="1" :checked="editItem.supports_campaign_fields" class="rounded text-harcourts-blue">
                        <span>Enable Paid Advertising Campaign Fields</span>
                    </label>

                    <label class="flex items-center space-x-2 font-bold text-slate-700 cursor-pointer">
                        <input type="checkbox" name="active" value="1" :checked="editItem.active" class="rounded text-harcourts-blue">
                        <span>Active Category</span>
                    </label>
                </div>

                <div class="flex items-center justify-end space-x-3 pt-3 border-t border-slate-100">
                    <button type="button" @click="editItem = null" class="px-3 py-1.5 text-xs text-slate-600">Cancel</button>
                    <button type="submit" class="px-4 py-1.5 bg-harcourts-blue text-white font-bold text-xs uppercase rounded">Save Changes</button>
                </div>
            </form>
        </div>
    </div>

</div>
@endsection
