@extends("layouts.admin")
@section('content')

<p>user: {{ $user->name }}</p>
<h2>Orders</h2>
<div class="relative overflow-x-auto">
    @if(count($user->orders) > 0)
        <table class="w-full text-sm text-left">
            <thead class="text-xs text-gray-700 uppercase bg-gray-50">
                <tr>
                    <th scope="col" class="px-6 py-3">
                        User
                    </th>
                    <th scope="col" class="px-6 py-3">
                        Location
                    </th>
                    <th scope="col" class="px-6 py-3">
                        Quantity
                    </th>
                    <th scope="col" class="px-6 py-3">
                        Order No.
                    </th>

                    <th scope="col" class="px-6 py-3">
                        Edit
                    </th>
                    <th scope="col" class="px-6 py-3">
                        Delete
                    </th>
                </tr>
            </thead>
            <tbody>
                @foreach($user->orders as $order)
                    <tr class="bg-white border-b">
                        <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
                            {{ optional($order->user)->name }}
                        </th>
                        <td class="px-6 py-4">
                            {{ $order->location }}
                        </td>
                        <td class="px-6 py-4">
                            {{ $order->quantity }}
                        </td>
                        <td class="px-6 py-4">
                            {{ $order->order_number }}
                        </td>

                        <td class="px-6 py-4">
                            <a href="{{ route('admin.orders.edit', $order->id) }}">
                            <svg class="w-6 h-6 text-gray-800 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 18">
                                        <path d="M12.687 14.408a3.01 3.01 0 0 1-1.533.821l-3.566.713a3 3 0 0 1-3.53-3.53l.713-3.566a3.01 3.01 0 0 1 .821-1.533L10.905 2H2.167A2.169 2.169 0 0 0 0 4.167v11.666A2.169 2.169 0 0 0 2.167 18h11.666A2.169 2.169 0 0 0 16 15.833V11.1l-3.313 3.308Zm5.53-9.065.546-.546a2.518 2.518 0 0 0 0-3.56 2.576 2.576 0 0 0-3.559 0l-.547.547 3.56 3.56Z"/>
                                        <path d="M13.243 3.2 7.359 9.081a.5.5 0 0 0-.136.256L6.51 12.9a.5.5 0 0 0 .59.59l3.566-.713a.5.5 0 0 0 .255-.136L16.8 6.757 13.243 3.2Z"/>
                                </svg>
                            </a>
                        </td>
                        <td class="px-6 py-4">
                            <form action="{{ route('admin.orders.delete', $order->id) }}" method="POST" onsubmit="return confirmDelete()">
                                @csrf
                                @method('DELETE')
                                <button type="submit">
                                <button type="submit">
                                        <svg class="w-6 h-6 text-gray-800 hover:text-red-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 20">
                                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h16M7 8v8m4-8v8M7 1h4a1 1 0 0 1 1 1v3H6V2a1 1 0 0 1 1-1ZM3 5h12v13a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V5Z"/>
                                        </svg>
                                </button>
                            </form>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    @else
        <p>No orders available for {{ $user->name }}.</p>
    @endif
    <button class="bg-green-600 hover:bg-green-700 p-2 rounded my-4">
        <a href="{{ route('admin.orders.create') }}">Create Order</a>
    </button>
</div>


<h2 class="mt-5">appointments</h2>

<div class="relative overflow-x-auto">
    @if(count($user->appointments) > 0)
        <table class="w-full text-sm text-left">
            <thead class="text-xs text-gray-700 uppercase bg-gray-50">
                <tr>
                    <th scope="col" class="px-6 py-3">
                        Date
                    </th>
                    <th scope="col" class="px-6 py-3">
                        Time
                    </th>
                    <th scope="col" class="px-6 py-3">
                        Attended 
                    </th>
                    <th scope="col" class="px-6 py-3">
                        Edit
                    </th>
                    <th scope="col" class="px-6 py-3">
                        Delete
                    </th>

                </tr>
            </thead>
            <tbody>
            @foreach($user->appointments as $appointment)
                    <tr class="bg-white border-b">
                        <td class="px-6 py-4">
                            {{ $appointment->input_date }}
                        </td>
                        <td class="px-6 py-4">
                            {{ $appointment->radio_selection }}
                        </td>
                        <td class="px-6 py-4">
                            {{ $appointment->user_id }}
                        </td>
                        <td class="px-6 py-4">
                            <a href="{{ route('admin.appointments.edit', $appointment->id) }}">
                                 <svg class="w-6 h-6 text-gray-800 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 18">
                                        <path d="M12.687 14.408a3.01 3.01 0 0 1-1.533.821l-3.566.713a3 3 0 0 1-3.53-3.53l.713-3.566a3.01 3.01 0 0 1 .821-1.533L10.905 2H2.167A2.169 2.169 0 0 0 0 4.167v11.666A2.169 2.169 0 0 0 2.167 18h11.666A2.169 2.169 0 0 0 16 15.833V11.1l-3.313 3.308Zm5.53-9.065.546-.546a2.518 2.518 0 0 0 0-3.56 2.576 2.576 0 0 0-3.559 0l-.547.547 3.56 3.56Z"/>
                                        <path d="M13.243 3.2 7.359 9.081a.5.5 0 0 0-.136.256L6.51 12.9a.5.5 0 0 0 .59.59l3.566-.713a.5.5 0 0 0 .255-.136L16.8 6.757 13.243 3.2Z"/>
                                </svg>
                                </a>
                        </td>
                        <td class="px-6 py-4">
                        <form action="{{ route('admin.appointments.delete', $appointment->id) }}" method="POST" onsubmit="return confirmDelete()">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit">
                                        <svg class="w-6 h-6 text-gray-800 hover:text-red-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 20">
                                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h16M7 8v8m4-8v8M7 1h4a1 1 0 0 1 1 1v3H6V2a1 1 0 0 1 1-1ZM3 5h12v13a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V5Z"/>
                                        </svg>
                                    </button>
                                </form>


                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    @else
        <p>{{$user->name}} has no appointments</p>
    @endif
    <button class="bg-green-600 hover:bg-green-700 p-2 rounded my-4"><a href="{{ route('admin.appointments.create') }}">Create Appointment</a></button>
</div>

<!-- <script>    
    function confirmDelete() {
        let result = confirm("Are you sure you want to delete this appointment?");
        
        if (result == false) {
            return false;
        }
    }
</script> -->
<script src="{{asset('js/prevent-delete.js')}}"></script>

@endsection