@extends('frontend.layouts.app')
<style>
    .project-skill {
        font-size: 0.9rem;
        font-weight: 400;
        letter-spacing: 0.06rem;
    }

    .project-info-box {
        margin: 15px 0;
        background-color: #fff;
        padding: 30px 40px;
        border-radius: 5px;
    }

    .project-info-box p {
        margin-bottom: 15px;
        padding-bottom: 15px;
        border-bottom: 1px solid #d5dadb;
    }

    .project-info-box p:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
    }


    .btn-xs.btn-icon {
        width: 34px;
        height: 34px;
    }

    /* facebook button */
    .btn-facebook,
    .btn-facebook:active,
    .btn-facebook:focus {
        color: #fff !important;
        background: #4e68a1 !important;
        border: 2px solid #4e68a1 !important;
    }

    .btn-facebook:hover {
        color: #fff !important;
        background: #3b4f7a;
        border: 2px solid #3b4f7a;
    }

    .btn-facebook-link,
    .btn-facebook-link:active,
    .btn-facebook-link:focus {
        color: #4e68a1 !important;
        background: transparent;
        border: none;
    }

    .btn-facebook-link:hover {
        color: #3b4f7a !important;
    }

    .btn-outline-facebook,
    .btn-outline-facebook:active,
    .btn-outline-facebook:focus {
        color: #4e68a1 !important;
        background: transparent;
        border: 2px solid #4e68a1;
    }

    .btn-outline-facebook:hover {
        color: #fff !important;
        background: #4e68a1 !important;
        border: 2px solid #4e68a1;
    }

    /* twitter button */
    .btn-twitter,
    .btn-twitter:active,
    .btn-twitter:focus {
        color: #fff !important;
        background: #65b5f2 !important;
        border: 2px solid #65b5f2;
    }

    .btn-twitter:hover {
        color: #fff !important;
        background: #5294c6;
        border: 2px solid #5294c6;
    }

    .btn-twitter:hover {
        color: #fff !important;
        background: #5294c6;
        border: 2px solid #5294c6;
    }

    .btn-twitter-link,
    .btn-twitter-link:active,
    .btn-twitter-link:focus {
        color: #65b5f2 !important;
        background: transparent;
        border: none;
    }

    .btn-twitter-link:hover {
        color: #5294c6 !important;
    }

    .btn-outline-twitter,
    .btn-outline-twitter:active,
    .btn-outline-twitter:focus {
        color: #65b5f2 !important;
        background: transparent;
        border: 2px solid #65b5f2;
    }

    .btn-outline-twitter:hover {
        color: #fff !important;
        background: #65b5f2;
        border: 2px solid #65b5f2;
    }

    /* google button */
    .btn-google,
    .btn-google:active,
    .btn-google:focus {
        color: #fff !important;
        background: #e05d4b;
        border: 2px solid #e05d4b;
    }

    .btn-google:hover {
        color: #fff !important;
        background: #b94c3d;
        border: 2px solid #b94c3d;
    }

    .btn-google-link,
    .btn-google-link:active,
    .btn-google-link:focus {
        color: #e05d4b !important;
        background: transparent;
        border: none;
    }

    .btn-google-link:hover {
        color: #b94c3d !important;
    }

    .btn-outline-google,
    .btn-outline-google:active,
    .btn-outline-google:focus {
        color: #e05d4b !important;
        background: transparent;
        border: 2px solid #e05d4b;
    }

    .btn-outline-google:hover {
        color: #fff !important;
        background: #e05d4b;
        border: 2px solid #e05d4b;
    }

    .btn-icon {
        padding: 0px !important;
    }

    /* linkedin button */
    .btn-linkedin,
    .btn-linkedin:active,
    .btn-linkedin:focus {
        color: #fff !important;
        background: #2083bc !important;
        border: 2px solid #2083bc !important;
    }

    .btn-linkedin:hover {
        color: #fff !important;
        background: #186592;
        border: 2px solid #186592;
    }

    .btn-linkedin-link,
    .btn-linkedin-link:active,
    .btn-linkedin-link:focus {
        color: #2083bc !important;
        background: transparent;
        border: none;
    }

    .btn-linkedin-link:hover {
        color: #186592 !important;
    }

    .btn-outline-linkedin,
    .btn-outline-linkedin:active,
    .btn-outline-linkedin:focus {
        color: #2083bc !important;
        background: transparent;
        border: 2px solid #2083bc;
    }

    .btn-outline-linkedin:hover {
        color: #fff !important;
        background: #2083bc;
        border: 2px solid #2083bc;
    }

    /* pinterest button */
    .btn-pinterest,
    .btn-pinterest:active,
    .btn-pinterest:focus {
        color: #fff !important;
        background: #d2373b !important;
        border: 2px solid #d2373b !important;
    }

    .btn-pinterest:hover {
        color: #fff !important;
        background: #ad2c2f !important;
        border: 2px solid #ad2c2f !important;
    }

    .btn-pinterest-link,
    .btn-pinterest-link:active,
    .btn-pinterest-link:focus {
        color: #d2373b !important;
        background: transparent;
        border: none;
    }

    .btn-pinterest-link:hover {
        color: #ad2c2f !important;
    }

    .btn-outline-pinterest,
    .btn-outline-pinterest:active,
    .btn-outline-pinterest:focus {
        color: #d2373b !important;
        background: transparent;
        border: 2px solid #d2373b;
    }

    .btn-outline-pinterest:hover {
        color: #fff !important;
        background: #d2373b;
        border: 2px solid #d2373b;
    }

    /* dribble button */
    .btn-dribbble,
    .btn-dribbble:active,
    .btn-dribbble:focus {
        color: #fff !important;
        background: #ec5f94;
        border: 2px solid #ec5f94;
    }

    .btn-dribbble:hover {
        color: #fff !important;
        background: #b4446e;
        border: 2px solid #b4446e;
    }

    .btn-dribbble-link,
    .btn-dribbble-link:active,
    .btn-dribbble-link:focus {
        color: #ec5f94 !important;
        background: transparent;
        border: none;
    }

    .btn-dribbble-link:hover {
        color: #b4446e !important;
    }

    .btn-outline-dribbble,
    .btn-outline-dribbble:active,
    .btn-outline-dribbble:focus {
        color: #ec5f94 !important;
        background: transparent;
        border: 2px solid #ec5f94;
    }

    .btn-outline-dribbble:hover {
        color: #fff !important;
        background: #ec5f94;
        border: 2px solid #ec5f94;
    }

    /* instagram button */
    .btn-instagram,
    .btn-instagram:active,
    .btn-instagram:focus {
        color: #fff !important;
        background: #4c5fd7;
        border: 2px solid #4c5fd7;
    }

    .btn-instagram:hover {
        color: #fff !important;
        background: #4252ba;
        border: 2px solid #4252ba;
    }

    .btn-instagram-link,
    .btn-instagram-link:active,
    .btn-instagram-link:focus {
        color: #4c5fd7 !important;
        background: transparent;
        border: none;
    }

    .btn-instagram-link:hover {
        color: #4252ba !important;
    }

    .btn-outline-instagram,
    .btn-outline-instagram:active,
    .btn-outline-instagram:focus {
        color: #4c5fd7 !important;
        background: transparent;
        border: 2px solid #4c5fd7;
    }

    .btn-outline-instagram:hover {
        color: #fff !important;
        background: #4c5fd7;
        border: 2px solid #4c5fd7;
    }

    /* youtube button */
    .btn-youtube,
    .btn-youtube:active,
    .btn-youtube:focus {
        color: #fff !important;
        background: #e52d27;
        border: 2px solid #e52d27;
    }

    .btn-youtube:hover {
        color: #fff !important;
        background: #b31217;
        border: 2px solid #b31217;
    }

    .btn-youtube-link,
    .btn-youtube-link:active,
    .btn-youtube-link:focus {
        color: #e52d27 !important;
        background: transparent;
        border: none;
    }

    .btn-youtube-link:hover {
        color: #b31217 !important;
    }

    .btn-outline-youtube,
    .btn-outline-youtube:active,
    .btn-outline-youtube:focus {
        color: #e52d27 !important;
        background: transparent;
        border: 2px solid #e52d27 !important;
    }

    .btn-outline-youtube:hover {
        color: #fff !important;
        background: #e52d27 !important;
        border: 2px solid #e52d27 !important;
    }

    .btn-xs.btn-icon span,
    .btn-xs.btn-icon i {
        line-height: 34px;
    }

    .btn-icon.btn-circle span,
    .btn-icon.btn-circle i {
        margin-top: -1px;
        margin-right: -1px;
    }

    .btn-icon i {
        margin-top: -1px;
    }

    .btn-icon span,
    .btn-icon i {
        display: block;
        line-height: 50px;
    }

    a.btn,
    a.btn-social {
        display: inline-block;
    }

    .btn-facebook,
    .btn-facebook:active,
    .btn-facebook:focus {
        color: #fff !important;
        background: #4e68a1;
        border: 2px solid #4e68a1;
    }

    .btn-circle {
        border-radius: 50% !important;
    }

    .project-info-box p {
        margin-bottom: 15px;
        padding-bottom: 15px;
        border-bottom: 1px solid #d5dadb;
    }

    .project-info-box p {
        text-transform: capitalize;
    }

    .btn-whatsapp {
        background: #25d366 !important;
        color: #fff;
        border: 2px solid #25d366 !important;
    }

    .profile-header {
        background: url('data:image/jpeg;base64,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') no-repeat center center;
        background-size: cover;
        text-align: center;
        padding: 40px 20px;
        border-bottom: 5px solid crimson;
    }

    .profile-header img {
        border-radius: 50%;
        width: 120px;
        height: 120px;
        border: 4px solid white;
        margin-bottom: 15px;
    }

    .profile-stats {
        background-color: #1e1f2f;
        padding: 15px;
        border-radius: 10px;
        margin-top: -56px;
        display: flex;
        justify-content: space-around;
        font-weight: 500;
    }

    .donor-details,
    .contact-card {
        border-radius: 10px;
        padding: 0px;
        color: #000;
    }

    .contact-card {
        background-color: #11122a;
        color: #fff;
    }

    .contact-card input,
    .contact-card textarea {
        background: #1e1f3a;
        border: none;
        color: #fff;
    }

    .contact-card input:focus,
    .contact-card textarea:focus {
        background: #2b2d52;
        color: #fff;
    }

    .btn-danger {
        background-color: crimson;
        border: none;
    }

    .btn-danger:hover {
        background-color: darkred;
    }

    .table {
        --bs-table-bg: var(--bs-transaptent-bg);
    }

    .action-buttons button {
        font-size: 16px;
        padding: 10px 0;
        transition: 0.3s ease-in-out;
    }

    .action-buttons .btn-success:hover {
        background-color: #218838;
    }

    .action-buttons .btn-outline-danger:hover {
        background-color: #dc3545;
        color: #fff;
    }

    .detail-page-section {
        margin-top: 100px;
        background: #FEE6E7;
    }
