@extends('frontend.layouts.app')

@section('title')
    Doctors Directory | Brokenshire Medical Center
@endsection

@section('seo')
    <style>
        .blank-banner {
            background: url('{{ url('/images/banners/doctors-directory.jpg') }}') !important;
        }
    </style>
    <meta property="og:locale" content="en_US" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="Doctors Directory | Brokenshire Medical Center" />
    <meta property="og:url" content="{{ url('/doctors-directory') }}" />
    <meta property="og:site_name" content="Doctors Directory | Brokenshire Medical Center" />
    <meta property="og:image" content="{{ asset('images/icons/meta-thumbnail.jpg') }}" />
    <meta property="og:thumbnail" content="{{ asset('images/icons/meta-thumbnail.jpg') }}" />
    <meta property="og:icon" content="{{ asset('images/icons/android-chrome-192x192.png') }}" />
    <link rel="icon" href="{{ asset('images/icons/android-chrome-192x192.png') }}">
    <meta property="og:description"
        content="Brokenshire Medical Center offers exceptional healthcare services in Davao City. We are committed to compassionate care, affordability, and excellence. Find a doctor, schedule an appointment, or learn more about our services." />
    <meta property="og:keywords"
        content="Davao City hospital, Philippines healthcare, Quality medical care, Affordable healthcare, Compassionate care, Medical specialties (Urinalysis, Fecalysis, Ova & Parasites, Amoeba, Complete Blood Count, Red Blood Cells, White Blood Cells, Platelet Count, Hemoglobin, Hemetocrit), Appointments, Patient portal, Medical records">
@endsection

@section('content')
    <div class="container-fluid bg-dark blank-banner">
        <div class="container text-white">
            <div>
                <h3 class="fw-bold mb-2">Doctors Directory</h3>
            </div>
        </div>
    </div>

    <div class="bg-light pb-5 pt-1 mb-5">
        <div class="container pt-4">
            <h1 class="green">Find the Right Doctor for Your Needs</h1>
            <p class="fs-5">
                We're diligently updating our doctor list. In the meantime, our concierge staff is happy to help! Call them
                at (082) 282 1908 or (0917) 629 5413 for the most recent information. Thank you!
            </p>
        </div>
    </div>

    <div class="container" id="results">
        <form action="{{ url('doctors-directory') }}" method="GET">
            <div class="row">
                <div class="col-lg-4 mb-3">
                    <input type="text" name="query" value="{{ request('query') }}" placeholder="Type your search"
                        class="border-green form-control py-2">
                </div>
                <div class="col-lg-8 mb-3">
                    <button type="submit"
                        class="border-green btn btn-success bg-green text-white py-2 px-5 hover-green-opacity-80">SEARCH</button>
                </div>
                <div class="col-lg-2 mb-3 position-relative">
                    <select name="specialty" id="specialty" class="border-green form-control py-2">
                        <option value="">Select Specialization</option>
                        @foreach ($doctor_specialty as $specialty)
                            <option value="{{ $specialty->position }}"
                                {{ request('specialty') == $specialty->position ? 'selected' : '' }}>
                                {{ $specialty->position }}</option>
                        @endforeach
                    </select>
                    <i class="fa-solid fa-triangle select-arrow green"></i>
                </div>
            </div>
        </form>
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            if (window.location.search.indexOf('query') !== -1 || window.location.search.indexOf('specialty') !== -
                1) {
                document.getElementById('results').scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }
        });
    </script>

    <div class="container mb-3">
        <div class="row">
            @foreach ($doctors as $doctor)
                <div class="modal fade bd-example-modal-lg" id="doctorModal{{ $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="Doctor Image">
                                    <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>
                                    <div class="d-flex flex-wrap pb-4">
                                        @php
                                            $days = [
                                                'Monday',
                                                'Tuesday',
                                                'Wednesday',
                                                'Thursday',
                                                'Friday',
                                                'Saturday',
                                                'Sunday',
                                            ];
                                            $schedule = json_decode($doctor->schedule) ?? [];
                                        @endphp
                                        @foreach ($days as $index => $day)
                                            <div class="col-lg-6 border-bottom py-2">
                                                <span class="text-secondary">{{ $day }}</span>
                                            </div>
                                            <div class="col-lg-6 border-bottom py-2 text-lg-end">
                                                <span class="green">
                                                    {{ $schedule[$index] ?? 'None' }}
                                                </span>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 mb-3" data-bs-toggle="modal" data-bs-target="#doctorModal{{ $doctor->id }}"
                    style="cursor: pointer;">
                    <div class="card p-0 border-bottom-5 doctors-card">
                        <div class="card-img-top doctor-image">
                            <img class="card-img-top rounded-0" src="{{ url($doctor->profile) }}" alt="Doctor Image">
                        </div>
                        <div class="card-body">
                            <h5 class="card-title">{{ $doctor->name }}</h5>
                            <h6 class="green">{{ $doctor->position }}</h6>
                            <p class="card-text">{{ $doctor->description }}</p>
                            <div class="d-flex justify-content-between">
                                <div>
                                    <i class="fa fa-phone green"></i>
                                    <span class="fw-bold text-secondary">{{ $doctor->phone_no }}</span>
                                </div>
                                <div>
                                    <span class="ms-auto">
                                        <i class="fa fa-calendar green"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
@endsection