@extends('adminlte::page')

@section('title', __("clinic-consumable.index.h5_consumable_list"))

@section('content_header')
    <h5><label class="title-underbar">{{ __("clinic-consumable.index.h5_consumable_list") }}</label></h5>
    <x-admin.success-flush-message />
    <x-admin.error-flush-message />
    <x-admin.validation-message />
@stop

@section('content')
	@php
		$isJapan = app()->isLocale('ja');
	@endphp
	<form method="GET" action="{{ route('productpromotion.clinic.consumable.index', $ownOsadaEquipmentId) }}" id="search">
		<div class="row" style="margin-top:15px;">
			<div class="col-md-3">
				<div class="row">
					<label style="margin-top: 6px; margin-right: 15px;">
						{{ __("clinic-consumable.index.label_over_term") }}
					</label>

					<div class="form-group">
						<select class="custom-select" id="status" name="status_over_term" style="border-radius: 10px;">
							@foreach ($statusList as $key => $value)
								<option value="{{ $key }}" {{ $selectedStatus == $key ? 'selected' : '' }}>{{ $value }}</option>
							@endforeach
						</select>
					</div>
				</div>
			</div>
			<div class="col-md-9">
				<ul class="guide row justify-content-end">
					<li class="series1 col-md-auto">{{ __("clinic-consumable.index.li_term_in_two_month") }}</li>
					<li class="series2 col-md-auto">{{ __("clinic-consumable.index.li_term_target_month") }}</li>
					<li class="series3 col-md-auto">{{ __("clinic-consumable.index.li_term_over") }}</li>
				</ul>
			</div>
		</div>
	</form>
		<div class="row">
        <div class="col-md-12">
            <div class="card" style="border-radius: 20px; box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.04);">
                <div class="card-body">
					<table class="table" style="margin-top: 35px;">
						<thead class="thead-light medium-heading">
							<tr>
								<th style="width: 30%;">{{ __("clinic-consumable.index.th_equipment_name") }}</th>
								<th style="width: 10%;">{{ __("clinic-consumable.index.th_last_replaced_at") }}</th>
								<th style="width: 15%;">{{ __("clinic-consumable.index.th_over_months") }}</th>
								<th style="width: 10%;">{{ __("clinic-consumable.index.th_update") }}</th>
								<th style="width: 15%;">{{ __("clinic-consumable.index.th_purchase_request") }}</th>
								<th style="width: 20%;">{{ __("clinic-consumable.index.th_replace_interval") }}</th>
							</tr>
						</thead>
						<tbody class="main-text">
							@foreach($ownOsadaConsumables as $ownConsumable)
								<tr>
									<td class="align-middle">{{ $ownConsumable->external_name }}</td>
									<td class="align-middle">
										{{
											$ownConsumable->last_replaced_at
											? $ownConsumable->last_replaced_at->format('Y.m.d')
											: '-'
										}}
									</td>
									<td class="align-middle">
										@php
											$bgColor = '';
											$color = '000';
											$monthText = '';
											if ($ownConsumable->is_over) {
												if ($ownConsumable->diff_month == 0) {
													$bgColor = '#FF8F3F';
													$monthText = __("clinic-consumable.index.td_target_month");
												} else {
													$bgColor = '#FF6565';
													$monthText = abs($ownConsumable->diff_month) . __("clinic-consumable.index.td_month");
												}
												$color = 'fff';
											} else {
												if ($ownConsumable->diff_month == 0) {
													$bgColor = '#F3D328';
													$monthText = __("clinic-consumable.index.td_target_month");
													$color = 'fff';
												} elseif ($ownConsumable->diff_month < 2) {
													$bgColor = '#F3D328';
													$monthText = abs($ownConsumable->diff_month) . __("clinic-consumable.index.td_before_month");
													$color = 'fff';
												} else {
													$monthText = abs($ownConsumable->diff_month) . __("clinic-consumable.index.td_before_month");
												}
											}
										@endphp
										<p
											style="
												color: {{ $color }};
												background-color: {{ $bgColor }};
												margin: 0;
												padding: 5px;
												padding-right: 0;
												text-align: center;
												width: 100%;"
										>
											{{ $monthText }}
										</p>
									</td>
									<td class="align-middle">
										@if (\Auth::guard('clinic')->user()->isEditableRole())
										<a
											class="btn btn-block btn-outline-primary rounded-pill"
											data-toggle="modal"
											data-target="#update{{$ownConsumable->id}}"
										>
											{{ __("clinic-consumable.index.button_update") }}
										</a>
										@endif
									</td>
									<td class="align-middle">
										@if (\Auth::guard('clinic')->user()->isMakablePaymentRole())
										<button
											type="button"
											class="btn btn-block btn-outline-primary rounded-pill"
											data-toggle="modal"
											data-target="#purchaeRequestModal{{ $ownConsumable->id }}"
											@if ($ownConsumable->is_applying_purchase)
												disabled
											@endif
										>
											{{ __("clinic-consumable.index.button_order") }}
										</button>
										@endif
									</td>
									<td class="align-middle">
										<span>
											{{ $ownConsumable->replacement_interval_month . __("clinic-consumable.index.td_month") }}
										</span>
										@if (\Auth::guard('clinic')->user()->isEditableRole())
										<a
											class="btn btn-outline-primary rounded-pill w-50"
											style="margin-left:2rem;"
											data-toggle="modal"
											data-target="#update_interval{{ $ownConsumable->id }}"
										>
											{{ __("clinic-consumable.index.button_change") }}
										</a>
										@endif
									</td>
								</tr>
								@if (\Auth::guard('clinic')->user()->isEditableRole())
								@include('productpromotion::clinic.consumable.modal.update', ['ownConsumable' => $ownConsumable])
								@include('productpromotion::clinic.consumable.modal.update_interval', ['ownConsumable' => $ownConsumable])
								@endif
								@if (\Auth::guard('clinic')->user()->isMakablePaymentRole())
								@include('productpromotion::clinic.consumable.modal.purchase_request', ['ownConsumable' => $ownConsumable, 'ownEquipment' => $ownOsadaEquipment])
								@endif
							@endforeach
							@if ($ownOsadaConsumables->count() == 0)
								<tr>
									<td colspan="6" class="align-middle text-center">
										{{ __("clinic-consumable.index.td_no_data") }}
									</td>
								</tr>
							@endif
						</tbody>
					</table>
                </div>
				<div style="margin: 0 auto;">
					{{ $ownOsadaConsumables->links() }}
				</div>
            </div>

            <div class="col-md-12 d-flex justify-content-center" style="margin-top: 30px;">
                <div class="col-md-3">
                    <a id="page-back" href="{{ route('productpromotion.clinic.purchased-equipment.show', $ownOsadaEquipmentId) }}" class="btn btn-block button-go btn-lg rounded-pill">
                        {{ __("clinic-purchased-equipments.show.button_back") }}
                    </a>
                </div>
            </div>
            @if ($isAccepted)
                <div class="col-md-12" style="margin-top: 20px; display: none;">
                    <button id="btn-accepted" type="button" class="btn btn-block button-go btn-lg rounded-pill" data-toggle="modal" data-target="#requestAcceptedModal"></button>
                </div>
            @endif
        </div>
    </div>

    <!-- Modal -->
    @if ($isAccepted)
        @include('productpromotion::clinic.consumable.modal.request_accepted')
    @endif
