@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">Measurement Confirmation Numbers</span>
                <span class="mx-2 text-secondary">|</span>
                <div moe>
                    <a start show class="py-0 mb-3">Add</a>
                    <form url="/api/measurementConfirmationNumber/create" class="mcp-theme-1">
                        <input type="hidden" name="clientUid" value="{{$patient->uid}}">
                        <div class="mb-3">
                            <label class="text-sm text-secondary mb-1">SMS Number</label>
                            <input type="text" name="smsNumber" class="form-control form-control-sm">
                        </div>
                        <div class="mb-2">
                            <label class="text-sm text-secondary mb-1">
                                <input type="hidden" name="shouldIncludeClientName" value="0">
                                <input type="checkbox" onchange="$(this).prev().val(this.checked ? 1 : 0)">
                                Include Client Name
                            </label>
                        </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">SMS Number</th>
                <th class="px-2 text-secondary border-bottom-0">Include Client Name</th>
                <th class="px-2 text-secondary border-bottom-0">Actions</th>
            </tr>
            </thead>
            <tbody>
            <?php $index = 0; ?>
            @foreach ($patient->measurementConfirmationNumbers as $measurementConfirmationNumber)
                <?php $index++; ?>
                <tr class="{{$measurementConfirmationNumber->is_active ? '' : 'bg-light text-secondary'}}">
                    <td class="px-2">{{$index}}</td>
                    <td class="px-2">{{$measurementConfirmationNumber->sms_number}}</td>
                    <td class="px-2">{{$measurementConfirmationNumber->should_include_client_name ? 'Yes' : 'No'}}</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/measurementConfirmationNumber/update" class="mcp-theme-1" right="">
                                    <input type="hidden" name="uid" value="{{$measurementConfirmationNumber->uid}}">
                                    <div class="mb-3">
                                        <label class="text-sm text-secondary mb-1">SMS Number</label>
                                        <input type="text" name="smsNumber" class="form-control form-control-sm" value="{{$measurementConfirmationNumber->sms_number}}">
                                    </div>
                                    <div class="mb-2">
                                        <label class="text-sm text-secondary mb-1">
                                            <input type="hidden" name="shouldIncludeClientName" value="{{$measurementConfirmationNumber->should_include_client_name ? '1' : '0'}}">
                                            <input type="checkbox" {{$measurementConfirmationNumber->should_include_client_name ? 'checked' : ''}} onchange="$(this).prev().val(this.checked ? 1 : 0)">
                                            Include Client Name
                                        </label>
                                    </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($measurementConfirmationNumber->is_active)
                                <div moe relative="" class="ml-2">
                                    <a start show class="py-0 mb-3">Deactivate</a>
                                    <form url="/api/measurementConfirmationNumber/deactivate" class="mcp-theme-1" right="">
                                        <input type="hidden" name="uid" value="{{$measurementConfirmationNumber->uid}}">
                                        <p>Deactivate this measurement confirmation number?</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/measurementConfirmationNumber/reactivate" class="mcp-theme-1" right="">
                                        <input type="hidden" name="uid" value="{{$measurementConfirmationNumber->uid}}">
                                        <p>Reactivate this measurement confirmation number?</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>
@endsection
