@extends ('layouts.patient')
@section('inner-content')
    <link href="/select2/select2.min.css" rel="stylesheet" />
    <script src="/select2/select2.min.js"></script>
    <div id="patient-devices">
        <div class="d-flex align-items-start pb-2">
            <div class="font-weight-bold m-0">Devices</div>
            @if(count($devices))
            <span class="mx-2 text-secondary">|</span>
            <div moe>
                <a start show>Add</a>
                <form url="/api/clientBdtDevice/create" class="mcp-theme-1">
                    <input type="hidden" name="clientUid" value="{{$patient->uid}}">
                    <div class="mb-2">
                        <label class="text-secondary text-sm">Device</label>
                        <select name="deviceUid" class="form-control form-control-sm">
                            <option value=""> --select-- </option>
                            @foreach($devices as $device)
                                <option value="{{$device->uid}}">
                                {{$device->imei}} ({{$device->category}})
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-2">
                        <label class="text-secondary text-sm">Instructions</label>
                        <input type="text" name="instructions" class="form-control form-control-sm">
                    </div>
                    <div class="mb-2">
                        <label class="text-secondary text-sm">Internal Memo</label>
                        <input type="text" name="internalMemo" class="form-control form-control-sm">
                    </div>
                    <div class="mb-2">
                        <label class="text-secondary text-sm">Status</label>
                        <input type="text" name="status" class="form-control form-control-sm">
                    </div>
                    <div class="mb-2">
                        <label class="text-secondary text-sm">Status Memo</label>
                        <input type="text" name="statusMemo" class="form-control form-control-sm">
                    </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>
            @endif
        </div>
        <table class="table table-striped table-sm table-bordered mb-0">
            @if($patient->devices && count($patient->devices))
                <thead>
                <tr>
                    <th class="px-2 text-secondary">Created</th>
                    <th class="px-2 text-secondary w-25">Category</th>
                    <th class="px-2 text-secondary w-50">IMEI</th>
                </tr>
                </thead>
                <tbody>
                @foreach($patient->devices as $device)
                    <tr>
                        <td class="px-2">{{ friendly_date_time($device->device->created_at) }}</td>
                        <td class="px-2">{{ $device->device->category }}</td>
                        <td class="px-2"><pre class="m-0">{{ $device->device->imei }}</pre></td>
                    </tr>
                @endforeach
                </tbody>
            @else
                <tbody>
                    <tr>
                        <td class="text-secondary p-3">No devices for this patient</td>
                    </tr>
                </tbody>
            @endif
        </table>
    </div>
    <script>
        (function() {
            function init() {
                $('select[name="deviceUid"]').select2({
                    width: '100%'
                });
            }
            addMCInitializer('patient-devices', init, '#patient-devices');
        }).call(window);
    </script>
@endsection
