@extends('frontend.layouts.app')
@section('title', 'Digital Blood Hub - Request Blood')
@section('content')
    <style>
        .btn-close {
            filter: invert(1);

            /* Makes the icon white */
        }

        .disabled-button {
            pointer-events: none;
            background-color: #dc3545;
            color: #fff;
            cursor: not-allowed;
        }

        .accepted-button {
            pointer-events: none;
            background-color: #dc3545;
            color: #fff;
            cursor: not-allowed;
        }

        .blood-card {
            cursor: pointer;
            border-top: 4px solid #F61111;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            padding: 20px 20px 20px 20px;
            border-radius: 5px;
            position: relative;
            margin-bottom: 20px;
            height: 390px;
            background-color: #fff;
        }

        .blood-card h4 {
            font-family: "ProductSans Medium";
        }

        .badge-new {
            position: absolute;
            right: 10px;
            background-color: #F61111;
            color: white;
            border-radius: 20px;
            padding: 5px 30px;
            font-size: 0.8rem;
        }
        .blood-card .detail-link:hover {
            color: #fff;
        }
        .blood-card p {
            margin: 10px 0px;
            font-size: 14px;
            font-family: 'ProductSans Regular';
            border-bottom:  1px solid #ccc;
        }
        .blood-card span {
            margin: 4px 0px;
            font-size: 14px;
            font-family: 'ProductSans Regular';
            display: flex;
            justify-content: center;
        }

        .blood-card p strong {
            display: inline-block;
            width: 120px;
            font-family: "ProductSans Medium";
        }
        @media screen and (max-width: 1400px) and (min-width: 992px) {
            .blood-card {
                height: 390px !important;
            }
        }
        @media screen and (max-width: 992px) and (min-width: 678px) {
            .blood-card {
                height: 420px !important;
            }
        }
        @media screen and (max-width: 678px){
            .blood-card {
                height: inherit !important;
            }
        }
        .blood-card-image{
            width: 100px;
            margin: 0 auto;
            mix-blend-mode: hard-light;
        }
    </style>
    <div class="overlay"></div>
    <div class="loader"></div>
    <div class="breadcumbsection ">
        <div class="container">
            <div class="breadcumb-content">
                <h1 class="breadcumb-title">Request Blood</h1>
            </div>
        </div>
    </div>

    <div class="container mt-5 mb-5">
        <div class="d-flex justify-content-center row">
            @include('frontend.layouts.include.message')
            @if ($bloodRequests->isNotEmpty())
                @foreach ($bloodRequests as $data)
                    {{--  <div class="col-md-4 col-sm-6 col-12">
                        <div class="custom-card row p-3 bg-white border rounded shadow-sm mb-3"
                            id="mainRequestDiv{{ $data->id }}">
                            <div class="col-12 text-end">
                                <i class="fa fa-bookmark save-icon" title="Save"></i>
                            </div>
                            <div class="col-md-3 mt-1 product-image">
                                <img class="img-fluid img-responsive rounded"
                                    src="{{ asset('frontend/banners/defuat.png') }}" alt="Product Image">
                            </div>
                            <div class="col-md-6 mt-1">
                                <h5 class="text-capitalize">{{ $data->contact_person_name }}</h5>
                                <div class="justify-content-between d-flex text-capitalize">
                                    <h6>Patient Name:</h6>
                                    <span class="text-muted">{{ $data->patient_name }}</span>
                                </div>
                                @if (@$data->acceptedRequests[0]->status == 'accepted')
                                    <div class="justify-content-between d-flex">
                                        <h6>Contact 1:</h6>
                                        <span class="text-muted">{{ $data->contact1 }}</span>
                                    </div>
                                    @if ($data->contact2)
                                        <div class="justify-content-between d-flex">
                                            <h6>Contact 2:</h6>
                                            <span class="text-muted">{{ $data->contact2 }}</span>
                                        </div>
                                    @endif
                                @else
                                    <div id="contacts-container-{{ $data->id }}"></div>
                                @endif

                                <div class="justify-content-between d-flex text-capitalize">
                                    <h6>Required Blood Group:</h6>
                                    <span class="text-muted">{{ $data->bloodGroup->name }}</span>
                                </div>
                                <div class="justify-content-between d-flex text-capitalize">
                                    <h6>Urgent:</h6>
                                    <span class="text-muted">{{ $data->emergency }}</span>
                                </div>
                            </div>
                            <div class="col-md-3 d-flex align-items-center justify-content-center text-capitalize">
                                <div class="mt-4 w-100">
                                    <div class="header-button mb-2">
                                        <a class="btn btn-effect w-100" href="{{ url('detail/' . $data->id) }}">
                                            <span class="link-effect">
                                                <span class="effect-1">DETAIL PAGE</span>
                                                <span class="effect-1">DETAIL PAGE</span>
                                            </span>
                                        </a>
                                    </div>
                                    <div class="header-button mb-2" data-bs-toggle="modal"
                                        data-bs-target="#requestdetailmodel{{ $data->id }}">
                                        <a href="javascript:void(0);" class="btn w-100">
                                            <span class="link-effect">
                                                <span class="effect-1">DETAIL</span>
                                                <span class="effect-1">DETAIL</span>
                                            </span>
                                        </a>
                                    </div>
                                    @if (@$data->acceptedRequests[0]->status !== 'accepted')
                                        <div class="header-button">
                                            <a href="javascript:void(0);" class="btn w-100 accept-button"
                                                data-id="{{ $data->id }}">
                                                <span class="link-effect">
                                                    <span class="effect-1">ACCEPT</span>
                                                    <span class="effect-1">ACCEPT</span>
                                                </span>
                                            </a>
                                        </div>
                                    @else
                                        <div class="header-button">
                                            <a href="javascript:void(0);" class="btn btn-danger w-100 accepted-button"
                                                disabled>
                                                <span class="link-effect">
                                                    <span class="effect-1">ACCEPTED</span>
                                                    <span class="effect-1">ACCEPTED</span>
                                                </span>
                                            </a>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>  --}}
                    <div class="col-lg-4 col-md-6 ">
                        <div class="blood-card">
                            <div class="blood-card-image">
                                <img src="{{ asset('frontend/banners/blood.jpeg') }}" alt="" class="img-fluid">
                            </div>
                            <span class="text-center">{{ $data->hospital->name }}</span>
                            <div class="d-flex justify-content-between  align-items-center">
                                <h4>
                                    {{ $data->emergency == 'yes' ? 'Emergency' : 'Voluntary ' }}
                                </h4>
                                <a class="badge-new detail-link" href="{{ url('detail/' . $data->id) }}">Detail</a>
                            </div>
                            <p><strong>Name:</strong>{{ $data->patient_name }}</p>
                            <p><strong>Blood Group:</strong> {{ $data->bloodGroup->name }}</p>
                            <p><strong>City:</strong> {{ $data->city->name }}</p>
                            @if (@$data->acceptedRequests[0]->status == 'accepted')
                                <p><strong>Contact:</strong> {{ $data->contact1 }}</p>
                            @endif
                            @if ($data->contact2)
                                <p><strong>Contact 2:</strong> {{ $data->contact2 }}</p>
                            @endif

                        </div>
                    </div>

                    <!-- Modal for Each Blood Request -->
                    <div class="modal fade" class="requestdetailmodel" id="requestdetailmodel{{ $data->id }}"
                        tabindex="-1" aria-labelledby="requestdetailmodel{{ $data->id }}" aria-hidden="true"
                        data-bs-backdrop="static">
                        <div class="modal-dialog modal-xl">
                            <div class="modal-content">
                                <div class="modal-header requestmodelheader">
                                    <h5 class="modal-title">Patient Info</h5>
                                    <i class="fas fa-times btn-close" data-bs-dismiss="modal" aria-label="Close"></i>
                                </div>
                                <div class="modal-body">
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <table class="table table-hover table-striped requesttable text-capitalize">
                                                <tbody>
                                                    <tr>
                                                        <th scope="row">Patient Name</th>
                                                        <td>{{ $data->patient_name }}</td>
                                                    </tr>
                                                    <tr>
                                                        <th scope="row">Contact Person Name</th>
                                                        <td>{{ $data->contact_person_name }}</td>
                                                    </tr>
                                                    <tr>
                                                        <th scope="row">Relation With Patient</th>
                                                        <td>{{ $data->relation_with_patient }}</td>
                                                    </tr>
                                                    <tr>
                                                        <th scope="row">Blood Group</th>
                                                        <td>{{ $data->bloodGroup->name }}</td>
                                                    </tr>

                                                    <tr>
                                                        <th scope="row">Gender</th>
                                                        <td>{{ $data->gender }}</td>
                                                    </tr>
                                                    <tr>
                                                        <th scope="row">Require Date</th>
                                                        <td>{{ $data->require_date }}</td>
                                                    </tr>
                                                    <tr>
                                                        <th scope="row">Require Time</th>
                                                        <td>{{ \Carbon\Carbon::parse($data->require_time)->format('h:i A') }}
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <th scope="row">Hospital</th>
                                                        <td>{{ $data->hospital->name }}</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="col-lg-6">
                                            <table class="table table-hover table-striped requesttable text-capitalize">
                                                <tbody>
                                                    <tr>
                                                        <th scope="row">Reason</th>
                                                        <td>{{ $data->BloodReason->reason }}:{{ $data->BloodReason->description }}
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <th scope="row">Urgent</th>
                                                        <td>{{ $data->emergency }}</td>
                                                    </tr>
                                                    <tr>
                                                        <th scope="row">City</th>
                                                        <td>{{ $data->city->name }}</td>
                                                    </tr>
                                                    <tr>
                                                        <th scope="row">Province</th>
                                                        <td>{{ $data->State->name }}</td>
                                                    </tr>

                                                    @if ($data->location)
                                                        <tr>
                                                            <th scope="row">Location</th>
                                                            <td>{{ $data->location }}</td>
                                                        </tr>
                                                    @endif

                                                    <tr>
                                                        <th scope="row">Pick Up</th>
                                                        <td>{{ $data->pickup }}</td>
                                                    </tr>
                                                    <tr>
                                                        <th scope="row">Drop Off</th>
                                                        <td>{{ $data->dropoff }}</td>
                                                    </tr>
                                                    <tr>
                                                        <th scope="row">Country</th>
                                                        <td>{{ $data->country->name }}</td>
                                                    </tr>

                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                                @php
                                    $requestSentAt = \Carbon\Carbon::parse($data->created_at);
                                    $now = \Carbon\Carbon::now();
                                    $diff = $now->diff($requestSentAt);
                                @endphp
                                <div class="modal-footer">
                                    <div class="footer-info">
                                        <h6>Request Sent:
                                            <span class="text-small text-muted">
                                                @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>
                                        </h6>
                                    </div>
                                    <div class="footer-actions">
                                        @if (@$data->acceptedRequests[0]->status !== 'accepted')
                                            <button type="button" class="btn mb-2 btn-effect accept-button"
                                                data-id="{{ $data->id }}">
                                                <span class="link-effect">
                                                    <span class="effect-1">ACCEPT</span>
                                                    <span class="effect-1">ACCEPT</span>
                                                </span>
                                            </button>
                                            <button type="button" class="btn mb-2 btn-effect decline-button"
                                                data-bs-dismiss="modal" data-id="{{ $data->id }}">
                                                <span class="link-effect">
                                                    <span class="effect-1">NOT INTERESTED</span>
                                                    <span class="effect-1">NOT INTERESTED</span>
                                                </span>
                                            </button>
                                        @else
                                            <button type="button" class="btn mb-2 btn-danger accepted-button" disabled>
                                                <span class="link-effect">
                                                    <span class="effect-1">ACCEPTED</span>
                                                    <span class="effect-1">ACCEPTED</span>
                                                </span>
                                            </button>
                                            <button type="button" class="btn mb-2 btn-effect declined-button" disabled>
                                                <span class="link-effect">
                                                    <span class="effect-1">NOT INTERESTED</span>
                                                    <span class="effect-1">NOT INTERESTED</span>
                                                </span>
                                            </button>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
                <div class="custom-pagination p-5 m-2">
                    {{ $bloodRequests->links('vendor.pagination.bootstrap-5') }}
                </div>
            @else
                <div class="alert alert-danger text-center" role="alert">
                    No Record Found
                </div>
            @endif
        </div>
    </div>
    <!-- Accept Modal -->