</style>
@section('title', 'Digital Blood Hub - Request Blood Detail Page')
@section('content')
    <section class="detail-page-section">
        <div class="profile-header">
            <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJQAAACUCAMAAABC4vDmAAAAMFBMVEXk5ueutLeor7Lf4ePn6eqrsbW5vsHIzM7a3d60ur3BxsjR1NbN0dPX2tzr7O29wsX2DjRMAAADaUlEQVR4nO2bW3LkIAwADYi3be5/25iZZB4bxyDZgqkt+ivZn+0SQgahTNNgMBgMBoPBYDAYDAaDwWCaAGBSG/mn3i53AFQMxt8xdpm6ewE466XU4getpZlVVy9YjHgKPcRE6Ke1KclfRnct2UkLprATpWe05g5W4PzfShmZVHOneGh0D1ZjK5j/yKZ3lpZLCPZ46R7Bcu2sKuN0i1Uzp1gXpxvN8qpeSQjTyMkgAiV0aJFWMGOctnrVpLZXJ/k3DRYQAi5Q2wJGdqkFqZThXj98oHKouK2wGZVhzqra78s/oXK8VobgxF2rHMVpY+WUipSU2goo5/pBoqTUtn6cZ+OV5sScVLTV4y0Kjhgp4fmOVajT3TuMUshTyxPG8kmr5xnGmnBCiu8C8b9JMS7fRyY6vSQwSi0fWDwn9YmfGaBKBUap1dOctGU8JVC3H29LaCGePHnvWKT104lVCgIpUMwXd1JR4KxSGcr+Y917NwhFXTIrTYQ7coNeHjhsVnFnVGZFtTyZL6IPFM7Js/YRfgBcWWduAz2sEN082e55prrPwV+iXii89T3i1NKp8tWhzWsDzqpxnDKlO6AW7J3q38BymFjSdHlvP3pu12LuYHRjdUHuaWlhew5xgApe6Fex7RffLUoPrWmxRkipM1KKNLv+IzjfuBjnuOTv3GcYAawvQN8Rqvy/K7dEG5L5Po4ak4KdF9dpvAtWtdhkvL5l02ue538RPoWoYG0oBpOKQUh9WNJz3pvZqSYRg9VZL3bL017B8iFyxwsmZ2uFniFLC2MpBYh7024VWt4yVQpQ9jiLDr1kYGhaHw+71WiJdHGTaosSMpP2kOnKWwTMlWfyAvq63ic4T+2//ta66L4M9iqju1Y6Xx+Kk5N4q9NTJhDP7bl9rZOZZS/Lple2S8UJJ+IYQhEt6ImF7EShoJasq1P8DeIjBGecMoRYAbeT0Ohsh8Cy797AdmjpT9gItEEtIL4vTULiPoTEx0YsGpHslLlJGr5eqs3iZRCN2tTKSVTPMNGnDwjoVPcgQX1SJ1pVherE7AhJqq6t3Wzr3amq67hHqvPImtMxceiVjimn+koaWT5DTaq3zahMcf2A8ucC5yhXdfqEG51UWrx23+InvphSLb97PxQz3cv2FN++VQeKyzcYDAaDwaA9XxcLKh2A6JUdAAAAAElFTkSuQmCC"
                alt="Donor Image" />
            <h3>{{ $requestBlood->patient_name }}</h3>
            <p><i class="bi bi-geo-alt-fill"></i> {{ $requestBlood->location }}</p>
        </div>
        @php
            $requestSentAt = \Carbon\Carbon::parse($requestBlood->created_at);
            $now = \Carbon\Carbon::now();
            $diff = $now->diff($requestSentAt);
        @endphp
        <div class="container mt-4">
            <div class="profile-stats text-white">
                <div><strong>Blood Group: </strong> <span class="text-danger">{{ $requestBlood->bloodGroup->name }}</span>
                </div>
                <div><strong>Required Date: </strong> <span class="text-danger">{{ $requestBlood->require_date }}</span>
                </div>
                <div><strong>Request Sent: </strong> <span class="text-danger">
                        @if ($diff->days > 0)
                            {{ $diff->days }} days
                        @endif
                        @if ($diff->h > 0)
                            {{ $diff->h }} hours
                        @endif
                        @if ($diff->i > 0)
                            {{ $diff->i }} minutes
                        @endif
                        ago
                    </span></div>
            </div>

            <div class="row mt-4 align-items-center">
                <div class="col-md-8 mb-4">
                    <div class="donor-details">
                        <h4>Donor Details</h4>
                        <table class="table table-borderless mt-3 " style="background: #FEDADC;">
                            <tr>
                                <td><strong>Name:</strong></td>
                                <td>{{ $requestBlood->patient_name }}</td>
                            </tr>
                            <tr>
                                <td><strong>Relation:</strong></td>
                                <td>{{ $requestBlood->relation_with_patient }}</td>
                            </tr>
                            @if ($requestBlood->contact_person_name)
                                <tr>
                                    <td><strong>Contact Person:</strong></td>
                                    <td>{{ $requestBlood->contact_person_name }}</td>
                                </tr>
                            @endif
                            <tr>
                                <td><strong>Emergency:</strong></td>
                                <td>{{ $requestBlood->emergency }}</td>
                            </tr>
                            <tr>
                                <td><strong>Gender:</strong></td>
                                <td>{{ $requestBlood->gender }}</td>
                            </tr>
                            <tr>
                                <td><strong>Require Date:</strong></td>
                                <td>{{ $requestBlood->require_date }}</td>
                            </tr>
                            <tr>
                                <td><strong>Require Time:</strong></td>
                                <td>{{ \Carbon\Carbon::parse($requestBlood->require_time)->format('h:i A') }}</td>
                            </tr>
                            <tr>
                                <td><strong>PickUp:</strong></td>
                                <td>{{ $requestBlood->pickup }}</td>
                            </tr>
                            <tr>
                                <td><strong>DropOff:</strong></td>
                                <td>{{ $requestBlood->dropoff }}</td>
                            </tr>
                            <tr>
                                <td><strong>State:</strong></td>
                                <td>{{ $requestBlood->State->name }}</td>
                            </tr>
                            <tr>
                                <td><strong>City:</strong></td>
                                <td>{{ $requestBlood->city->name }}</td>
                            </tr>
                            <tr>
                                <td><strong>Hospital:</strong></td>
                                <td>{{ $requestBlood->Hospital->name }}</td>
                            </tr>
                            @if ($bloodrRequestExist && $bloodrRequestExist->status === 'accepted' && $requestBlood->created_by != $userId)
                                <tr>
                                    <td><strong>Contact:</strong></td>
                                    <td>{{ $requestBlood->contact1 }}</td>
                                </tr>
                            @endif
                            @if ($requestBlood->contact2)
                                <tr>
                                    <td><strong>Contact 2:</strong></td>
                                    <td>{{ $requestBlood->contact2 }}</td>
                                </tr>
                            @endif
                            <tbody id="contact-info-{{ $requestBlood->id }}"></tbody> 
                        </table>
                    </div>
                </div>
                <div class="col-md-4 mb-4 d-flex align-items-start justify-content-end"
                    style="flex-direction: column;gap: 14px;}">
                    <div class="action-buttons w-100">
                        @if (
                            (is_null($bloodrRequestExist) || @$bloodrRequestExist->status === 'pending') &&
                                $requestBlood->created_by !== $userId)
                            <button class="btn btn-success w-100 mb-2 rounded-3 fw-semibold btn-accept"
                                data-id="{{ $requestBlood->id }}">✔ Accept</button>
                            <button class="btn btn-outline-danger w-100 rounded-3 fw-semibold btn-reject"
                                data-id="{{ $requestBlood->id }}">✖ Reject</button>
                        @endif

                    </div>
                    <div class="project-info-box mt-0 mb-0 w-100">
                        <p class="mb-0">
                            <span class="fw-bold mr-10 va-middle hide-mobile">Share:</span>
                            <a target="_blank" href="{{ $facebookShare }}"
                                class="btn btn-xs btn-facebook btn-circle btn-icon mr-5 mb-0"><i
                                    class="fab fa-facebook-f"></i></a>
                            <a target="_blank" href="{{ $twitterShare }}"
                                class="btn btn-xs btn-twitter btn-circle btn-icon mr-5 mb-0"><i
                                    class="fab fa-twitter"></i></a>
                            <a target="_blank" href="{{ $pinterestShare }}"
                                class="btn btn-xs btn-pinterest btn-circle btn-icon mr-5 mb-0"><i
                                    class="fab fa-pinterest"></i></a>
                            <a target="_blank" href="{{ $whatsappShare }}"
                                class="btn btn-xs btn-whatsapp btn-circle btn-icon mr-5 mb-0"><i
                                    class="fab fa-whatsapp"></i></a>
                            <a target="_blank" href="{{ $linkedinShare }}"
                                class="btn btn-xs btn-linkedin btn-circle btn-icon mr-5 mb-0"><i
                                    class="fab fa-linkedin-in"></i></a>
                        </p>
                    </div>
                </div>

            </div>
        </div>
    </section>
    {{--  <div class="breadcumbsection ">
        <div class="container">
            <div class="breadcumb-content">
                <h1 class="breadcumb-title">Blood Request Detail</h1>
            </div>
        </div>
    </div>  --}}

    {{--  <section class="detailpagesection mt-5">
        <div class="container">
            <div class="row">
                <div class="float-right">
                    @if ($requestBlood->accept_status !== 'accepted' && $requestBlood->created_by != $userId)
                      <button type="button" class="btn mb-2 btn-effect accept-button" data-id="{{ $requestBlood->id }}">
                        <span class="link-effect">
                            <span class="effect-1">ACCEPT</span>
                            <span class="effect-1">ACCEPT</span>
                        </span>
                    </button>
                    @endif
                </div>
                @include('frontend.layouts.include.message')
                <div class="col-md-5">
                    <div class="project-info-box mt-0">
                        <h5>Patient Info</h5>
                        <p class="mb-0">
                            {{ $requestBlood->patient_name }} urgently needs blood.
                            @if ($requestBlood->Hospital && $requestBlood->City && $requestBlood->State && $requestBlood->Country)
                                If you can donate, please proceed to {{ $requestBlood->Hospital->name }} located in
                                {{ $requestBlood->City->name }}, {{ $requestBlood->State->name }},
                                {{ $requestBlood->Country->name }}.
                            @else
                                If you can donate, please proceed to the nearest hospital.
                            @endif
                            The required blood group is {{ $requestBlood->bloodGroup->name }}.

                            @if ($requestBlood->contact_person_name)
                                For more details, please contact {{ $requestBlood->contact_person_name }}.
                            @else
                                For more details, please contact the hospital.
                            @endif
                        </p>

                    </div><!-- / project-info-box -->

                    <div class="project-info-box">
                        <p><b>Patient:</b> {{ $requestBlood->patient_name }}</p>
                        <p><b>Relation:</b> {{ $requestBlood->relation_with_patient }}</p>
                        @if ($requestBlood->contact_person_name)
                            <p><b>Contact Person Name:</b> {{ $requestBlood->contact_person_name }}</p>
                        @endif
                        <p><b>Emegency:</b> {{ $requestBlood->emergency }}</p>
                        <p><b>Gender:</b> {{ $requestBlood->gender }}</p>
                        <p><b>Date:</b> {{ $requestBlood->require_date }}</p>
                        <p><b>Time:</b> {{ \Carbon\Carbon::parse($requestBlood->require_time)->format('h:i A') }}</p>
                        <p><b>Pickup:</b> {{ $requestBlood->pickup }}</p>
                        <p><b>DropOff:</b> {{ $requestBlood->dropoff }}</p>
                        <p><b>Blood Group:</b> {{ $requestBlood->bloodGroup->name }}ve</p>

                    </div><!-- / project-info-box -->

                    <div class="project-info-box mt-0 mb-0">
                        <p class="mb-0">
                            <span class="fw-bold mr-10 va-middle hide-mobile">Share:</span>
                            <a target="_blank" href="{{ $facebookShare }}"
                                class="btn btn-xs btn-facebook btn-circle btn-icon mr-5 mb-0"><i
                                    class="fab fa-facebook-f"></i></a>
                            <a target="_blank" href="{{ $twitterShare }}"
                                class="btn btn-xs btn-twitter btn-circle btn-icon mr-5 mb-0"><i
                                    class="fab fa-twitter"></i></a>
                            <a target="_blank" href="{{ $pinterestShare }}"
                                class="btn btn-xs btn-pinterest btn-circle btn-icon mr-5 mb-0"><i
                                    class="fab fa-pinterest"></i></a>
                            <a target="_blank" href="{{ $whatsappShare }}"
                                class="btn btn-xs btn-whatsapp btn-circle btn-icon mr-5 mb-0"><i
                                    class="fab fa-whatsapp"></i></a>
                            <a target="_blank" href="{{ $linkedinShare }}"
                                class="btn btn-xs btn-linkedin btn-circle btn-icon mr-5 mb-0"><i
                                    class="fab fa-linkedin-in"></i></a>
                        </p>
                    </div><!-- / project-info-box -->
                </div><!-- / column -->

                <div class="col-md-7">
                    <img src="{{ asset('frontend/banners/banner-3.jpg') }}" alt="project-image" class="rounded">
                    <div class="project-info-box">
                        <p><b>Country:</b> {{ $requestBlood->Country->name }}</p>
                        <p><b>City:</b> {{ $requestBlood->City->name }}</p>
                        <p><b>Province:</b> {{ $requestBlood->State->name }}</p>
                        <p><b>Hospital:</b> {{ $requestBlood->Hospital->name }}</p>
                        <p><b>Reason:</b> {{ $requestBlood->BloodReason->reason }}:
                            {{ $requestBlood->BloodReason->description }}</p>
                    </div><!-- / project-info-box -->
                </div><!-- / column -->
            </div>
        </div>
    </section>

    <section class="mapsection mt-5 mb-5">
        <div class="container">
            <div id="map" style="400px">
                
                
            </div>
        </div>
    </section>  --}}
    
    
                    <iframe
                        title="{{ urlencode($requestBlood->Hospital->name) }}, {{ urlencode($requestBlood->City->name) }}, {{ urlencode($requestBlood->State->name) }}"
                        src="https://www.google.com/maps?q={{ urlencode($requestBlood->Hospital->name . ', Gulberg, ' . $requestBlood->City->name) }}&output=embed"
                        class="map__contact" style="height: 400px" allowfullscreen>
                    </iframe>
