@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;
        }
    </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-fluid 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-10">
                    <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->accept_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
                                <!-- Placeholder for contact details, this will be populated via AJAX -->
                                <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="{{ route('detailPage', ['id' => $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->accept_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>


                    <!-- 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->request_sent_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->accept_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() {
            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 = $('#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 + '"]').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