@extends('layouts.main')

@push('styles')
<link href="{{ asset('elite/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.css') }}" rel="stylesheet" type="text/css" />
<style type="text/css">
    .color-bordered-table.success-bordered-table {
        border-top: 0px;
    }
</style>
@endpush

@section('content')
<div class="row bg-title">
    <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
        <h4 class="page-title">{{ __('blood_donations.blood_donations') }}</h4>
    </div>
    <div class="col-lg-9 col-sm-8 col-md-8 col-xs-12">
        <ol class="breadcrumb">
            <li><a href="{{ route('home') }}">{{ __('blood_donations.dashboard') }}</a></li>
            <li><a href="{{ route('blood_donations.index') }}">{{ __('blood_donations.blood_donors') }}</a></li>
            <li class="active">{{ __('blood_donations.blood_donations') }}</li>
        </ol>
    </div>
</div>

<div class="row">
    <div class="col-sm-12">
        <div class="white-box">
            <div class="row">
                <div class="col-sm-6">
                    <h4>{{ __('blood_donations.member_details') }}</h4>
                    <br>
                    <div class="table-responsive">
                        <table class="table table-striped table-bordered table-hover table-condensed table-thead-simple">
                            <tr>
                                @php $blood_group = \Streamline\Models\BloodGroup::find($donor->blood_group_id); @endphp
                                <th>{{ __('blood_donations.blood_group') }} : </th><td><font color="green"> {{ $blood_group->name }} </font></td>
                            </tr>
                            <tr>
                                <th>{{ __('blood_donations.name') }} : </th><td>{{ $donor->first_name }} {{ $donor->last_name }}</td>
                            </tr>
                            <tr>
                                <th>{{ __('blood_donations.phone') }} : </th><td>{{ $donor->phone }}</td>
                            </tr>
                            <tr>
                                <th>{{ __('blood_donations.willing_to_donate') }} : </th><td>{{ $donor->willing_to_donate == 1 ? __('blood_donations.yes') : __('blood_donations.no') }}</td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div class="col-sm-6">
                    <h4>{{ __('blood_donations.donation_details') }}</h4>
                    <br>
                    <div class="table-responsive">
                        <table class="table color-bordered-table success-bordered-table table-bordered">
                            <thead>
                            <th style="width: 20%">#</th>
                            <th style="width: 80%">{{ __('blood_donations.donation_date') }}</th>
                            </thead>
                            <tbody>
                            @php $counter = 1; @endphp
                            @foreach($blood_donations as $donation)
                                <tr>
                                    <td>{{ $counter }}. </td>
                                    <td>{{ streamline_date($donation->last_donation_date) }}</td>
                                </tr>
                                @php $counter++; @endphp
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<!-- Date Picker Plugin JavaScript -->
<script src="{{ asset('elite/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.js') }}"></script>

<script>
    jQuery('#datepicker-autoclose').datepicker({
        autoclose: true,
        todayHighlight: true,
        format: 'dd/mm/yyyy',
    });
</script>
@endpush