@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;
    }
</style>
@section('title', 'Digital Blood Hub - Request Blood Detail Page')
@section('content')
    <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>

    <!-- Add Google Maps Section -->
    <section class="mapsection mt-5 mb-5">
        <div class="container">
            <div id="map" style="400px">

                <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) }},+{{ urlencode($requestBlood->City->name) }},+{{ urlencode($requestBlood->State->name) }},+{{ urlencode($requestBlood->Country->name) }}&output=embed"
                    class="map__contact" style="height: 400px" allowfullscreen>
                </iframe>


            </div>
        </div>
    </section>
@section('customJs')
    <script>
        $(document).ready(function() {
            var acceptId = null;

            $('.accept-button').on('click', function() {
                $('.modal').modal('hide');
                acceptId = $(this).data('id');
                $('#accept-request-id').val(acceptId);
                $('#acceptModal').modal('show');
            });

            $('#acceptForm').on('submit', function(e) {
                e.preventDefault();
                $('.overlay').show();
                $('.loader').show();

                var address = $('#donor-address').val();
                var donatedWhen = $('#donated-when').val();

                $.ajax({
                    url: '{{ route('front.bloodRequestAccept') }}',
                    method: 'POST',
                    data: {
                        id: acceptId,
                        address: address,
                        donated_when: donatedWhen,
                    },
                    success: function(response) {
                        $('.overlay').hide();
                        $('.loader').hide();
                        $('#acceptModal').modal('hide');

                        if (response.status == true) {
                            Swal.fire({
                                title: 'Success!',
                                text: 'Request accepted successfully!',
                                icon: 'success',
                                confirmButtonText: 'OK'
                            }).then(function() {
                                $('.accept-button[data-id="' + acceptId + '"]').hide();

                                var contactHtml = '';
                                if (response.data.contact1) {
                                    contactHtml += `
                                        <div class="justify-content-between d-flex">
                                            <h6>Contact 1:</h6>
                                            <span class="text-muted">${response.data.contact1}</span>
                                        </div>`;
                                }
                                if (response.data.contact2) {
                                    contactHtml += `
                                        <div class="justify-content-between d-flex">
                                            <h6>Contact 2:</h6>
                                            <span class="text-muted">${response.data.contact2}</span>
                                        </div>`;
                                }
                                $('#contacts-container-' + acceptId).html(contactHtml);
                            });
                        } else {
                            Swal.fire({
                                title: 'Failed!',
                                text: 'The request could not be accepted.',
                                icon: 'error',
                                confirmButtonText: 'OK'
                            });
                        }
                    },
                    error: function(xhr) {
                        $('.overlay').hide();
                        $('.loader').hide();
                        Swal.fire({
                            title: 'Error!',
                            text: 'An error occurred: ' + xhr.statusText,
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    }
                });
            });

        });
    </script>
@endsection