@extends('layouts.main')

@section('content')
<style>
.card {
    border-radius: 12px;
}

.table th {
    font-size: 14px;
    letter-spacing: 0.5px;
}

.table td {
    vertical-align: middle;
    font-size: 14px;
}

.table tbody tr:hover {
    background-color: #f8f9fa;
    transition: 0.2s;
}

.btn-light {
    background-color: #f9f9f9;
}

.btn-light:hover {
    background-color: #e9ecef;
}
 /* Add Service Button */
    .btn-add {
        background: linear-gradient(135deg, #4e73df, #224abe);
        color: #fff;
        border: none;
        padding: 9px 16px;
        border-radius: 50px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        text-decoration: none;
        font-size: 0.95rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .btn-add:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        color: #fff;
    }

    .btn-add i {
        font-size: 1rem;
    }

    /* Action Button Styling */
    .btn-action {
        border: none;
        padding: 6px 10px;
        border-radius: 4px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        font-size: 0.9rem;
        text-decoration: none;
    }

    /* View Button */
    .btn-action.view {
        background: #d1ecf1;
        color: #0c5460;
    }

    .btn-action.view:hover {
        background: #bee5eb;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        color: #0c5460;
    }

    /* Edit Button */
    .btn-action.edit {
        background: #fff3cd;
        color: #e0a800;
    }

    .btn-action.edit:hover {
        background: #ffeeba;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        color: #e0a800;
    }

    /* Delete Button */
    .btn-action.delete {
        background: #fde2e4;
        color: #dc3545;
    }

    .btn-action.delete:hover {
        background: #fad2d4;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        color: #dc3545;
    }

    /* Button Icons */
    .btn-action i {
        font-size: 1rem;
    }

    /* Small Button Styling */
    .btn-sm {
        padding: 0.35rem 0.65rem !important;
        font-size: 0.80rem !important;
        border-radius: 0.25rem !important;
        font-weight: 500;
        transition: all 0.3s ease;
    }

    /* Modal Button Hover Effects */
    .btn-primary.btn-sm:hover,
    .btn-secondary.btn-sm:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }

    /* Table Styling */
    .table {
        margin-top: 1.5rem;
    }

    .table thead th {
        background: linear-gradient(135deg, #f8f9fa, #e9ecef);
        font-weight: 600;
        border-bottom: 2px solid #dee2e6;
        vertical-align: middle;
        padding: 12px;
    }

    .table tbody tr {
        transition: background-color 0.3s ease;
    }

    .table tbody tr:hover {
        background-color: #f8f9fa;
    }

    .table td {
        vertical-align: middle;
        padding: 12px;
    }

    /* Badge Styling */
    .badge {
        padding: 6px 12px;
        font-size: 0.85rem;
    }
     .custom-btn {
        background-color: #007bff;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 5px;
        cursor: pointer;
    }

    .custom-btn:hover {
        background-color: #0056b3;
    }
</style>
<div>
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h3 class="mb-0">Services</h3>
        @can('services_create')
        <button class="custom-btn btn-success" data-bs-toggle="modal" data-bs-target="#addServiceModal">
            <i class="bi bi-plus-circle"></i> Add Service
        </button>
        @endcan
    </div>

    <!-- TABLE -->
  <div class="card shadow-sm border-0">
    <div>

        <table class="table table-hover align-middle mb-0 text-center">

            <thead class="bg-dark text-white">
                <tr>
                    <th width="60">#</th>
                    <th class="text-start">Service</th>
                    <th class="text-start">Description</th>
                    <th width="120">Price</th>
                    <th width="120">Status</th>
                    <th width="150">Action</th>
                </tr>
            </thead>

            <tbody>
                @forelse($services as $service)
                <tr>

                    <!-- ID -->
                    <td class="fw-bold text-secondary">
                        #{{ $service->id }}
                    </td>

                    <!-- Title -->
                    <td class="text-start fw-semibold">
                        {{ $service->title }}
                    </td>

                    <!-- Description -->
                    <td class="text-start text-muted small">
                        {{ Str::limit($service->description, 60) }}
                    </td>

                    <!-- Price -->
                    <td class="fw-semibold text-success">
                        ₹{{ number_format($service->price, 2) }}
                    </td>

                    <!-- Status -->
                    <td>
                        @if($service->status == 1)
                            <span class="badge rounded-pill bg-success px-3">Active</span>
                        @else
                            <span class="badge rounded-pill bg-secondary px-3">Inactive</span>
                        @endif
                    </td>

                    <!-- Actions -->
                    <td>
                        <div class="d-flex justify-content-center gap-2">
                            @can('services_view_page')                            
                            <!-- View -->
                            <button class="btn btn-light btn-sm border"
                                data-bs-toggle="modal"
                                data-bs-target="#viewServiceModal"
                                onclick="viewService('{{ $service->title }}', '{{ addslashes($service->description) }}', {{ $service->price }}, {{ $service->status }})"
                                title="View">
                                <i class="bi bi-eye text-primary"></i>
                            </button>
                            @endcan

                             @can('services_edit')
                            <!-- Edit -->
                            <button class="btn btn-light btn-sm border"
                                data-bs-toggle="modal"
                                data-bs-target="#editServiceModal"
                                onclick="editService({{ $service->id }}, '{{ $service->title }}', '{{ addslashes($service->description) }}', {{ $service->price }}, {{ $service->status }})"
                                title="Edit">
                                <i class="bi bi-pencil text-warning"></i>
                            </button>
                            @endcan

                             @can('services_delete')
                            <!-- Delete -->
                           <form action="{{ route('superadmin.services.delete', $service->id) }}" method="POST">
                                    @csrf
                                    @method('DELETE')
                                    <button class="btn btn-danger btn-sm">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </form>
                                @endcan
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="6" class="text-center py-4 text-muted">
                        No services found 😔
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

</div>

<!-- ADD SERVICE MODAL -->
<div class="modal fade" id="addServiceModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">             
            <form action="{{ route('superadmin.services.store') }}" method="POST">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title">Add Service</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">

                    <!-- Title -->
                    <div class="mb-3">
                        <label>Title</label>
                        <input type="text" name="title" class="form-control" required>
                    </div>

                    <!-- Description -->
                    <div class="mb-3">
                        <label>Description</label>
                        <textarea name="description" class="form-control" rows="3"></textarea>
                    </div>

                    <!-- Price -->
                    <div class="mb-3">
                        <label>Price</label>
                        <input type="number" step="0.01" name="price" class="form-control" required>
                    </div>

                    <!-- Status -->
                    <div class="mb-3">
                        <label>Status</label>
                        <select name="status" class="form-control">
                            <option value="1">Active</option>
                            <option value="0">Inactive</option>
                        </select>
                    </div>

                </div>

                <div class="modal-footer">
                    <button type="button" class="custom-btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
                    <button class="custom-btn btn-primary btn-sm">Save</button>
                </div>

            </form>
          
        </div>
    </div>
</div>

<!-- EDIT SERVICE MODAL -->
<div class="modal fade" id="editServiceModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">

          <form method="POST" id="editServiceForm">
                @csrf
                @method('PUT')   

                <div class="modal-header">
                    <h5 class="modal-title">Edit Service</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">

                    <!-- Title -->
                    <div class="mb-3">
                        <label>Title</label>
                        <input type="text" name="title" id="editTitle" class="form-control" required>
                    </div>

                    <!-- Description -->
                    <div class="mb-3">
                        <label>Description</label>
                        <textarea name="description" id="editDescription" class="form-control" rows="3"></textarea>
                    </div>

                    <!-- Price -->
                    <div class="mb-3">
                        <label>Price</label>
                        <input type="number" step="0.01" name="price" id="editPrice" class="form-control" required>
                    </div>

                    <!-- Status -->
                    <div class="mb-3">
                        <label>Status</label>
                        <select name="status" id="editStatus" class="form-control">
                            <option value="1">Active</option>
                            <option value="0">Inactive</option>
                        </select>
                    </div>

                </div>

                <div class="modal-footer">
                    <button type="button" class="custom-btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
                    <button class="custom-btn btn-primary btn-sm">Update</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- VIEW SERVICE MODAL -->
<div class="modal fade" id="viewServiceModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title">View Service</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body">

                <!-- Title -->
                <div class="mb-3">
                    <label><strong>Title:</strong></label>
                    <p id="viewTitle"></p>
                </div>

                <!-- Description -->
                <div class="mb-3">
                    <label><strong>Description:</strong></label>
                    <p id="viewDescription"></p>
                </div>

                <!-- Price -->
                <div class="mb-3">
                    <label><strong>Price:</strong></label>
                    <p id="viewPrice"></p>
                </div>

                <!-- Status -->
                <div class="mb-3">
                    <label><strong>Status:</strong></label>
                    <p id="viewStatus"></p>
                </div>

            </div>

            <div class="modal-footer">
                <button type="button" class="custom-btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
            </div>

        </div>
    </div>
</div>
<script>
    function editService(id, title, description, price, status) {
        document.getElementById('editServiceForm').action = '{{ route("superadmin.services.update", ":id") }}'.replace(':id', id);
        document.getElementById('editTitle').value = title;
        document.getElementById('editDescription').value = description;
        document.getElementById('editPrice').value = price;
        document.getElementById('editStatus').value = status;
    }

    function viewService(title, description, price, status) {
        document.getElementById('viewTitle').innerText = title;
        document.getElementById('viewDescription').innerText = description;
        document.getElementById('viewPrice').innerText = price;
        document.getElementById('viewStatus').innerText = status == 1 ? 'Active' : 'Inactive';
    }
</script>

@endsection