@extends('layouts.admin')

@section('content')

<div class="max-w-6xl mx-auto px-6 py-2 space-y-10">
    <div>
        <h1 class="text-2xl font-bold text-gray-800 mb-2">
            Manage Dewan: <span class="text-indigo-600">{{ $dewan->name }}</span>
        </h1>
        <p class="text-gray-500">View, update, or add facilities and event addons for this Dewan.</p>
    </div>

    @if(session('success'))
    <div class="mb-4 p-3 bg-green-100 text-green-800 border border-green-300 rounded">
        {{ session('success') }}
    </div>
    @endif

    @if ($errors->any())
        <div class="mb-4 p-3 bg-red-100 text-red-800 border border-red-300 rounded">
            <strong>Whoops! Something went wrong.</strong>
            <ul class="mt-2 list-disc list-inside">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-6 mb-8">
        <h2 class="text-2xl font-semibold text-gray-800 mb-6">
            Edit Dewan Details
        </h2>

        <form method="POST"
            action="{{ route('admin.updateDewan', $dewan->id) }}"
            enctype="multipart/form-data"
            class="space-y-8">
            @csrf
            @method('PUT')

            <!-- ================= BASIC INFO ================= -->

            <!-- Dewan Image -->
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">
                    Dewan Image
                </label>

                @if($dewan->image_path)
                    <div class="mb-3">
                        <img
                            src="{{ asset('storage/' . $dewan->image_path) }}"
                            alt="Dewan Image"
                            class="h-48 object-cover rounded-lg border"
                        >
                    </div>
                @endif

                <input
                    type="file"
                    name="image"
                    accept="image/*"
                    class="w-full rounded-lg border-gray-300 px-3 py-2 text-sm"
                >
                <p class="text-xs text-gray-500 mt-1">
                    Optional. JPG / PNG only. Max 2MB.
                </p>
            </div>

            <!-- Dewan Name -->
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">
                    Dewan Name
                </label>
                <input
                    type="text"
                    name="name"
                    value="{{ $dewan->name }}"
                    class="w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 px-4 py-2.5"
                    required
                >
            </div>
            
            <!-- ================= DESCRIPTION ================= -->
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">
                    Dewan Description
                </label>
                <textarea
                    name="description"
                    rows="3"
                    class="w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 px-4 py-2.5"
                    placeholder="Brief description of the dewan (capacity, facilities, etc.)"
                >{{ old('description', $dewan->description) }}</textarea>
            </div>

            <!-- ================= ADDRESS ================= -->
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">
                    Dewan Address
                </label>
                <textarea
                    name="address"
                    rows="3"
                    class="w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 px-4 py-2.5"
                    placeholder="Full address of the dewan"
                >{{ old('address', $dewan->address) }}</textarea>
            </div>

            <!-- ================= RATES ================= -->
            <div class="pt-6 border-t">
                <h3 class="text-lg font-semibold text-gray-800 mb-4">
                    Rates & Charges
                </h3>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">
                            Kenduri Rate (RM)
                        </label>
                        <input
                            type="number"
                            step="0.01"
                            name="rate_kenduri"
                            value="{{ $dewan->rate_kenduri }}"
                            class="w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 px-4 py-2.5"
                            required
                        >
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">
                            Event Rate (RM / hour)
                        </label>
                        <input
                            type="number"
                            step="0.01"
                            name="rate_event"
                            value="{{ $dewan->rate_event }}"
                            class="w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 px-4 py-2.5"
                            required
                        >
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">
                            Deposit Amount (RM)
                        </label>
                        <input
                            type="number"
                            step="0.01"
                            name="rate_deposit"
                            value="{{ $dewan->rate_deposit }}"
                            class="w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 px-4 py-2.5"
                            required
                        >
                    </div>
                </div>
            </div>

            <!-- ================= ACTION ================= -->
            <div class="flex justify-end pt-6">
                <button
                    type="submit"
                    class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium px-6 py-2.5 rounded-lg shadow-sm transition"
                >
                    Save Changes
                </button>
            </div>
        </form>
    </div>


    <div class="bg-white rounded-lg shadow p-6">
        <h2 class="text-xl font-semibold text-gray-700 mb-4">Manage Facilities</h2>
        
        @if($facilities->count() > 0)
            <div class="overflow-x-auto">
                <table class="w-full text-sm text-left border-collapse">
                    <thead class="bg-gray-100 text-gray-700 uppercase text-xs">
                        <tr>
                            <th class="px-4 py-3">Name</th>
                            <th class="px-4 py-3">Price / Hour (RM)</th>
                            <th class="px-4 py-3">Operating Hours</th>
                            <th class="px-4 py-3 text-center">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                        @foreach($facilities as $facility)
                            <tr class="hover:bg-gray-50">
                                <td class="px-4 py-3 font-medium text-gray-900">{{ $facility->name }}</td>
                                <td class="px-4 py-3 text-gray-700">{{ number_format($facility->price_per_hour, 2) }}</td>
                                <td class="px-4 py-3 text-gray-700">{{ \Carbon\Carbon::parse($facility->open_time)->format('h:i A') }} – {{ \Carbon\Carbon::parse($facility->close_time)->format('h:i A') }}</td>
                                <td class="px-4 py-3 text-center space-x-2">
                                    <button onclick="toggleEdit('facility-{{ $facility->id }}')" 
                                        class="bg-yellow-100 text-yellow-700 hover:bg-yellow-200 px-3 py-1 rounded text-xs font-semibold">
                                        Edit
                                    </button>
                                    <form method="POST" action="{{ route('admin.facilities.delete', $facility->id) }}" 
                                          class="inline" onsubmit="return confirm('Delete this facility? This is permanent.');">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="bg-red-100 hover:bg-red-200 text-red-700 px-3 py-1 rounded text-xs font-semibold">
                                            Delete
                                        </button>
                                    </form>
                                </td>
                            </tr>
                            <tr id="editForm-facility-{{ $facility->id }}" class="hidden bg-gray-50">
                                <td colspan="4" class="p-4">
                                    <h3 class="font-semibold mb-2 text-gray-800">Edit: {{ $facility->name }}</h3>
                                    <form method="POST" action="{{ route('admin.facilities.update', $facility->id) }}" class="space-y-3">
                                        @csrf
                                        @method('PUT')
                                        <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
                                            <input type="text" name="name" value="{{ $facility->name }}" class="border rounded px-3 py-2 text-sm w-full" placeholder="Facility name" required>
                                            <input type="number" name="price_per_hour" step="0.01" value="{{ $facility->price_per_hour }}" class="border rounded px-3 py-2 text-sm w-full" placeholder="Price per hour (RM)" required>
                                            <div class="flex gap-2">
                                                <input type="time" name="open_time" value="{{ \Carbon\Carbon::parse($facility->open_time)->format('H:i') }}" 
                                                    class="border rounded px-3 py-2 text-sm w-full" required>
                                                <input type="time" name="close_time" value="{{ \Carbon\Carbon::parse($facility->close_time)->format('H:i') }}" 
                                                    class="border rounded px-3 py-2 text-sm w-full" required>
                                            </div>
                                        </div>
                                        <textarea name="description" class="border rounded px-3 py-2 text-sm w-full" rows="2" placeholder="Description (optional)">{{ $facility->description }}</textarea>
                                        <div class="text-right">
                                            <button type="submit" class="bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded text-sm">
                                                Update Facility
                                            </button>
                                        </div>
                                    </form>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @else
            <p class="text-gray-500 italic">No facilities found for this Dewan.</p>
        @endif
        
        <div class="mt-6 pt-6 border-t">
            <h3 class="text-lg font-semibold text-gray-700 mb-3">Add New Facility</h3>
            <form method="POST" action="{{ route('admin.facilities.store', $dewan->id) }}" class="space-y-4">
                @csrf
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Facility Name</label>
                        <input type="text" name="name" value="{{ old('name') }}" class="border rounded w-full px-3 py-2" required>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Price per Hour (RM)</label>
                        <input type="number" step="0.01" name="price_per_hour" value="{{ old('price_per_hour') }}" class="border rounded w-full px-3 py-2" required>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Open Time</label>
                        <input type="time" name="open_time" value="{{ old('open_time') }}" class="border rounded w-full px-3 py-2" required>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Close Time</label>
                        <input type="time" name="close_time" value="{{ old('close_time') }}" class="border rounded w-full px-3 py-2" required>
                    </div>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Description (optional)</label>
                    <textarea name="description" class="border rounded w-full px-3 py-2" rows="2">{{ old('description') }}</textarea>
                </div>
                <div class="text-right">
                    <button type="submit" class="bg-indigo-500 hover:bg-indigo-600 text-white px-5 py-2 rounded text-sm">
                        Add Facility
                    </button>
                </div>
            </form>
        </div>
    </div>

    <div class="bg-white rounded-lg shadow p-6">
        <h2 class="text-xl font-semibold text-gray-700 mb-4">Manage Event Addons</h2>

        @if($addons->count() > 0)
            <div class="overflow-x-auto">
                <table class="w-full text-sm text-left border-collapse">
                    <thead class="bg-gray-100 text-gray-700 uppercase text-xs">
                        <tr>
                            <th class="px-4 py-3">Name</th>
                            <th class="px-4 py-3">Price (RM)</th>
                            <th class="px-4 py-3">Description</th>
                            <th class="px-4 py-3 text-center">Active</th>
                            <th class="px-4 py-3 text-center">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                        @foreach($addons as $addon)
                            <tr class="hover:bg-gray-50">
                                <td class="px-4 py-3 font-medium text-gray-900">{{ $addon->name }}</td>
                                <td class="px-4 py-3 text-gray-700">{{ number_format($addon->price, 2) }}</td>
                                <td class="px-4 py-3 text-gray-700">{{ $addon->description ?? '—' }}</td>
                                <td class="px-4 py-3 text-center">
                                    <span class="px-3 py-1 rounded-full text-xs font-semibold {{ $addon->is_active ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-600' }}">
                                        {{ $addon->is_active ? 'Yes' : 'No' }}
                                    </span>
                                </td>
                                <td class="px-4 py-3 text-center space-x-2 no-whitespace ">
                                    <button onclick="toggleEdit('addon-{{ $addon->id }}')" 
                                        class="bg-yellow-100 hover:bg-yellow-200 text-yellow-700 px-3 py-1 rounded text-xs font-semibold">
                                        Edit
                                    </button>
                                    <form method="POST" action="{{ route('admin.addons.delete', $addon->id) }}" 
                                          class="inline" onsubmit="return confirm('Delete this addon? This is permanent.');">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="bg-red-100 hover:bg-red-200 text-red-700 px-3 py-1 rounded text-xs font-semibold">
                                            Delete
                                        </button>
                                    </form>
                                </td>
                            </tr>
                            <tr id="editForm-addon-{{ $addon->id }}" class="hidden bg-gray-50">
                                <td colspan="5" class="p-4">
                                    <h3 class="font-semibold mb-2 text-gray-800">Edit: {{ $addon->name }}</h3>
                                    <form method="POST" action="{{ route('admin.addons.update', $addon->id) }}" class="space-y-3">
                                        @csrf
                                        @method('PUT')
                                        <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                                            <input type="text" name="name" value="{{ $addon->name }}" class="border rounded px-3 py-2 text-sm w-full" placeholder="Addon name" required>
                                            <input type="number" name="price" step="0.01" value="{{ $addon->price }}" class="border rounded px-3 py-2 text-sm w-full" placeholder="Price (RM)" required>
                                        </div>
                                        <textarea name="description" class="border rounded px-3 py-2 text-sm w-full" rows="2" placeholder="Description (optional)">{{ $addon->description }}</textarea>
                                        <div class="flex justify-between items-center">
                                            <div class="flex items-center gap-2">
                                                <input type="checkbox" name="is_active" id="is_active-{{$addon->id}}" value="1" {{ $addon->is_active ? 'checked' : '' }} class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                                                <label for="is_active-{{$addon->id}}" class="text-sm text-gray-700">Active (Visible to users)</label>
                                            </div>
                                            <button type="submit" class="bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded text-sm">
                                                Update Addon
                                            </button>
                                        </div>
                                    </form>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @else
            <p class="text-gray-500 italic">No event addons found for this Dewan.</p>
        @endif

        <div class="mt-6 pt-6 border-t">
            <h3 class="text-lg font-semibold text-gray-700 mb-3">Add New Event Addon</h3>
            <form method="POST" action="{{ route('admin.addons.store', $dewan->id) }}" class="space-y-4">
                @csrf
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Addon Name</label>
                        <input type="text" name="name" value="{{ old('name') }}" class="border rounded w-full px-3 py-2" required>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Price (RM)</label>
                        <input type="number" step="0.01" name="price" value="{{ old('price') }}" class="border rounded w-full px-3 py-2" required>
                    </div>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Description (optional)</label>
                    <textarea name="description" class="border rounded w-full px-3 py-2" rows="2">{{ old('description') }}</textarea>
                </div>
                <div class="text-right">
                    <button type="submit" class="bg-indigo-500 hover:bg-indigo-600 text-white px-5 py-2 rounded text-sm">
                        Add Event Addon
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
function toggleEdit(id) {
    const row = document.getElementById(`editForm-${id}`);
    row.classList.toggle('hidden');
}
</script>

@endsection