@extends('backend.layouts.app')
@section('content')
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                    Doctors
                </div>
                <div class="card-body">
                    <a href="{{ route('doctors.create') }}" class="btn btn-success mb-2">
                        Add Doctor
                    </a>
                    <div class="d-flex mb-2">
                        <input type="text" name="search" id="search" placeholder="Search..." class="form-control">
                    </div>
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead class="thead-dark">
                                <tr>
                                    <th>
                                        Name
                                    </th>
                                    <th>
                                        Position
                                    </th>
                                    <th>
                                        Description
                                    </th>
                                    <th>
                                        Action
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                @if (count($doctors) != 0)
                                    @foreach ($doctors as $doctor)
                                        <tr>
                                            <td>
                                                {{ $doctor->name }}
                                            </td>
                                            <td>
                                                {{ $doctor->position }}
                                            </td>
                                            <td>
                                                {{ $doctor->description }}
                                            </td>
                                            <td style="width: 100px;">
                                                <div class="modal fade bd-example-modal-lg"
                                                    id="showProfile-{{ $doctor->id }}" tabindex="-1" role="dialog"
                                                    aria-labelledby="myLargeModalLabel" aria-hidden="true">
                                                    <div class="modal-dialog modal-lg">
                                                        <div class="modal-content" style="border-top: 5px solid red;">
                                                            <div class="row p-4">
                                                                <div class="col-lg-4">
                                                                    <img src="{{ url($doctor->profile) }}" class="w-100"
                                                                        alt="">
                                                                    <h4 class="py-4"><i
                                                                            class="fa fa-phone green"></i>{{ $doctor->phone_no }}
                                                                    </h4>
                                                                </div>
                                                                <div class="col-lg-8">
                                                                    <h2 class="fw-bold">{{ $doctor->name }}</h2>
                                                                    <p class="green">{{ $doctor->position }}</p>
                                                                    <p class="text-secondary">{{ $doctor->description }}</p>

                                                                    <h6 class="fw-bold">Schedule</h6>
                                                                    <ul class="schedule-list">
                                                                        @foreach (['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'] as $day)
                                                                            @if (!empty($doctor->$day))
                                                                                <li><strong>{{ ucfirst($day) }}:</strong>
                                                                                    @php
                                                                                        $timeSlots = json_decode(
                                                                                            $doctor->$day,
                                                                                        );
                                                                                    @endphp
                                                                                    @foreach ($timeSlots as $timeSlot)
                                                                                        <span>{{ \Carbon\Carbon::parse($timeSlot->start)->format('g:i A') }}
                                                                                            -
                                                                                            {{ \Carbon\Carbon::parse($timeSlot->end)->format('g:i A') }}</span><br>
                                                                                    @endforeach
                                                                                </li>
                                                                            @else
                                                                                <li><strong>{{ ucfirst($day) }}:</strong>
                                                                                    No available slots</li>
                                                                            @endif
                                                                        @endforeach
                                                                    </ul>


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

                                                <div class="d-flex">
                                                    <button type="button" class="btn btn-primary mb-2" data-toggle="modal"
                                                        data-target="#showProfile-{{ $doctor->id }}">
                                                        <i class="fa fa-eye"></i>
                                                    </button>
                                                    <div class="mx-1"></div>
                                                    <a href="{{ route('doctors.edit', $doctor->id) }}"
                                                        class="btn btn-success mb-2">
                                                        <i class="fa fa-edit"></i>
                                                    </a>
                                                    <div class="mx-1"></div>
                                                    <form action="{{ route('doctors.destroy', $doctor->id) }}"
                                                        method="post">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit" class="btn btn-danger">
                                                            <i class="fa fa-trash"></i>
                                                        </button>
                                                    </form>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                @else
                                    <tr>
                                        <td colspan="4" class="text-center">No data result</td>
                                    </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>
                    {{-- <nav aria-label="...">
                    <ul class="pagination">
                        @if ($doctors->currentPage() > 1)
                            <li class="page-item">
                                <a class="page-link" href="{{$doctors->previousPageUrl()}}" tabindex="-1">Previous</a>
                            </li>
                        @else
                            <li class="page-item disabled">
                                <a class="page-link" href="{{$doctors->previousPageUrl()}}" tabindex="-1">Previous</a>
                            </li>
                        @endif
                        
                        @for ($i = 1; $i <= $doctors->lastPage(); $i++)
                            <li class="page-item @if ($i == $doctors->currentPage()) active @endif">
                                <a class="page-link" href="{{$doctors->url($i)}}">{{$i}}</a>
                            </li>
                        @endfor

                        @if ($doctors->currentPage() < $doctors->lastPage())
                            <li class="page-item">
                                <a class="page-link" href="{{$doctors->nextPageUrl()}}">Next</a>
                            </li>
                        @else
                            <li class="page-item disabled">
                                <a class="page-link" href="{{$doctors->nextPageUrl()}}">Next</a>
                            </li>
                        @endif
                    </ul>
                </nav> --}}
                </div>
            </div>
        </div>
    </div>
@endsection
@section('js')
    <script>
        $("#search").on("input", function() {
            $(this).quicksearch('table tbody tr');
        });
    </script>
@endsection