@stop

@section('css')
    <link rel="stylesheet" href="/css/admin_custom.css">
	<style>
        ul.guide{
            display:flex;
            list-style: none;
            clear:both;
        }
        ul.guide li:before {
            content: "";
            float:left;
            height: 100%;
            width: 3rem;
            margin-right: 5px;
        }
        ul.guide li{
            /*margin-left: 1em;*/
            font-weight: 700;
        }
        ul.guide li.series1:before {
            background-color:#F3D328;
        }
        ul.guide li.series2:before {
            background:#FF8F3F;
        }
        ul.guide li.series3:before {
            background-color:#FF6565;
        }
    </style>
@stop

@section('js')
    <script>
        @if ($isAccepted)
            $('#btn-accepted').click();
            $('#btn-accepted').parent().remove();
        @endif
        $(function(){

            @foreach ($ownOsadaConsumables as $ownConsumable)
                // お問い合わせボタン
                $('#message-confirm{{ $ownConsumable->id }}').on('click', function(){
                    if($("#message-text{{ $ownConsumable->id }}").val().trim() == ""){
                        $("#alert-message{{ $ownConsumable->id }}").text('{!! __("clinic-repair-request-modal.js.alert_msg_required_msg") !!}')
                        return false;
                    }
                    $("#message-text-confirm{{ $ownConsumable->id }}").text($("#message-text{{ $ownConsumable->id }}").val())
                    $('#purchaeRequestModal{{ $ownConsumable->id }}').modal('hide');
                    $('#purchaeRequestConfirmModal{{ $ownConsumable->id }}').modal('show');
                });
                $('#message-submit{{ $ownConsumable->id }}').on('click', function(){
                    $("#messageForm{{ $ownConsumable->id }}").submit()
                });
            @endforeach
        });

		$('#status').change(function () {
			console.log('submit');
			$('form#search').submit();
		})
    </script>
@stop