@extends ('layouts.patient')

@section('inner-content')

    <div id="simpleSMSReminderComponent">
        <div class="pt-2 d-flex align-items-start">
            <h6 class="my-0 text-secondary d-flex align-items-center w-100">
                <span class="font-weight-bold text-secondary">SMS Reminders</span>
                <span class="mx-2 text-secondary">|</span>
                <div moe>
                    <a start show class="py-0 mb-3">Add</a>
                    <form url="/api/simpleSmsReminder/create" class="mcp-theme-1">
                        <input type="hidden" name="clientUid" value="{{$patient->uid}}">
                        <div class="row mb-2">
                            <div class="col-5 pr-0">
                                <label class="text-sm text-secondary mb-1">To Number</label>
                                <input type="text" name="smsNumber" class="form-control form-control-sm">
                            </div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-12">
                                <label class="text-sm text-secondary mb-1">Message</label>
                                <textarea name="message" class="form-control form-control-sm"></textarea>
                            </div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-12">
                                <label class="text-sm text-secondary mb-1">Schedule</label>
                                <table class="table table-sm table-bordered mb-0">
                                    <thead>
                                    <tr class="bg-light">
                                        <th class="border-bottom-0 text-center">Sun</th>
                                        <th class="border-bottom-0 text-center">Mon</th>
                                        <th class="border-bottom-0 text-center">Tue</th>
                                        <th class="border-bottom-0 text-center">Wed</th>
                                        <th class="border-bottom-0 text-center">Thu</th>
                                        <th class="border-bottom-0 text-center">Fri</th>
                                        <th class="border-bottom-0 text-center">Sat</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td class="text-center"><input type="checkbox" data-day="sun"></td>
                                        <td class="text-center"><input type="checkbox" data-day="mon"></td>
                                        <td class="text-center"><input type="checkbox" data-day="tue"></td>
                                        <td class="text-center"><input type="checkbox" data-day="wed"></td>
                                        <td class="text-center"><input type="checkbox" data-day="thu"></td>
                                        <td class="text-center"><input type="checkbox" data-day="fri"></td>
                                        <td class="text-center"><input type="checkbox" data-day="sat"></td>
                                    </tr>
                                    <tr>
                                        <td><input type="time" class="form-control form-control-sm" data-day="sun" name="timeOfDaySunday" readonly></td>
                                        <td><input type="time" class="form-control form-control-sm" data-day="mon" name="timeOfDayMonday" readonly></td>
                                        <td><input type="time" class="form-control form-control-sm" data-day="tue" name="timeOfDayTuesday" readonly></td>
                                        <td><input type="time" class="form-control form-control-sm" data-day="wed" name="timeOfDayWednesday" readonly></td>
                                        <td><input type="time" class="form-control form-control-sm" data-day="thu" name="timeOfDayThursday" readonly></td>
                                        <td><input type="time" class="form-control form-control-sm" data-day="fri" name="timeOfDayFriday" readonly></td>
                                        <td><input type="time" class="form-control form-control-sm" data-day="sat" name="timeOfDaySaturday" readonly></td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div>
                            <button submit class="btn btn-sm btn-primary mr-1">Submit</button>
                            <button cancel class="btn btn-sm btn-default border">Cancel</button>
                        </div>
                    </form>
                </div>
            </h6>
        </div>

        <table class="table table-sm table-bordered mb-0 mt-2 notes-list">
            <thead>
            <tr class="bg-light">
                <th class="px-2 text-secondary border-bottom-0">#</th>
                <th class="px-2 text-secondary border-bottom-0">To Number</th>
                <th class="px-2 text-secondary border-bottom-0">Message</th>
                <th class="px-2 text-secondary border-bottom-0">Schedule</th>
                <th class="px-2 text-secondary border-bottom-0">Actions</th>
            </tr>
            </thead>
            <tbody>
            <?php $index = 0; ?>
            @foreach ($patient->smsReminders as $smsReminder)
                <?php $index++; ?>
                <tr class="{{$smsReminder->is_active ? '' : 'bg-light text-secondary'}}">
                    <td class="px-2">{{$index}}</td>
                    <td class="px-2">{{$smsReminder->sms_number}}</td>
                    <td class="px-2">{{$smsReminder->message}}</td>
                    <td class="px-2">
                        @if($smsReminder->time_of_day_sunday)
                            <div>
                                <span class="text-secondary width-40px d-inline-block">Sun:</span>
                                <b>{{friendly_time($smsReminder->time_of_day_sunday)}}</b>
                            </div>
                        @endif
                        @if($smsReminder->time_of_day_monday)
                            <div>
                                <span class="text-secondary width-40px d-inline-block">Mon:</span>
                                <b>{{friendly_time($smsReminder->time_of_day_monday)}}</b>
                            </div>
                        @endif
                        @if($smsReminder->time_of_day_tuesday)
                            <div>
                                <span class="text-secondary width-40px d-inline-block">Tue:</span>
                                <b>{{friendly_time($smsReminder->time_of_day_tuesday)}}</b>
                            </div>
                        @endif
                        @if($smsReminder->time_of_day_wednesday)
                            <div>
                                <span class="text-secondary width-40px d-inline-block">Wed:</span>
                                <b>{{friendly_time($smsReminder->time_of_day_wednesday)}}</b>
                            </div>
                        @endif
                        @if($smsReminder->time_of_day_thursday)
                            <div>
                                <span class="text-secondary width-40px d-inline-block">Thu:</span>
                                <b>{{friendly_time($smsReminder->time_of_day_thursday)}}</b>
                            </div>
                        @endif
                        @if($smsReminder->time_of_day_friday)
                            <div>
                                <span class="text-secondary width-40px d-inline-block">Fri:</span>
                                <b>{{friendly_time($smsReminder->time_of_day_friday)}}</b>
                            </div>
                        @endif
                        @if($smsReminder->time_of_day_saturday)
                            <div>
                                <span class="text-secondary width-40px d-inline-block">Sat:</span>
                                <b>{{friendly_time($smsReminder->time_of_day_saturday)}}</b>
                            </div>
                        @endif
                    </td>
                    <td class="px-2">
                        <div class="d-flex align-items-center">
                            <div moe relative="">
                                <a start show class="py-0 mb-3">Edit</a>
                                <form url="/api/simpleSmsReminder/update" class="mcp-theme-1" right="">
                                    <input type="hidden" name="uid" value="{{$smsReminder->uid}}">
                                    <div class="row mb-2">
                                        <div class="col-5 pr-0">
                                            <label class="text-sm text-secondary mb-1">To Number</label>
                                            <input type="text" name="smsNumber" class="form-control form-control-sm" value="{{$smsReminder->sms_number}}">
                                        </div>
                                    </div>
                                    <div class="row mb-2">
                                        <div class="col-12">
                                            <label class="text-sm text-secondary mb-1">Message</label>
                                            <textarea name="message" class="form-control form-control-sm">{{$smsReminder->message}}</textarea>
                                        </div>
                                    </div>
                                    <div class="row mb-2">
                                        <div class="col-12">
                                            <label class="text-sm text-secondary mb-1">Schedule</label>
                                            <table class="table table-sm table-bordered mb-0">
                                                <thead>
                                                <tr class="bg-light">
                                                    <th class="border-bottom-0 text-center">Sun</th>
                                                    <th class="border-bottom-0 text-center">Mon</th>
                                                    <th class="border-bottom-0 text-center">Tue</th>
                                                    <th class="border-bottom-0 text-center">Wed</th>
                                                    <th class="border-bottom-0 text-center">Thu</th>
                                                    <th class="border-bottom-0 text-center">Fri</th>
                                                    <th class="border-bottom-0 text-center">Sat</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                <tr>
                                                    <td class="text-center"><input type="checkbox" data-day="sun" {{$smsReminder->time_of_day_sunday ? 'checked' : ''}}></td>
                                                    <td class="text-center"><input type="checkbox" data-day="mon" {{$smsReminder->time_of_day_monday ? 'checked' : ''}}></td>
                                                    <td class="text-center"><input type="checkbox" data-day="tue" {{$smsReminder->time_of_day_tuesday ? 'checked' : ''}}></td>
                                                    <td class="text-center"><input type="checkbox" data-day="wed" {{$smsReminder->time_of_day_wednesday ? 'checked' : ''}}></td>
                                                    <td class="text-center"><input type="checkbox" data-day="thu" {{$smsReminder->time_of_day_thursday ? 'checked' : ''}}></td>
                                                    <td class="text-center"><input type="checkbox" data-day="fri" {{$smsReminder->time_of_day_friday ? 'checked' : ''}}></td>
                                                    <td class="text-center"><input type="checkbox" data-day="sat" {{$smsReminder->time_of_day_saturday ? 'checked' : ''}}></td>
                                                </tr>
                                                <tr>
                                                    <td><input type="time" class="form-control form-control-sm" data-day="sun" name="timeOfDaySunday" {{$smsReminder->time_of_day_sunday ? '' : 'readonly'}} value="{{$smsReminder->time_of_day_sunday ? substr($smsReminder->time_of_day_sunday, 0, 5) : ''}}"></td>
                                                    <td><input type="time" class="form-control form-control-sm" data-day="mon" name="timeOfDayMonday" {{$smsReminder->time_of_day_monday ? '' : 'readonly'}} value="{{$smsReminder->time_of_day_monday ? substr($smsReminder->time_of_day_monday, 0, 5) : ''}}"></td>
                                                    <td><input type="time" class="form-control form-control-sm" data-day="tue" name="timeOfDayTuesday" {{$smsReminder->time_of_day_tuesday ? '' : 'readonly'}} value="{{$smsReminder->time_of_day_tuesday ? substr($smsReminder->time_of_day_tuesday, 0, 5) : ''}}"></td>
                                                    <td><input type="time" class="form-control form-control-sm" data-day="wed" name="timeOfDayWednesday" {{$smsReminder->time_of_day_wednesday ? '' : 'readonly'}} value="{{$smsReminder->time_of_day_wednesday ? substr($smsReminder->time_of_day_wednesday, 0, 5) : ''}}"></td>
                                                    <td><input type="time" class="form-control form-control-sm" data-day="thu" name="timeOfDayThursday" {{$smsReminder->time_of_day_thursday ? '' : 'readonly'}} value="{{$smsReminder->time_of_day_thursday ? substr($smsReminder->time_of_day_thursday, 0, 5) : ''}}"></td>
                                                    <td><input type="time" class="form-control form-control-sm" data-day="fri" name="timeOfDayFriday" {{$smsReminder->time_of_day_friday ? '' : 'readonly'}} value="{{$smsReminder->time_of_day_friday ? substr($smsReminder->time_of_day_friday, 0, 5) : ''}}"></td>
                                                    <td><input type="time" class="form-control form-control-sm" data-day="sat" name="timeOfDaySaturday" {{$smsReminder->time_of_day_saturday ? '' : 'readonly'}} value="{{$smsReminder->time_of_day_saturday ? substr($smsReminder->time_of_day_saturday, 0, 5) : ''}}"></td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <div>
                                        <button submit class="btn btn-sm btn-primary mr-1">Submit</button>
                                        <button cancel class="btn btn-sm btn-default border">Cancel</button>
                                    </div>
                                </form>
                            </div>
                            @if($smsReminder->is_active)
                                <div moe relative="" class="ml-2">
                                    <a start show class="py-0 mb-3">Deactivate</a>
                                    <form url="/api/simpleSmsReminder/deactivate" class="mcp-theme-1" right="">
                                        <input type="hidden" name="uid" value="{{$smsReminder->uid}}">
                                        <p>Deactivate this SMS reminder?</p>
                                        <div>
                                            <button submit class="btn btn-sm btn-primary mr-1">Submit</button>
                                            <button cancel class="btn btn-sm btn-default border">Cancel</button>
                                        </div>
                                    </form>
                                </div>
                            @else
                                <div moe relative="" class="ml-2">
                                    <a start show class="py-0 mb-3">Reactivate</a>
                                    <form url="/api/simpleSmsReminder/reactivate" class="mcp-theme-1" right="">
                                        <input type="hidden" name="uid" value="{{$smsReminder->uid}}">
                                        <p>Reactivate this SMS reminder?</p>
                                        <div>
                                            <button submit class="btn btn-sm btn-primary mr-1">Submit</button>
                                            <button cancel class="btn btn-sm btn-default border">Cancel</button>
                                        </div>
                                    </form>
                                </div>
                            @endif
                        </div>
                    </td>
                </tr>
            @endforeach
            </tbody>
        </table>
    </div>

    <script>
        (function () {
            function init() {
                $('input[type="checkbox"][data-day]').change(function() {
                    let input = $(this).closest('form')
                        .find('input[type="time"][data-day="' + $(this).attr('data-day') + '"]');
                    input.prop('readonly', !this.checked);
                    if(this.checked) {
                        input.focus();
                    }
                    else {
                        input.val('');
                    }
                });
            }
            addMCInitializer('simpleSMSReminderComponent', init, '#simpleSMSReminderComponent');
        }).call(window);
    </script>
@endsection
