@extends('client.layouts.main')

@section('title', 'Dokter')

@section('content')
<!-- team-area -->


<section id="team" class="team-area pt-50 pb-40 container">
    <form action="{{route('client.dokter')}}" method="GET">
        <div class="contact-field p-relative c-kota mb-25">
            <label for="kota_uuid" class="mb-2">Kota</label>
            <select class="form-select w-50" onchange="this.form.submit()" id="kota_uuid" name="kota_uuid">
                <option selected disabled>Sesuaikan Kota</option required>
                @foreach ($data['kota'] as $item)
                <option @if ($item->uuid == $data['kota_uuid'])
                    selected
                    @endif value="{{$item->uuid}}">{{$item->nama}}</option required>
                @endforeach
            </select>
        </div>
    </form>

    <div class="row">
        @forelse ($data['dokter'] as $item)
        <div class="col-xl-4">
            <div class="single-post mb-30">
                <div style="margin-bottom: -50px; z-index: 10; ">
                    <img src="{{asset($item->foto)}}" style=" object-fit: cover;
                    width: 100%;
                    height: 300px;
                    border-radius: 10px;" alt="img">
                </div>
                <div class="blog-content text-center ">
                    <h5 style="height: 50px;">{{substr($item->nama, 0, 70)}}{{strlen($item->nama) >= 70 ? '.....' : ''}}</h5>
                    <div class="slider-btn mt-3">
                        <a href="https://wa.me/{{$item->no_hp}}" target="_blank" class="btn ss-btn"
                            data-animation="fadeInRight" data-delay=".8s">Konsultasi
                            <i class="fa-brands fa-whatsapp"></i></a>
                    </div>
                    <div data-bs-toggle="modal" data-bs-target="#detailModal-{{$item->uuid}}">
                        <p class="mt-15 cursor-pointer">Lihat Detail</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- Detail Modal -->
        <div class="modal fade mt-5 pt-3" id="detailModal-{{$item->uuid}}" tabindex="-1"
            aria-labelledby="detailModalLabel-{{$item->uuid}}" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="detailModalLabel-{{$item->uuid}}">{{$item->nama}}</h5>
                    </div>
                    <div class="modal-body d-flex" style="height: 400px; overflow-x: auto;">
                        <img class="w-50 mr-3" height="300" src="{{asset($item->foto)}}" alt="Foto Dokter">
                        <div class="w-100">
                            <p class="mb-0">Kota : </p>
                            @foreach ($item->kota as $item2)
                            {{$loop->iteration}}. {{$item2->nama}} <br />
                            @endforeach
                            <hr class="my-3">
                            <p class="mb-0">Lokasi Praktek : </p>
                            @foreach ($item->lokasi as $item2)
                            {{$loop->iteration}}. {{$item2->lokasi}} 
                            @if ($item2->link)
                                <a href="{{$item2->link}}" target="_blank" class="ml-2"><i
                                    class="fa-sharp fa-solid fa-map-location-dot"></i></a> 
                                @endif
                            <br />
                            @endforeach
                            <hr class="my-3">
                            <p>Lama Praktek : {{$item->lama_praktek}} Tahun</p>
                            <hr class="my-3">
                            <p>No. HP : {{$item->no_hp}}</p>
                            <div class="slider-btn mt-10 ">
                                <a href="https://wa.me/{{$item->no_hp}}" target="_blank" class="btn ss-btn"
                                    data-animation="fadeInRight" data-delay=".8s">Konsultasi
                                    <i class="fa-brands fa-whatsapp"></i></a>
                            </div>
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary p-3" data-bs-dismiss="modal">Tutup</button>
                    </div>
                </div>
            </div>
        </div>
        @empty
        <div class="col-xl-12">
            <p class="text-center">Dokter tidak ditemukan</p>
        </div>
        @endforelse

    </div>
</section>
<!-- team-area-end -->
@endsection