@extends('backendPartials.default')


@section('home_bar', 'current')
@section('section')
    <style>
        .status-badge {
            padding: 0.4em 0.9em;
            font-size: 0.8rem;
            font-weight: 600;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .status-pending {
            background-color: rgba(255, 193, 7, 0.15);
            color: #d39e00;
            border: 1px solid rgba(255, 193, 7, 0.4);
        }

        .status-done {
            background-color: rgba(25, 135, 84, 0.15);
            color: #198754;
            border: 1px solid rgba(25, 135, 84, 0.4);
        }
    </style>
    <style type="text/css">
        .margin {
            padding: 3px;
        }

        .input {
            border-radius: 5px;
        }
    </style>
    <div class="row">
        <div class="col-md-12">

            <div class="card">
                <div class="card-body">
                    <h4>Appointments</h4>

                    <a href="{{ route('appointments.index') }}" class="btn btn-primary">Create New Appopintment</a>

                    @if (session('success'))
                        <div class="alert alert-success mt-1">{{ session('success') }}</div>
                    @endif


                    <table class="table table-bordered mt-3">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Person Name</th>
                                <th>Email</th>
                                <th>Phone No</th>
                                <th>Appointment Date</th>
                                <th>Status</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($appointments as $appointment)
                                <tr>

                                    <td>{{ $appointment->id }}</td>
                                    <td>{{ $appointment->name ?? 'Unknown' }}</td>
                                    <td>{{ $appointment->email ?? 'No Email' }}</td>
                                    <td>{{ $appointment->phone ?? 'No phone' }}</td>
                                    <td>{{ $appointment->appointment_date ?? 'No Date' }}</td>
                                    @if ($appointment->status == 'scheduled')
                                        <td>
                                            <span class="status-badge status-pending">
                                                ⏳ Pending
                                            </span>
                                        </td>
                                    @else
                                        <!-- Done -->
                                        <td>
                                            <span class="status-badge status-done">
                                                ✅ Done
                                            </span>
                                        </td>
                                    @endif
                                    <td>
                                        <form action="{{ route('appointments.toggleStatus', $appointment->id) }}"
                                            method="POST" style="display:inline;">
                                            @csrf
                                            <button class="btn btn-success btn-sm" type="submit">
                                                @if ($appointment->status == 'scheduled')
                                                    Mark as Done
                                                @else
                                                    Mark as Pending
                                                @endif
                                            </button>
                                        </form>

                                        {{-- <a href="{{ route('admin.blogs.edit', $appointment->id) }}"
                                            class="btn btnning">Edit</a> --}}

                                        {{-- @method('DELETE') --}}
                                        <a href="{{ route('admin.appointment.destroy', ['id' => $appointment->id]) }}"
                                            class="btn btn-danger btn-sm" type="submit">Delete</a>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>




                </div>
            </div>

        </div>
    </div>
@endsection