@section('customJs')
    <script>
        $(document).ready(function() {


            $('.btn-accept').click(function() {
                let id = $(this).data('id');
                let $button = $(this); // reference to current Accept button

                Swal.fire({
                    title: 'Are you sure?',
                    text: "Do you want to accept this request?",
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonColor: '#28a745',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes, Accept it!'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.post("{{ route('front.bloodRequestAccept') }}", {
                            id: id,
                            _token: '{{ csrf_token() }}'
                        }, function(response) {
                            if (response.status) {
                                Swal.fire('Accepted!', 'The request has been accepted.',
                                    'success');

                                // Hide Accept/Reject buttons
                                $button.closest('.btn-accept').hide();
                                $('.btn-reject[data-id="' + id + '"]').hide();

                                
                                let contactHtml =
                                    `<tr><td><strong>Contact:</strong></td><td>${response.data.contact1}</td></tr>`;
                                if (response.data.contact2) {
                                    contactHtml +=
                                        `<tr><td><strong>Contact 2:</strong></td><td>${response.data.contact2}</td></tr>`;
                                }

                                $('#contact-info-' + id).html(
                                contactHtml); 
                            }
                        });
                    }
                });
            });


            $('.btn-reject').click(function() {
                let id = $(this).data('id');

                Swal.fire({
                    title: 'Are you sure?',
                    text: "Do you want to reject this request?",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#dc3545',
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: 'Yes, Reject it!'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.post("{{ route('front.declineRequest') }}", {
                            id: id
                        }, function(response) {
                            Swal.fire('Rejected!', 'The request has been rejected.',
                                'success').then(() => {
                                location.reload();
                            });
                        });
                    }
                });
            });
        });
    </script>


@endsection