@extends('backoffice.layouts.main')

@section('title', 'Dokter')

@section('content')
<!-- Content -->

<h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-light">Master /</span> Dokter</h4>

<!-- Basic Bootstrap Table -->
<div class="card">
    <div class="card-header d-flex justify-content-between">
        <h5>Daftar Dokter</h5>
        <a href="{{route('bo.dokter.create')}}" class="btn btn-primary">
            <i class="fa fa-plus"></i>
            Tambah Dokter
        </a>
    </div>

    <div class="card-body">
        <table class="table data-table">
            <thead>
                <tr>
                    <th>Nama</th>
                    <th>Dibuat Pada</th>
                    <th>Diubah Pada</th>
                    <th>Aksi</th>
                </tr>
            </thead>
            <tbody class="table-border-bottom-0">
                @foreach ($data as $item)
                <tr>
                    <td class="">
                        <img src="{{$item->foto}}" alt="Avatar" class="rounded-circle avatar avatar-xs pull-up" />
                        <small>{{$item->nama}}</small>
                    </td>
                    <td>{{$item->created_at}}</td>
                    <td>{{$item->updated_at}}</td>
                    <td class="d-flex">
                        <button data-bs-toggle="modal" data-bs-target="#detailModal-{{$item->uuid}}"
                            class="btn btn-success">
                            <i class="fas fa-eye"></i>
                        </button>
                        <a href="{{route('bo.dokter.edit', $item->uuid)}}" class="btn btn-warning mx-2">
                            <i class="fas fa-edit "></i>
                        </a>
                        <button class="btn btn-danger" data-bs-toggle="modal"
                            data-bs-target="#deleteModal-{{$item->uuid}}">
                            <i class="fas fa-trash"></i>
                        </button>
                    </td>
                </tr>

                <!-- 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 me-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}} <a href="{{$item2->link}}" target="_blank"
                                        class="ml-2"><i class="fa-sharp fa-solid fa-map-location-dot"></i></a> <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>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Delete Modal -->
                <div class="modal fade" id="deleteModal-{{$item->uuid}}" tabindex="-1"
                    aria-labelledby="deleteModalLabel-{{$item->uuid}}" aria-hidden="true">
                    <form action="{{route('bo.dokter.delete')}}" method="POST">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="deleteModalLabel-{{$item->uuid}}">Konfirmasi Hapus
                                        Dokter</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                        aria-label="Close"></button>
                                </div>
                                <div class="modal-body text-center">
                                    Apakah Anda yakin ingin mengahpus data dokter?<br>
                                    {{$item->nama}}
                                    @csrf
                                    @method('DELETE')
                                    <input type="hidden" name="uuid" value="{{$item->uuid}}">
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary"
                                        data-bs-dismiss="modal">Batal</button>
                                    <button type="submit" class="btn btn-success">Ya</button>
                                </div>
                            </div>
                    </form>
                </div>
                @endforeach
            </tbody>
        </table>
    </div>

</div>
</div>
<!--/ Basic Bootstrap Table -->
@endsection

@push('scripts')
@if (session('success'))
<script>
    Swal.fire({
        title: '{{session("success")}}',
        icon: 'success',
        confirmButtonText: 'Tutup'
    })

</script>
@endif

@if (session('error'))
<script>
    Swal.fire({
        title: 'Proses Gagal',
        text: '{{session("error")[1]}} | Line : {{session("error")[2]}}',
        icon: 'error',
        confirmButtonText: 'Tutup'
    })

</script>
@endif

<script>
    loading()
</script>
@endpush