@extends('adminlte::page')

@section('title', __('clinic-support-schedule.show.title'))

@section('content_header')
    <h5><label class="title-underbar">{{ __('clinic-support-schedule.show.title') }}</label></h5>
@stop

@section('content')
    <x-admin.success-flush-message />
    <x-admin.error-flush-message />
    <x-admin.validation-message />
    <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">
                    <form id="reserve" method="post" action="{{ route('productpromotion.clinic.purchased-equipment.support-schedule.reserve', ['own_osada_equipment_id' => $own_osada_equipment_id, 'support_month_id' => $supportMonth->id]) }}">
                    @csrf
                        <div class="row">
                            <div class="col-md-12">
                                <div class="stepBar" style="justify-content:center;">
                                    <li class="visited"><b style="white-space: nowrap;">{{ __('clinic-support-schedule.show.step1') }}</b><br><span style="font-size: 24px;">1</span></li>
                                    <li {!! $supportMonth->is_reserved ? 'class="visited"' : '' !!}><b style="white-space: nowrap;">{{ __('clinic-support-schedule.show.step2') }}</b><br><span style="font-size: 24px;">2</span></li>
                                    <li {!! $supportMonth->is_date_confirmed ? 'class="visited"' : '' !!}><b style="white-space: nowrap;">{{ __('clinic-support-schedule.show.step3') }}</b><br><span style="font-size: 24px;">3</span></li>
                                    <li {!! $supportMonth->is_completed ? 'class="visited"' : '' !!}><b style="white-space: nowrap;">{{ __('clinic-support-schedule.show.step4') }}</b><br><span style="font-size: 24px;">4</span></li>
                                </div>
                            </div>
                        </div>

                        <div class="row col-md-7" style="margin:auto;margin-bottom:0.2rem;">
                            <div class="col-md-12 medium-heading d-flex align-items-center" style="background-color: #F5F5F5">
                                <b style="margin-left: 20px; padding:1rem 0rem;">{{ __('clinic-support-schedule.show.label_number_of_time') }}</b>
                            </div>
                        </div>
                        <div class="row col-md-7" style="margin:auto;margin-bottom:0.2rem;">
                            <div class="col-md-12 medium-heading align-items-center">
                                <span>{{ $supportMonth->number_of_time }}</span>
                            </div>
                        </div>

                        <div class="row col-md-7" style="margin:auto;margin-bottom:0.2rem;">
                            <div class="col-md-12 medium-heading d-flex align-items-center" style="background-color: #F5F5F5">
                                <b style="margin-left: 20px; padding:1rem 0rem;">{{ __('clinic-support-schedule.show.label_month') }}</b>
                            </div>
                        </div>
                        <div class="row col-md-7" style="margin:auto;margin-bottom:0.2rem;">
                            <div class="col-md-12 medium-heading align-items-center">
                                <span>{{ $supportMonth->month->format('Y.m') }}</span>
                            </div>
                        </div>

                        <div class="row col-md-7" style="margin:auto;margin-bottom:0.2rem;">
                            <div class="col-md-12 medium-heading d-flex align-items-center" style="background-color: #F5F5F5">
                                <b style="margin-left: 20px; padding:1rem 0rem;">{{ __('clinic-support-schedule.show.label_maintenance_survey') }}</b>
                            </div>
                        </div>
                        <div class="row col-md-7" style="margin:auto;margin-bottom:0.2rem;">
                            <div class="col-md-12 medium-heading align-items-center">
                                <span>{{ $supportMonth->sfaSaleRelation->maintenanceSurvey->name }}</span>
                            </div>
                        </div>

                        <div class="row col-md-7" style="margin:auto;margin-bottom:0.2rem;">
                            <div class="col-md-12 medium-heading d-flex align-items-center" style="background-color: #F5F5F5">
                                <b style="margin-left: 20px; padding:1rem 0rem;">{{ __('clinic-support-schedule.show.label_requested_datetime') }}</b>
                            </div>
                        </div>
                        <div class="row col-md-7" style="margin:auto;margin-bottom:0.2rem;">
                            <div class="col-md-12 medium-heading align-items-center">
                                @if(!$supportMonth->is_reserved || ($supportMonth->is_date_confirmed && !$supportMonth->is_completed))
                                <p style="margin-bottom:0rem;"><button type="button" onclick="window.open('{{ route('productpromotion.clinic.purchased-equipment.select-maintenance-schedule.index', ['employee_id' => null, 'support_month_id' => $supportMonth->id]) }}', 'requestDateCallback', 'width=800,height=800')" class="btn btn-sm btn-block button-go rounded-pill">{{ __('clinic-support-schedule.show.button_select_datetime') }}</button></p>
                                @endif
                                @if($supportMonth->is_datetime_requested)
                                <p id="requested_date" style="margin-bottom:0rem;">{{ $supportMonth->requested_start_at->format('Y-m-d H:i') }}～{{ $supportMonth->requested_end_at->format('Y-m-d H:i') }}</p>
                                @else
                                <p id="requested_date" style="margin-bottom:0rem;">{{ __('clinic-support-schedule.show.no_requested_datetime') }}</p>
                                @endif
                                <input type="hidden" id="is_datetime_requested" name="is_datetime_requested" value="{{ $supportMonth->is_datetime_requested }}">
                                <input type="hidden" id="requested_start_at" name="requested_start_at" value="{{ $supportMonth->requested_start_at }}">
                            </div>
                        </div>

                        <div class="row col-md-7" style="margin:auto;margin-bottom:0.2rem;">
                            <div class="col-md-12 medium-heading d-flex align-items-center" style="background-color: #F5F5F5">
                                <b style="margin-left: 20px; padding:1rem 0rem;">{{ __('clinic-support-schedule.show.label_employee') }}</b>
                            </div>
                        </div>
                        <div class="row col-md-7" style="margin:auto;margin-bottom:0.2rem;">
                            <div class="col-md-12 medium-heading align-items-center">
                                @php
                                    $employeeName = '';
                                    if(!empty($supportMonth->employee)){
                                        $employeeName = !$locale || $locale == 'ja' ? $supportMonth->employee->name : $supportMonth->employee->name_en;
                                    }
                                @endphp
                                <p id="employee_name" style="margin-bottom:0rem;">{{ !empty($employeeName) ? $employeeName : __('clinic-support-schedule.show.not_yet_employee_fixed') }}</p>
                                <input type="hidden" id="employee_id" name="employee_id" value="{{ $supportMonth->employee_id }}">
                            </div>
                        </div>

                        <div class="row col-md-7" style="margin:auto;margin-bottom:0.2rem;">
                            <div class="col-md-12 medium-heading d-flex align-items-center" style="background-color: #F5F5F5">
                                <b style="margin-left: 20px; padding:1rem 0rem;">{{ __('clinic-support-schedule.show.label_scheduled_datetime') }}</b>
                            </div>
                        </div>
                        <div class="row col-md-7" style="margin:auto;">
                            <div class="col-md-12 medium-heading align-items-center">
                                @if($supportMonth->is_date_confirmed)
                                <span>{{ $supportMonth->scheduled_start_at->format('Y-m-d H:i') }}～{{ $supportMonth->scheduled_end_at->format('Y-m-d H:i') }}</span>
                                @else
                                <span>{{ __('clinic-support-schedule.show.not_yet_fixed') }}</span>
                                @endif
                            </div>
                        </div>

                        @if($supportMonth->is_completed && !empty($supportMonth->maintenanceResult) && $supportMonth->maintenanceResult->end_at)
                        <div class="row col-md-7" style="margin:auto;margin-bottom:0.2rem;">
                            <div class="col-md-12 medium-heading d-flex align-items-center" style="background-color: #F5F5F5">
                                <b style="margin-left: 20px; padding:1rem 0rem;">{{ __('clinic-support-schedule.show.label_maintenance_result_end_at') }}</b>
                            </div>
                        </div>
                        <div class="row col-md-7" style="margin:auto;margin-bottom:0.2rem;">
                            <div class="col-md-12 medium-heading align-items-center">
                                <span>{{ $supportMonth->maintenanceResult->end_at->format('Y-m-d H:i') }}</span>
                            </div>
                        </div>
                        @endif
                        @if(!$supportMonth->is_completed)
                        <div class="row col-md-8" style="margin:auto;margin-top:2rem;">
                            <div class="col-md-6">
                                <button id="register" type="submit" class="btn btn-sm btn-block button-go rounded-pill" {{ $supportMonth->is_reserved && !$supportMonth->is_date_confirmed ? 'disabled="disabled"' : '' }}>{{ !$supportMonth->is_reserved ? __('clinic-support-schedule.show.button_reserve') : __('clinic-support-schedule.show.button_request_change_datetime') }}</button>
                            </div>
                            <div class="col-md-6">
                                <button type="button" onclick="location.href='{{ route('clinic.chat.index') }}'" class="btn btn-sm btn-block button-go rounded-pill">{{ __('clinic.common.menu.chat.title') }}</button>
                            </div>
                        </div>
                        @endif
                    </form>
                </div>
            </div>
            <div class="row col-md-12 justify-content-center" style="margin:auto;">
                <div class="col-md-4">
                    <button type="button" onclick="location.href='{{ session('previous_url') }}'" class="btn btn-sm btn-block button-back rounded-pill">{{ __('clinic.common.back') }}</button>
                </div>
            </div>
        </div>
    </div>
@stop

@section('css')
    <link rel="stylesheet" href="/css/admin_custom.css">
    <link href="/css/progressbar.css" rel="stylesheet">
@stop

@section('js')
<script>
$(function(){
    $('form#reserve').submit(function(){
        if(!$('form#reserve input#employee_id').val()){
            alert('{{ __('clinic-support-schedule.show.msg_select_employee_and_datetime') }}');
            return false;
        }
        return true;
    });
});

function requestDateCallback(isNotDatetimeRequested, requestedStartDate, requestedStartTime, requestedEndDate, requestedEndTime, employeeId, employeeName){
    $('input#employee_id').val(employeeId);
    $('input#is_datetime_requested').val(isNotDatetimeRequested == 1 ? 0 : 1);
    if(isNotDatetimeRequested == 1){
        $('p#requested_date').text('{{ __('clinic-support-schedule.show.no_requested_datetime') }}');
    }else{
        $('input#requested_start_at').val(requestedStartDate + ' ' + requestedStartTime);
        $('p#requested_date').text(requestedStartDate + ' ' + requestedStartTime + '～' + requestedEndDate + ' ' + requestedEndTime);
    }
    $('p#employee_name').text(employeeName);
}
</script>
@stop