@extends('admin.layouts.dashboard')
@section('title', 'Services')
@section('content')
<div class="container-fluid mt-4">

    <div class="d-flex justify-content-between align-items-center mb-4">
        <h3 class="mb-0">Services</h3>
        <button class="btn btn-dark btn-sm" onclick="document.getElementById('addServiceModal').showModal()">
            <i class="fas fa-plus me-1"></i> Add Service
        </button>
    </div>

    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show">{{ session('success') }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
    @endif
    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show">{{ session('error') }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
    @endif

    <div class="card">
        <div class="card-body p-0">
            <table class="table table-striped table-hover mb-0 admin-data-table" style="vertical-align:middle;">
                <thead class="table-dark">
                    <tr>
                        <th>Sr No</th>
                        <th>Name</th>
                        <th>Description</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($services as $s)
                    <tr>
                        <td>{{ ($services->currentPage() - 1) * $services->perPage() + $loop->iteration }}</td>
                        <td><strong>{{ $s->name }}</strong></td>
                        <td style="max-width:300px;">{{ $s->description ?? '—' }}</td>
                        <td>
                            <span class="badge bg-{{ $s->is_active ? 'success' : 'secondary' }}">
                                {{ $s->is_active ? 'Active' : 'Inactive' }}
                            </span>
                        </td>
                        <td>
                            <div class="admin-table-actions">
                                <button class="btn btn-sm btn-warning"
                                    onclick="openEditModal({{ $s->id }}, '{{ addslashes($s->name) }}', '{{ addslashes($s->description ?? '') }}', {{ $s->is_active ? 1 : 0 }})">
                                    Edit
                                </button>
                                <form method="POST" action="{{ route('admin.services.destroy', $s) }}"
                                      onsubmit="return confirm('Delete this service?')">
                                    @csrf @method('DELETE')
                                    <button class="btn btn-sm btn-danger">Delete</button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr><td colspan="6" class="text-center py-4 text-muted">No services found. Click "Add Service" to create one.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <div class="admin-pagination">{{ $services->onEachSide(1)->links() }}</div>
</div>

{{-- Add Service Modal --}}
<dialog id="addServiceModal" style="border:none; border-radius:8px; padding:0; width:480px; max-width:95vw; box-shadow:0 20px 60px rgba(0,0,0,.2);">
    <div style="padding:24px;">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h5 class="mb-0 fw-bold">Add Service</h5>
            <button onclick="document.getElementById('addServiceModal').close()" style="border:none;background:none;font-size:22px;cursor:pointer;color:#666;">&times;</button>
        </div>
        <form method="POST" action="{{ route('admin.services.store') }}">
            @csrf
            <div class="mb-3">
                <label class="form-label fw-bold">Service Name <span class="text-danger">*</span></label>
                <input type="text" name="name" class="form-control" placeholder="e.g. Duct Cleaning" required>
            </div>
            <div class="mb-3">
                <label class="form-label fw-bold">Description</label>
                <textarea name="description" class="form-control" rows="2" placeholder="Optional description..."></textarea>
            </div>
            <div class="mb-3 form-check">
                <input type="hidden" name="is_active" value="0">
                <input type="checkbox" name="is_active" id="add_is_active" value="1" class="form-check-input" checked>
                <label class="form-check-label" for="add_is_active">Active</label>
            </div>
            <div class="d-flex justify-content-end gap-2">
                <button type="button" class="btn btn-secondary" onclick="document.getElementById('addServiceModal').close()">Cancel</button>
                <button type="submit" class="btn btn-dark"><i class="fas fa-save me-1"></i> Save</button>
            </div>
        </form>
    </div>
</dialog>

{{-- Edit Service Modal --}}
<dialog id="editServiceModal" style="border:none; border-radius:8px; padding:0; width:480px; max-width:95vw; box-shadow:0 20px 60px rgba(0,0,0,.2);">
    <div style="padding:24px;">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h5 class="mb-0 fw-bold">Edit Service</h5>
            <button onclick="document.getElementById('editServiceModal').close()" style="border:none;background:none;font-size:22px;cursor:pointer;color:#666;">&times;</button>
        </div>
        <form method="POST" id="editServiceForm" action="">
            @csrf @method('PUT')
            <div class="mb-3">
                <label class="form-label fw-bold">Service Name <span class="text-danger">*</span></label>
                <input type="text" name="name" id="edit_name" class="form-control" required>
            </div>
            <div class="mb-3">
                <label class="form-label fw-bold">Description</label>
                <textarea name="description" id="edit_description" class="form-control" rows="2"></textarea>
            </div>
            <div class="mb-3 form-check">
                <input type="hidden" name="is_active" value="0">
                <input type="checkbox" name="is_active" id="edit_is_active" value="1" class="form-check-input">
                <label class="form-check-label" for="edit_is_active">Active</label>
            </div>
            <div class="d-flex justify-content-end gap-2">
                <button type="button" class="btn btn-secondary" onclick="document.getElementById('editServiceModal').close()">Cancel</button>
                <button type="submit" class="btn btn-dark"><i class="fas fa-save me-1"></i> Update</button>
            </div>
        </form>
    </div>
</dialog>

<script>
function openEditModal(id, name, description, isActive) {
    document.getElementById('editServiceForm').action = '/admin/services/' + id;
    document.getElementById('edit_name').value        = name;
    document.getElementById('edit_description').value = description;
    document.getElementById('edit_is_active').checked = isActive === 1;
    document.getElementById('editServiceModal').showModal();
}

@if($errors->any())
    // Re-open add modal on validation error
    document.addEventListener('DOMContentLoaded', function() {
        document.getElementById('addServiceModal').showModal();
    });
@endif
</script>
@endsection