@extends('admin.layouts.layout')

@section('title')Services @endsection

@section('body')
    <div class="flex justify-between mb-4">
        <h1 class="text-2xl font-semibold mb-4">Service List</h1>
        <a href="{{ route('admin.website.services.add') }}" class="bg-green-300 px-5 py-3 rounded-md font-medium text-slate-700">Add</a>
    </div>

    @include('partials.event')

    <table class="border-collapse table-auto w-full">
        <thead>
            <tr>
                <th class="border-b p-5 pl-8 pt-0 pb-3">#</th>
                <th class="border-b p-5 pl-8 pt-0 pb-3">Icon</th>
                <th class="border-b p-5 pl-8 pt-0 pb-3">Name</th>
                <th class="border-b p-5 pl-8 pt-0 pb-3">Price</th>
                <th class="border-b p-5 pl-8 pt-0 pb-3">Weightage</th>
                <th class="border-b p-5 pl-8 pt-0 pb-3"></th>
            </tr>
        </thead>

        <tbody>
            @foreach ($services as $i => $service)
                <tr>
                    <td class="border-b border-slate-100 p-4 pl-8">{{ $i + 1 }}</td>
                    <td class="border-b border-slate-100 p-4 pl-8">
                        @if ($service->icon)
                            <img class="w-28 h-28" src="/storage/{{ $service->icon }}" alt="Icon of {{ $service->name }}">
                        @endif
                    </td>
                    <td class="border-b border-slate-100 p-4 pl-8">{{ $service->name }}</td>
                    <td class="border-b border-slate-100 p-4 pl-8">{{ $service->price }}</td>
                    <td class="border-b border-slate-100 p-4 pl-8">{{ $service->weightage }}</td>
                    <td class="border-b border-slate-100 p-4 pl-8">
                        <a href="{{ route('admin.website.services.edit', $service->id) }}">Edit</a>
                        <a href="{{ route('admin.website.services.delete', $service->id) }}">Delete</a>
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>
@endsection