@endsection
@section('customJs')
    <script>
        $(document).ready(function() {
            $('.detail-link').on('click', function (e) {
                e.stopPropagation(); 
            });
            var acceptId = null;

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

            $('.accept-button').on('click', function(e) {
                e.preventDefault();
                $('.overlay').show();
                $('.loader').show();



                $.ajax({
                    url: '{{ route('front.bloodRequestAccept') }}',
                    method: 'POST',
                    data: {
                        id: acceptId,
                    },
                    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 + '"]')
                                    .removeClass('accept-button')
                                    .addClass('accepted-button')
                                    .text('ACCEPTED')
                                    .attr('disabled', true);
                                $('.decline-button[data-id="' + acceptId + '"]').attr(
                                    'disabled', true);

                                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'
                        });
                    }
                });
            });
            $('.decline-button').on('click', function() {
                $('.overlay').show();
                $('.loader').show();
                var id = $(this).data('id');
                $.ajax({
                    url: '{{ route('front.declineRequest') }}',
                    method: 'POST',
                    data: {
                        id: id,
                    },
                    success: function(response) {
                        $('.overlay').hide();
                        $('.loader').hide();
                        if (response.status == true) {
                            Swal.fire({
                                title: 'Success!',
                                text: 'Request Decline successfully!',
                                icon: 'success',
                                confirmButtonText: 'OK'
                            })
                            $('#mainRequestDiv' + id).remove();
                        }
                    },
                    error: function(xhr) {
                        Swal.fire({
                            title: 'Error!',
                            text: 'An error occurred: ' + xhr.statusText,
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                        $('.overlay').hide();
                        $('.loader').hide();
                    }

                });
            });
        });
    </script>
@endsection